DIVs floating to left display incorrect if IE4

  • Thread starter =?ISO-8859-1?Q?Tom=E1=9A_Bedn=E1=F8?=
  • Start date
?

=?ISO-8859-1?Q?Tom=E1=9A_Bedn=E1=F8?=

Hi all,
did everone of you solve following problem:

a couple of div ( or table or spans ... what ever ) styled float:left;
display incorrect in ie4x. More specificly it doesnot warp to "next
row", it continues on to right, so the browser gets scrollbar, insted
of warping it.

here is the very simple htmlCode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<style type="text/css">
.floatLeft { float: left;}
.tblStyle { float:left; border: inset 1px; }
</style>
</head>
<body>
htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
<br><br>
<script type="text/javascript" language="JavaScript">
<!--
var i;

for ( i=0;i<20;i++ )
document.write('<table class="tblStyle" cellpadding="0"
cellspacing="0"><tr><td><img src=".." width="100"
height="100"></td></tr></table>');
//-->
</script>
<br clear="left">
htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
</body>
</html>


Does enyone know how make ie4 display it correctly or is there any
other way how to display unknown count of objects sidebyside without
using table?

Thanks a lot. Tomas

--------------------------------------------------------------
Tomas; BEDNAR; | Web Programmer
FG Forrest, a. s.
(e-mail address removed), www.fg.cz
Tel.: +420 222 242 204, +420 491 417 111
Fax: +420 491 433 022
 
R

Richard

Tomás Bednáø said:
Hi all,
did everone of you solve following problem:
a couple of div ( or table or spans ... what ever ) styled float:left;
display incorrect in ie4x. More specificly it doesnot warp to "next
row", it continues on to right, so the browser gets scrollbar, insted
of warping it.
here is the very simple htmlCode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<style type="text/css">
.floatLeft { float: left;}
.tblStyle { float:left; border: inset 1px; }
</style>
</head>
<body>
htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
<script type="text/javascript" language="JavaScript">
<!--
var i;
for ( i=0;i<20;i++ )
document.write('<table class="tblStyle" cellpadding="0"
cellspacing="0"><tr><td><img src=".." width="100"
height="100"></td></tr></table>');
//-->
</script>
<br clear="left">
htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode htmlcode
</body>
</html>

Does enyone know how make ie4 display it correctly or is there any
other way how to display unknown count of objects sidebyside without
using table?
Thanks a lot. Tomas

Just a friendly suggestion. Don't use tag attributes as class identifiers.
..floatleft {float:left;}
Some browsers may not like that idea as an attribute should only be used
where appropriate.
Then, just to give one simple command like that you'd be better off with an
inline style request.

<div style="float:left;">

or even

<div class="sample" style="float:left;">

In any programming language, it's a good idea not to use reserved words for
variables or identifiers of any type other than for their intended purposes.
you could possibly get away with "afloat" though.

BTW, IE 4 was designed before CSS came into fashion so yes it's going to be
a headache.

The way I see it, if you're gonna surf in today's web, have the right tools.
 
T

Toby A Inkster

Richard said:
Just a friendly suggestion. Don't use tag attributes as class identifiers.
.floatleft {float:left;}
Some browsers may not like that idea as an attribute should only be used
where appropriate.

There is no browser that is going to care about a class named floatleft.
Then, just to give one simple command like that you'd be better off with an
inline style request.
<div style="float:left;">
or even
<div class="sample" style="float:left;">

No! Inline styles are fine while you're first playing around with a
layout, but once things are decided, use a proper style sheet -- this
helps with cachability and aids in style/content seperation.
In any programming language, it's a good idea not to use reserved words
for variables or identifiers of any type other than for their intended
purposes.

Lucky HTML isn't a programming language then.
BTW, IE 4 was designed before CSS came into fashion so yes it's going to
be a headache.

IE 4 is a surprisingly capable browser and does remarkably well with CSS
layouts (better than IE 5.x in my experience).

As early as verison 3, Internet Explorer had some rudimentry CSS support.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,733
Messages
2,569,440
Members
44,832
Latest member
GlennSmall

Latest Threads

Top