SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy IE not displaying images

    I'm starting to get the hang of this CSS. I can't figure this one out though. I am working on a project for school and, as always, I run into IE problems. IE is not displaying a few img's in the header and I can't determine what is causing this to happen. Here is the code:
    Any ideas?

    Code HTML4Strict:
    <!--Begin Header-->
    <div id="topsection">
    <img src="images/MadLibsTM.gif" width="" height="" alt="" />
     
    <a href="index.html"><img src="images/homeDOWNtab.gif" width="" height="" alt="" id="Home" class="tabs"/></a>
    <a href="about/index.html"><img src="images/aboutDOWNtab.gif" width="" height="" alt="" id="About" class="tabs"/></a>
    <a href="play/index.html"><img src="images/playDOWNtab.gif" width="" height="" alt="" id="Play" class="tabs"/></a>
    <a href="make/index.html"><img src="images/makeDOWNtab.gif" width="" height="" alt="" id="Make" class="tabs"/></a>
    <a href="help/index.html"><img src="images/helpDOWNtab.gif" width="" height="" alt="" id="Help" class="tabs"/></a>
     
    <img src="images/RightSpace.gif" width="" height="" alt="" style="margin-top:38px"/>
    </div>
    <!--End Header-->

    Code CSS:
    body,html{
    background: #95c9b8;
    margin:0;
    padding:0;
    height:100%;
    }
     
    #maincontainer{
    background: #fcffa3;
    width: 47.5em; /*Width of main container*/
    margin: 0 auto; /*Center container on page*/
    height:100%;
    }
     
    #topsection{
    background: #fcffa3;
    height: 78px; /*Height of top section*/
    padding:0;
    margin-bottom:-8px;
    }
     
    #topsection img{
     float:left;
    }
     
    #contentwrapper{
    background: #fcffa3;
    float: left;
    width: 100%;
    }
     
    #contentcolumn{
    margin: 0 43px 0 82px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
    height:100%;
    }
     
    #leftcolumn{
    float: left;
    width: 82px; /*Width of left column in pixel*/
    margin-left: -47.5em; /*Set margin to that of -(MainContainerWidth)*/
    height:92%;
    background: #fcffa3;
    background-image: url(images/LeftMargin.gif);
    background-repeat: repeat-y;
    background-position: 0px 30px;
    }
     
    #rightcolumn{
    float: left;
    width: 43px; /*Width of right column*/
    margin-left: -43px; /*Set left margin to -(RightColumnWidth)*/
    height:92%;
    background: #fcffa3;
    background-image: url(images/RightMargin.gif);
    background-repeat: repeat-y;
    background-position: 0px 30px;
    }
     
    #footer{
    clear: left;
    width: 100%;
    background: #fcffa3;
    text-align: center;
    padding: 0px 0;
    }
     
    .innertube{
    margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;
    }
     
    .tabs{
    border:none;
    width:82px;
    height:32px;
    float:left;
    display:block;
    margin-top:38px;
    /*margin-left:-1px;
    margin-right:-4px;*/
    }

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

    I can't really tell without seeing the images but I'd hazard a guess that this is causing you some problems.
    Code:
    <img src="images/MadLibsTM.gif" width="" height="" alt="" />
    I expect IE will render that image at zero height and width.

  3. #3
    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)
    Also note that what you have is a list of links, so a list would be the appropriate markup to use here. As for the link paths, there's no need to declare index.html after the directory path since index.html is the default on most servers anyway (though IIS uses default.htm or default.html instead).

    If you could show me the images you're using (preferably via a live link to a test page) I could show you how to mark this up so it works properly (practically) regardless of what browser is being used.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, so you can't declare an empty height and width for img tags for IE, good to know. Thanks Paul.

  5. #5
    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)
    And it's never a good idea either since the browser has to waste processing time trying to guess how wide and tall those images are in the first place. By giving them the information they need, browsers can speed up the time it takes to render a Web page.


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
  •