clear:left browser compatibility

Jerry · Feb 12, 2004

I'm having trouble with my page layout.
My source code looks like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>something</title>
<link href="markup.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="top">Header</div>
<div id="leftcolumn">
<div>
<h3>Left Column </h3>
<p>article text here. article text here. article text here. article text
here. article text here. article text here. article text here. article text
here. </p>
<h3>Title</h3>
<p>article text here. article text here. article text here. article text
here. </p>
</div>
</div>
<div id="rightcolumn">Right Column </div>
<div id="centercolumn">
<div class="class1">
<h1>Main Topic</h1>
<ul>
<li>subtopic1</li>
<li>subtopic2</li>
<li>subtopic3</li>
<li>subtopic4</li>
<li>subtopic5</li>
<li>subtopic6</li>
<li>subtopic7</li>
</ul>
</div>
<div class="class2">
<h1>Main Topic 2</h1>
<ul>
<li>subtopic1</li>
<li>subtopic2</li>
<li>subtopic3</li>
<li>subtopic4</li>
</ul>
</div>
</div>
<div id="footer">Content for id "footer" Goes Here</div>

</body>
</html>

The CSS is:

#top {
background-color: #333333;
}

#leftcolumn {
float: left;
width: 240px;
background-color: #999999;
}

#centercolumn {
margin-left:246px;
margin-right: 246px;
}

#centercolumn ul {
list-style: none;
}

#centercolumn li {
display : block;
float : left;
text-align : center;
width : 15em;
}

#rightcolumn {
float: right;
margin:0px 0px 0px 0px;
width: 240px;
background-color: #999999;
}

#footer {
position:relative;
clear:both;
background-color: Black;
}

..class2 {

}

IE6 shows the page how I want the browsers to show. But this doesn't work
under Mozilla 1.6 and Opera 7.
Now, when I put a "clear:left" in ".class2", in Moz it looks fine, but this
time not with IE/Opera. I'm starting to get a headache here ...

Any help would be appreciated.

Jerry

DU · Feb 12, 2004

Jerry said:
I'm having trouble with my page layout.
My source code looks like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>something</title>
<link href="markup.css" rel="stylesheet" type="text/css" />

Where is markup.css?

</head>

<body>
<div id="top">Header</div>
<div id="leftcolumn">
<div>
<h3>Left Column </h3>
<p>article text here. article text here. article text here. article
text here. article text here. article text here. article text here.
article text here. </p>
<h3>Title</h3>
<p>article text here. article text here. article text here. article
text here. </p>
</div>
</div>
<div id="rightcolumn">Right Column </div>
<div id="centercolumn">
<div class="class1">
<h1>Main Topic</h1>

This is weird semantically-speaking or structurally speaking: you have
an h1 header inside a sub-div but the top-main div uses h3 div. Right
here, I think your webpage is not perfectly coherent.

<ul>
<li>subtopic1</li>
<li>subtopic2</li>
<li>subtopic3</li>
<li>subtopic4</li>
<li>subtopic5</li>
<li>subtopic6</li>
<li>subtopic7</li>
</ul>
</div>
<div class="class2">

..class1 and .class2 are not intuitive, not meaningful identifiers; using
intuitive, self-explanatory identifiers helps debugging, reviewing by
others, etc..

<h1>Main Topic 2</h1>
<ul>
<li>subtopic1</li>
<li>subtopic2</li>
<li>subtopic3</li>
<li>subtopic4</li>
</ul>
</div>
</div>
<div id="footer">Content for id "footer" Goes Here</div>

</body>
</html>

The CSS is:

#top {
background-color: #333333;

background-color:#333;
is faster to parse.

}

#leftcolumn {
float: left;
width: 240px;
background-color: #999999;
}

#centercolumn {
margin-left:246px;
margin-right: 246px;
}

#centercolumn ul {
list-style: none;
}

#centercolumn li {
display : block;

display:block implies that each individual list-item should be rendered
on a single individual line.

float : left;

I wonder why you need float:left here. Since the whole document is ltr,
then I fail to see the need for this css declaration. When I remove this
css declaration, I get no significant change in Mozilla 1.6 and no
change in Opera 7.50: only MSIE 6 for windows change... and it should
not change.

text-align : center;
width : 15em;
}

#rightcolumn {
float: right;
margin:0px 0px 0px 0px;

margin:0px;
is faster to parse

width: 240px;
background-color: #999999;
}

#footer {
position:relative;
clear:both;
background-color: Black;
}

.class2 {

}

IE6 shows the page how I want the browsers to show. But this doesn't
work under Mozilla 1.6 and Opera 7.

