Welcome Guest ( Log In | Register)



 
 Reply to this topicStart new topic
> [problem] Css Unordered List Display Problems Ie6 Bug, Making unordered list under unordered list couses some padding to appe
matak
post May 12 2007, 05:06 AM
Post #1


Super Member
*********

Group: Members
Posts: 412
Joined: 4-October 06
From: Psychedelic Realms
Member No.: 31,079
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 ohmy.gif. 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..

(list)

Go to the top of the page
 
+Quote Post
jlhaslip
post May 12 2007, 01:04 PM
Post #2


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 3,882
Joined: 24-July 05
From: In Trouble Again... still?
Member No.: 9,787
Spam Patrol
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

(list)

Go to the top of the page
 
+Quote Post
matak
post May 12 2007, 07:04 PM
Post #3


Super Member
*********

Group: Members
Posts: 412
Joined: 4-October 06
From: Psychedelic Realms
Member No.: 31,079
Lol, thanks for the * html tip biggrin.gif.. 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 laugh.gif

Thank you very much!

(list)

Go to the top of the page
 
+Quote Post
« Next Oldest · CSS (Cascading Style Sheets) · Next Newest »
 

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Unordered List Css Layout(4)
  2. Height % In Ff Problems With Css(3)
  3. Definition Lists To Display Artist, Cd, And Track(0)
  4. Lists, Unordered And Nested(2)
  5. Making My Page 100% Valid(4)
  6. Span "display: _____" Problems(2)


 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 26th July 2008 - 04:30 PM
Powered By IP.Board © 2008  IPS, Inc.
Licensed to: Xisto Corporation