Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > DIVs floating to left display incorrect if IE4

Reply
Thread Tools

DIVs floating to left display incorrect if IE4

 
 
=?ISO-8859-1?Q?Tom=E1=9A_Bedn=E1=F8?=
Guest
Posts: n/a
 
      10-23-2003
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.
http://www.velocityreviews.com/forums/(E-Mail Removed), www.fg.cz
Tel.: +420 222 242 204, +420 491 417 111
Fax: +420 491 433 022
--------------------------------------------------------------
Creative technologies... for your success
--------------------------------------------------------------
 
Reply With Quote
 
 
 
 
Richard
Guest
Posts: n/a
 
      10-24-2003
Tomás Bednář wrote:

> 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


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.



 
Reply With Quote
 
 
 
 
Toby A Inkster
Guest
Posts: n/a
 
      10-24-2003
Richard wrote:

> 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.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?id=132

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
swapping divs -- when divs NOT positioned absolutely.. maya Javascript 4 11-16-2007 05:11 PM
Managing divs within divs.... rich HTML 0 02-02-2006 07:38 PM
IE4 menu options Gordon Computer Support 2 08-20-2004 12:44 PM
IE4 Fun Capitol Computer Support 1 05-27-2004 12:11 AM
How to fix this javascript to work in Netscape 7.1 and 4.x (also for IE4 and IE6) SabMan Javascript 2 12-06-2003 01:39 PM



Advertisments