Readers of your post will have no reference to what is the rendering you
want; no concrete/reliable point of reference. FYI, the rendering varies
*a lot* in MSIE 6 with different scr. res. and browser viewport
dimensions. So, statements such as "IE 6 shows the page how I want the
browsers to show" relates to nothing concrete, nothing practically
comparable like a screenshot.

Now, when I put a "clear:left" in ".class2", in Moz it looks fine, but
this time not with IE/Opera. I'm starting to get a headache here ...

Any help would be appreciated.

Jerry

"looks fine" is another impossible statement to relate to; in the
absolute, it relates to nothing objective, quantifiable. As far as I can
see/understand you (and here, I could be very wrong), you want even
list-items (sub-topics 2, 4, 6) to appear sorta "aligned" in the right
column, under the "Right Column" div.

After some testing, I think your layout will always break when using
absolute length values (divs overlapping). Percentage values would avoid
this and make your webpage much more scalable.

DU

Mark Parnell · Feb 12, 2004

I'm having trouble with my page layout.
My source code looks like:

<snip mountains of code>

A URL would be much more helpful.

Jerry · Feb 12, 2004

Hi DU,

thanks for your reply.
Here is a sample image I want the layout:
http://www.geocities.com/staccb123/sample.gif

I know the page is not structurally correct, like the order of the <hX>tags. I
only put them in to markup the page a bit. Same for the column background colors.
What's important to me, or better to say, what my problem is, is the *layout
in the center column*. As you can see in the sample image I want some main
topics, followed by some sub-topics which are aligned from left to right over
some lines. That's why I used "float:left". The length of the subtopics
differ, so I want the text aligned to the center (in every <td>, when they
were in a table).
If I don't use "clear:left" in class2, Mozilla (Firefox 0.8) and Opera7 show
the "Main Topic 2" right after "subtopic7". But when use "clear:left" in
"class2", Opera & IE show a big "gap" between "subtopic7" and "Main Topic 2".
The "gap" depends on the length of the left column (that's why I also put in
left column into my sample).

Jerry

Jerry · Feb 12, 2004

A URL would be much more helpful.

Hi Mark,

sorry. I forgot to write the URL of the sample image:
http://www.geocities.com/staccb123/sample.gif

Jerry

Mark Parnell · Feb 12, 2004

http://www.geocities.com/staccb123/sample.gif

An image doesn't help much. Where's the actual page?

Jerry · Feb 13, 2004

An image doesn't help much. Where's the actual page?

http://www.geocities.com/staccb123/index.html

Jerry

DU · Feb 14, 2004

Jerry said:
Hi DU,

thanks for your reply.
Here is a sample image I want the layout:
http://www.geocities.com/staccb123/sample.gif

I know the page is not structurally correct, like the order of the
<hX>tags. I only put them in to markup the page a bit. Same for the
column background colors.
What's important to me, or better to say, what my problem is, is the
*layout in the center column*. As you can see in the sample image I want
some main topics, followed by some sub-topics which are aligned from
left to right over some lines. That's why I used "float:left". The
length of the subtopics differ, so I want the text aligned to the center
(in every <td>, when they were in a table).
If I don't use "clear:left" in class2, Mozilla (Firefox 0.8) and Opera7
show the "Main Topic 2" right after "subtopic7". But when use
"clear:left" in "class2", Opera & IE show a big "gap" between
"subtopic7" and "Main Topic 2". The "gap" depends on the length of the
left column (that's why I also put in left column into my sample).

Jerry

When you reply to someone about a technical post, best is to interleave
your reply so that the poster does not have to go back and forth to read
what was said and go back and forth to read what was replied.

#centercolumn li {
display : block;

display:block implies that **each** **individual** list-item should be
rendered on a single individual line.

Your explanation for that float:left does not make sense. And the
rendering in MSIE 6 is wrong obviously. Each list-item should be on a
single individual line.

DU

Mark Parnell · Feb 16, 2004

http://www.geocities.com/staccb123/index.html

Much better.

Now, you want it to look like it does in IE? With the
list items following each other, rather than all underneath each other?

Try adding

display: inline;

to your #centercolumn ul rule.

Why the Japanese character encoding, BTW?

Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
I need help fixing my website	2	Oct 15, 2023
Need help with code on website (noob)	2	Jul 18, 2022
Horizontal menu bar header	2	May 12, 2021
Justify-content not working	1	Mar 29, 2021
Help needed with code	5	Mar 7, 2021
Help with Visual Lightbox: Scripts	2	May 3, 2023
Recreating CNN.com	4	Aug 8, 2017

clear:left browser compatibility

Jerry

DU

Mark Parnell

Jerry

Jerry

Mark Parnell

Jerry

DU

Mark Parnell

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads