3 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,

To start I'll show you my code and relevant css

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-US">
 
<head>
<meta content="en-au" http-equiv="Content-Language">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="css/classes.css" rel="stylesheet" type="text/css">
<title>The Greenhouse Homepage</title>
</head>
 
<body>
 
<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>
				<li><a href="index.html">Home</a></li>
				<li><a href="events.html">Events</a></li>
				<li><a href="contact.html">Contact</a></li>
				<li><a href="about.html">About</a></li>
			</ul>
		</div>
		<br>
		<p class="textdown50">The Greenhouse is your nursery and garden centre in 
		Toowoomba.We have been in buisness fo over 20 years and have built a strong 
		reputation for providing good customer service, in depth local knowledge 
		and competitve pricing. Our staff are professionals in there field and are 
		keen to help you with any inquireys that you have</p>
		<br>
		<h3>The Expo</h3>
		<a href="events.html">
		<img alt="Graden Expo" class="right border" src="images/expo.png"></a>
		<p>The greenhouse nursary and garden center is proud to present the inaugural 
		Darling Downs Garden Expo in 2013.</p>
		<p>Join other novice and avid gardeners in the Toowomba showgrounds over 
		the three days of 20th-22nd of September for a gardening extravaganza.</p>
		<p>Featuring presentations on landscaping, garden care, food as well as 
		many others from some of the industries leading experts in there field's. 
		As well as this there will be presentations and displays of some of the 
		latest developments in garden technology by some of the leading companies. 
		And last of all don't forget the expo specials available only to attendees.</p>
		<p>Our major sponsor is the department of enviroment and resourses managment.
		<span lang="en-au">
		<a href="http://www.derm.qld.gov.au/" target="_blank">Link</a></span></p>
		<p>For further details you can email us at</p>
		<p>expo@thegreenhousexpo.com.au</p>
		<br><br><br><br><br>
		<h6 class="textdown50">&#169; The Greenhouse Nursery and Garden Centre</h6>
		<p class="textdown25">
		<img alt="Valid HTML 4.01" src="images/valid-html401-blue.png">
		<img alt="Valid CSS" src="images/valid-css-blue.png"></p>
	</div>
</div>
 
</body>
 
</html>

That's the HTML index page of my site,the css is :
.centerimg{
 
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    }
 
.textdown50{
	margin-top:50px;
}
 
.textright25{
	margin-right:25px;
}
 
.textdown25{
	margin-top:25px;
}
 
.left{
 
	float:left;
	margin:3px;
}
 
.right{
 
	float:right;
	margin:20px;
}
 
.content{
 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	text-decoration: none;
	cursor: text;
	margin-top: 50px;
	margin-left: 15px;
}
 
.border{
 
	border: thin solid #C0C0C0;
}
 
.navigation ul{
 
	list-style-type:none;
	margin:0;
	padding:0;
	overflow:hidden;
}
 
.navigation li{
	float: left;
	text-align: center;
	list-style-type: none;
	padding:0px;
}
 
.navigation a:link, .navigation a:visited{
	display: block;
	width: 160px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #009900;
	text-align: center;
	padding: 10px;
	text-decoration: none;
	text-transform: uppercase;
	font-size: large;
}
.navigation a:hover, .navigation a:active{
	background-color: #026604;
}
 
 
.nav ul{
 
	list-style-type:none;
	margin:0;
	padding:0;
	overflow:hidden;
}
 
.nav li{
	float: left;
	text-align: center;
	list-style-type: none;
}
 
.nav a:link, .nav a:visited{
	display: block;
	width: 220px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #666666;
	text-align: center;
	padding: 10px;
	text-decoration: none;
	text-transform: uppercase;
	font-size: large;
}
.nav a:hover, .nav a:active{
	background-color: #969696;
}
 
.table{
	width: 100%;
	background-color: #009900;
	border:none
}
.table tr.alt td{
	background-color: #DDDDDD;
}
 
.table tr.alt2 td{
	background-color:#ffffff	
}
 
.list{
	list-style-type: circle;
}
 
.container{
	position:relative;
}
 
.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; 
}

Now this Works fine on IE8,IE9,IE10, Firefox(18,3.6) and Crome 24 and 28, However when I open it in IE7 it dosent disply the background image on the left side and it just continues the whit as if it disregards the div tags. If you need it I can post some images of the problem or upload the entire site,only 2 mb Smile

Please note I'm completely new to html and css (1 week), so go easy on me.

Thanks,
Joel

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

BUMP

Bump

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

A puzzlement

OK, I went to the legacy OS and IE. At first, IE7 did not show the background color (I added a color since I don't have the image) on the left side. So, I switched to quirks mode, which tells browsers to act stupid, and the left side bg showed up. So now I've confirmed your problem. Now I need to see what is causing the issue so I switch the document back to standards mode so I can fiddle with it. But, IE7 would not cooperate; it continued to show the bg on both sides. Reloading made no difference. I can no longer replicate your issue. So there's no way to diagnose.

Suggestion: Put the bg image on the body element, that's where it belongs anyway. Lose the empty .background element as a poor practice and go and sin no more.

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.

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

FIXED

Hi Gary,

Thanks mate, I moved it to the body tag and it's all good now.
Funny how I could sit there for hours trying to fix it, and you just saved the day in a few minutes flat.

Thanks Again,
Joel