CSS Bug?

Hello All, I’m not new to this forum but have been an unregistered “reader” for the past 2 years. I recently started working on a new design and coded it in CSS. Now I have encountered a problem on ie browsers (Version 8.0.6001.1886). The problem doesn’t appear on anyother browser nor internet explorer with a higher version of the one above. If you go to the link below you will see exactly what I mean (the logo on the left doesn’t sit in line with the grey header).

I would love if anyone could guide me in the right direction or show me where I’ve gone wrong.

tmason.co.uk/ms

Many Thanks,

Tom

Does it in IE7 too.

Thank you for that information.

This means it must be appearing incorrectly from 8.0.6001.1886 and below. I have version 8.0.7600 on another laptop which was the next build released after 6001 and It displays it correctly… hmmm

try setting padding:0; for the body, html.
you’ve only set margin to zero.

it showing problem in IE7 also.

because you have coded it wrongly.

acording to your design, the div containing logo should come first in your code.

but you have inserted that div after your navigation.

vineet

Thanks again, made the change but hasn’t made any effect. :frowning:

I placed the div just below the nav and it completely changes the whole page. I see I’ve done something wrong now but don’t know what It was. If I place the logo div before the nav it shows correctly.

A little help please:)

try this code


html, body {
	margin: 0px;
	background: #FFFFFF;
	min-height: 100%;
    width: 100%;
    height: 100%;

}

.container {
width: 717px;
margin: auto;
}

#header_bg {
	background: url(../images/header_bg.gif);
	width: 100%;
	height: 80px;
}

#header_logo {
	background: url(../images/logo.gif);
	width: 220px;
	height: 214px;
	top: 0px;
	left: 0px;
	display:block;
	float:left
}

#nav {
	background: url(../images/nav.gif);
	width: 490px;
	height: 123px;
	float: right;
	margin-top:25px;
	clear:right;
	display:block;
}

#content {
	width: 707px;
	height: 100%;
	margin-left: 10px;
}

#slogen {
	background: url(../images/slogen.gif);
	width: 490px;
	height: 45px;
	float: right;
	margin-top: 20px;
	margin-right: 0px;
}

#footer {
position:absolute;
bottom:0;
   width:100%;
   height:95px;
   overflow:hidden;
}

#footer_shadow {
	background: url(../images/footer_shadow.gif);
	width: 100%;
	height: 10px;
}
#footer_bg {
	background-color: #5f6162;
	height:85px;
	width:100%;
	margin-bottom:0px;
}

#footer_right 
{
	float:right;
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
	color:#FFF;
	margin-top:5px;
	text-align:right;
	height:80px;
	}
#footer_right a
{
	color:#FFF;
	text-decoration: none;
}
#footer_right a:hover
{
	text-decoration:underline;
	color:#FFF;
}

#footer_left
{
	float:left;
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
	color:#FFF;
	margin-top:5px;
	margin-left:10px;
}

#page_title {
	margin-top:10px;
	margin-left:10px;
	overflow:hidden;
	clear:both;
	}

#page_title_bg {
	background-color: #5f6162;
	height: 8px;
	width:100%;
	max-width:717px;
	margin-top: 8px;
	margin-left:5px;
	}

#page_title_text {
	position:static;
	background-color: #FFF;
	font-family: arial;
	font-size: 18px;
	font-weight:bold;
	color: #5f6162;
	float:left;
	margin-right:5px;
}

/* on select background: #ffaf60;*/
.nav_button {
	float: left; 
	font-family: arial;
	font-size: 18px;
	color: #5f6162;
	text-decoration: none;

}


.nav_text {
	text-align: center;
	margin-top:18px;
	font-weight:bold;
}

.nav1 {
	width: 162px;
	height: 61px;
	margin-left: 1px;
}

.nav1:hover {
	background: #ff9933;
	width: 162px;
	height: 61px;
	margin-left: 1px;
	color: #FFFFFF;
}

