 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / November 2003Help taming lists needed
Howdy all, After following a tutorial on ALA (taming lists) I converted my navigation box from a table to a list. Generally very happy with it with the exception of IE6 on the Win platform (haven't tested earlier versions of IE on Win) On IE6 for Win the <li>'s are spaced apart vertically, almost looks as though there is an additional blank line between each one. URL is: http:www.slidenight.com Screenshots (Mac - how it should be): http://www.slidenight.com/temp/iemac.jpg http://www.slidenight.com/temp/moz1.4.jpg http://www.slidenight.com/temp/camino07.jpg http://www.slidenight.com/temp/mozfirebird.jpg http://www.slidenight.com/temp/safari.jpg the navigation box comes from an include: http://www.slidenight.com/includes/navbox.php stylesheet is at: http://www.slidenight.com/styles/layout1.css Any help in getting it right for IE6 win (and lower versions if the same problem exists) would be much appreciated. Cheers Jon > Howdy all, > [quoted text clipped - 25 lines] > > Jon Remove all the spaces between </li> and <li> also line-breaks. You code will look horrible, but it will work. If you don't want this, you will have to use a border-bottom.  SignatureAnne van Kesteren <http://www.annevankesteren.nl/> > Remove all the spaces between </li> and <li> also line-breaks. You code > will look horrible, but it will work. This may also work, but will look less horrible: <ul>< li>item</li>< li>item</li>< li>item</li>< /ul> SignatureKris kristiaan@xs4all.netherlands (nl) >This may also work, but will look less horrible: > [quoted text clipped - 3 lines] >li>item</li>< >/ul> Or use the proper way to get rid of white space: <ul><!-- --><li>item</li><!-- --><li>item</li><!-- --><li>item</li><!-- --></ul> SignatureSpartanicus >>This may also work, but will look less horrible: >> || <ul>< || li>item</li>< That's illegal, and I think even tagsoup manglers will get confused. See also: <http://www.w3.org/MarkUp/SGML/productions.html#prod14> > Or use the proper way to get rid of white space: > | <ul><!-- | --><li>item</li><!-- That's bloated for its own sake, and quite unnecessary. <ul ><li >item</li will do. | ) Eric Bednarz -( | ) http://bednarz.nl/ > After following a tutorial on ALA (taming lists) I converted my > navigation box from a table to a list. Generally very happy with it with [quoted text clipped - 3 lines] > On IE6 for Win the <li>'s are spaced apart vertically, almost looks as > though there is an additional blank line between each one. Sounds like a box model problem. The width of the a element, whose display you've set to "block," is auto by default. But IE/Win screws up width: auto, inserting an extra line. Thus, you need to set the width to 100%. That will cause the a elements to stick out on browsers that get the box model correct. Thus, override it using the child selector, which you already have. html>body #navbox li a { width: auto; } BTW, please get rid of the css instructions that call for micro fonts. I have already chosen a font-size that works for me, thank you. And never use px for font size, as IE/Win does not allow users to resize the text. SignatureBrian follow the directions in my address to email me It seems to me that the CSS and HTML can be simplified and achieve the desired effect by doing away with the list. As is, the CSS turns off the list style and the anchor becomes a block element, so I don't see the purpose served by using "ul" and "li" tags. Instead, put the anchors inside of "divs". Or just use anchors with "br"s between. > It seems to me that the CSS and HTML can be simplified and achieve the > desired effect by doing away with the list. As is, the CSS turns off [quoted text clipped - 3 lines] > Instead, put the anchors inside of "divs". Or just use anchors with > "br"s between. I wonder why no one came up with that before. O wait, he forgot about accessibility (and backwards-compatibility). SignatureAnne van Kesteren <http://www.annevankesteren.nl/> > I don't see > the purpose served by using "ul" and "li" tags. I think the purpose is that those who must use a browser that won't execute our lovely designs ought to see a nicely formatted list instead of a meaningless formatless list of words. By your thinking, h1 thru h6 and p are all the same too. I can format p's to be 24pt and boldface and h1s to be 10pt and justified in a paragraph. To the majority of viewers it wo=ill look ok, To those who require the text to be marked for what it is so their browser can present it in a way it makes sense, it will look stupid. We use h1, p, ul and table for what they are because that's what they are meant to do. Because that blind guy who happens along that site with his speech browser might be the guy to make you rich if the site appeals to him. (I got a server error when I tried to submit this before. Hope it doesn't post twice.) Thanks for the explanation. I certainly agree with supporting accessibility conventions. My wife is blind and works in the field of inclusion. I've seen firsthand the frustration of trying to use poorly designed pages.\ Of course, HTML elements should be used for their intended, fundamental purposes. I just hadn't thought that there are any elements that really are natural fits for a table of contents. It makes sense now that I think of it. |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.