Valhalla Legends Forums Archive | Web Development | xhtml/css and IE/Firefox

AuthorMessageTime
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.  ;)
June 1, 2006, 5:16 AM
Invert
Try this:

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

#menu li {
margin: 0em 0em 0em 0em;
}
[/code]
June 1, 2006, 4:43 PM
Myndfyr
Looks pretty good.

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

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

Then:
[code]
#wrapper
{
overflow: hidden;
display: block;
background-color: #F5F5F5;
color: inherit;
min-width: 900px;
width: 100%;
}
[/code]
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]
<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:admin@jwkfs.net">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>
[/code]

Now it looks right!

I did one other thing:
[code]
body
{
margin: 0 0 0 0;
}
[/code]
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.
June 1, 2006, 5:30 PM
K
Spectacular, thanks!  I appreciate you taking the time to go over all of that.
June 1, 2006, 7:33 PM
Myndfyr
[quote author=K link=topic=15103.msg153607#msg153607 date=1149190380]
Spectacular, thanks!  I appreciate you taking the time to go over all of that.
[/quote]

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.  ;-)
June 2, 2006, 6:37 AM
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.
June 3, 2006, 4:40 AM
Maddox
[quote author=K link=topic=15103.msg153735#msg153735 date=1149309635]
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.
[/quote]
conducive*
June 10, 2006, 9:46 AM
K
[quote author=Maddox link=topic=15103.msg154173#msg154173 date=1149932814]
[quote author=K link=topic=15103.msg153735#msg153735 date=1149309635]
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.
[/quote]
conducive*
[/quote]

So you think that the blue should be darker, and there should be a wider margin around the text? Thanks for your valuable input! :)
June 10, 2006, 6:12 PM

Search