views:

424

answers:

1

I have two nested divs that are supposed to both be 400 pixels tall. The sidebar div shows up correctly in Chrome and Firefox, but in Internet Explorer 8 I'm having trouble getting it to be wide enough AND tall enough due to Internet Explorer's screwed up box model.

I've tried using the box model hack to fix it, but it didn't appear to do anything, so I removed it. I tried using a fixed width on the sidebar Internet Explorer hack by calculating how much 19% of 880 (the width of the #container div) was (it was 168 pixels + the 20 pixels for the left and right padding = 188 pixels), but that didn't appear to change anything, it was the same size in Internet Explorer.

How do I make this web page to look the same in Internet Explorer as it does in Firefox and Chrome? I'm a beginner to this box model hacking.

The source code can be found here: http://68.82.27.200/alienscientist/.

Also, the top menu isn't wide enough, and the header isn't tall enough, in Internet Explorer. I haven't gotten to trying to fix that yet but can the fix for the sidebar be applied to those?

+2  A: 

The Box Model problem shouldn't be an issue in IE8 if you use a strict doctype. I can see you've declared a strict, but a few issues at the top of your html could be cancelling this:

<!--  BEGIN HTML HEADER -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" class="webkit safari safari4 mac">

I think the doctype line should be at the top, rather than a comment. You're missing the xml:lang and lang attributes on the html node, which also shouldn't have a class (put those classes on body).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

That's mostly just an educated hunch, but try changing it and see if the problem fixes.

adam
Holy greenbeans, lucifer! It worked! THANK YOU!!!
Alex C
Could you mark it as the accepted answer? Thanks!
adam
Done. Sorry, somewhat new to stackoverflow lol.
Alex C