Hello all. I was just testing out a elastic style, and after styling up the page all nice like for FireFox I found it did the strangest thing in IE... the nested lists with links in them (the #nav) change their padding (or margins, I don't know) :hover. Note this is the same XHTML as for the rest of my site, only a different style sheet.
Here's an example of the page <!-- m --><a class="postlink" href="http://projep.t35.com/index.php?2=&dust">http://projep.t35.com/index.php?2=&dust</a><!-- m --> , and here's the CSS: <!-- m --><a class="postlink" href="http://projep.t35.com/bg/css/dust.css">http://projep.t35.com/bg/css/dust.css</a><!-- m --> . You can view the style on any page on my site by adding the query dust= to the url if you want to see it on multiple pages, but you can't see it on the homepage; that relies on there being no queries. If you want to know, the homepage is displayed if (count($_GET) == 0).
Can anyone tell why this is happening? I'm totally lost myself. Thanks in advance.The problem is in #nav ul, change to:
#nav ul {list-style: none;
float:none !important; float: left;
margin: 0;
padding: 0;
margin-right: .2em;
margin-bottom: .5em; }
IE needs a float here, Moz. doesn't.
Also the
margin causes a slight jitter when the units are "%". Use "em" or preferably absolute units.
Another problem:
a:link {color: #FF8000;
text-decoration: none;
border-bottom: thin dashed; }
use text-decoration and not border-bottom to apply style here. IE applies the style to the full width(12em), where as Moz. only applies it to the text.
Also thin is thicker in IE, another case for using absolute units (1px?). The "belt" properties (margin, border and padding are usually very small. Use absolute units to avoid rounding errors and "jittering" of the layout.I hate IE's quirks... but it's good to know that it required only 1 or two rules to fix (as opposed to 20 lines of hacks), even though I still don't fully understand why IE did THAT.
As for using border in favor of text-decoration? Well, there is no text-decoration: dashed, so I have to use border. Also, text-decoration: underline and border-bottom: solid appear in 2 different places, border slightly under underline. This means that if I went from a dashed border to a text-decoration, the line would "jump", not come together. (Just explaining myself) Finally, about the margins? I was trying to make a fulyl elastic layout, so I used EMs.
Alright... well, thanks, Fang. That text jumping is still weird to me, but at least now I know how to fix it.Yes, I found it a little odd too; IE possibly not calculating the nested lists until the hover event occurred.
Just one more addition; you may require clear:both; in #footer after all that "floating".I've already done that (offline), but thanks for the heads up.
Here's an example of the page <!-- m --><a class="postlink" href="http://projep.t35.com/index.php?2=&dust">http://projep.t35.com/index.php?2=&dust</a><!-- m --> , and here's the CSS: <!-- m --><a class="postlink" href="http://projep.t35.com/bg/css/dust.css">http://projep.t35.com/bg/css/dust.css</a><!-- m --> . You can view the style on any page on my site by adding the query dust= to the url if you want to see it on multiple pages, but you can't see it on the homepage; that relies on there being no queries. If you want to know, the homepage is displayed if (count($_GET) == 0).
Can anyone tell why this is happening? I'm totally lost myself. Thanks in advance.The problem is in #nav ul, change to:
#nav ul {list-style: none;
float:none !important; float: left;
margin: 0;
padding: 0;
margin-right: .2em;
margin-bottom: .5em; }
IE needs a float here, Moz. doesn't.
Also the
margin causes a slight jitter when the units are "%". Use "em" or preferably absolute units.
Another problem:
a:link {color: #FF8000;
text-decoration: none;
border-bottom: thin dashed; }
use text-decoration and not border-bottom to apply style here. IE applies the style to the full width(12em), where as Moz. only applies it to the text.Also thin is thicker in IE, another case for using absolute units (1px?). The "belt" properties (margin, border and padding are usually very small. Use absolute units to avoid rounding errors and "jittering" of the layout.I hate IE's quirks... but it's good to know that it required only 1 or two rules to fix (as opposed to 20 lines of hacks), even though I still don't fully understand why IE did THAT.
As for using border in favor of text-decoration? Well, there is no text-decoration: dashed, so I have to use border. Also, text-decoration: underline and border-bottom: solid appear in 2 different places, border slightly under underline. This means that if I went from a dashed border to a text-decoration, the line would "jump", not come together. (Just explaining myself) Finally, about the margins? I was trying to make a fulyl elastic layout, so I used EMs.
Alright... well, thanks, Fang. That text jumping is still weird to me, but at least now I know how to fix it.Yes, I found it a little odd too; IE possibly not calculating the nested lists until the hover event occurred.
Just one more addition; you may require clear:both; in #footer after all that "floating".I've already done that (offline), but thanks for the heads up.