2 replies [Last post]
joelsjet
joelsjet's picture
Offline
newbie
Australia
Last seen: 8 years 25 weeks ago
Australia
Timezone: GMT+10
Joined: 2013-07-16
Posts: 9
Points: 15

Hi all,

Some issues with IE7 Background not showing on the left side.
Here is a pic:
IE7 Website.jpg
Here is the Relevant CSS:

.background{
	width:100%;
	height:100%;
	position:absolute;
	background-image:url('../images/bg_body.gif')
 
}
 
.body{
	position:relative;
	margin:0 auto;
	width:720px;
	background-color:#ffffff;
	padding:20px;
}
 
html, body{
    margin: 0; padding: 0; border: 0; 
}

And the HTML with the text taken out to simplify:
<div class="container">
	<div class="background">
	</div>
	<div class="body">
		<p class="centerimg">
		<img alt="The Greenhouse" height="123" src="images/logo.jpg" width="551"></p>
		<div class="navigation">
			<ul>
				//NAVIGATION BAR STUFF
			</ul>
		</div>
		<br>
		//All My TEXT
	</div>
</div>
 
</body>
 
</html>

Thanks Guys

Joel

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

dupe post deleted

I dumped your duplicate post.

cheers,

gary/mod

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Only guessing

Since I'm on a modern OS at the moment, I can't see the effect in IE. You also over-did the minimization a bit. We can't see the images, and a bit of typical text (lorem ipsum, e.g.) would help.

Here are some bits and pieces that tend to help IE (and FF too in this case).

<!DOCTYPE html>
 
<html>
<head>
  <meta content="text/html; charset=utf-8"
        http-equiv="Content-Type">
 
  <title>test document</title>
 
  <style type="text/css">
/*<![CDATA[*/
 
  h1 {
    text-align: center;
    }
 
  .background{
    background: url('images/bg_body.gif') yellow;
    height:100%;
    left: 0;
    position:absolute;
    top: 0;
    width:100%;
    }
 
  .body{
    position:relative;
    margin:0 auto;
    width:720px;
    background-color:#ffffff;
    padding:20px;
    }
 
  html, body{
    margin: 0;
    padding: 0;
    border: 1px solid black;
    height: 100%;
    position: relative;
    width: 100%;
    }
 
  /*]]>*/
  </style>
</head>
 
<body>
  <div class="container">
    <div class="background"></div>
 
    <div class="body">
      <h1 class="centerimg"><img alt="The Greenhouse"
           height="123"
           src="images/logo.jpg"
           width="551"></h1>
 
      <div class="navigation">
        <div style="margin-left: 2em">
          <ul>
            <li>//NAVIGATION BAR STUFF</li>
          </ul>
        </div>
      </div>
 
      <p>//All My TEXT</p>
    </div>
  </div>
</body>
</html>

If this doesn't help, be a little more specific in your description and upload or link to your images. BTW, an empty element holding a bg image is a poor practice.

I would also point out that IE7 is merely a bug fix for IE6 and has been obsoleted by IEs 8, 9, and 10. Unless the client is throwing scads of AUDs at you, IE7 should be ignored.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.