SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE Adding Margins To Images

    Hello,

    I'm working on a new layout for a site and just have the divs in place creating a Technicolor patchwork just to get everything positioned correctly before moving on.

    I have put in some test ad images from the banner report. FF has no issues with the images, but IE is adding something like a 4px margin to the bottom of all the images even when the CSS specifically says not to add the margin.

    Any suggestions would be greatly appreciated. I would love to think that this site could be done without IE specific CSS (too lofty of an aspiration?). Thanks in advance.

    Here is the code

    HTML:
    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>Mock Up Front Page</title>
    <link href="css/fronpagemockup.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="container">
    
        <div id="header">
        </div>
        
        <div id="navigation_tier1">
        </div>
        
        <div id="navigation_tier2">
        </div>
        
        <div id="userlogin">
        </div>
        
        <div id="leaderboard">
        <img src="http://www.bannerreport.com/html/_image.php?fileID=88940&fileType=2"/>
        </div>
        
        <div id="newsreel">
        </div>
        
        <div id="rankings">
        </div>
        
        <div id="skyscrapper">
        <img src="http://www.bannerreport.com/html/_image.php?fileID=87976&fileType=1"/>
        </div>
        
        <div id="clearfix">
        </div>
        
        <div id="newcontent">
        </div>
        
        <div id="newposts">
        </div>
        
        <div id="squaread">
        <img src="http://www.bannerreport.com/html/_image.php?fileID=88548&fileType=2"/>
        </div>
            
        <div id="news">
        </div>
        
        <div id="jinx">
        </div>
        
        
    </div>
    
    </body>
    </html>
    CSS
    Code:
    @charset "utf-8";
    *
    {
    	margin:0;
    	padding:0;
    }
    img
    {
    	margin:0;
    	padding:0;
    }
    div#container {
    margin : 0 auto;
    border : 1px solid black;
    width : 1000px;
    }
    div#header {
    width : 998px;
    height : 100px;
    background-color : #cc0000;
    border : 1px solid black;
    float : left;
    }
    div#navigation_tier1 {
    width : 998px;
    height : 28px;
    background-color : #0099cc;
    border : 1px solid black;
    float : left;
    }
    div#navigation_tier2 {
    width : 998px;
    height : 22px;
    background-color : #00ff66;
    border : 1px solid black;
    float : left;
    }
    div#userlogin {
    width : 268px;
    height : 90px;
    background-color : #ffff00;
    float : left;
    border : 1px solid black;
    }
    div#leaderboard {
    float : left;
    border : 1px solid black;
    }
    div#newsreel {
    background-color : #ff3366;
    float : left;
    width : 534px;
    height : 300px;
    border : 1px solid black;
    }
    div#rankings {
    background-color : #993300;
    float : left;
    width : 300px;
    height : 300px;
    border : 1px solid black;
    }
    div#skyscrapper {
    float : right;
    border : 1px solid black;
    }
    div#jinx {
    background-color : #66ff00;
    float : right;
    width : 160px;
    height : 50px;
    border : 1px solid black;
    }
    div#newcontent {
    background-color : #0000ff;
    float : left;
    width : 266px;
    height : 250px;
    border : 1px solid black;
    }
    div#squaread {
    float : left;
    border : 1px solid black;
    }
    div#newposts {
    background-color : #cc6600;
    float : left;
    width : 266px;
    height : 250px;
    border : 1px solid black;
    }
    div#news {
    background-color : #cc66cc;
    float : left;
    width : 836px;
    height : 500px;
    border : 1px solid black;
    }
    div#clearfix {
    clear : left;
    }

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Welcome to SitePoint json2001

    Maybe this thread can be of interest: IE adds gap below images: what bug hath IE wrought? You have the same problem with the images not at the bottom of text-line in IE.

    Try "img{display:block}" and see if that solves it.
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Erik,

    Thanks so much for the Warm welcome. And yes, display:block took care of it. I appreciate the help.

    Cheers!


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
  •