.nav2 {
	width: 162px;
	height: 61px;
	margin-left: 1px;
	margin-top:1px;
}

.nav2:hover {
	background: #ff9933;
	width: 162px;
	height: 61px;
	margin-left: 1px;
	color: #FFFFFF;
}

#icons {
	margin-top:0px;
	margin-right:0px;
	float:right;
}



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>


<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>MS Discos - Professional Wedding &amp; Event DJs...</title>
<link type="text/css" rel="stylesheet" href="css/style.css">

</head><body>
<div id="header_bg">
<div class="container">
<div id="header_logo"></div>
<div id="slogen"></div>
<div id="nav">
<a href="#" title="Home">
<div id="menu1" class="nav_button nav1">
<div class="nav_text">Home</div></div></a>
<a href="#" title="About Us">
<div id="menu2" class="nav_button nav1">
<div class="nav_text">About Us</div></div></a>
<a href="#" title="Services">
<div id="menu3" class="nav_button nav1">
<div class="nav_text">Services</div></div></a>
<a href="#" title="Portfolio">
<div id="menu4" class="nav_button nav2">
<div class="nav_text">Portfolio</div></div></a>
<a href="#" title="Contact Us">
<div id="menu5" class="nav_button nav2">
<div class="nav_text">Contact Us</div></div></a>
<a href="#" title="Get A Quote">
<div id="menu6" class="nav_button nav2">
<div class="nav_text">Get A Quote</div></div></a>
</div>

<div id="page_title">
<div id="page_title_text">WELCOME TO MS DISCOS&nbsp;</div>
<div id="page_title_bg"></div>
</div> 
<div id="icons"><img style="border:0;width:16px;height:16px" src="images/print.png" alt=""></div>
</div>

<div id="content">
  <div id="main"><p>CONTENT GOES HERE</p>
  </div>
</div></div></div>
<div id="footer">
<div id="footer_shadow"></div>
<div id="footer_bg"><div class="container"><div id="footer_right"><a href="#" title="Home">Home</a> | <a href="#" title="About Us">About Us</a> |  <a href="#" title="Services">Services</a> |  <a href="#" title="Portfolio">Portfolio</a> |  <a href="#" title="Contact Us">Contact Us</a> |  <a href="#" title="Get A Quote">Get A Quote</a><br><br>Website Managed By <a href="#" title="HighTideOnline">HighTideOnline</a><p><a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="images/vcss-blue.gif" alt="Valid CSS!"></a>  <a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="images/valid-html401-blue.png" alt="Valid HTML 4.01 Transitional"></a></div>
<div id="footer_left">Copyright &copy; 2010 MS DISCOS<br>Company Number: 00000000<br>PLI Number: 00000000</div></div></div></div>

</body></html>

vineet

I think you need to make the container a little bit bigger, it might be just too tight a fit in IE. Even a few pixels can make a difference.

whatever you’ve just done (16:28 UK time) has improved it a bit in IE7, but the content goes here is off to the side now.

Ok I’ve tryed the new code. It works, I altered where the container finishes however I’ve now encountered a problem with the page_title “Welcome to…” of which the grey bar should be in the center of the text and to the right.

Try margin:auto for the content div. Web developer toolbar is acting up for me just now, so I can’t check it, but it might help

Okay in IE7 now. 16:34

Ah, apart from what you just said, in FF.

MS Discos text and the grey bar.
In IE7 the text appears above the line, to the right. and looks okay.
In FF it appears next to it and doesn’t look as good.

To get the IE appearance, try deleting the float it currently has. Might mean you have to play with the grey line again to ensure it is under it. (I can’t tell, with WDT acting up on me.)

Or make the grey line a border on the div both it and the current line are in.

Ok guys, many thanks, Problem is SOLVED!!.

I’ve updated my localhost version and it is all working great. Many Thanks to you guys :slight_smile: