Converting over to CSS: IE & Mozilla problems

[Mikejacko86]

Hello everyone,

I have decided to finally convert my HTML-based website to CSS-based. So far, I
have constructed the bare-bones layout of my website. Now, it looks perfect in
IE (6 latest), but looks awful in Mozilla (firefox latest).

I would really appreciate it if you guys could help me out, this would actually
be my first CSS-based layout.

The code is as follows:
--------------------------------

####
CSS
####

body {
background-color : #CCCCCC;
font-family : verdana;
}

#wrapper {
margin : auto;
text-align : center;
font-size : 10px;
}

#header {
text-align : left;
background-color : white;
padding : 5px;
width : 693px;
}

..flashBanner {
width : 683px;
height : 198px;
border : solid #CCCCCC 1px;
}

#navigation {
}

#navlist {
margin : 0;
padding : 0;
padding-top : 5px;
}

#navlist li {
display : inline;
list-style-type : none;
padding-right : 10px;
}

#centerSection {
width : 693px;
}

#headlines {
margin-top : 5px;
text-align : left;
background-color : white;
padding : 5px;
width : 230px;
height : 180px;
float : left;
}

#loginBox {
text-align : left;
width : 458px;
float : right;
}

#loginInfo {
margin-top : 5px;
background-color : white;
padding : 5px;
}

#loginGraphic {
margin-top : 5px;
background-color : white;
padding : 5px;
height : 153px;
}

#bottomSection {
text-align : left;
width : 693px;
margin-top : 5px;
}

#latestPostings {
background-color : white;
width : 340px;
height : 130px;
padding : 5px;
float : left;
}

#chatroom {
background-color : white;
width : 348px;
height : 130px;
padding : 5px;
float : right;
}

#footer {
background-color : white;
width : 693px;
padding : 5px;
text-align : left;
margin-top : 5px;
}

#####
HTML
#####

<div id="wrapper">
<div id="header">
<div class="flashBanner">
</div>
<div class="navigation">
<ul id="navlist">
<li>HOME</li>
<li>SUPPORT</li>
<li>DISCUSSION</li>
</ul>
</div>
</div>
<div id="centerSection">
<div id="headlines">
ddkjdl<br />affdaf
</div>
<div id="loginBox">
<div id="loginInfo">
mjhkjh
</div>
<div id="loginGraphic">
hkjh
</div>
</div>
</div>
<div id="bottomSection">
<div id="latestPostings">
latest postings
</div>
<div id="chatroom">
blah blah
</div>
</div>
<div id="footer">
©2004
</div>
</div>

 

[Mark Parnell]

Hello everyone,
G'day.

I have decided to finally convert my HTML-based website to CSS-based.

URL?

 

[Mikejacko86]

URL?

* www.mjnewsonline.com

I do wish to change it up a little during the CSS conversion, make it look a
little crisper, cleaner.

 

[Mark Parnell]

* www.mjnewsonline.com

Wow. Lots of errors in your HTML, though I doubt they are related.
http://validator.w3.org/check?uri=h...charset=iso-8859-1+(Western+Europe)&verbose=1
(http://tinyurl.com/35uxl)

A couple of errors in your CSS too, though they are related to your
misguided attempt to change the look of my scrollbars.

Try adding a full doctype to the top of the page (Google for "doctype
sniffing" for more information), and see what happens. It will quite
possibly break in IE as well, as you are probably relying on IE's bugs
to make it look right.

Haven't got time to look at your code closely to see what you have done
ATM, but may look later if someone else doesn't get there first.

 

[Brian]

I have decided to finally convert my HTML-based website to CSS-based.

So I learned by reading a similar post in ciwas. Please see this link:

http://www.cs.tut.fi/~jkorpela/usenet/xpost.html

 

[Mikejacko86]

Its not the current layout I would like people to focus on, its the conversion
I am attempting.

You can see it here: http://www.mjnewsonline.com/temp/css/ -- it doesnt display
properly in Mozilla. I want to work out those issues before I start adding in
the content etc.

 

[rf]

Its not the current layout I would like people to focus on, its the conversion
I am attempting.

You can see it here: http://www.mjnewsonline.com/temp/css/

Why didn't you tell us this in the first place instead of providing
incorrect information?

-- it doesnt display
properly in Mozilla. I want to work out those issues before I start adding in
the content etc.

Take it over to the validator and fix the errors first.

Cheers
Richard.

 

[Mikejacko86]

Why didn't you tell us this in the first place instead of providing

incorrect information?

I was pretty sure I did... I think this newsreader messed up on me a bit back
there.

Take it over to the validator and fix the errors first.

OK, done. It now looks better in Mozilla, but still messed up.

Cheers
Richard.

Thank you for your help, I appreciate it very much. I have been playing around
with the CSS and just cant get it to work properly in Mozilla.

 

[Mark Parnell]

OK, done. It now looks better in Mozilla, but still messed up.

Definitely looks better. Often with this sort of thing it is helpful to
turn borders on for all elements, so you can see exactly where they are
- especially when they are all white. In your style sheet, add

* {border: 1px solid green;}

Anyway, after a quick look:

Add clear: both; to your #footer rule - that should push it below all
the other sections.

Why are you using less than 2/3 of my available canvas?
http://www.allmyfaqs.com/faq.pl?AnySizeDesign

Verdana is not suitable for author stylesheets.
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

Don't specify font sizes in px - use % (100 of them) or em (1 of them).

It would probably be easier to see what you are trying to do with some
real content.

Sorry, again I don't have time for much more, but that should keep you
going for a bit.

 

[Mikejacko86]

Definitely looks better.

Add clear: both; to your #footer rule - that should push it below all
the other sections.

Yes, that worked like a charm.

Why are you using less than 2/3 of my available canvas?

Ah, I thought this may be a contraversial issue bringing a non-liquid design to
an HTML newsgroup! Maybe something best left alone for the time being?

Verdana is not suitable for author stylesheets.

I took your advice here, read the article and have decided to use arial.

Don't specify font sizes in px - use % (100 of them) or em (1 of them).

Done that too.

It would probably be easier to see what you are trying to do with some
real content.

You can see what my design currently looks like here:
http://www.mjnewsonline.com -- this whole thing is my project to bring my
website into compliance with web standards. Hopefully I will change up the
design a little along the way too, which I seem to be doing.

Sorry, again I don't have time for much more, but that should keep you
going for a bit.

I look forward to your further replies, thank you very much.

 

[Spartanicus]

http://www.mjnewsonline.com/temp/css/

Div soup, use semantically correct html instead. Make a habit of testing
your code sans css, it should be properly structured without css,
currently it's a bunched up mess.

 

[rf]

You can see what my design currently looks like here:
http://www.mjnewsonline.com -- this whole thing is my project to bring my
website into compliance with web standards.

Er, and what "web standards" would that be?

Cheers
Richard.