xhtml/css and IE/Firefox

[K]

Recently I've been bored so I started working on a simple website for myself.  I pretty much learned the basics of xhtml/css/php/mysql over the course of about 2 days, and I came up with a pretty good starting point that I'm happy with.  It looks spiffy in Firefox, but pretty terrible in Internet Explorer 6.

You can see the difference in these (large) images.

correct (firefox)
incorrect (ie6)
or at the website:
http://www.jwkfs.net

Note how in IE, the buttons are taller, and more spaced out.  In addition, the main content pane hides part of the footer and extends outside of where it should.

any tips? You can find my CSS here: main.css. Sorry if it's not too neat.

Oh, oh, please don't comment on the lack of suave graphics.  I have absolutely no graphics skills whatsoever. 

[Invert]

Try this:

Code Select Expand


#menu ul {
padding: 0em;
margin: 0em;
list-style: none;
}

#menu li {
margin: 0em 0em 0em 0em;
}


[MyndFyre]

Looks pretty good.

Try out:

Code Select Expand


#menu a
{
border-width: 1px;
border-style: solid;
border-color: #CCCCCC #888888 #555555 #BBBBBB;
color: #000000;
background-color: #EFEFEF;
text-decoration: none;
width: 94%;
}


Internet Explorer was keeping those menu items at full width which made the block element roll over.  

Then:

Code Select Expand


#wrapper
{
overflow: hidden;
display: block;
background-color: #F5F5F5;
color: inherit;
min-width: 900px;
width: 100%;
}

I added width: 100% to this style definition.  Internet Explorer didn't force the element to be any larger than 900px because it didn't get any wider.  So, instead of putting the footer on a line following the wrapper element, it stuck the footer in the next spot that it could fill.

You can usually see these by coloring suspect block elements' backgrounds.  For instance, see these:

Here you see FireFox has the footer in the desired location.
Here you see Internet Explorer has the footer in the incorrect location.

The last thing I did was to eliminate lists from your menus and instead use divs.  By default in Internet Explorer, divs have the same spacing as a normal inline element, but automatically have line breaks after them (as opposed to spans, which are always inline).  So I eliminated the <ul></ul> tags entirely, and changed your menu to:

Code Select Expand


<div><h2>:: main</h2></div>
<div><a href = "index.php">home</a></div>
<div><a href = "post/index.xhtml">post</a></div>
<div><a href = "mailto:[email protected]">contact</a></div>
<div><h2>:: navigation</h2></div>
<div><a href = "index.php?from=0">first post</a></div>
<div><a href = "index.php">latest post</a></div>
<div><a href = "archive.php?show=all">archive</a></div>
<div>
<a href="index.php?from=0">
previous 10 posts</a></div>
<div>
<a href="index.php?from=10">
next 10 posts</a></div>


Now it looks right!

I did one other thing:

Code Select Expand


body
{
margin: 0 0 0 0;
}

That makes the page spread to the entire width of the page.  Looks cleaner.

I've uploaded the full modifications to:
http://www.jinxbot.net/pub/jwkfs/
where you can see how the sites look nearly identical in IE and FireFox (with the exception that IE has scrollbars showing on the side and in the code block).  Note that the .css file is different from your production-style CSS file in that the gradient.png file is not in the /images/ subfolder.

[K]

Spectacular, thanks!  I appreciate you taking the time to go over all of that.

[MyndFyre]

Spectacular, thanks!  I appreciate you taking the time to go over all of that.

No problem.  Like I said, it's usually worth the trouble to highlight suspicious block elements (background-color: yellow; or something similar) to see if you're right about things not working correctly. 

I've generally found that I can usually make sites in IE and FireFox appear identical, more or less.  Of course I'm a tables guy.  But CSS and XHTML are both implemented fairly well in both browsers.  You just need to know how to tweak them.  ;-)

[K]

I'd like some input on the color/font/spacing/post format for the main content on my website.  As it stands right now, the design doesn't seem particularly condusive to readabilitly.

[Maddox]

I'd like some input on the color/font/spacing/post format for the main content on my website.  As it stands right now, the design doesn't seem particularly condusive to readabilitly.

conducive*

[K]

I'd like some input on the color/font/spacing/post format for the main content on my website.  As it stands right now, the design doesn't seem particularly condusive to readabilitly.

conducive*

So you think that the blue should be darker, and there should be a wider margin around the text? Thanks for your valuable input!