Member Avatar for DrewL

I just started the process of learning CSS web design so I’m fairly certain my code is a little messy but I was hoping someone might be able to help me out.

I am working on a website with a large background image. It works just fine in google chrome, firefox and IE8, but IE7 the background image shows up when you first open the page but disappears if you click away from the homepage and return.

Is this a bug in ie7? Does anyone know of a quick fix? I would hate to have to redesign the whole site.

Also, my logo at the top of my page’s location changes when I open it on a blackberry. Is there anything in my coding that can be fixed to prevent this?

Thanks!
Drew

CSS:

@font-face {font-family: "museosans_500"; src: url(css/fonts/museosans_500.otf) format("opentype");
}

body {
    font-family: "museosans_500", Arial, Helvetica, sans-serif;
    font-size:small;
    color:#000;
    background-color:#000;
    margin: 0;
    padding: 0;
    background-image:url(images/bg.jpg);
}

#container {
    width:800px;
    height: 500px;
    margin:0 auto;
    background-position:50px -30px;
    background-repeat:no-repeat;
    font-family: "museosans_500", "lucida grande", Helvetica, arial, sans-serif;
    }

#logo {
    width:299px;
    height:80px;
    background-image:url(images/logo.png);
    margin-top:35px;
    margin-left:10px;
    position: absolute
}

HTML

<body> 

<div id="container"> 
            <a href="index.html"><div id="logo" title="."></div></a> 
                          <div id="menu"> 
                                <a href="index.html">home</a>  
                                <a href="about.html">about</a>  
                                <a href="menu.html">menu </a>  
                                <a href="reservations.html">reservations</a>  
                                <a href="location.html">location</a> 
                          </div> 

                        <div id="content"><img src="images/tomato.jpg" </div> 
                    </div> 



    </div>
</body> 
 </html>
Edited by mike_2000_17 because: Fixed formatting
  • 3 Contributors
  • 2 Replies
  • 231 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Rajib Ganguly

Dani AI

Generated

Short expert summary: this is most often not “mystery IE voodoo” but a combination of invalid markup + an IE7 repaint/hasLayout quirk. ’s shorthand for the background helps, and ’s preload idea can help first-load latency — but the disappearing-on-return symptom usually means IE lost the element’s layout and didn’t repaint it. (cnblogs.com)

Immediate checklist (fast wins)

  • Validate the page (missing/ill-formed tags, bad nesting or a missing DOCTYPE will cause odd IE rendering). Run the page through the W3C validator and fix any markup errors (the snippet in the first post shows an unclosed image tag and a block element inside an anchor — both worth fixing). Also make sure a modern DOCTYPE is first on the page so the browser uses standards mode. (validator.w3.org)

Markup + structure fixes (logo + container)

  • Put the logo image in the HTML (important content → use <img>, not just a CSS background) and make the anchor a block so it behaves consistently on phones. Example pattern:
    <div id="container">
<a id="logo" href="index.html"><img src="images/logo.png" alt="Company name"></a>
...
</div>
  • Ensure the container is the positioned parent so the absolutely positioned logo stays put:
    #container { position: relative; zoom: 1; } /* zoom:1 triggers hasLayout in IE6/7 */
#logo { display: block; width:299px; height:80px; }
#logo img { width:100%; height:auto; display:block; }

    Using an actual <img> fixes mobile scaling/placement and is better for accessibility than a pure CSS background. (w3.org)

IE7-specific note and preload

  • If background/blocks still “vanish” after navigation, trigger hasLayout on the containing element (examples: give it a width/height, or use zoom:1 inside an IE-only rule). That forces a repaint and cures the classic “peekaboo” rendering bugs. Preloading the background (CSS trick or modern <link rel="preload" as="image">) helps initial load but won’t fix layout-induced repaint bugs on its own. (cnblogs.com)

If problems persist after these changes, post the validated HTML (validator report) and a screenshot of IE7’s dev tools/document mode; that will make the remaining cause obvious.

Recommended Answers

All 2 Replies

Member Avatar for mikeandike22

do you have a live version of this or something I dont see anything terribly wrong with the code especially regarding the body background image. I might suggest just putting the image in a div with an img tag and then preloading it in the css so id have like
<container>
<img />
<header></header>
<content></content>
<footer></footer>
<div id="preload">
</div>

#preload{background: url(img);display:none;}

Member Avatar for Rajib Ganguly

hi,

this is not a problem, it a bug for IE7
please replace the code, and try.

body {

   font-family: "museosans_500", Arial, Helvetica, sans-serif;
   font-size:small;
   color:#000;
   background-color:#000;
   margin: 0;
   padding: 0;
   background:url(images/bg.jpg);
}

Hope its ok now.

Edited by Rajib Ganguly because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.