SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist cturner01's Avatar
    Join Date
    Jun 2006
    Location
    My computer
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Header isn't displaying correctly in Internet Explorer???

    In Internet Explorer the website which I am working on, doesn't display header correctly. However in Firefox it displays the header perfectly. Where the buttons are, at the bottom it isn't in line with the others. I have attached the both views in both browsers, for you to see what I am talking about. Please help me solve this problem asap. My css is here:
    Code CSS:
    .twoColFixLtHdr #container {
    	width: 780px;
    	margin: 0 auto;
    	text-align: left;
    	overflow: hidden;
    } 
    .twoColFixLtHdr #header { 
     
    } 
    .twoColFixLtHdr #greenSquare {
    	float: left;
    	background-color: #b2c62f;
    	height: 174px;
       	/* width: 255px; */
    }
    .twoColFixLtHdr #greenSquaretxt {
    	font-size: 30px;
    	font-weight: bold;
    	padding: 30px;
    	text-align: center;
    }
    .twoColFixLtHdr #btns {
    	/* width: 265px; */
    	padding-bottom: 2px;
    	float: left;
    	background-color: #82c5f8;
    }
    .twoColFixLtHdr #rightheader {
    	/* width: 280px; */
    	float: right;
    }

    Here is how I have put the css into the web page:
    Code HTML4Strict:
    <div id="container">
    <div id="header">
    <span id="greenSquare"><div id="greenSquaretxt">SME
    <br />Accounting</div></span>
    <span id="btns">
    <img src="images/homebtn.gif" width="262" height="43" alt="" border="0" /><br />
    <a href=""><img src="images/servicesbtn.gif" width="262" height="43" alt="" border="0" /></a><br />
    <a href=""><img src="images/staffprofilesbtn.gif" width="262" height="43" alt="" border="0" /></a><br />
    <a href=""><img src="images/contactbtn.gif" width="262" height="43" alt="" border="0" /></a>
    </span>
    <span id="rightheader"><img src="images/photo.jpg" width="270" height="184" alt="" border="0" /></span>
    </div>
    </div>
    Thanks in advance.
    Attached Images Attached Images

  2. #2
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I looked at both thumbnail screenshots. I don't see a difference. Do you have a link?

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

    I'm guessing that its the breaks between the images and the fact that the images are linline is giving you extra space.

    Set the images to display:block and remove the breaks after those images.

    e.g.
    Code:
    #btns img{display:block}
    However your code is invalid and you can't nest spans around divs. The code is not very semantic either and makes no logical sense. If the SME Accounting is your main heading then use an H1 (or a suitable heading tag if its not the main heading tag).

    The four links should be in a list as they are a list if links.

    Only use divs when there is no suitable (semantic) html elements. Divs are logical dividers of sections and not just containers for everything, Most content has semantic meaning and there already exists an html element to convey that meaning so use it when you can.

    As a rogh guide I would structure your section like this.

    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=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    a img{border:none}
    #container {
        width: 780px;
        margin: 0 auto;
        text-align: left;
        overflow: hidden;
    }
    h1#greenSquare {
        float: left;
        background-color: #b2c62f;
        height: 114px;
        font-size: 30px;
        font-weight: bold;
        padding: 30px;
        text-align: center;
            margin:0;
    }
    * html h1#greenSquare{height:174px;he\ight:114px}
    
    #btns {
        float: left;
      background-color: #82c5f8;
        margin:0;
        padding:0;
        list-style:none;
        height:174px;
        width:262px;
    }
    #btns li{float:left;clear:left}
    #rightheader {
        float:left;
            margin:0;
    }
    #btns img{display:block}
    
    </style>
    </head>
    <body>
    <div id="container">
        <div id="header">
            <h1 id="greenSquare">SME <br />Accounting</h1>
            <ul id="btns">
                <li><img src="images/homebtn.gif" width="262" height="43" alt=""  /></li>
                <li><a href=""><img src="images/servicesbtn.gif" width="262" height="43" alt="" /></a></li>
                <li><a href=""><img src="images/staffprofilesbtn.gif" width="262" height="43" alt="" /></a></li>
                <li><a href=""><img src="images/contactbtn.gif" width="262" height="43" alt="" /></a></li>
            </ul>
            <p id="rightheader"><img src="images/photo.jpg" width="270" height="184" alt="" /></p>
        </div>
    </div>
    </body>
    </html>
    Of course the header is redundant but I guess you had something else going on there so I left in in place. Also I'm not sure the heights are correct as your last image height doesn't match the heights you gave for the other elements so I guess there's something else in there that you midded out.

    Don't use ids for everything. Use ids for the main containers but for the inner elements you would mostly use classes and then the styles can be re-used if needed. Ids are mainly used to provide a logical structure to your page but if you use ids for everything then that structure is lost.

    Hope that helps


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
  •