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
  • 170 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Rajib Ganguly
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.