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 12 of 12
  1. #1
    Regular Coder
    Join Date
    May 2008
    Posts
    135
    Thanks
    13
    Thanked 10 Times in 10 Posts

    CSS margin problem only in IE7

    hi there i have been playing around with some css and for some reason i can get it to render exactly how i want in all browsers but IE7.

    the problem is: in IE7 the margin-bottom of the divs with the class .item-container does not render at 5px like all the other browsers (firefox,opera,safari).

    heres my code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">
    <!--
    
    #wrapper {
    	background-color: #CCCCCC;
    	max-width: 520px;
    	padding: 5px;
    	float: left;
    	
    
    }
    .item-container {
    	background: #E0E0E0;
    	float: left;
    	text-align: center;
    	margin: 5px;
    
    	
    }
    .item-container div {
    	padding: 10px;
    
    }
    .item-container p {
    	margin: 0px;
    	padding: 0px;
    	font-weight: bold;
    	font-size: 12px;
    	font-family: Arial, Helvetica, sans-serif;
    }
    .item-container img {
    	height: 100px;
    	width: 100px;
    	margin-bottom: 5px;
    	display: block;
    	background-color: #CCCCCC;
    }
    -->
    </style>
    </head>
    <body>
    <div id="wrapper">
      <div class="item-container">
        <div id="item1"> <img src="" alt="" />
          <p>item description</p>
        </div>
      </div>
      <div class="item-container">
        <div id="item2"> <img src="" alt="" />
          <p>item description</p>
        </div>
      </div>
      <div class="item-container">
        <div id="item3"> <img name="" src="" alt="" />
          <p>item description</p>
        </div>
      </div>
      <div class="item-container">
        <div id="item4"> <img src="" alt="" />
          <p>item description</p>
        </div>
      </div>
      <div class="item-container">
        <div id="item5"> <img src="" alt="" />
          <p>item description</p>
        </div>
      </div>
      <div class="item-container">
        <div id="item6"> <img src="" alt="" />
          <p>item description</p>
        </div>
      </div>
      <div class="item-container">
        <div id="item7"> <img src="" alt="" />
          <p>item description</p>
        </div>
      </div>
      <div class="item-container">
        <div id="item8"> <img src="" alt="" />
          <p>item description</p>
        </div>
      </div>
      <div class="item-container">
        <div id="item9"> <img src="" alt="" />
          <p>item description</p>
        </div>
      </div>
      <div class="item-container">
        <div id="item10"> <img src="" alt="" />
          <p>item description</p>
        </div>
      </div>
      <div class="item-container">
        <div id="item11"> <img src="" alt="" />
          <p>item description</p>
        </div>
      </div>
      <div class="item-container">
        <div id="item12"> <img src="" alt="" />
          <p>item description</p>
        </div>
      </div>
    </div>
    </body>
    </html>
    any ideas?
    Last edited by mike182uk; 02-15-2009 at 10:30 PM.

  • #2
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    I can fix this im working on it right now.
    Last edited by PitbullMean; 02-14-2009 at 05:43 PM.

  • #3
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    Alright heres the fix bud:

    Put this in the head of your HTML;

    Code:
    <link href="test.css" rel="stylesheet" type="text/css">
    
    <!--[if IE]>
    <style type="text/css">
    #wrapper {
    	padding-bottom: 10px;
    }
    
    </style>
    <![endif]-->
    Then make a CSS file and put this in it.

    Code:
    #wrapper {
    	background-color: #CCCCCC;
    	max-width: 520px;
    	padding: 5px;
    	float: left;
    	
    
    }
    .item-container {
    	background: #E0E0E0;
    	float: left;
    	text-align: center;
    	margin: 5px;
    
    	
    }
    .item-container div {
    	padding: 10px;
    
    }
    .item-container p {
    	margin: 0px;
    	padding: 0px;
    	font-weight: bold;
    	font-size: 12px;
    	font-family: Arial, Helvetica, sans-serif;
    }
    .item-container img {
    	height: 100px;
    	width: 100px;
    	margin-bottom: 5px;
    	display: block;
    	background-color: #CCCCCC;
    }

    I named it test for an example like in the first set of code states but, you can name it anything you want. just be sure to re edit the name in the html file.

  • Users who have thanked PitbullMean for this post:

    mike182uk (02-15-2009)

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello mike182uk,
    I'm not seeing the 5px problem here. Looks the same in IE8, IE7 and FF3 except for your floated #wrapper moving around a bit.
    Got rid of that float, zero'd out default margins, cleared your floats, validated... That's about it: http://nopeople.com/test/
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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 {
    	background: #FC6;
    	font: bold 12px Arial, Helvetica, sans-serif;
    }
    * { /*zeros default margin/padding*/
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #wrapper {
    	background-color: #CCCCCC;
    	max-width: 520px;
    	padding: 5px;
    	overflow: auto; /*clears the floats*/
    }
    .item-container {
    	background: #E0E0E0;
    	float: left;
    	text-align: center;
    	margin: 5px;	
    }
    .item-container div {
    	padding: 10px;
    }
    .item-container img {
    	height: 100px;
    	width: 100px;
    	margin-bottom: 5px;
    	display: block;
    	background: #CCCCCC;
    }
    #item1{
    	background: #fff; /*just for testing*/
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
      <div class="item-container">
        <div id="item1"> <img src="" alt="" />
          <p>item description</p>
        </div>
      </div>
      <div class="item-container">
        <div id="item2"> <img src="" alt="" />
          <p>item description</p>
        </div>
      </div>
      <div class="item-container">
        <div id="item3"> <img src="" alt="" />
          <p>item description</p>
        </div>
      </div>
      <div class="item-container">
        <div id="item4"> <img src="" alt="" />
          <p>item description</p>
        </div>
      </div>
      <div class="item-container">
        <div id="item5"> <img src="" alt="" />
          <p>item description</p>
        </div>
      </div>
      <div class="item-container">
        <div id="item6"> <img src="" alt="" />
          <p>item description</p>
        </div>
      </div>
      <div class="item-container">
        <div id="item7"> <img src="" alt="" />
          <p>item description</p>
        </div>
      </div>
      <div class="item-container">
        <div id="item8"> <img src="" alt="" />
          <p>item description</p>
        </div>
      </div>
      <div class="item-container">
        <div id="item9"> <img src="" alt="" />
          <p>item description</p>
        </div>
      </div>
      <div class="item-container">
        <div id="item10"> <img src="" alt="" />
          <p>item description</p>
        </div>
      </div>
      <div class="item-container">
        <div id="item11"> <img src="" alt="" />
          <p>item description</p>
        </div>
      </div>
      <div class="item-container">
        <div id="item12"> <img src="" alt="" />
          <p>item description</p>
        </div>
      </div>
    </div>
    </body>
    </html>
    I don't have IE6 available right now... that code may have (probably has?) the IE6 double-margin bug.

    Read about clearing floats like that here.


    I have a similar example of thumbnails with a caption. This snippet will center the thumbs in any sized div, line-breaking when there are enough to fill the width and centering the next line after the break. Have a look at the demo at http://nopeople.com/CSS/thumbnail%20...ion/index.html
    Last edited by Excavator; 02-14-2009 at 06:30 PM. Reason: added bugfix
    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

  • #5
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    I tried your fix Excavator and the problem is still there in IE7. Mike try my fix that should get u going.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Nope. Not seeing it here.

    note - IE6 is going to botch that min-width horribly.
    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

  • #7
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    The OP's original code looks identical to me with F3 and IE6 if you include 2 changes:
    Code:
    #wrapper {
    	background-color: #CCCCCC;
    	width: expression(document.body.clientWidth < 518? "520px" : document.body.clientWidth > 522? "520px" : "auto");
    	min-width: 520px;
    	max-width: 520px;
    	padding: 5px;
    	float: left;
    }
    Code:
    .item-container {
    	background: #E0E0E0;
    	float: left;
    	text-align: center;
    	margin: 5px;
    	display:inline;	
    }
    The first fixes the max-width for IE6. The second prevents the double float added in IE6.

  • #8
    Regular Coder
    Join Date
    May 2008
    Posts
    135
    Thanks
    13
    Thanked 10 Times in 10 Posts
    hey pitbullMean thanks for the workaround, that does exactly what i want, but i dont like the idea of specifically filtering one browser. even though i may have too, i was trying to look for a pure css workaround that is cross browser compatible.

    excavator, there is definately a problem in IE7, ive tested in every browser and this is the only browser causing the problem. im using the latest version of opera,safari,chrome and firefox.

    the wrapper provides 5px of padding around the whole div. then the margins of the item-container divs provide another 5px. so there should be 10px space around the item-container divs. on the bottom item-containers the margin-bottom is not being applied. if you remove the padding from the wrapper you'll see what i mean (there will be 5px of space between the item-containers and the wrapper except for the bottom).

    ive noticed that no matter how much margin-bottom i add to the bottom item-containers the wrapper never resizes to accomodate for the extra space, although when i add extra margin-top to the item-containers the wrapper will resize to accomodate the extra space.

    im using dreamweaver and when i do a browser compatibility test it does come up saying i have a doubled float margin bug that affects IE6.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Yes, I see it now.
    Seems like it's a known problem - http://www.google.com/search?hl=en&q=ie7+bottom+margin


    Maybe you could just not float your image containers, like this: http://nopeople.com/test/
    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

  • #10
    Regular Coder
    Join Date
    May 2008
    Posts
    135
    Thanks
    13
    Thanked 10 Times in 10 Posts
    hey everyone thanks for the replys.

    well after playing around with this, i can only find 2 fixes. both i dont really like, and these are without recoding my css or changing my markup (which i dont really want to do).

    first one is what pitbullMean suggested:

    Code:
    <!--[if IE]>
    <style type="text/css">
    #wrapper {
    	padding-bottom: 10px;
    }
    
    </style>
    <![endif]-->
    and the second one is:

    Code:
    css:
    #clearLeft {
    	clear: left;
    }
    
    
    html:
    <div id="clearLeft"></div>
    if i add an extra empty div (or any element i guess) after the last item container and in css tell it to clear left, it does the job nicely without messing it up in other browsers.

    i dont like the 1st fix because i dont want to have to code for specific browsers.

    i dont like the second fix because it goes againest the concept of semantic markup as im just chucking in elements to fix browser faults.

    which would you use? or would you suggest i just recode it like excavators: http://nopeople.com/test/

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    i dont like the second fix because it goes againest the concept of semantic markup as im just chucking in elements to fix browser faults.
    We used to see clearing divs all the time. It does seem an old method, not as bad as tables but close?
    Actually, it addresses your IE7 issue without affecting your code or other browsers.

    ...not bad
    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:

    mike182uk (02-15-2009)

  • #12
    Regular Coder
    Join Date
    May 2008
    Posts
    135
    Thanks
    13
    Thanked 10 Times in 10 Posts
    thanx for all your help on this


  •  

    Posting Permissions

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