...

View Full Version : Background Images Show Up in FF, but Not in IE



Cynical Eric
11-11-2009, 02:46 AM
Hi everyone! So our website is going to experience a redesign and I'm currently in the process of doing the PSD to HTML/CSS conversion. The problem is that the only thing that shows up in IE is the background and the header banner. Everything else that has so far been completed only shows up in Firefox and other browsers (despite validation being successful).

If you want some browser shots that show the browsers tested, click here: http://browsershots.org/http://toltecnet.com/zm2009/index.php

As you can see, just about anything that has to do with Microsoft isn't working with my skin, and again, it's completely validated. :(

Are there any specific things I need to add to my CSS for IE to work with my website and if so, how is it done?

drhowarddrfine
11-11-2009, 03:46 AM
Delete line 32 of your html and you're good to go.

Cynical Eric
11-11-2009, 04:41 AM
I'm sorry, but what exactly are you referring to when you say line 32? Notepad++ says that this would be the <tbody> element, which I deleted, but no success.

Oh and I also forgot to add a link to the current WIP home page. Sorry that I had to leave you guys to rely on the browser pics to find the link, but here it is:

http://www.toltecnet.com/zm2009/

Cynical Eric
11-11-2009, 10:10 PM
I seriously have never bumped a topic in the past (as much as I dislike to), but I'm getting this strange vibe that it's getting dug up into a day's worth of topics. lol

I've spent the day looking for similar issues on the internet and nothing is helping me out. I sometimes notice that IE is very special in a way that it needs its own CSS layout, is this the case here? I'll post my HTML and CSS code here:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
<LINK REL=StyleSheet HREF="main.css" TYPE="text/css" MEDIA=screen>
<title>the Zoomania Network Homepage</title>
</head>

<body>

<center>

<div id="contentwrapper">


<table border="0" cellpadding="0" cellspacing="0">
<tr><td class="zhead" align="center">
<div id="header"></div>
</td></tr>
</table>

<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr class="menubar">
<td class="menubar_l" width="600px"> </td>

<td class="menubar_m"> </td>
<td class="menubar_r"> </td>
</tr>
</tbody>
</table>
<br>

<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>

<td class="cat_top_l"> </td>

<td class="cat_top_r"> </td>
</tr>
<tr>
<td class="cat_body" colspan="2"> </td>
</tr>
<tr>
<td class="cat_bottom_l"> </td>

<td class="cat_bottom_r"> </td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="cat_top_l"> </td>

<td class="cat_top_r"> </td>

</tr>
<tr>
<td class="cat_body" colspan="2"> </td>
</tr>
<tr>
<td class="cat_bottom_l"> </td>
<td class="cat_bottom_r"> </td>
</tr>

</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="cat_top_l"> </td>

<td class="cat_top_r"> </td>
</tr>
<tr>

<td class="cat_body" colspan="2"> </td>
</tr>
<tr>
<td class="cat_bottom_l"> </td>
<td class="cat_bottom_r"> </td>
</tr>
</tbody>
</table>

</div>
</center>
</body>

</html>

CSS code:


body {
background-image:url(images/zm_bg.jpg);
background-repeat:repeat;
}

.zhead{
margin-left: auto;
margin-right: auto;
vertical-align: middle;
}

#header{
height: 172px;
width: 1099px;
background-image:url(images/zmmodern_header.png);
}

#contentwrapper{
width: 1099px;
text-align: center;
}

table{
width: 1102px;
margin-left: auto;
margin-right: auto;"
}

.menubar{
height: 36px;
}

.menubar_l{
width: 600px;
height:36px;
background-image:url(images/menubar_l.png);
}

.menubar_m{
height: 36px;
width: 40%;
background-image:url(images/menubar_m.png);
}

.menubar_r{
text-align: center;
width: 10%;
background-image:url(images/menubar_r.png);
}

.cat_top_l{
width: 40%;
height: 41px;
background-position: top left;
background-image:url(images/cat_top.png);
}

.cat_top_r{
width: 45%;
height: 41px;
background-position: top right;
background-image:url(images/cat_top.png);
}

.cat_body{
height: 220px;
background-image:url(images/cat_body.png);
}

.cat_bottom_l{
width: 50%;
height: 28px;
background-position: top left;
background-image:url(images/cat_bottom.png);
}

.cat_bottom_r{
width: 50%;
height: 28px;
background-position: top right;
background-image:url(images/cat_bottom.png);
}

Carolynne
11-11-2009, 10:44 PM
This might sound dumb, but maybe you need to put some content in those table cells, even just a non-breaking space or something.

I seem to remember a while back working on a website and there was something odd going on, and when I put some content in the cells, it changed everything. I honestly don't remember the details though, so take my advice with a grain of salt. :)

Cynical Eric
11-11-2009, 10:57 PM
The idea sounded very reasonable and I tried it out, but no luck :(. The text shows up in IE, but the background image remains absent.

met
11-11-2009, 11:16 PM
for what its worth



table{
width: 1102px;
margin-left: auto;
margin-right: auto;"
}


your css isn't valid. only thing i can see that's wrong.

I even checked to see if the images were saved as CMYK colour, as IE has problems displaying that, but no joy.

Carolynne
11-12-2009, 12:37 AM
You must have done something, because I see the backgrounds now in IE. I bet it was that quote mark.

Cynical Eric
11-12-2009, 12:41 AM
One thing I hate about web design is that sometimes it takes a while for a change you make via FTP to take effect on the client side, so sometimes you're not sure if that one "change" worked or not.

I actually had not seen those quotes and I'm not sure what I was thinking when I added them. I'm pretty sure that was the solution then since that's actually the last change I had made before taking a break.

Thank you met!

drhowarddrfine
11-12-2009, 02:17 AM
I'm sorry, but what exactly are you referring to when you say line 32?I don't know.


Oh and I also forgot to add a link to the current WIP home page. Sorry that I had to leave you guys to rely on the browser pics to find the linkExactly.

You will never get IE to attempt to perform like other far more modern browsers without a proper doctype. You should be using this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum