 |
 | 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 / March 2006Problem aligning list items in IE
Hello, I have an unordered list with 3 levels, like this: <ul class="normalList"> <li>blabla</li> <ul> <li>blabla</li> </ul> <li>blabla</li> <ul> <li>blabla</li> <ul> <li>blabla (shifted to the right)</li> <li>blabla</li> <li>blabla</li> <li>blabla</li> <li>blabla</li> </ul> </ul> </ul> The problem I have in IE 6 and 5 is that the list items of the third level do not horizontally align with each other (the first item is shifted to the right). It works fine in Firefox. My CSS is this: ul.normalList li { margin: 1em; padding: 0; } Can you help me? Thank you Chris > Hello, G'morning. > I have an unordered list with 3 levels, like this: > <ul class="normalList"> > <li>blabla</li> > <ul> > <li>blabla</li> > </ul> Whoa. The only thing allowed as a direct child of a <ul> is one or more <li>. Your inner <ul>'s need to be *within* an <li>. <li>blabla</li> <li> <ul> <li>blabla</li> </ul> </li> ...  Signature-bts -This space intentionally left blank. >> Hello, > [quoted text clipped - 16 lines] > </ul> > </li> ... Sorry to contradict you but no. Your syntax would create additional bullets. You could write this: <ul class="normalList"> <li>blabla <ul> <li>blabla</li> </ul> </li> But this would not solve my problem: there is still a shift to the right of the first list item. >> Whoa. The only thing allowed as a direct child of a <ul> is one or >> more <li>. Your inner <ul>'s need to be *within* an <li>. [quoted text clipped - 5 lines] >> </ul> >> </li> ... > Sorry to contradict you but no. Your syntax would create additional > bullets. But no? Stuff can be outside of a <li></li>? 'Fraid not. > You could write this: > [quoted text clipped - 4 lines] > </ul> > </li> Yes, you could do that and not have an extra bullet. But, you have now enclosed the child <ul> within the outer <li> which is what I was commenting on that you were doing wrong. > But this would not solve my problem: there is still a shift to the > right of the first list item. Provide a sample URL. Signature-bts -This space intentionally left blank. > Provide a sample URL. Here it is: http://ivredimages.free.fr/produits.php See the page with IE6 or IE5.x Thank you > Here it is: http://ivredimages.free.fr/produits.php > > See the page with IE6 or IE5.x Win2K, IE6 and Firefox 1.0.3 look pretty much the same to me. Did your original effort have the nested <ul> outside of an <li>? Asides: 1. <title>Untitled Document</title> 2. It won't fit in my 800px wide browser window without horizontal scrollbar. Otherwise, looks good. Signature-bts -This space intentionally left blank. >> Here it is: http://ivredimages.free.fr/produits.php >> >> See the page with IE6 or IE5.x > > Win2K, IE6 and Firefox 1.0.3 look pretty much the same to me. Did your > original effort have the nested <ul> outside of an <li>? For me, it is okay under Firefox. But under IE, the first line item is shifted to the right a few pixels. The <ul> are nested inside <li> in this page. > Asides: > 1. <title>Untitled Document</title> Yes I know but this page is just an attempt to find the right design. There are still a few things I do not quite like. > 2. It won't fit in my 800px wide browser window without horizontal > scrollbar. The width of this design is 800px. I should make it a bit smaller then. Thank you for your remarks. > The width of this design is 800px. On a speaking browser? On a text-mode browser? > I should make it a bit smaller then. No, you should make it more flexible. >>> Here it is: http://ivredimages.free.fr/produits.php >>> [quoted text clipped - 6 lines] > item is shifted to the right a few pixels. The <ul> are nested > inside <li> in this page. The "Semi-remorque" line. Very minor - I wouldn't get upset by it. <g> However, what happens if you shorten the text "Effectuée par des professionnels du transport :" so it is not near the image? >> 2. It won't fit in my 800px wide browser window without >> horizontal scrollbar. > > The width of this design is 800px. I should make it a bit smaller > then. Actually, why not make it fluid, so it doesn't matter *what* the size of the visitor's browser is? http://www.benmeadowcroft.com/webdev/csstemplates/left-column.html > Thank you for your remarks. My pleasure. You should also look into setting your main font in percentage ( 100% ), and dropping Verdana from the font list. Google for why - discussed in these groups almost daily. Signature-bts -This space intentionally left blank. > The "Semi-remorque" line. Very minor - I wouldn't get upset by it. <g> > However, what happens if you shorten the text "Effectuée par des > professionnels du transport :" so it is not near the image? I have just done that but the result is the same. >>> 2. It won't fit in my 800px wide browser window without >>> horizontal scrollbar. [quoted text clipped - 5 lines] > the visitor's browser is? > http://www.benmeadowcroft.com/webdev/csstemplates/left-column.html Fluid would mean that the width would adapt to the browser window, which could lead to something disproportionate with widths 1024 or 1280. I wonder if this would be a good idea for this type of design... > percentage ( 100% ), and dropping Verdana from the font list. Google for > why - discussed in these groups almost daily. I am not sure I understand your remark for Verdana. What is wrong with it? Cheers >> The "Semi-remorque" line. Very minor - I wouldn't get upset by >> it. <g> However, what happens if you shorten the text "Effectuée >> par des professionnels du transport :" so it is not near the >> image? > > I have just done that but the result is the same. Ok, then what happens if you remove the image next to it, for a test? >> Actually, why not make it fluid, so it doesn't matter *what* the >> size of the visitor's browser is? >> http://www.benmeadowcroft.com/webdev/csstemplates/left-column.html > > Fluid would mean that the width would adapt to the browser window, Yay! That is a Good Thing™. All of my sites are fluid, and work pretty well at just about any size. Ex: http://www.countryrode.com/ > which could lead to something disproportionate with widths 1024 or > 1280. I wonder if this would be a good idea for this type of > design... ..so set a max-width on the content area. Also, many people with high-res monitors do not browser with their browser windows full-screen. Resolution is unimportant. >> percentage ( 100% ), and dropping Verdana from the font list. >> Google for why - discussed in these groups almost daily. > > I am not sure I understand your remark for Verdana. What is wrong > with it? Google provided: http://www.xs4all.nl/~sbpoley/webmatters/verdana.html Regarding font-size set in pixels, all those IE users who need to set a larger font due to vision deficiencies, can't resize your text. Signature-bts -This space intentionally left blank. >>> Whoa. The only thing allowed as a direct child of a <ul> is one or >>> more <li>. Your inner <ul>'s need to be *within* an <li>. [quoted text clipped - 10 lines] > > But no? Stuff can be outside of a <li></li>? 'Fraid not. I think the point is that that's not the way a nested list works. He wants * Level 1 * Level 2 * Level 2 * Level 1 * Level 1 Your way gives * Level 1 * *Level 2 *Level 2 * Level 1 * Level 1 or something like that. >> You could write this: >> [quoted text clipped - 8 lines] > enclosed the child <ul> within the outer <li> which is what I was > commenting on that you were doing wrong. No, you were commenting that he can't have child UL inside parent UL, which is correct. This is child UL inside parent LI, which is perfectly good HTML (though I would then also put the "blabla" right after the <li> tag into its own explicit block; otherwise, the UA will wrap it in an anonymous one). >> But this would not solve my problem: there is still a shift to the >> right of the first list item. > > Provide a sample URL. Yes, please, I'm likewise not seeing why this would happen. I use this approach all the time. > No, you were commenting that he can't have child UL inside parent > UL, which is correct. This is child UL inside parent LI, which is > perfectly good HTML ..except that in his first post, the child UL was not inside an <li>. Easy to miss that at a glance. > (though I would then also put the "blabla" right after the <li> tag > into its own explicit block; otherwise, the UA will wrap it in an > anonymous one). So would I. <g> My point was to show that UL needs to be inside LI. >> Provide a sample URL. > > Yes, please, I'm likewise not seeing why this would happen. I use > this approach all the time. Did you see his sample page? It appears to be (now) correctly written. (though it has a couple of other unrelated errors.) Signature-bts -This space intentionally left blank. >> Provide a sample URL. > > Yes, please, I'm likewise not seeing why this would happen. I use this > approach all the time. Here it is: http://ivredimages.free.fr/produits.php Cheers > Sorry to contradict you but no. Your syntax would create additional > bullets. You could write this: [quoted text clipped - 5 lines] > </ul> > </li> The only difference between yours and Beauregard's is that you have text for the <li>. > But this would not solve my problem: there is still a shift to the > right of the first list item. Did you try it with the correct syntax? This goes a *lot* faster if you provide an URL demonstrating the problem. Signaturejmm dash list (at) sohnen-moe (dot) com (Remove .AXSPAMGN for email) > Did you try it with the correct syntax? With <ul> nested in <li>. > This goes a *lot* faster if you provide an URL demonstrating the problem. See previous message to Beauregard. Cheers >> This goes a *lot* faster if you provide an URL demonstrating the >> problem. > See previous message to Beauregard. The problem goes away if you remove .normalList li {margin: 1em;}. IE is apparently screwing up the margin calculation for the 3rd level. Aside: The navigation menu wraps in my browser. I have the minimum font size set to 14 pixels, 88% of normal. This breaks an amazing number of site layouts, but at least I can read the text. If you use a margin-left and margin-right instead of width:12em, your page would be more accommodating to browsers with non-default settings. Signaturejmm dash list (at) sohnen-moe (dot) com (Remove .AXSPAMGN for email) >But this would not solve my problem: there is still a shift to the >right of the first list item. If you want a list to work with reasonable consistency across ALL browsers, you have to set the margin AND the padding. Some browsers indent their list items with margin, some with padding. You have to set both. I typically set padding: 1em and margin: 0. -A > If you want a list to work with reasonable consistency across ALL > browsers, you have to set the margin AND the padding. Some browsers > indent their list items with margin, some with padding. You have to set > both. I typically set padding: 1em and margin: 0. I suggest about 1.4em for <ul> to allow for IE's need for lots of space around the bullet; otherwise it gets clipped off. For <ol> I use 2.5em for clearance up to 3 digits. Signaturejmm (hyphen) list (at) sohnen-moe (dot) com (Remove .AXSPAMGN for email) |
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.