IE 6 weird scroll bars

hargi

hargi

hargi

Associate
Joined
19 Jul 2006
Posts
1,847
Hi,

Can some one have a look at this in IE
http://www.georgedent.darlington.sch.uk/index.html

Everything looks ok in safari, Firefox and Opera but in ie the yellow area has scrollbars ????

CSS
Code: 
@charset "UTF-8";
/* CSS Document */

body
{
	text-align:center;
	background: #0006B7 url("stripe1.png") repeat;
	margin: 20px auto;
}

#container 
{
	border:#FFF solid;
	border-width:2px;
	text-align:left;
	margin: 0px auto;
	width: 850px;
	background-color:#f4ec00;
	overflow:auto;
	
}

h1 
{
	font: calibri, mangal, "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-indent: -9999px;/*add text header for if user does not allow CSS otherwise text is well to the left*/
	position:absolute;
}

h2
{
	font: calibri, mangal, "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:20px;
	font-weight:bolder;
	color:#0006B7;
}
h3
{
	font: calibri, mangal, "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-align:center;
	font-size:20px;
	font-weight:bolder;
	color:#0006B7;
}
	
#header
{
	padding: 1em;
	font: mangal, "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:24px;
	text-align:center;
	
}
#header img
{
	display:block;
	margin:5px auto;
}

ul#nav
{
	font: calibri, mangal, "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-left:20;
	padding-left:0;
	line-style-type: none;
	background:#0006b7;
	float:left;
	width:100%;
}

ul#nav li
{
	font: calibri, mangal, "Trebuchet MS", Arial, Helvetica, sans-serif;
	display:inline;
}

ul#nav a
{
	display:block;
	float:left;
	padding: .5em .9em;
	text-decoration:none;
	color:#f4ec00;
	background:#0006b7;
	border-right: 1px solid #fff;
	
}
ul#nav a:hover
{
	color:#0006b7;
	background:#f4ec00;
}


#content
{
	font: calibri, mangal, "Trebuchet MS", Arial, Helvetica, sans-serif;
	float:left;
	width:820px;
	margin-left:20px;
	margin-right:25px;
	padding: 15px 0;
}
#content img
{
	display:block;
	margin:5px auto;
	border:#0006B7 solid;
	border-width:2px;
}


#footer
{
	clear:both;
	margin: 0 auto;
	padding-top: 20 px;
	padding-right:10px;
	padding-bottom:20px;
	width:850px;
	text-align:right;
	color:#f4ec00;
}
TIA
 
Gord
Taking that out gets rid of the scroll bars in IE but the menu bar displays to far to the right.
Also if i look at it now in Firefox the main content has now got no yellow background?
 
Cheers for the help
got rid of the content div altogether and done some of the css ajustments new CSS

Just working on the index page at the moment.
Displays ok in firefox
But i cant get the nav bar to be correct in IE still

Code: 
@charset "UTF-8";
/* CSS Document */

body
{
	text-align:center;
	background: #0006B7 url("stripe1.png") repeat;
	
}

#container 
{
	border:#FFF solid;
	border-width:2px;
	text-align:left;
	margin: 0px auto;
	width: 850px;
	background-color:#f4ec00;
	
}

h1 
{
	font: calibri, mangal, "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-indent: -9999px;/*add text header for if user does not allow CSS otherwise text is well to the left*/
	position:absolute;
}

h2
{
	font: calibri, mangal, "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:20px;
	font-weight:bolder;
	color:#0006B7;
}
h3
{
	font: calibri, mangal, "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-align:center;
	font-size:20px;
	font-weight:bolder;
	color:#0006B7;
}
	
#header
{
	padding: 1em;
	font: mangal, "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:24px;
	text-align:center;
	

}
#header img
{
	display:block;
	margin:5px auto;
}

ul#nav
{
	font: calibri, mangal, "Trebuchet MS", Arial, Helvetica, sans-serif;
	padding-left:0px;
	line-style-type: none;
	background:#0006b7;
	float:left;
	width:100%

}

ul#nav li
{
	font: calibri, mangal, "Trebuchet MS", Arial, Helvetica, sans-serif;
	display:inline;
}

ul#nav a
{
	display:block;
	float:left;
	padding: .5em .9em;
	text-decoration:none;
	color:#f4ec00;
	background:#0006b7;
	border-right: 1px solid #fff;
	
}
ul#nav a:hover
{
	color:#0006b7;
	background:#f4ec00;
}



#container img
{
	display:block;
	margin:5px auto;
	border:#0006B7 solid;
	border-width:2px;
}


#footer
{
	clear:both;
	margin: 0 auto;
	padding-top: 20 px;
	padding-right:10px;
	padding-bottom:20px;
	width:850px;
	text-align:right;
	color:#f4ec00;
}
 
Got rid of the H1 as its not needed, only used it as a while ago some one told me to do it with a indent of -9999 so if the css sheet didnt work then this would show.

I have no idea where that margin is coming from

Just put
Code: 
ul#nav
{
	[COLOR="Red"]margin:auto;[/COLOR]
	font: calibri, mangal, "Trebuchet MS", Arial, Helvetica, sans-serif;
	padding-left:0px;
	line-style-type: none;
	background:#0006b7;
	float:left;
	width:100%

}

and its sorted it.

Thanks for your help
 
Last edited:
Would normally do but developed it on a mac and only had opera and safari to test it on, till i got into work and saw what had happened.

On another note how long did it take you to get good at coding?
I mean I know kinda the basics, but get stumped on things like this and the mysql/php thread.
 
You must log in or register to reply here.
Back
Top Bottom