Problem displaying in IE - possibly float drop bug?

[olliesbooks]

Hey everyone.. I've recently finished basic design on my web site on my mac, and thought everything was good to go until I had a few friends check it using Internet Explorer.. on the main page, the blog section next to the side blurb "drops" down below where it is supposed to be. It shows fine in all other browsers, as I checked on browsershots.com. I've tried narrowing the blog, but invariably it appears in the same spot.

I'm really a novice at web design and especially CSS.. can anyone please help me with this problem?

I've attached 2 images, the first of my site in Firefox (how it is meant to appear), the 2nd in IE..

Thanks in advance!




My site: http://www.olliesbooks.com
CSS: http://www.olliesbooks.com/default.css

CSS for the blog/problem area:

#main {
width: 68%;
float: left;
display: inline;
margin-bottom: 50px;
margin-left: 10px;
font-size:85%;
background:url("http://www.blogblog.com/dots/bg_dots2.gif") -100px -100px;
padding:30px 10px 15px;

[StarLab]

Just a shot in the dark, but since your page is fixed width anyway, have you tried using pixel values instead of percentages?

Instead of "width: 68%;" try a fixed value "width: 570px;" (number is an example only)

I haven't come across this problem in IE7, but have seen it in IE6. Explorer is rendering things just a tad too wide, causing the content to get pushed down.

Perhaps check your margins and padding while you are at it.

If I had a debugging tool for IE, I could likely come up with a definite answer.

Perhaps someone else will have an actual solution for you.

[olliesbooks]

Thanks for your suggestion, Larry!
I've tried using pixels before, and it seems the same thing happens. No matter how narrow I make the blog section (even, for example, 50px), it gets pushed down in Internet Explorer.. which might mean the problem isn't width or margins/padding at all?

In which case I am soo lost..

[Lex94]

Just like Larry suggested try to set both columns to fixed width and make sure total width (2 columns + any margins/paddings) do not exceed total width of the page.

[olliesbooks]

Hi, thanks again - I amended the code to fixed width, even narrowed the blog to 470px - the sidebar is 250px, and set total width for the content area to 870px.


Here's a screenshot of the result:



And the CSS:
(for the blog)
width: 470px;
float: left;
display: inline;
margin-bottom: 50px;
margin-left: 10px;
font-size:85%;
background:url("http://www.blogblog.com/dots/bg_dots2.gif") -100px -100px;
padding:30px 10px 15px;
(for the sidebox)
/* Show only to IE PC \*/
* html .boxhead2 h2 {height: 1%;} /* For IE 5 PC */
.sidebox2 {
float: right;
width: 250px;
background: url(images/sbbody2-r.jpg) no-repeat bottom right;
font-size: 90%;
}
.boxhead2 {
background: url(images/sbhead2-r.jpg) no-repeat top right;
margin: 0;
padding: 0;
text-align: center;
}
.boxhead2 h2 {
background: url(images/sbhead2-l.jpg) no-repeat top left;
margin: 0;
padding: 22px 30px 5px;
font-family: Tahoma, Arial, sans-serif;
font-size: 1.2em;
color: white;
text-shadow: rgba(0,0,0,.4) 0px 2px 5px; /* Safari-only, but cool */
}
.boxbody2 {
background: url(images/sbbody2-l.jpg) no-repeat bottom left;
margin: 0;
padding: 5px 30px 31px;
}
.boxbody2 .more {
padding-top: 15px;
border-top: 1px dashed #CCCCCC;
}
(overall content)
width: 870px;
margin: 0 auto;
margin-top: 20px;


Appreciate the suggestions thus far - anyone else have any ideas?

[Costin Trifan]

I would suggest you to check again your html code and css styles. They're messy...

Tip:
You have defined two different divs with the same ID -> "content" like this:
<div id="content">....</div>
<div id="content">....</div>

And now you ask why the second div is shown below the first one??

Stop creating your (that is learning HTML and/or CSS) websites using Notepad...it's 2007, for god sake..

[Boogle]

OK you've got yourself in a mess with padding/margins and clumn widths. Basically FF and IE render margins/padding differently I don't know why and I don't know intricates but do this:

HTML:

<div id="mainContent">

       <div id="leftColumn"></div>
       <div id="rightColumn"></div>
       <div id="fixFloat"></div>
</div>

CSS:

#mainContent
{
width:870x;
display:inline;
}
#leftColumn
{
width:470px subtract (any left-margin/left-paddings) subtract 2px...
}
#rightColumn
{
width:250px subtract (any right-margin/right-paddings) subtract 2px...
}
#fixFloat
{
clear:both;
height:0;
margin: 0 none;
vsibility:hidden;
}

Just looking at what you've pasted olliesbooks I can see a few problems,

.boxbody2 {
background: url(images/sbbody2-l.jpg) no-repeat bottom left;
margin: 0;
padding: 5px 30px 31px;
}

I'm not positive on this but i'm sure when you wish to declare margins/paddings like you have thereyou must declare all four poles, i.e. N, E, S, W or TOP>RIGHT>BOTTOM>LEFT

Can someon clarify that so I don't look silly

Also you don't need float and display:inline use one or the other...

Also that extra div i put in there 'floatFix' is to make sure your following divs clear the floated ones before being displayed.

HTH
Boog's

[Costin Trifan]

I'm not positive on this but i'm sure when you wish to declare margins/paddings like you have thereyou must declare all four poles, i.e. N, E, S, W or TOP>RIGHT>BOTTOM>LEFT

Can someon clarify that so I don't look silly

no, there's no need to declare all those margin's or padding's values when using them. Declare only what you need and the browser will take care of the rest (that is the browser will use its own predefined values to be used in that case).

[Boogle]

Thanks, Costin... How did i know you'd inform me with the right info!?

Hope it's going OK anyways.

Boog's!

[cashcannon]

Yup, boxmodel in IE6 is different, and It's bloody irritating. I usually make a container div of 500px wide for content, and another div in that one of 460px wide and centered to ad spacing left and right.