[SOLVED] div background image problem in ie

[Rincewind]

Hi everyone,

I suspect this is something really easy that i have just overlooked but i have a problem displaying a background-image in ie. The image is a drop shadow and has a width of 934px and height of 8px.

This is what it is supposed to look like, and is in FF.



and this is what it looks like in IE.



here is the code. I did have it as 1px width and repeated it but the same problem occured. It is now one image, but the problem remains

Code: Select all

#shadow { width: 934px; height: 8px; background-image: url(dropShadow.jpg); background-repeat: no; }

Code: Select all

<div id="headerSurround">
            <!--search bar here -->
</div>
<div id="shadow"></div>

Thanks

[welshstew]

first you need to change
background-repeat: no;

to

background-repeat: no-repeat;

can you post a link so that I can have a look at the rest of the code

[Rincewind]

Code: Select all

<!-- START header -->
<div id="headerTopBorder"></div>
<div id="headerSurround">
   <!--search bar here -->
</div>
<div id="shadow"></div>
<div id="headerContent">
    <!-- content for header in here -->
</div>
<div class="topNav">
    <ul>
        <li><a href=""></a></li><li><a href=""></a></li><li><a href=""></a></li><li><a href=""></a></li><li><a href=""></a></li><li><a href=""></a></li>
      </ul>
</div>
<!-- END header -->

Code: Select all

/*START headers*/
#headerTopBorder { width: 934px; height: 10px; background-color: #fec480; }
#shadow { width: 934px; height: 8px; background-image: url(dropShadow.jpg); background-repeat: no-repeat; }
#headerSurround { width: 934px; height: 50px; background-color: #fc8801; }
#headerContent { width: 934px; height: 223px; background-image: url(headerContent.jpg); }
.topNav { width: 934px; height: 25px; background-color: #fc8801; }
.topNav a:hover { background-image: url(navHover.jpg); }
.topNav a { float: left; height: 25px; display: block; padding-left: 10px; padding-right: 10px; border-right: 1px solid #f2982f; line-height: 1.5em; }
/*END headers*/

Now i changed that mistake to no-repeat i just get a white space below in IE, like this

[Rincewind]

I've fixed it now...it was to do with my doctype being wrong. Thanks for the quick response.

[karinne]

Ah well ... something we would not have been able to discern

Next time, it would be best to post a link so we can see ALL the code.

[Rincewind]

Originally Posted by karinne

Ah well ... something we would not have been able to discern

Next time, it would be best to post a link so we can see ALL the code.

Yeah sorry, i don't have a host atm. Sorry if i wasted anyones time. Thanks for your help anyway.

[AdRock]

I changed the doctype becuase it was incomplete and it works in IE7 but not in IE6

[thanix]

Originally Posted by AdRock

I changed the doctype becuase it was incomplete and it works in IE7 but not in IE6

"doctype" is very important because browsers decide whether to use "standards" mode of rendering or "quirks" mode basedo n the doctype.

I have a writing called "the making of a webdev" series of blog posts. yesterday's topic was just that -- on "doctypes". You may follow it up there -- http://thanix.info/blog