[SOLVED] div background image problem in ie

Rincewind · #1 Nov 29th, 2007, 13:54

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 · #2 Nov 29th, 2007, 14:02

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 · #3 Nov 29th, 2007, 15:05

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 · #4 Nov 29th, 2007, 15:41

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

karinne · #5 Nov 29th, 2007, 16:02

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 · #6 Nov 29th, 2007, 16:08

Quote:

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 · #7 Nov 30th, 2007, 08:52

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

thanix · #8 Nov 30th, 2007, 09:30

Quote:

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] Background image not showing	Aso	Web Page Design	1	Apr 22nd, 2008 15:54
[SOLVED] image background	dab42pat	Graphics and 3D	4	Jan 7th, 2008 03:50
[SOLVED] Background Image Help	RZX Developer	Web Page Design	4	Dec 12th, 2007 09:39
[SOLVED] Fixed Background Image?	Jack Franklin	Web Page Design	4	Oct 7th, 2007 19:45
Problem with my footer background image in IE	dthomas31uk	Web Page Design	3	Jul 1st, 2007 12:49

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] div background image problem in ie