Need layout to work in IE 6

Forum Moderators: not2easy

Message Too Old, No Replies

Need layout to work in IE 6

jessicap

1:25 am on Dec 5, 2009 (gmt 0)

I'm just beginning to work with CSS. The layout appears as I want it to in Firefox and IE8. However, for reasons I won't go into, I need the layout to also work in IE6. I don't know what part of the code I would even need to share (I'm that clueless!).

The site is arranged to be a two-column, fixed-width design for 1024x768 screen resolutions. The 2nd column sits at an even height to the first, but in IE6, the second column is pushed down so that it doesn't begin until the end of the first column (although it stays to the right; it isn't moving underneath it or anything).

Can someone tell me what code you would need to see in order to help or allow me to send a link in private maybe? I really need some help!

Thanks for any and all input!

SuzyUK

10:23 am on Dec 5, 2009 (gmt 0)

This sounds like the classic IE 3px float jog making the 2nd column "drop" below the first.

try this:

put that in the head of your page just before </head> and replace the ID with the ID or classname of your left column, it might not work - if it does you can create an IE6 CSS sheet and put in there, just ask more about this if you need it.

if that doesn't work, first can you tell us what Doctype you are using. that's the bit at the top of the code that looks something like:

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

Then can you tell us the HTML code for the two columns, with the CSS for them and any wrapper divs, and any/all widths involved.

OH and Welcome to WebmasterWorld! :)

jessicap

6:45 pm on Dec 5, 2009 (gmt 0)

Thanks for replying so quickly! :)

If I did it correctly, that didn't appear to make a difference. :( I tried it in the head of my page and then in my CSS sheet. I don't know what you mean by IE6 CSS Sheet; are you saying that I may need two separate sheets to achieve proper compatibility?

I'm afraid of breaking rules by posting too much code. So, if I didn't post enough below please tell me, and I'll get the rest up. Thanks in advance for your patience!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

/* Page */

#page {
width: 900px;
margin: 0 auto;
}

/* Content */

#content {
float: left;
width: 620px;
}

/* Sidebar */

#sidebar {
float: right;
width: 250px;
}

SuzyUK

9:44 pm on Dec 5, 2009 (gmt 0)

I don't know what you mean by IE6 CSS Sheet; are you saying that I may need two separate sheets to achieve proper compatibility?

Yes, you *might*. but let's figure it out first, if it is required you can just do it like I showed you if you don't want a separate sheet or if this is the only IE workaround needed in your code.

The fact that it didn't work means I guessed wrong and don't have enough information yet, sorry!

Thanks for being so polite regarding the charter rules, but don't be scared, no one ever got banned for posting too much code! At the worst a post will be put on hold and you'll be asked/helped to try again, or it may be that it's just put on hold for wee while so mods can snip it or at least snip specifics from it (tip: just use Lorem Ipsum text, or tell us where to enter it, and you'll be OK) In the main as long as it's not too much, we might trim it for you, which in itself is a form of help ;) but most times it will get left as is, as long as an effort has been shown that you attempted to summarise it.

Anyway back to the Question, with the code you posted it should not be showing the float drop as there is already a 30px margin for error. The float drop I spoke of will only likely occur when the two (or more?) divs inside the main container add up to 100% of the container.

here's your code in action, showing the 30px between the divs, try this and tell me if IE6 is now showing the same "drop"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
#page {
width: 900px;
border: 1px solid #000;
margin: 0 auto;
}
#content {
float: left;
width: 620px;
background: #ff0;
}
#sidebar {
float: right;
width: 250px;
background: #eee;
}
</style>
</head>
<body>
<div id="page">
<div id="sidebar">sidebar</div>
<div id="content">content</div>
</div>
</body>
</html>

then if it's OK, take this skeleton and add in your "extras" divs first, then internal content, add your bits in one by one (don't worry about colors and non structural thing) to this basic code until the problem appears then post your code, both HTML and CSS if you still have a problem

thanks
Suzy

jessicap

1:49 am on Dec 7, 2009 (gmt 0)

A-HA! Thank you sooo much; this helped me identify what went wrong. I was placing a search box into the sidebar, and it's width was larger than the sidebar itself. As soon as I shrunk it, everything went normal again. I feel foolish for overlooking that!

This solves that problem, but I'm sure within the next few days, I'll have another. HaHa....

Thank you for helping me while I'm learning CSS!