Re: [css-d] sorry - site re-check - haslayout?
MEM wrote: Note the added directory. ../*rebelatehome*/images/hover.png Well Alan, this is really odd, since, even on other computers, I still see the background. However if I change the path to the above (../rebelatehome/images/hover.png), *no background image is showed*. My directory structure is: + rebelatehome + css - home8.css + images - hover.png + js So, if the css is inside css directory, to go to images directory from the css file, we have to, up one level: ../ enter one level /images/ and access the image: hover.png. Hence, the relative path: ../images/hover.png should be correct. If I do: ../rebelate/images/hover.png the path, that will start from the css file location, will point to: + rebelatehome + rebelatehome + images - hover.png However this path, I can guarantee you, doesn't exist, and actually, hopefully for me, I get nothing displayed on this side. Can anyone else confirm if, on this page: http://www.nuvemk.com/rebelate/rebelatehome/home8.html we are able to see the following image: http://www.nuvemk.com/rebelate/rebelatehome/images/hover.png It took lots of looking, but I finally figured out that your hover.png forms the slightly angled drop shadow at the bottom of the nav items when I hover over it. Using FF3.0.x on Linux. -- David gn...@hawaii.rr.com authenticity, honesty, community __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] sorry - site re-check - haslayout?
Mark Henderson wrote: MEM wrote: My directory structure is: + rebelatehome + css - home8.css + images - hover.png + js So, if the css is inside css directory, to go to images directory from the css file, we have to, up one level: ../ enter one level /images/ and access the image: hover.png. Hence, the relative path: ../images/hover.png should be correct. Márcio, Your understanding and explanation above is correct, and hence your paths are also correct. I can see all background images, including the hover, although it is very faint and hardly distinguishable from the red background you also have in place. Checked in IE8 and FF3. HTH Mark Hello Mark and Márcio, You are both correct. While editing CSS with the FF Web Developers Toolbar hundreds of times, I have observed where background images disappeared (which I could not understand) and have overcome it by inserting the full URL for testing purposes. It seems that FF Web Developers Toolbar (WDT) make the CSS parallel to the location of where the HTML page is, thus altering the path to the correct directory. Something like this. rebelate/rebelatehome/css/home8.css rebelate/rebelatehome/home8.html home8.css -- moved lower by WDT. ../ images/hover.png -- path in WDT. And by me changing the path to this in the WDT. ../rebelatehome/images/hover.png rebelate/rebelatehome/images/hover.png Shows the image in FF. I have now demonstrated my ignorances with certain things. :-) Now one thing is still unclear to me. Has the issue with the page been resolved? -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] sorry - site re-check - haslayout?
MEM wrote: Note the added directory. ../*rebelatehome*/images/hover.png Well Alan, this is really odd, since, even on other computers, I still see the background. However if I change the path to the above (../rebelatehome/images/hover.png), *no background image is showed*. My directory structure is: + rebelatehome + css - home8.css + images - hover.png + js So, if the css is inside css directory, to go to images directory from the css file, we have to, up one level: ../ enter one level /images/ and access the image: hover.png. Hence, the relative path: ../images/hover.png should be correct. If I do: ../rebelate/images/hover.png the path, that will start from the css file location, will point to: + rebelatehome + rebelatehome + images - hover.png However this path, I can guarantee you, doesn't exist, and actually, hopefully for me, I get nothing displayed on this side. Can anyone else confirm if, on this page: http://www.nuvemk.com/rebelate/rebelatehome/home8.html we are able to see the following image: http://www.nuvemk.com/rebelate/rebelatehome/images/hover.png It took lots of looking, but I finally figured out that your hover.png forms the slightly angled drop shadow at the bottom of the nav items when I hover over it. Using FF3.0.x on Linux. -- David Thank you Mark, David, Alan It's a tiny little thing, I do agree. So little actually, that I will tell the designer to give me a no transparent one, for ie6 proposes because I don't see a big deal not having that little tiny shadow there. Alan, well, at least now we know that Web Developer treats the path differently, and that will save others some hours when trying to debug using Web Developer Toolbar and realize that the path isn't the appropriate. Thanks a lot again, Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help on understanding navigation issues
1)
The point is to have 1px between the vertical items.
On any IE, when we click on any item on the horizontal menu, we get
extra padding (I suppose). Why?
Solved.
I was getting, on my vertical menu, padding and margin values that come from
the #mainMenu.
Why? Because of my #mainMenu styles incorrect definition:
#mainMenu li a:link, li a:visited {
We are not targeting *only* the li a:link and a:visited elements inside
#mainMenu, the second part, after the comma,
tell us (I believe) that we are targeting li a:visited all over the
document, hence troubling with the display of the vertical menu as well.
I've solve this by specifying, the parent element again:
#mainMenu li a:link, #mainMenu li a:visited {
Márcio
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] floats and clears
hey everyone,
i have recently started working on debugging a site that has a lot of messy
styling. i keep running into the following declarations on many different
elements.
.example {
float:left;
clear:both;
}
i was always under the impression that if you floated your elements that
essentially would clear them also. is that not the case? any help in
understanding this would be great.
thanks,
jeff
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help on understanding navigation issues
2) On IE6 I'm unable to get the .current class to work on hover. I have tried to change to: From: #menuVertical li a.current:hover To: #menuVertical li a:link.current:hover, li a:visited.current:hover This seems to work, however, I get unexpected visualization issues after this change, so, maybe this is not the proper solution? The reason for the unexpected visualization issues was the same as in point 1). Solved the same way. Only the flickering question stands up. Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Gap below footer
Brian M. Curran wrote:
Marc or anyone else,
However, I can't get the text for class .columnTitle to center align. If
I set padding and margin for h3 to zero and then text-align: center; it
works. However when I add the class it doesn't work. I added the class
because I want three of the four columns to have a center aligned h3.
Sincerely,
Brian Curran
The headings h1 through h6 are used to create an outline (like the kind
we all made in school) of a documents content. Consequently, h2 follows
h1, h3 follows h2, and so on. Most Web documents have only one h1 (as it
is usually the title of the document). You may have as many h2 through
h6 as you need. CSS is used to set their look and feel. A class is only
needed to distinguish a specific difference -- for example, you have 47
h2 headings, only 3 of which should be red ( those 3 get: h2.c1 {color:
red}).
David Laakso wrote:
re: http://www.locallaw11news.com/
Good! Its better as of this writing. Want to push it?
This:
h1Local Law 11 News span class=header and all things related to
Local Law 11 /span/h1
Becomes:
h1Local Law 11 News band all things related to Local Law 11/b/h1
h1 b {font-size: your-call; font-weight: normal;}
This:
h3What is Local Law 11?/h3
Becomes:
h2What is Local Law 11?/h2
This:
p
span class=creditsby: Brian M. Curran/spanbr /
span class=creditsPosted: September 17, 2009/spanbr /
Becomes:
div id=credit
pby: Brian M. Curran/p
pPosted: September 17, 2009/p
div
CSS
#credit p {your call}
These (and the ones at the very bottom of that column):
br /
Local Law 11, in a nutshell, is a New York City Department of Buildings
law that ...br /
br /
This article has been written to serve as a brief primer on Local Law 11.
For more .br /
br /
Become:
pLocal Law 11, in a nutshell, is a New York City Department of Buildings
law that .../p
pThis article has been written to serve as a brief primer on Local Law
11. For more ./p
These:
span class=subTitleWhat's the history of Local Law 11?/spanbr /
Local Law 11 is referred to in many differentbr /
Become:
h4What's the history of Local Law 11?/h4
pLocal Law 11 is referred to in many different/p
CSS
h4 {your call}
These:
h5Articles/h5
h5Topics/h5
h5Advertisers/h5
And:
Everyone screen does not default to a white screen (my default is fuchsia
to keep myself from making this mistake).
add:
html, body {background: #fff; color: #000; }
This will keep the NYC Web Accessibility Police from shutting you down:
body { /*font-size: small; font-family: Arial, sans-serif;*/
font: 100%/1.4 'Helvetica Neue', Arial, sans-serif;
}
Let the p inherit 100%(default) and set h1-h5 using percent.
You may want to make the narrow columns a little wider and adjust the nav
(
Good luck.
~d
David,
Thank you for all the great feedback. I made all the suggested changes, and
learned in the process. Thanks again. One question though. In regards to:
This will keep the NYC Web Accessibility Police from shutting you down:
body { /*font-size: small; font-family: Arial, sans-serif;*/
font: 100%/1.4 'Helvetica Neue', Arial, sans-serif;
}
I made the changes, but don't understand the need for them. My font size is
now larger than I'd like it. I'm not familiar with accessibility issues. Any
comments?
Sincerely,
Brian
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] floats and clears
i was always under the impression that if you floated your elements that essentially would clear them also. is that not the case? any help in understanding this would be great. I believe not. I've use something like that, for example, when I have a float inside a float for example. I.e.: We have a child element inside a parent element and this parent element is floated to the left, but we want to float the child element to the right. If I don't clear the float on the child element, he will float to the left as well, so, to make the child element on the right side, of our parent left floated element we have to, on the child: 1st)clear the float, 2nd)float the element to the right. I could be wrong however, since this is just my experience talking, not knowledge so, to knowledge source: http://css.maxdesign.com.au/floatutorial/index.htm Regards, Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help on understanding navigation issues
For those that could help me on the flickering issue, here are the updated links: http://www.nuvemk.com/rebelate/rebelateinside/inside2.html http://www.nuvemk.com/rebelate/rebelateinside/css/inside2.css Regards, Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] floats and clears
i was always under the impression that if you floated your elements that
essentially would clear them also. is that not the case? any help in
understanding this would be great.
That is not the case. Floating an element means that it will shrink to fit its
contents (or shrink to the width you gave it) and let other stuff come up next
to it. So, let's say I have 3 divs.
div id=div1 class=col
/div
div id=div2 class=col
/div
div id=div3 class=col
And I style them like this:
div.col {
float: left;
width: 33%;
}
Then I end up with a three column layout. The first div takes up a third of
the page. Then, since there's enough room for the second div up next to the
first one, it floats up to take up some space. And then, since there's still
room next to the second one, the third div also floats up.
But let's say I wanted div 3 not to float up, but to stay below div 1.
Then if I add
div#div3 {
clear: left;
}
Then it won't float up next to the left floated divs.
I could also do this instead (same html):
Div#div1 {float: right}
Div#div2 {float: right}
Div#div3 {float: right; clear: left}
I this case, div1 one will be on the far right side, div 2 will be floated up
next to div1 in the middle, and div three will be floated up next to div 2 on
the left side.
But we told it to clear!
But we told it to clear LEFT. It's below all the things there are floated left
(because there aren't any. Everything is floated right). If we clear: right,
then it'll drop below divs 1 and 2 again.
Now, let's do clear: both.
Same HTML.
div#div1 {float: left}
div#div2 {float: right}
now div1 is on the left side, and div2 is on the right side, and div three
(since it's not floated) comes up between those two divs, and then continues
wrapping below them, like this:
content of div content of div3 div 2 content
1. content of content of div3
Div 1. Content of div 3 content of div3
Content of dive content of div 3
Content of div 3. Content of dive 3 content of d
If you set div3 to clear right, then it'll start below div 2, like this:
content of divdiv 2 content
1. content of
Div 1. Content of div 3 content of div3
Content of dive content of div 3
Content of div 3. Content of dive 3 content of d
If you set div3 to clear both, it'll start below both divs, like this:
content of divdiv 2 content
1. content of
Div 1.
Content of div 3. Content of dive 3 content of d
This is the same as clear: left in this case. But if div2 had more content,
then clear left would start below div1, and bump up against div2.
That was really long, but I think it's about as clear as I could make it.
---Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Gap below footer
Brian M. Curran wrote:
Brian M. Curran wrote:
re: http://www.locallaw11news.com/
David,
Thank you for all the great feedback. I made all the suggested
changes, and learned in the process.
You're welcome-- its looking much better now and makes much more sense...
Thanks again. One question though. In regards to:
This will keep the NYC Web Accessibility Police from shutting you
down:
body { /*font-size: small; font-family: Arial, sans-serif;*/
font: 100%/1.4 'Helvetica Neue', Arial, sans-serif;
}
My font size is now larger than I'd like it. I'm not familiar with
accessibility issues. Any comments?
Then add one of these to your style sheet. Use whatever one does for
your personal need or aesthetic pleasure...
p { font-size: 95%; }
p { font-size: 90%; }
p { font-size: 85%; }
p { font-size: 80%; }
p { font-size: 75%; }
p { font-size: 70%; }
p { font-size: 65%; }
p { font-size: 60%; }
p { font-size: 55%; }
The rule of thumb, among those of us who have been around for awhile,
is to declare user default on the body and let the content p inherit
default. In other words, the decision regarding whether the font-size
is too big, too small, or just -right is left to the user to decide. She
can then adjust it to her need (rather than your taste and whim ), in
/her/ browser.
The roughly equivalent font-size default is :
pixel default=16px
keyword=medium (you had small)
em=1em
percent=!00% (I used percent as it seems more consistent to me
cross-os/browser)
Sincerely,
Brian
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] floats and clears
On Fri, Sep 18, 2009 at 10:48 AM, Climis, Tim tcli...@indiana.edu wrote:
i was always under the impression that if you floated your elements that
essentially would clear them also. is that not the case? any help in
understanding this would be great.
That is not the case. Floating an element means that it will shrink to fit
its contents (or shrink to the width you gave it) and let other stuff come
up next to it. So, let's say I have 3 divs.
div id=div1 class=col
/div
div id=div2 class=col
/div
div id=div3 class=col
And I style them like this:
div.col {
float: left;
width: 33%;
}
Then I end up with a three column layout. The first div takes up a third
of the page. Then, since there's enough room for the second div up next to
the first one, it floats up to take up some space. And then, since there's
still room next to the second one, the third div also floats up.
But let's say I wanted div 3 not to float up, but to stay below div 1.
Then if I add
div#div3 {
clear: left;
}
Then it won't float up next to the left floated divs.
I could also do this instead (same html):
Div#div1 {float: right}
Div#div2 {float: right}
Div#div3 {float: right; clear: left}
I this case, div1 one will be on the far right side, div 2 will be floated
up next to div1 in the middle, and div three will be floated up next to div
2 on the left side.
But we told it to clear!
But we told it to clear LEFT. It's below all the things there are floated
left (because there aren't any. Everything is floated right). If we clear:
right, then it'll drop below divs 1 and 2 again.
Now, let's do clear: both.
Same HTML.
div#div1 {float: left}
div#div2 {float: right}
now div1 is on the left side, and div2 is on the right side, and div three
(since it's not floated) comes up between those two divs, and then continues
wrapping below them, like this:
content of div content of div3 div 2 content
1. content of content of div3
Div 1. Content of div 3 content of div3
Content of dive content of div 3
Content of div 3. Content of dive 3 content of d
If you set div3 to clear right, then it'll start below div 2, like this:
content of divdiv 2 content
1. content of
Div 1. Content of div 3 content of div3
Content of dive content of div 3
Content of div 3. Content of dive 3 content of d
If you set div3 to clear both, it'll start below both divs, like this:
content of divdiv 2 content
1. content of
Div 1.
Content of div 3. Content of dive 3 content of d
This is the same as clear: left in this case. But if div2 had more
content, then clear left would start below div1, and bump up against div2.
That was really long, but I think it's about as clear as I could make it.
---Tim
Tim,
thanks for the detailed explanation. this helps a lot and i can definitely
move forward with the debugging with a better grasp on how i'll need to use
my floats and clears.
Cheers,
Jeff
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Gap below footer
I personally go by the default 62.5% that is inherited throughout the
document by declaring it in the body {} and then declare my font size by em.
This makes it easy to calculate the em size compared to relative px size. ie
12px is 1.2em. See? divide the px size by 10 to set your em size. This kind
of solution also helps make sure that your fonts will look the same size
across the major browsers. This also allows user zoom.
Thank you,
Marc Hall
HallMarc Websites
610.446.3346
__ Information from ESET Smart Security, version of virus signature
database 4437 (20090918) __
The message was checked by ESET Smart Security.
http://www.eset.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Gap below footer
HallMarc Websites wrote:
I personally go by the default 62.5% that is inherited throughout the
document by declaring it in the body {} and then declare my font size by em.
This makes it easy to calculate the em size compared to relative px size. ie
12px is 1.2em. See? divide the px size by 10 to set your em size. This kind
of solution also helps make sure that your fonts will look the same size
across the major browsers. This also allows user zoom.
Thank you,
Marc Hall
HallMarc Websites
610.446.3346
No offense intended, but neither you, nor the author of the 62.5%
percent method, checked their page at twice user default (minimum
font-size: 32px) in Opera.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Gap below footer
Brian M. Curran wrote:
Thanks again. One question though. In regards to:
This will keep the NYC Web Accessibility Police from shutting you
down:
body { /*font-size: small; font-family: Arial, sans-serif;*/
font: 100%/1.4 'Helvetica Neue', Arial, sans-serif;
}
My font size is now larger than I'd like it. I'm not familiar with
accessibility issues. Any comments?
David Laakso wrote:
Then add one of these to your style sheet. Use whatever one does for
your personal need or aesthetic pleasure...
p { font-size: 95%; }
p { font-size: 90%; }
p { font-size: 85%; }
p { font-size: 80%; }
p { font-size: 75%; }
p { font-size: 70%; }
p { font-size: 65%; }
p { font-size: 60%; }
p { font-size: 55%; }
The rule of thumb, among those of us who have been around for awhile,
is to declare user default on the body and let the content p inherit
default. In other words, the decision regarding whether the font-size
is too big, too small, or just -right is left to the user to decide. She
can then adjust it to her need (rather than your taste and whim ), in
/her/ browser.
The roughly equivalent font-size default is :
pixel default=16px
keyword=medium (you had small)
em=1em
percent=!00% (I used percent as it seems more consistent to me
cross-os/browser)
This is interesting. Originally I thought that when I was sizing my header
tags, using percentages, that the base size was that of the p tag. However,
when I do the following in my stlyle sheet, the p text size changes, but the
header text size doesn't. The nav bar text size also doesn't change. Like I
said, I thought the working point for all text was the p tag.
body {
margin: 0;
padding: 0;
/* = font-size: small; font-family: Arial, sans-serif; = */
font: 100%/1.4 'Helvetica Neue', Arial, sans-serif;
background: #fff;
color: #000;
}
p { font-size: 75%; }
I also don't understand the font family change and the 100%/1.4. By increasing
or decreasing 1.4 I can see the effect that it has, but why you recommended it
I don't know.
Thoughts anyone?
Sincerely,
Brian
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] sorry - site re-check - haslayout?
MEM wrote: Thank you Mark, David, Alan It's a tiny little thing, I do agree. So little actually, that I will tell the designer to give me a no transparent one, for ie6 proposes because I don't see a big deal not having that little tiny shadow there. Alan, well, at least now we know that Web Developer treats the path differently, and that will save others some hours when trying to debug using Web Developer Toolbar and realize that the path isn't the appropriate. I'd like to add my thanks as well. This will save me some headaches when using the Web Developer Toolbar, I am sure. MEM, you may like to tell your designer about PNG-8 files - http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/ Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Gap below footer
David Laakso wrote:
HallMarc Websites wrote:
I personally go by the default 62.5% that is inherited throughout the
document by declaring it in the body {} and then declare my font size by em.
This makes it easy to calculate the em size compared to relative px size. ie
12px is 1.2em. See? divide the px size by 10 to set your em size. This kind
of solution also helps make sure that your fonts will look the same size
across the major browsers. This also allows user zoom.
No offense intended, but neither you, nor the author of the 62.5%
percent method, checked their page at twice user default (minimum
font-size: 32px) in Opera.
Not to be a curmudgeon about it, but how many users actually set font
to 2x user default in Opera? Or, to 32px by whichever means available
to them?
I know of one person, he says 72px is still fuzzy. He needs a screen
reader, his eyesight is getting so bad.
My point being, where is the point of diminishing returns and how do
we know when we've gone too far?
Reese
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Gap below footer
Brian M. Curran wrote:
This is interesting. Originally I thought that when I was sizing my header
tags, using percentages, that the base size was that of the p tag. However,
when I do the following in my stlyle sheet, the p text size changes, but
the header text size doesn't. The nav bar text size also doesn't change. Like
I said, I thought the working point for all text was the p tag
body {
margin: 0;
padding: 0;
/* = font-size: small; font-family: Arial, sans-serif; = */
font: 100%/1.4 'Helvetica Neue', Arial, sans-serif;
background: #fff;
color: #000;
}
p { font-size: 75%; }
I also don't understand the font family change and the 100%/1.4. By
increasing or decreasing 1.4 I can see the effect that it has, but why you
recommended it I don't know.
Thoughts anyone?
Sincerely,
Brian
The base is default (100%)
p { font-size: 75%; }/*makes the paragraphs 25% less than default*/
1.4 is line-height. For example, within paragraphs p.../p its the leading
or space between the rows of text in a paragraph. Default line-height is:
normal (1.2 or 1.3) depending on the browser. Since your measure
(line-length) is narrow (the columns are narrow) 100%/normal would be more
appropriate than 1.4.
Re-set the headings to the percent value you desire. Same for the nav.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Gap below footer
Originally I thought that when I was sizing my header tags, using percentages, that the base size was that of the p tag. Umm, no. The percent is the size based off the parent element. Which means that if you want to set a basic font size for a whole page, you do it from the body tag. The p style has no effect for text outside of p tags whatsoever. /* = font-size: small; font-family: Arial, sans-serif; = */ font: 100%/1.4 'Helvetica Neue', Arial, sans-serif; I also don't understand the font family change and the 100%/1.4. By increasing or decreasing 1.4 I can see the effect that it has, but why you recommended it I don't know. Arial is a Windows font. It's ugly on other OSes. By putting in Helvetica Neue, you're making it Mac friendly. By putting it first, you're using a prettier font than Arial if it's available. By putting the font size to 100%, instead of small, you're using the user's default font-size, so they can still read your content, which is what the web is all about anyway. The 1.4 is the line-height. It defaults to 1.2 in most browsers, but bigger line-heights make things easier to read, especially at smaller font sizes / long line lengths. Putting in as just a number (instead of a % or px) makes it work off of the default page font-size, so you don't have varying line-heights around the page. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Persistent CSS Only Menus in IE
Hello all, I'm working on a new website and wanted to create a CSS only menu for its navigation. I have been able to get something working fairly well on Firefox but when running it in IE my persistent menus are too persistent. :) If someone could take a look at the link below and offer some advice on what might be happening here, I'd appreciate it since I'm relatively new to CSS and probably overlooking something simple. http://um3d.dc.umich.edu/Temp/newsite CSS File: http://um3d.dc.umich.edu/Temp/newsite/shared/main.css You can reproduce the error in IE by going to the services menu and navigating up to advanced visualization to see the sub-menu pop out. Now, if you rollover another section such as projects and then back to services the submenu for Advanced Viz is visible but it's text is hidden. On Firefox everything runs as expected. Any thoughts? Thanks! E. --- Eric Maslowski Technical Creative Consultant University of Michigan 3D Lab Digital Media Commons University of Michigan e: emasl...@umich.edumailto:emasl...@umich.edu p: 734-615-9699 m: 734-730-9904 __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] web 2.0 style, 100% browser width backgrounds for header and footer
Hi, http://www.redrunner.co.uk/rr/?q=content/home-page# The design I am trying to recreate can be seen here: http://www.redrunner.co.uk/rr/themes/framework/img/RedRunner.jpg I would like to know how I can have two background images that repeat across the browser and still keep all my content in the 980px wide container. I have set a b.g. for the body, this is for the header section. I want to do the same for the footer, but the footer lives inside the container which isn't 100% width. The pages are also going to vary in size so having the header and footer background in 1 image won't work. Ideas that I have had are: 1. place the footer outside of the container and then make an inner div for the content of the footer with the same margin and width as the container (container 2). (I found a link demonstrating this http://cssgirl.com/examples/full-width.html ) 2. place a 'footer background image' div outside of the container, give it absolute positioning and a lower z-index. Problem was that it stuck to the bottom of the browser even if there was scroll. 3. Give #html a background image too. 4. ? I see this style being used all over the place (web 2.0) but I can't figure out how. Please help. Here's the bare-bones of a web page, feel free to insert any divs and css that may get this working. body style=background: url(images/bg.jpg) repeat-x top centre; container style=width: 950px margin: 0px auto headerblurb/header contentBLURB/content footercopyright 2009/footer /container /body Thanks, CB P.S. If anyone knows where the padding at the top of my #navcontainer is coming from then that would be a great help. I am using firebug now but when I make changes to likely culprits the problem still remains. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
