Forums

Lucilfer

Hi guys my question is pretty simple. The image highlighted in bold below is appearing with some additional padding in IE7 above and below it. I want it to look the same as it does in Firefox which shows no padding. I've tried removing padding from the image, but to no avail. Id show you a demo but all this is being done local. I have provided code below for those wondering. Im sure the solution is quite trivial, but at the moment I can't seem to figure it out. Thanks guys, look forward to hearing from you!

========
HTML
========
<div id=\"wrapper\">
  <div id=\"header\"> <img src=\"images/call-bg.jpg\" alt=\"call-today: 1.255.535.5555\"  class=\"fltr\"/>
    <ul id=\"nav\">
      <li><a href=\"#\">Home</a></li>
      <li><a href=\"#\">Booking</a></li>
      <li><a href=\"#\">Models</a></li>
      <li><a href=\"#\">Contact Us</a></li>
    </ul>
    <img src=\"images/header-bg.jpg\" alt=\"header\" /> </div>
  <!-- end of header -->
[b]  <img src=\"images/girl-bg1.jpg\"  alt=\"girlbg1\"/>[/b]
  <div id=\"mainContent\">

========
CSS 
========

* {
margin: 0;
padding: 0;
}

div#header {
background: #000000 url(images/bg.jpg) repeat-x top;
position: relative;
width: 850px;
}

.fltr {
float: left;
position: absolute;
margin-top: px;
margin-left: 590px;

}

ul#nav {
position: absolute;
margin-top: 140px;
margin-left: 60px;
}

ul#nav li a {
display:block;
width: 100px;
text-decoration: none;

color: white;
}

ul#nav li a:hover, ul#nav li a:active {
text-decoration: underline;
}

ul#nav li {
float: left;
list-style: none;
}

div#wrapper {
width: 850px;
margin: 0 auto;
}

div#mainContent {
padding-bottom: 50px;
background: #263136;
color: white;
width: 850px;
}

div#mainContent p {
padding: 0 10px 0 10px;
}

Lucilfer

Did a bit of testing, and the cause seems to be in the header.

No matter what element goes after the header, there seems to be a bit of spacing.

treehouse : what would you like to learn today?

Forums

Hi Guys - Image Question