Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question The old 'content pushed down in IE' problem

    I noticed with horror that my lovely layout (FF and Safari) was out of whack in IE7. It's a 2 column div-based layout - left links div with wide right margin and content div floated right. 'cept in IE the left links content gets pushed down below the right content in IE
    I've read around the problem and tried a few suggestions - taking the width declaration off the content - but I'm shooting in the dark.

    Any fresh eyes want to gaze at www.nima.co.nz for me?
    Many thanks
    Jon

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello nathanoj,
    There is a margin on that ul in IE7. Specify your own so it's the same in all browsers.

    Here it is zero'd out, see highlighted in red -
    Code:
    #links ul {
    list-style-type: none;
    margin: 14px 0;
    padding-left: 10px;	
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    nathanoj (04-08-2011)

  • #3
    New Coder
    Join Date
    Apr 2011
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Awesome - thanks so much Ex for your fast and effective reply.

    Now I'll ruminate on why it should be so.....
    Does IE add a default margin if none is specified?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Quote Originally Posted by nathanoj View Post
    Awesome - thanks so much Ex for your fast and effective reply.

    Now I'll ruminate on why it should be so.....
    Does IE add a default margin if none is specified?
    Each browser had default margin/padding on some elements. Sometimes those defaults are different. That's the main argument for using a CSS reset.

    I think, instead of using a reset, that it's better to leave the defaults alone and set your own margin/padding on those elements.

    ===================
    I couldn't answer what the default margin IE adds as I didn't know. I set up this little experiment just for fun to find out.
    Using this code -
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #FC6;
    }
    #container {
    	height: 500px;
    	width: 700px;
    	margin: 30px auto;
    	padding: 50px;
    	background: #999;
    }
    ul {
    	background: #c60;
    	list-style: none;
    }
    li {background: #396;}
    </style>
    </head>
    <body>
        <div id="container">
        	<ul>
                <li><a href="#"></a>linky</li>
                <li><a href="#"></a>linky</li>
                <li><a href="#"></a>linky</li>
                <li><a href="#"></a>linky</li>
            </ul>
        <!--end container--></div>
    </body>
    </html>
    FF4 defaults
    ul:
    margin: 16px 0;
    padding: 0 0 0 40px;
    li:
    margin: 0;
    padding: 0;


    IE9 and IE8 are the same as FF4

    IE7 defaults
    ul:
    margin: 0 0 0 40px;
    padding: 0;
    li:
    margin: 0;
    padding: 0;
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    nathanoj (04-09-2011)

  • #5
    New Coder
    Join Date
    Apr 2011
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Nice detective work!


  •  

    Posting Permissions

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