IE6 not displaying like other browsers 2

[jshurst]

I'm going to post the all of the stylesheet so hopefully someone can pin-point the problem. In IE6 the right side slides down to the bottom of the page (it should be just a two column site, centered in the middle of the page, with the left column the main column.

Anyway here it goes...

/*
Design by Free CSS Templates
[URL unfurl="true"]http://www.freecsstemplates.org[/URL]
Released for free under a Creative Commons Attribution 2.5 License
*/

* {
	margin: 0;
	padding: 0;
}

body {
	background: #FFFFFF url(images/img01.jpg);
	text-align: justify;
}

body, input, textarea, select {
	font: normal small Arial, Helvetica, sans-serif;
	color: #666666;
}

h1, h2, h3 {
	margin-bottom: 1em;
	font-weight: normal;
	color: #990000;
}

h1 {
	font-size: 2.2em;
}

h2 {
	font-size: 1.7em;
}

h3 {
	font-size: 1.3em;
}

p, blockquote, ul, ol, form {
	margin-bottom: 1.5em;
}

blockquote, ul, ol {
	margin-left: 3em;
}

blockquote {
	margin-right: 3em;
	font-style: italic;
}

ul {
	list-style-type: square;
}

a {
	color: #990000;
}

a:hover {
	text-decoration: none;
}

hr {
	display: none;
}

.hr {
}

img.left {
	float: left;
	margin: 0 15px 15px 0;
}

img.right {
	float: right;
	margin: 0 0 15px 15px;
}

/* Wrapper */

#wrapper {
	padding: 20px 0;
	background: url(images/img02.jpg) repeat-x;
}

/* Header */

#header {
	width: 720px;
	height: 170px;
	margin: 0 auto;
	background: url(images/img03.jpg) no-repeat;
}

#header h1, #header h2 {
	margin: 0;
	padding-left: 30px;
}

#header h1 {
	padding-top: 80px;
	font-size: 3em;
}

#header h2 {
	font-size: 1em;
	font-weight: bold;
	font-style: italic;
}

#header a {
	text-decoration: none;
	color: #FFFFFF;
}

/* Content */

#content {
	width: 720px;
	margin: 0 auto;
	background: #FBE8E8 url(images/img04.jpg) repeat-y;
}

/* Blog */

#blog {
	float: left;
	width: 424px;
	padding: 50px 16px 0px 30px;
	background: url(images/img05.jpg) no-repeat;
}

/* Post */

.post {
	margin-bottom: 20px;
	padding-bottom: 20px;
	background: url(images/img08.gif) no-repeat center bottom;
}

.post .title {
	margin-bottom: 15px;
	padding-left: 15px;
	border-bottom: 1px solid #D3B6AF;
	text-transform: uppercase;
	font-size: small;
	font-weight: bold;
}

.post .title a {
	text-decoration: none;
}

.post .title a:hover {
	text-decoration: underline;
}

.post .date {
	margin-top: -30px;
	padding-right: 15px;
	text-align: right;
	font-size: x-small;
}

.post .entry {
	padding: 20px 15px 10px 15px;
	line-height: 1.8em;
}

.post .meta {
	margin-bottom: 2em;
	padding: 0 15px;
	font-size: x-small;
}

/* Sidebar */

#sidebar {
	float: right;
	width: 204px;
	padding: 50px 30px 0px 16px;
	background: url(images/img06.jpg) no-repeat;
}

#sidebar ul {
	margin: 0;
	list-style: none;
}

#sidebar li {
	margin-bottom: 20px;
}

#sidebar li ul {
	padding-left: 5px;
	line-height: 1.4em;
}

#sidebar li li {
	margin: 0;
	padding-left: 12px;
	background: url(images/img07.gif) no-repeat left center;
}

#sidebar h2 {
	margin-bottom: 15px;
	padding-left: 5px;
	border-bottom: 1px solid #D3B6AF;
	text-transform: uppercase;
	font-size: small;
	font-weight: bold;
}

#sidebar a {
	text-decoration: none;
}

#sidebar a:hover {
	text-decoration: underline;
}

/* Search */

#search {
}

#search h2 {
}

#search form {
	padding-left: 20px;
}

#search #inputtext1 {
	width: 160px;
	margin-bottom: 10px;
}

#search #inputsubmit1 {
}

/* Archives */

#archives {
}

/* Categories */

#categories {
}

/* Blogroll */

#blogroll {
}

/* Meta */

#meta {
}

/* Footer */

#footer {
	width: 720px;
	margin: 0 auto;
	padding-top: 60px;
	background: url(images/img09.jpg) no-repeat;
}

#footer p {
	margin: 0;
	text-align: center;
	font-size: x-small;
	color: #FFFFFF;
}

#footer a {
	color: #FFFFFF;
}

Thanks in advance,

J

 

[Vragabond]

Can you put the page in question on a server so that we can look at it? It is really hard to say what exactly could be the problem without seeing the problem (and that would involve css, html and any images that are on your pages). So, a link to the actual page would be best, else we can only guess. Here are my thoughts.

All modern browsers (now I can say that, because IE7 is the modern IE6) do not expand the width of the parent, if the width is explicitly set. That means, that a container will be 500px wide if you tell it to be, regardless of how big the children in the container are. IE6 just expanded the width of the container to fit the contents. Now think of the following example.

You have two columns, 100px and 500px in a 600px container. They are floated next to each other. Everything works perfectly. Now you accidentally put a picture that is 103px wide in the first column. Due to common backgrounds you might not notice the problem, but the picture actually hangs over your first column for 3px. All modern browsers keep the page structure, because 100px and 500px are floated next to each in a 600px container and the 100px column has a picture that hangs over it. But IE6 is different. IE6 expands the first column to 103px. Here comes the problem, because 103px and 500px no longer fit the 600px so one (the one that comes later in the html code) is dropped down. And this I think is your problem.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[jshurst]

Thanks for the quick reply, here is the page in question...

http://www.freecsstemplates.org/preview/office

Thanks,

J

 

[Vragabond]

This page looks exactly the same in my FF(2) and IE6. Likewise it looks the same in IE7 and Opera9.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[jshurst]

Cool. I don't update this computer (it is my work computer) so I guess it is possible that an update would correct this issue. I'll do some more testing, but thank you so much for the quick response and helpful info.

J

 

[Aptitude]

I've just looked at the page in FireFox and IE6 and they are definatly different.

It looks like you are suffering from the Box Model Bug.

The best thing to do is to make the side bar a couple of pixels narrower.

This will make IE6 work, but will create a slightly wider gutter between the content and side bar on FireFox. Personally I think this slight visual difference is a lot more preferable than mucking about with a hack to sort the issue.

 

[jshurst]

So, it's not just my browser eh? Thanks for the update! I'll check on making that sidebar narrower.

Thanks!

J

 

[jshurst]

Ok, so I think this is the problem. If I take the image out from the background it looks ok. So I guess it is a little long? I'm thinking perhaps I should cut a little bit of the image out, but I'm sure that there is a way to correct the CSS, I just am not too good with it. I don't mind changing the margins (meaning the width is not very important to me) as long as it looks good.

#sidebar
{
	float: right;
	width: 204px;
	padding: 50px 30px 0px 16px;
	background: url(../images/img06.jpg) no-repeat;
}

Thanks,

J

 

[Vragabond]

Strangely enough, IE6 did show the page ok in the morning but not right now. I have no idea what has changed though.

I can see that you can solve the issue by making one of your columns 3px narrower. This strongly hints to the IE6 (and below) 3px bug, which usually appears with floating and margins. But this does not apply in your situation and it was impossible for me to identify where IE6 gets those extra 3px.

It surely is not the box model problem as you're using a correct and valid doctype and that fixed the box model for IE6.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[jshurst]

Hmm, well this is frustrating. It's not really the image and I've changed everything that I can see, but to no avail. Man, I really hate these browser differences.

I guess that displaying a warning message for IE6 users is not acceptable. Kinda stuck here.

Thanks for all the help. If anyone comes across the answer then please let me know.

Thanks!

J

 

[Vragabond]

Like it was said, reduce the width or any of the side padding on any of the floated columns (#blog or #sidebar) for 3px and all will be well. You might just opt for padding on the left of #blog or right of #sidebar, pushing text a bit further towards the corners.

If you really do not want to change the FF layout for 3px, then you can use IE conditional comments or a hack to push the 3px less width only on IE6.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[Aptitude]

It surely is not the box model problem as you're using a correct and valid doctype and that fixed the box model for IE6.

I thought in IE6 it only fixed it if you used a strict doc type? This page is Transitional.

 

[Aptitude]

I take that back. It is strict, but the frameset is transitional.

 

[jshurst]

Well, I have it working. No idea how. I kept changing things so fast, but I really don't care as long as it is good.

Thanks for everyones help on this. Stars all around...

J

 

[Vragabond]

Aptitude, IE6 uses the MS-almost-standards-mode with the correct box model if you have a complete and valid doctype. It can be html or xhtml of any flavour, as long as it is valid.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]