[problem] Css Unordered List Display Problems Ie6 Bug - Making unordered list under unordered list couses some padding to appe

matak

May 12 2007, 05:06 AM

I just started designing something that i thought is gonna be a really simple xHTML strict template. Everything is right except that i thought of using unordered list, some other list under that list. Well this is the code for the Menu that is cousing me problems

CODE

<div id="lijevo">
    <ul>
        <li>List1</li>
        <li>List2</li>
        <li>
            <ul>
            <li>List 2 Sublist</li>
                <li>
                    <ul>
                        <li>This is really long text that explains a bunch of nothing3</li>
                        <li>This is really long text that explains a bunch of nothing2</li>
                        <li>This is really long text that explains a bunch of nothing1</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>List3</li>
        <li>
            <ul>
            <li>List 3 Sublist</li>
                <li>
                    <ul>
                        <li>This is really long text that explains a bunch of nothing3</li>
                        <li>This is really long text that explains a bunch of nothing2</li>
                        <li>This is really long text that explains a bunch of nothing1</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

I arranged CSS with few simple code lines like this

CODE

div, p, h1, ul, li{margin:0;padding:0; list-style: none; }

div#lijevo ul {
/*indenting and width*/
margin-left: 10px;
}

At first i didn't use that <li> tag before <li>list2 sublist</li> but that didn't validate as (x)HTML strict

. Then when i added the tag IE shows padding under <li>List2</li>, like you can see it on test website HERE.

Anyone knows simple way to overcome this problem..

Reply

jlhaslip

May 12 2007, 01:04 PM

Try adding zero margins and padding to the universal star selector as follows:

CODE

* html {margin:0;padding:0;}

That should eliminate all margins and padding on all elements on the page. You will then need to add back the magins and padding where you want some. Alternately, use a more specific selector to target the UL li UL for the second lists.

check this out: http://jlhaslip.trap17.com/samples/misc/ba...ic_3lvl_ul.html

Reply

matak

May 12 2007, 07:04 PM

Lol, thanks for the * html tip

.. And guess what, it wasn't CSS but HTML problem.. I opened and closed the wrong <li> at top. Now i saw how u did it and it's fixed.

What can u say. Except, do you eat fish

Oh, boy i really need to sleep now

Thank you very much!

Reply

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE