SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Bullet list indent puzzle: IE6 vs NS7

    I apologize if this has been addressed before. I did a search on 'padding IE 6' but didn't see this specific issue.

    My customer has several pages where they want listed bulleted links, with some links indented a bit. They would like no double-spacing (which I got when I used a <ul><li> setup). Half the users are on IE6 and the rest use Netscape7 or Firefox.

    Here is the track I've been on with this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    <head>
    
    <title>Testing Bullet Indents</title>
    <style type="text/css">
    
    <!--
    div.indent { padding-left: 25px; }
    -->
    
    </style>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    </head>
    
    <body>
    <table width=600>
    <tr>
    <td width="3%">
    </td>
    <td>
    <li>First bullet point, no indent.
    <div class="indent"><li>Second bullet point, should be indented.
    <li>Third one, should also be indented.
    </div>
    <li>Fourth bullet, not indented.
    </td>
    </tr>
    </table>
    </body>
    
    </html>
    Why do the indents display correctly in NS7/FF but not in IE6?

    Thank you in advance for any help, I am quite new at this.

    - Bill C.

  2. #2
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If memory serves me right IE / Mozilla-based products & NN7 apply padding and margins differently to lists so Id start by setting padding: 0 and margin: 0 and see if they act right... then adjust accordingly!

  3. #3
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, you have some MAJOR problems here with that code ... you cant have li elements without their enclosing ul or ol tags! Not valid at ALL! Im playing with the code and will be back in a bit!

  4. #4
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think this will work for you

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    		<title>Testing Bullet Indents</title>
    		<style type="text/css">
    		<!--
    			ul.container	{
    				padding: 0;
    				margin: 0;
    				list-style-position: inside;
    			}
    		-->
    		</style>
    	</head>
    
    	<body>
    		<table width='600'>
    			<tr>
    				<td>
    				</td>
    				<td>
    					<ul class='container'>
    					<li>First bullet point, no indent.
    						<ul>
    						<li class="indent">Second bullet point, should be indented.</li>
    						<li class="indent">Third one, should also be indented.</li>
    						</li></ul>
    					<li>Fourth bullet, not indented.</li>
    					</ul>
    				</td>
    			</tr>
    		</table>
    	</body>
    </html>
    NOTE: I got the indent by nesting the (to be indented) list within the outer list ..... I got rid of the margin / padding on the outer and set this: list-style-position: inside; so freaking IE would play nice.... you get your inner indentations and the outer list stays tight against the left side ... I dont have NN7 on this machine but I tested it in FF & IE 6

    Hope this helps!

  5. #5
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Ah, I see it. So the "container" class keeps the initial <ul> tag from doing it's default indent thing.

    Many thanks, Dalton!

    - Bill C.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •