hi all...
after spending about 4 - 5 days learning CSS and designing a new pretty heavy home page for a big site time came to check it on explorer. the site looks perty decent on ff and safari but the ie ***** on xp is messing it all up... i've done css for a long time but haven't designed a site with ONLY css until now...
first the navigation that is working in ff and safari (mac) AND on ff on xp is not working on the ie *****. here is a url for this navigation:
<!-- m --><a class="postlink" href="http://guey.el.net/k/tests/03.html">http://guey.el.net/k/tests/03.html</a><!-- m -->
all the markup and the css are on the same src file...
i'm on emulation with vpc but that shouldn't be a problem - ff doesn't care...
can somebody please explain why the ***** isn't doing it's job (again).
i'll be grateful. will appreciate any input...<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/newthread.php?do=newthread&f=7#">http://www.webdeveloper.com/forum/newth ... hread&f=7#</a><!-- m -->
thank you...IE only supports the :hover pseudo-class for <a> link elements. The most popular way to get it to work on IE includes adding a bit of JavaScript and for some reason goes by the name "suckerfish":
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/dropdowns/">http://www.alistapart.com/articles/dropdowns/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.htmldog.com/articles/suckerfish/dropdowns/IE">http://www.htmldog.com/articles/suckerfish/dropdowns/IE</a><!-- m --> only supports the :hover pseudo-class for <a> link elements. ohh... so again we have to work around another redmond defect... can't wait for shorthorn...
is there a ie-css only special tutorial somewhere. it's not only this defect that i have to work around. a lot of the positioning looks perfect on safari and ff (mac and xp) but it's all messed up in ie....
thanks nogdog...is the > sign being read only by IE? like in:
add the following CSS to reset the top and left properties on all but IE browsers:
li > ul {
top: auto;
left: auto;
}
otherwise, in normal browsers, does this mean:
li ul {
top: auto;
left: auto;
}
?
thanks....li ul { refers to any ul element that is a "descendant" of a li element. It would apply to the ul elements in each of these examples:
<li>Yadda yadda
<ul>
<li>blah blah</li>
</ul>
</li>
...or...
<li>Yadda yadda
<div>
<p>This is a test.</p>
<ul>
<li>blah blah</li>
</ul>
</div>
</li>
ul > li { refers only to a li element that is a direct child of a ul element. Thus, it would only apply to the ul in the first example above.i see... thanks...
ul > li {
you mean li > ul.. right? because there is a li as a direct chald of ul in the second one too...Things don't get any better with IE7.i see... thanks...
you mean li > ul.. right? because there is a li as a direct chald of ul in the second one too...
Yeah, sorry, got them backwards the 2nd time around, since I normally think of LI as a child of a UL.
Amen to the title of this post!
after spending about 4 - 5 days learning CSS and designing a new pretty heavy home page for a big site time came to check it on explorer. the site looks perty decent on ff and safari but the ie ***** on xp is messing it all up... i've done css for a long time but haven't designed a site with ONLY css until now...
first the navigation that is working in ff and safari (mac) AND on ff on xp is not working on the ie *****. here is a url for this navigation:
<!-- m --><a class="postlink" href="http://guey.el.net/k/tests/03.html">http://guey.el.net/k/tests/03.html</a><!-- m -->
all the markup and the css are on the same src file...
i'm on emulation with vpc but that shouldn't be a problem - ff doesn't care...
can somebody please explain why the ***** isn't doing it's job (again).
i'll be grateful. will appreciate any input...<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/newthread.php?do=newthread&f=7#">http://www.webdeveloper.com/forum/newth ... hread&f=7#</a><!-- m -->
thank you...IE only supports the :hover pseudo-class for <a> link elements. The most popular way to get it to work on IE includes adding a bit of JavaScript and for some reason goes by the name "suckerfish":
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/dropdowns/">http://www.alistapart.com/articles/dropdowns/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.htmldog.com/articles/suckerfish/dropdowns/IE">http://www.htmldog.com/articles/suckerfish/dropdowns/IE</a><!-- m --> only supports the :hover pseudo-class for <a> link elements. ohh... so again we have to work around another redmond defect... can't wait for shorthorn...
is there a ie-css only special tutorial somewhere. it's not only this defect that i have to work around. a lot of the positioning looks perfect on safari and ff (mac and xp) but it's all messed up in ie....
thanks nogdog...is the > sign being read only by IE? like in:
add the following CSS to reset the top and left properties on all but IE browsers:
li > ul {
top: auto;
left: auto;
}
otherwise, in normal browsers, does this mean:
li ul {
top: auto;
left: auto;
}
?
thanks....li ul { refers to any ul element that is a "descendant" of a li element. It would apply to the ul elements in each of these examples:
<li>Yadda yadda
<ul>
<li>blah blah</li>
</ul>
</li>
...or...
<li>Yadda yadda
<div>
<p>This is a test.</p>
<ul>
<li>blah blah</li>
</ul>
</div>
</li>
ul > li { refers only to a li element that is a direct child of a ul element. Thus, it would only apply to the ul in the first example above.i see... thanks...
ul > li {
you mean li > ul.. right? because there is a li as a direct chald of ul in the second one too...Things don't get any better with IE7.i see... thanks...
you mean li > ul.. right? because there is a li as a direct chald of ul in the second one too...
Yeah, sorry, got them backwards the 2nd time around, since I normally think of LI as a child of a UL.
Amen to the title of this post!