Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Background Images Show Up in FF, but Not in IE

    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://tolte...2009/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?

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Delete line 32 of your html and you're good to go.

  • #3
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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/

  • #4
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <!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:

    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);
    }

  • #5
    New Coder
    Join Date
    Jan 2005
    Location
    Northern California
    Posts
    13
    Thanks
    1
    Thanked 1 Time in 1 Post
    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.

  • #6
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #7
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    for what its worth

    Code:
    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.

  • Users who have thanked met for this post:

    Cynical Eric (11-13-2009)

  • #8
    New Coder
    Join Date
    Jan 2005
    Location
    Northern California
    Posts
    13
    Thanks
    1
    Thanked 1 Time in 1 Post
    You must have done something, because I see the backgrounds now in IE. I bet it was that quote mark.

  • #9
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!

  • #10
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Quote Originally Posted by Cynical Eric View Post
    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 link
    Exactly.

    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">


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •