By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,724 Members | 1,655 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,724 IT Pros & Developers. It's quick & easy.

HTML to CSS conversion probs: IE and Mozilla

P: n/a
Hello everyone!

I have decided to convert over my table-based layout to pure CSS, to reduce
filesize and to increase my designs flexibility.

Apparently, I have run into quite a few problems. I wrote the code and tested
it in IE (6), but it looks awful in Mozilla (firefox). Im quite sure my
problems are basic, as there really isnt much code to the page. What I have is
the bare-bones layout of my website.

If you guys could help me in getting this to display how it should in both IE
and Mozilla, it would be greatly appreciated. Also, any tips you can give me
along the way would also be much appreciated.

My code is as follows:
--------------------------------

<html>
<head><title>CSS LAYOUT</title>
</head>
<body>
<style type="text/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;
}

-->
</style>
<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>
</body>
</html>
Jul 20 '05 #1
Share this Question
Share on Google+
12 Replies


P: n/a
Mikejacko86 wrote:
Hello everyone!

I have decided to convert over my table-based layout to pure CSS, to reduce
filesize and to increase my designs flexibility.


Please see this link for some help:

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

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/
Jul 20 '05 #2

P: n/a
In article <20***************************@mb-m21.aol.com>, mikejacko86
@aol.com enlightened us with...
Apparently, I have run into quite a few problems. I wrote the code and tested
it in IE (6), but it looks awful in Mozilla (firefox). Im quite sure my
problems are basic, as there really isnt much code to the page. What I have is
the bare-bones layout of my website.


One thing that matters a lot in many cases is the doctype, which I don't
see here. A doctype allows you to properly validate your html, which you
should always do.
It also tells IE (and other browsers?) whether to render in quirks mode
or not.
The doctype I usually use is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">

Once I gave your page the doctype, and tested it, it looks like crap in
IE, too. :)
When I took it out, it looked nice.

So, your problem is that without the doctype, IE is rendering in quirks
mode. Mozilla is rendering normally without the doctype.

Give your page that doctype and try again.
In case you're unaware, the doctype goes as the very first line in the
file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title> New Document </title>
and so on.

When you're done, go validate your html.
http://validator.w3.org/

HTH

--
--
~kaeli~
The best part of having kids is giving them back to their
parents.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 20 '05 #3

P: n/a
kaeli wrote:
One thing that matters a lot in many cases is the doctype, which I don't
see here. A doctype allows you to properly validate your html, which you
should always do.
Good advice.
It also tells IE (and other browsers?) whether to render in quirks mode
or not.
Correct information, unfortunately.
The doctype I usually use is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">


Poor choice. Use 4.01 Strict.

--
Mark.
Jul 20 '05 #4

P: n/a
On Thu, 10 Jun 2004 14:50:33 +0100, Mark Tranchant
<ma**@tranchant.plus.com> wrote:
kaeli wrote:
The doctype I usually use is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">

I can't offer what advantages using:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

would give, but it's my understanding that there are advantages. Anyway...
Poor choice. Use 4.01 Strict.


I agree - which is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Transitional is useful only if you require the use of deprecated elements
and attributes. If you can get by without them, use strict.
Jul 20 '05 #5

P: n/a
In article <dG*********************@stones.force9.net>,
ma**@tranchant.plus.com enlightened us with...
The doctype I usually use is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">


Poor choice. Use 4.01 Strict.


I use transitional so I have the leeway to put presentational stuff and
deprecated elements in the markup if I need/want to to support older
browsers or if I want to be lazy. *g*
And god forbid I use someone else's code for something - all the free
tool sites use this doctype and I don't feel like changing their code to
be compliant to strict. Actually, I think the vast majority of web sites
with anything more than text content use it.

--
--
~kaeli~
The more ridiculous a belief system, the higher probability
of its success.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 20 '05 #6

P: n/a
Hey guys,

Thanks for the advice. I have sinced worked on my site and have got it to
display properly in both IE and Mozilla! The HTML and CSS also validates
perfectly.

What I am now going to do (and should have done at the start) is to work on
making my markup more semantically correct, I currently cant see anything wrong
with it... someone told me it was "div soup," but I never knew <div> had a real
semantic purpose other than for what I am using it for, division.
Jul 20 '05 #7

P: n/a
On 10 Jun 2004 18:54:48 GMT, Mikejacko86 <mi*********@aol.com> wrote:
Hey guys,

Thanks for the advice. I have sinced worked on my site and have got it to
display properly in both IE and Mozilla! The HTML and CSS also validates
perfectly.

What I am now going to do (and should have done at the start) is to work
on
making my markup more semantically correct, I currently cant see
anything wrong
with it... someone told me it was "div soup," but I never knew <div> had
a real
semantic purpose other than for what I am using it for, division.

Post the URL, we can help...
Jul 20 '05 #8

P: n/a
>Post the URL, we can help...

http://www.mjnewsonline.com/temp/css
Jul 20 '05 #9

P: n/a
On 10 Jun 2004 21:18:59 GMT, Mikejacko86 <mi*********@aol.com> wrote:
Post the URL, we can help...


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


I wopuldn't call this "div soup" - but in order to replicate the
table-based design, you've needed to do all this. Your divs are semantic
and sensible IMO.

With the HTML, one complaint is that you've overused h1. I reserve h1 for
the heading for the whole page. As your headings top specific sections,
they'd be h2. Your "flashbanner" is really the page heading. I'd include a
text header as an h1 here, and set it absolutely positioned offscreen
(left: 1000px for example), for the sake of Google and accessibility.

In addition, I'd reserve the use of the p element for true paragraphs.
None of the uses of p in your document are really paragraphs, they're
short strings, not even sentences. Ex. <div id="loginInfo"><p>You are not
currently logged in.</p></div> : simply use the div, no need for p here.

Once the HTML is semantically correct, we move on to the CSS.

font-family : verdana, serif;

Odd choice. Verdana is a poor web font unless used at larger sizes, as any
replacement has such a smaller aspect it will be illegible at a reasonable
body text size for Verdana.
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html . For general body
text it's best to use a more common font which is closer to what common
user default font aspects are. (It's impossiblr to be precise in this, but
you can come close.)

font-size : .6em;

This is less than 2/3 the size of the user's preferred (or accustomed)
text size. It will likely be too small to read. Especially if the user
does not have Verdana - which is pretty small itself at .6em - this is
going to be impossible to read.

Summing both the above up, I think this would be an improvement in
usability: font-family : sans-serif; and no font-size declaration for
body. This may be constrained a bit by your box widths - but at least it
can be read.

Although your specific design demands would make this very difficult,
avoiding fixed-width layouts is a generally good idea for exactly the
reasons I just described. Not knowing how the content is being included, I
can't advise you on this.

For a fixed-width design, it's pretty smart. For many users, it's usable,
but it's still not quite as good as it could be.
Jul 20 '05 #10

P: n/a
>From: Neal

Great advice! Exactly what I was looking for.
With the HTML, one complaint is that you've overused h1.
:) I changed did this before reading this posting, so Im glad Im on the right
track.
In addition, I'd reserve the use of the p element for true paragraphs.
Ah, here is one thing that I have been unsure about, the semantic value of
<span>. See, I cant just have the text within the <div>'s because I need to add
padding, for this the text needs to be contained within an element as I dont
want to add padding to the <div>'s directly, as it adds to the width/height of
the content box, which just confuses the logic of my layout. So, should <span>
be used in these cases?
I think this would be an improvement in
usability: font-family : sans-serif;
Great idea, after having tried this I really like this font.
font-size : .6em;

This is less than 2/3 the size of the user's preferred (or accustomed)
text size. It will likely be too small to read.
My problem here is that it is my desired size for the websites design --
atleast for the lists contained within some of the content boxes.
Although your specific design demands would make this very difficult,
avoiding fixed-width layouts is a generally good idea for exactly the
reasons I just described.
The main reason why I cant use a liguid layout is because of the flash header I
am using.
For a fixed-width design, it's pretty smart.
Thanks!

For many users, it's usable,
but it's still not quite as good as it could be.


Getting there. ;)

Look forward to your reply, also check out the URL again, I have made some
changes.Thank you.
Jul 20 '05 #11

P: n/a
On 11 Jun 2004 21:08:33 GMT, Mikejacko86 <mi*********@aol.com> wrote:
In addition, I'd reserve the use of the p element for true paragraphs.
Ah, here is one thing that I have been unsure about, the semantic value
of
<span>.


Easy. It's semantically neutral. If it isn't better described with other
markup, div and span are fine.

But span is inline, it would not replace p. Div would. Span within a div,
ok.
See, I cant just have the text within the <div>'s because I need to add
padding, for this the text needs to be contained within an element as I
dont
want to add padding to the <div>'s directly, as it adds to the
width/height of
the content box, which just confuses the logic of my layout. So, should
<span>
be used in these cases?


No, use another div.
I think this would be an improvement in
usability: font-family : sans-serif;


Great idea, after having tried this I really like this font.


Actually, that's not a font, that's allowing the user to use their default
sans-serif font. By declaring this, they'll always have the font to do the
job!
font-size : .6em;

This is less than 2/3 the size of the user's preferred (or accustomed)
text size. It will likely be too small to read.


My problem here is that it is my desired size for the websites design --
atleast for the lists contained within some of the content boxes.


It is a problem. As an author, I'd rather have the problem of making it
work somehow than have the user have the problem of not finding my site
usable. Follow the money, you know.

I swear, you're better off tweaking the design to accomodate legible text
than to tweak the text to match an arbitrary design decision. Content is
king, and the text is the content delivery. So your primary goal is to
make the content usable, hmm?
Although your specific design demands would make this very difficult,
avoiding fixed-width layouts is a generally good idea for exactly the
reasons I just described.


The main reason why I cant use a liguid layout is because of the flash
header I
am using.


Well, consider making the flash header only 580px wide and centering it
within a div with a matching background-color. That way, it can flex to
whatever viewport width the user prefers.

The side benefit here is that the flash header will have less weight,
which means a quicker download.
Jul 20 '05 #12

P: n/a
>Easy. It's semantically neutral. If it isn't better described with other
markup, div and span are fine.

But span is inline, it would not replace p. Div would. Span within a div,
ok.
OK, great, thanks. :)
Actually, that's not a font, that's allowing the user to use their default
sans-serif font. By declaring this, they'll always have the font to do the
job!
:) I have now set this to: "arial, sans serif;"
So your primary goal is to
make the content usable, hmm?
I upped the font-size a bit and I think its now very legible.
Well, consider making the flash header only 580px wide and centering it
within a div with a matching background-color. That way, it can flex to
whatever viewport width the user prefers.


Im not too sure about this, I really like the look and feel of the site as it
is as a fixed-width site. I know that many pro CSS designers have made this
decision too, like ALA for example.

Thank you very much for your help! Check out the updates and tell me what you
think.
Jul 20 '05 #13

This discussion thread is closed

Replies have been disabled for this discussion.