Layout help please.

http://cumrusky.dreyermachine.com/new is the stock design I wanted to use for my blog. This should look the same in both IE and Mozilla.

So tonight I tried to implement Wordpress to make a nice little blog and ran into a hurdle. Take a look at how it currently looks in mozilla and IE:

http://cumrusky.dreyermachine.com

basically, firebird is showing it how I want it...

IE is not liking #sidebar for some reason and you can see they're in totally different places if you crosscheck it...

I don't have anymore time to play with it tonight. So if someone could take a look into why it's doing that and post what I need to do to correct it -- I'd really appreciate it...

thanks,
Ted

Can you give me a screenshot of what IE is doing?

Hi Brady,

Yes here is a SS of what I see:

http://cumrusky.dreyermachine.com/images/problem.jpg

#sidebar {
background-color: transparent;
padding-left: 30px;
width: 255px;
height: 600px;
float: left
}

The first thing I would try is adding position:relative;
Also, why have you defined a height? that's a dangerous practice... You're better off slicing your background so that it can adjust to be any height depending on content amount/font-size.

Yeah I plan on taking the heights off once there is enough content that I can change it to auto and still like the way it looks. :)

I'll try position:relative and see if that makes any difference.

Edit: I added position relative but didn't see any difference in either browser. Would you recommend I just leave it?

That's weird, I took the 30px margin off of the first reference to #sidebar (not html>body #sidebar) and it went away. :confused:

Should I just accept this?

Does it look the same in both browsers now for you guys also?

edit: I'm heading out for tonight, I look forward to hearing what you guys say tomorrow... thanks though

Looks okay to me at 1024 x 768 in FF0.93/Win and IE6.

Since IE bombs on the box model, the 30px on the sidebar probably was too much for it -- a good reason why it doesn't render properly in IE, but does in others -- serve up one for the other:

#sidebar {
}
html>body #sidebar {
}


Write your code for IE in the first one, all other browsers in the second one, IE will have no idea.

IE6 gets the box model just fine.

This is a moot point, but if anyone will let me argue it with them it's Brady ;)


#sidebar {
}
html>body #sidebar {
}

Write your code for IE in the first one, all other browsers in the second one, IE will have no idea.
I think you've got it back-to-front mate. Serve every browser incorrect code and then correct all but three of them?? :eek: :confused:

Wouldn't you be better off setting the real value and then correcting the broken browsers?
eg:

#sidebar {
/* real values */
}
* html body #sidebar {
/* IE values */
}


I just think doing it the other way would cause hell for someone else who has to work with the code in 2-3 years time.

IE6 gets the box model just fine.
..provided you have a complete DTD (No abreviated doctypes) and don't serve the xml prologue.