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
 
Have you fixed this as after having a 2 min look around the site I cant find any scrollbars in the yellow area you speak of.

Win7 RC - IE 8
 
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?
 
hargi said:
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?
Click to expand...

Mine does, but you need to make some more changes to your CSS. You have width 100% for your nav but also specific a margin left, get rid of the margin or dont use 100% width.

Also, specifying margins ala margin-left:20; is 20pt, not pixels. Be careful mixing your units.
 
Last edited:
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;
}
 
Theres still something weird going on. I don't like the missing H1 tag. That is above the header? That doesnt show up.. why is it miles away?

Also, your menu in IE has a 30pt margin applied to the left hand side. I imagine it is inheriting it from somewhere.
 
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:
No problemo, glad you sorted it. Best thing to do is as you develop the site, keep checking in IE6 and FF to make it sure it appears the same in both.
 
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.
 
I started right at the transition from tables to css, roughly about 5/6 years ago. XHTML and CSS are my forté, I'm much more of a designer than a coder, but I do like PHP and dislike all database related activities.

All I can say is keep practising. Keep developing and with each new project you learn something new. http://www.tizag.com is my favourite tutorial site. Its a bit old now, but still does the job as a quick guide.
 
You need to change font to font-family in your CSS. You've specified font-size and font-weight separately, which is confusing the browser into ignoring the font selector - so everything is displaying in the default font.

Also, the yellow background and the blue/yellow stripes makes the text very uncomfortable for me to read. My eyes started to ache after about three paragraphs. I'd definitely go for something more conservative for a nursery site.
 
You must log in or register to reply here.
Back
Top Bottom