out of line image

*your free bump for the day*

i know you all hate IE, and must have had issues like this before, i really need some help on this!

I’ll have to take a closer look for the Firefox problem. That’s kind of weird.

For IE, you should check your width, margin, and padding on your left and right sidebars and your content in the middle. I usually find that when something like this happens, it’s because of too much padding, so I reduce the width instead of reducing padding.

I’ll take a closer look when I get the chance, unless someone else can get to it.

your right, it is weird!

As for the IE prob…
my css is
#content {margin-left: 268px; width: 420px; }
the margin left is so it is passed the left sidebar.
What is really weird is that i have tried reducing its width to 100px, and it still doesnt go in between the sidebars.

also tried with a reduced comments box, as this doesnt resize if the width of the content is less than it. still nothing.

i know it seems unlikely, but the way it looks, its like the content is in a div after the right sidebar, cause its perfectly in line, and not wrapping.

its really annoying!

hhmmm…

the gravatar seems to be getting lower and lower….

this is worrying me.

While I’m looking over this, the first thing you should know is a better way to set up your sidebars and content. Right now, the sidebars are both loading up before the content.

A better way to organize this would be to put left-sidebar > content > right-sidebar. Floating each one left beside each other.

i understand what you mean, and though that would be easy to do…right?! but for some reason, my right sidebar is ALWAYS coming below the content, whatever i do.

first off i moved the call for the second sidebar after the content div, but still in the page div. below content.

i then increased the size of the floater and page divs, in case they weren’t wide enough to fit the right sidebar in for some reason. still below content.

resized the floater and page divs and I tried putting the right sidebar in the content and floating it right. still below.

I know i should be able to work this out, and its probably really easy, but im stumped.

in basic terms i think my html should be like this…

<div id="header">
 </div>
   <div id="main"
    <div id="floater">
     <div id="page">
      <div id="left-sidebar">
      </div>
      <div id="content">
      </div>
      <div id="right-sidebar">
      </div>
     </div> --> for page
    </div> --> for floater
   </div> --> for main
  <div id="footer">
  </div>

im sure that should be right. but this still makes the right sidebar below the content, even when i change the css so there should be room, and ive tried floating them all left like you suggested, but nothing.

ok, IE problem fixed, just edited out some css that i thought might have been the problem(comparison with another site with similar layout) then put it back and it looks ok. could someone just confirm that it is not just on my machine that it appears fixed in IE please?

gravatar problem still exists

Yeah, it looks fine in IE. I know that we shouldn’t let our HTML define our style, but the other way is kind of hard to do.

I’m glad you got that working right.