IE 6 positioning problem

[flnazrael]

IE6 is rendering the main content div at the bottom of the page on a simple CSS template I used. It renders correctly in Firefox and IE7.

I'm completely inexperienced with CSS, so I don't know what portion of the code would be relevant to post. I'm sure it's something simple, if anyone would be kind enough to take a look.

Any pointers are greatly appreciated...

[edited by: SuzyUK at 9:16 am (utc) on Jan. 15, 2008]
[edit reason] removed site specifics [/edit]

[ratman7]

Hard to tell without seeing your css, but here are a few suggestions:

- Check your column width for the two sections (Welcome and Menu) to make sure they aren't too wide for their container. IE calculates box sizes differently sometimes.

- Try {float:right; } on the right column

- Sometimes you need to clear floats with IE6 - try {clear:right; } on the right column.

Hope that helps.

[flnazrael]

Btw...

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

html xmlns="http://www.w3.org/1999/xhtml"

[flnazrael]

Thanks for the suggestions...a little over my head, but I think I can implement them.

From what I can tell, this is the code that's creating the main content div.

<div id="colTwo" class="boxed">
<h2 class="title">Welcome</h2>
<div class="content">
<div class="special">

This is the stylesheet (/default.css):

body {
margin: 0;
padding: 0;
background: #FFFFFF url(images/img1.gif) repeat-x;
font-family: Georgia, "Times New Roman", Times, serif;
color: #3D515C;
}

img {
border: none;
}

h1, h2, h3 {
margin: 0;
padding: 0;
letter-spacing: -1px;
font-weight: normal;
font-style: italic;
color: #8F3844;
}

p, ul, ol {
margin-top: 0;
padding-top: 0;
line-height: 150%;
}

ul, ol {
color: #8F3844;
}

ul {
margin-left: 0;
padding-left: 0;
list-style-type: square;
list-style-position: inside;
}

ol {
margin-left: 0;
padding-left: 1em;
}

a:link, a:active {
text-decoration: none;
color: #8F3844;
}

a:visited, a:hover {
text-decoration: underline;
color: #3D515C;
}

/* Header */

#header {
height: 116px;
margin-bottom: 20px;
padding-top: 20px;
background: url(images/img2.gif) no-repeat center bottom;
}

#header * {
text-align: center;
text-decoration: none;
color: #8F3844;
}

#header h1 {
letter-spacing: -2px;
font-size: 48px;
}

#header h2 {
letter-spacing: normal;
font-size: 12px;
}

/* Content */

#content {
width: 700px;
margin: 0 auto;
}

#colOne {
float: right;
width: 240px;
}

#colTwo {
float: left;
width: 440px;
}

/* Footer */

#footer {
clear: both;
padding: 20px;
background: #F5EDEE url(images/img1.gif) repeat-x 0px -120px;
}

#footer p {
margin: 0;
text-align: center;
font-size: 11px;
}

/* Boxed */

.boxed {
}

.boxed .title {
margin: 0;
padding: 0;
}

.boxed .content {
padding: 20px;
background: url(images/img3.gif) repeat-x;
}

.boxed .image {
float: left;
margin: 5px 20px 0 0;
}

[SuzyUK]

flnazrael, Welcome!

the CSS code in itself does not show the problem, BUT your answer lies here:

- Check your column width for the two sections (Welcome and Menu) to make sure they aren't too wide for their container. IE calculates box sizes differently sometimes.

your CSS shows that the content should be no more than 700px wide, and that the two columns are 240px and 440px wide, adding to 680px this should work fine as there is a margin/leeway of 20px.. HOWEVER IE6 and below have a problem, they will not overflow the width but will expand a container to contain content that is wider than specified

then

.boxed .content {
padding: 20px;
background: url(images/img3.gif) repeat-x;
}

so if you have a ".boxed .content" element inside the right column (240px) it can not then contain anything that is wider than 200px because the 20px padding left and right will add to the width of the contents for containment purposes.

To help you find the answer, put temporary background colors onto the colOne and colTwo divs then take a look in FF/IE7 you should see that there is an element (hint: textarea) inside the right column which is overflowing the right column, except in IE6, which is making the whole right column wider instead of overflowing. When this column gets wider there is no longer any room for the two columns to sit side by side.

-------
The textarea width at the minute is being controlled by the "cols" attribute in the HTML, reduce it and problem is solved. A better solution might be to take control of the width of the form using CSS e.g.

#colOne form textarea {width: 95%;}

which means you do not have change the HTML.

regardless, The simple measure of putting background colors onto the two columns as an initial troubleshooting guide would've highlighted which column was too wide!

Alternatively a free screen caliper tool is useful in order to measure the width of the two columns (you need the background colors so you can 'see' them to measure them)

- Suzy

[flnazrael]

Thanks! I'll change the column width. Very much appreciated.