SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
-
Jul 30, 2008, 16:37 #1
- Join Date
- Jun 2006
- Location
- My computer
- Posts
- 408
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
-
Jul 30, 2008, 20:18 #2
I looked at both thumbnail screenshots. I don't see a difference. Do you have a link?
-
Jul 31, 2008, 03:07 #3
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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}
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>
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