SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict DevilBear's Avatar
    Join Date
    Oct 2001
    Location
    Hades
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    19px gap in IE 6

    I'm not sure what's causing this gap... removing whitespace in the html didn't help. It looks correct in FF, but not IE6.

    If you give the li's a negative bottom margin (19px) then IE6 renders it the way I'm wanting.

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
    </head>
    <body>
        <div id="innercontainer">
            <div id="mast">
            <h1>Title</h1>            
                <ol id="nav">
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                    <li>Item 4</li>
                    <li>Item 5</li>
                    <li>Item 6</li>
                </ol>
            </div>
            <div class="content">
                <div id="text">
                    Some content goes here
                </div>
            </div>
        </div>
    </body>
    </html>
    Code CSS:
     
     
    body {
        margin: 0;
        padding: 0;
        background-color: #c0c0c0;
    }
     
    #innercontainer {
        margin-left: 20px;
        margin-right: 19px;
        padding-left: 0;
        padding-right: 0;
    }
     
     
    div.content {
        width: 950px;
        margin-top: 0px;
        border: 2px solid green;
        clear: both;
    }
     
    ol#nav { 
        display: block;
        margin-left: 0;
        padding-left: 0;
     
     
    }
     
    ol#nav li {    
        width: 156px;
        list-style: none; 
        height: 30px;
        float: left;
        margin-right: 4px;
        background-color: yellow;
        margin-bottom: 0;
     
    }

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I'm not at home right now (though I should be in about an hour or so), but what would happen if you were to add the following to the top of your stylesheet?

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

  3. #3
    SitePoint Addict DevilBear's Avatar
    Join Date
    Oct 2001
    Location
    Hades
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That makes them look the same... any idea why? Is there a way around setting 0 margins and padding for everything like that?

  4. #4
    SitePoint Addict CaryD's Avatar
    Join Date
    Nov 2006
    Location
    San Diego, CA
    Posts
    389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    Code CSS:
    ol#nav {
        display: block;
        margin: 0;
        padding: 0;
    }

  5. #5
    SitePoint Addict DevilBear's Avatar
    Join Date
    Oct 2001
    Location
    Hades
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Didn't work, CaryD. I can set margin & padding 0 on everything in that stylesheet, and IE6 still shows the space... unless I set margin & padding 0 on *... which I would rather find some way around.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I'm back home now. Can you toss up a live link for me to play around with?

  7. #7
    SitePoint Addict DevilBear's Avatar
    Join Date
    Oct 2001
    Location
    Hades
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Like this?

    http://www.devilbearsolutions.com/temp/css/

    It has your fix goin' for it at the moment.

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, the first thing I see is you're using an HTML 4 Strict DOCTYPE yet using XHTML syntax - let's get rid of that, ok?

    (I'm working on fixing the problem as you read this mini-post.)

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, another thing is I think IE is resetting the defaults on your content margins. Anyway, I re-wrote the code (it doesn't appear 100&#37; identical to yours in the browsers, but it is cleaner), so this should work for you.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>Untitled Document</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<meta http-equiv="Content-Style-Type" content="text/css" />
    	<meta http-equiv="imagetoolbar" content="no" />
    	<meta name="description" content="A brief description of the current page goes here." />
    	<meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished" />
    	<link rel="stylesheet" type="text/css" href="screen.css" media="screen,projection" />
    </head>
    <body>
    <div id="container">
    	<h1>Title</h1>
    	<ul id="menu">
    		<li><a href="#">Item 1</a></li>
    		<li><a href="#">Item 2</a></li>
    		<li><a href="#">Item 3</a></li>
    		<li><a href="#">Item 4</a></li>
    		<li><a href="#">Item 5</a></li>
    		<li><a href="#">Item 6</a></li>
    	</ul>
    	<div id="content">
    		Some content goes here.
    		<p>west</p>
    		<p>east</p>
    		<p>north</p>
    	</div>
    </div>
    </body>
    </html>
    And the CSS that goes with it:

    Code CSS:
    /* this is my personal "CSS Reset" - don't delete this or change a thing (trust me on this) */
    html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
    dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
    a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
    strong, sub, sup, textarea, tt, var {
    	margin: 0;
    	padding: 0;
    }
     
    body {
    	background: #C0C0C0;
    	color: #000;
    }
     
    #container {
    	margin: 0 auto;
    	width: 950px;
    }
     
    #menu {
    	height: 30px;
    	line-height: 30px;
    	list-style: none;
    }
    	#menu li {
    		display: inline;
    		white-space: nowrap;
    	}
     
    	#menu a {
    		background: #FF0;
    		float: left;
    		height: 30px;
    		margin-right: 4px;
    		width: 154px;
    	}
     
    #content {
    	border: 2px solid #060;
    	width: 940px;
    }

  10. #10
    SitePoint Addict DevilBear's Avatar
    Join Date
    Oct 2001
    Location
    Hades
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My big question is... the part at the top of the CSS file... can I "undo" that for an element (like a content div) and its descendants? I don't want to have to go manually setting margins and padding on every element individually.

    Why does IE render that annoying gap without it anyway?

  11. #11
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Trust me, you don't want to leave things to chance when it comes to CSS and browsers. Each browser has its own defaults for margins and padding on elements. It's better to zero them out and add them where they're needed than to guess whether Browser X uses #px of margins (or padding) while Browser Y uses ##px of margins (or padding). Some browsers will even use margins for one element while other browsers will use padding for the exact same element (lists and list items, I'm looking at you especially).

    As for your gap, I'm really not sure, but as I said, it's probably because IE is tripping up and applying the defaults instead.

    Also note that the big list of selectors at the top (which zero out the margins and padding) do the same thing as the universal selector I pointed out in my first post, with the exception that it doesn't target form controls (which the universal selector does) since those types of elements don't behave properly cross-browser when their margins and padding have been removed.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    There are 3 issues in your original code as to why IE was displaying differently and are as follows.

    1) Haslayout
    2) collapsing margins
    3)The default margins on the ol

    They can all be fixed with this simple code:

    Code:
    ol#nav {
        display: block;
           width:100&#37;;
             margin:0;
             padding:0;
    }
    First of all we apply "haslayout" to the ol by giving it a width This makes IE behave properly and take into account the exact dimensions of the parent and its children.

    As the list (li) are floated then the default bottom margin of the ul (of about 1em) is ignored by Firefox because the ol has in fact got no content because floats are removed from the flow. (The margin isn't ignored exactly because it is lying under the floated lists and therefore has no bearing on the #content div underneath).

    IE on the other hand auto clears floats (when it has "haslayout") and is still applying the margin bottom to #content so we simply remove the default margin from the ol and now all browsers are the same.

    If you understand the reasons why things are different you will often find that it is incorrect coding that causes the problem. Collapsing margins, floats removed from the flow, clearing elements and default margin and padding all have to be taken into account to provide a consistent approach.

    As Dan said above you have to take control of the elements you use and not leave anything to chance especially with padding and margins.


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
  •