Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Float property in XHTML strict in Firefox

problem with float left Firefox XHTML strict



12:57 pm on Sep 23, 2007 (gmt 0)

5+ Year Member

Here is something I would like to understand. In the past I have developed websites in XHTML transitional doctype, cross-browser working. For IE some conditional comments could fix the problems, related to the all known box-model-problem.

Today I have had a strange experience in Firefox. This browser interprets the float property very diffenrently when the doctype XHTML is transitonal or strict.

The "float: left" property works fine in Firefox 2.0 when the doctype is XHTML transitional. In doctype strict mode the div element is not floating on the left anymore. It floats right to the preceding block-level element. Although I have declared the width-property for all elements which might have an influence.

A solution I found was, adding a <br style=clear: both" /> before the div with the float:left property. Not a really nice solution, since it creates a lot of extra properties.
Declaring the property "clear: both" to the preceding div, had no effect.
Does anyone know a better solution for this problem than the extra <br /> tag, and can point me to a source where I can understand why Firefox makes the difference between transitional and strict mode for XHTML.



4:41 pm on Sep 23, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Sabine, welcome to WebmasterWorld.

My first question is why are you using an XHTML doctype? Are you using XML? (guess that is two questions :) ) Regardless, I suggest you read this post [webmasterworld.com] and this post [webmasterworld.com].

That being said, I assume when you said

Declaring the property "clear: both" to the preceding div, had no effect.
, you were referring to the <div> that is floating up one level. One solution, besides the <br> one, is try clear:right: on the last floated <div> in the previous row. Another is a clearing <div> in place of the <br>. In either of those cases, if it is space you are worried about, you can set the height to zero or the line-height to zero. Other than that, I am not sure why it is acting that way unless there is something else in your CSS affecting it.



1:32 pm on Sep 24, 2007 (gmt 0)

5+ Year Member

Hi Marshall,
thanks for confronting me with the question, why I am using XHTML. A very good question. One reason is, that the goverment here in Holland has published webguidelines for webdeveloppers and they ask for XHTML, because it is the most compatible with future developments on the web. In other words, if the Dutch goverment is your client, you have to deliver XHTML.
I certainly will research that issue again and your links are a great help.

Beside of using XHTML or not, the reason I posted a message on this forum, was the difference in Firefox between XHTML transitional and strict. I would like to understand why this browser is parcing the same stylesheets differently in XHTML transitional mode than in strict mode.
In my stylesheet there are no conflicting properties before the floated div. This floated div is the first element to be floated.
Of course there is the possibility to solve the problem using position absolute for that div instead of float. (But this will mean, there are unforseen limitations to the float property. And this in a browser which is known as webstandard compilent)
May I post an URL to the site and stylesheet in question?



1:46 pm on Sep 24, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

TOS prevents the posting of URLs, however, you can post code or StickyMail the URL to any member who wants, including myself.

As for the difference between transitional and strict, it all comes down to the the dtd link in the declaration (anyone feel free to correct me where I am wrong). Transitional allows some things strict will not. While I cannot cite specifics :( , I know some elements such as the placement of a <br /> is more limited in strict. So, if you are using say a <br style="clear:both;"> some place, strict may not allow it. And I believe <br>'s are not allowed in <ul>'s, as another example. I am sure there are a lot more examples, but these are just off the top of my head.

The other fact, transitional or strict, is the default setting different browser apply to elements, specifically margins and padding. I run into this problem a lot in designing sites using purely CSS and are cross-browser friendly. The only way I know of around this is to declare:

* {margin: 0; padding: 0;}

on the first line of your style sheet. This negates all the default settings. The major drawback to this is that you *will* have to assign margins and padding to every element. Basically, it is a now win situation since standards differ.

Does this all make sense? :)



1:47 pm on Sep 24, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

As far as I understand it the only difference in Firefox's rendering between an XHTML strict and transitional doctype is the layout of images in table cells - this is Gecko's 'Almost Standards' mode.

Can you post a reduced test-case so we can see what problems you're having?


9:57 pm on Sep 24, 2007 (gmt 0)

5+ Year Member

This is the code for the XHTML page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<html xmlns="http://www.w3.org/1999/xhtml">

<title>Page title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" href="css/menu.css" />
<link rel="stylesheet" type="text/css" href="css/basis-basis.css" />
<script src="script/menu.js" type="text/javascript"></script>

<div id="center">
<img src="images/logo-avenier-5.gif" width="450" height="99" alt="" />
<div id="menu">
<a href="index.php" id="home" class="on" onmouseover="P7_autoLayers(0)">
<img src="images/trans.gif" width="55" height="20" alt="" />
<a href="javascript:;" id="collectie" onmouseover="P7_autoLayers(0,'sub-menu-collectie');P7_Snap('sub-menu-collectie','collectie',0,0)">
<img src="images/trans.gif" width="88" height="20" alt="" />
<a href="nieuw.php" id="nieuw" onmouseover="P7_autoLayers(0)">
<img src="images/trans.gif" width="141" height="20" alt="" />
<a href="agenda.php" id="agenda" onmouseover="P7_autoLayers(0)">
<img src="images/trans.gif" width="70" height="20" alt="" />
<a href="contact.php" id="contact" onmouseover="P7_autoLayers(0)">
<img src="images/trans.gif" width="72" height="20" alt="" />
<!-- this ugly break makes it work in strict mode -->
<br style="clear: both" />
<div id="left">
"In de kunst mag het nooit bij plannen maken blijven; of, zoals we in Spanje
zeggen- liefde moet je bewijzen met feiten en niet met woorden. Belangrijk
is wat je doet, niet wat je van plan bent om te doen."<br /><br /> Pablo Picasso

<div id="tekst">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras interdum ante sit amet velit. neque pede .</p>

<p>In mollis euismod felis. Maecenas nec tellus. Donec velit. Phasellus fermentum elit consequat leo. lorem.



These are the basic styles:

body { background-color: white;
margin: 0;
padding: 0;
font-family: Verdana, sans-serif;
font-size: 11px;
text-align: center; }
div#center {
position: relative;
text-align: left;
margin-left: 50px;
margin-right: 50px;
width: 960px;
height: 600px
a {text-decoration: none;}

div#menu {padding-left: 120px;
border-top: 1px solid #a4a2a1;
height: 20px;
width: 700px;
clear: both;
div#menu a {display: block;float: left;}

div#tekst {margin-left: 266px; margin-top: 30px
div#left {
float: left;
padding: 2px 0 0 0;
width: 240px;
margin-top: 25px;
text-align: right;
height: 350px;
border: 1px solid black


12:37 am on Sep 25, 2007 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

Sorry for jumping on the bandwagon at such a late stage, but I was intrigued...

I tried your code and for me it behaves the same with both a Strict and Transitional DOCTYPE. The 'problem' is evident with both. And this is as I would expect. I am, however, testing this with FF1.5 - although if it does behave differently to FF2 in this respect I will eat my hat / be very surprised!

In fact Marshall pretty much hit the nail on the head in his 2nd post...

You are clearing the wrong DIV. The clear property works by clearing any preceeding elements. It doesn't clear elements that follow it, which is what you are trying to do by applying clear:both to your div#menu. Remove clear:both from your div#menu rule and instead apply clear:left to your div#left rule. That should sort it - with either a Transitional or a Strict DOCTYPE.

In doctype strict mode the div element is not floating on the left anymore. It floats right to the preceding block-level element.

I realise this may just be a difference in wording but... it was still floating left, it wasn't floating right. But yes it was to the right of the preceding block-level element, since the preceding block-level element wasn't being cleared.

As far as I understand it the only difference in Firefox's rendering between an XHTML strict and transitional doctype is the layout of images in table cells - this is Gecko's 'Almost Standards' mode.

Yes, the Mozilla Developer Center [developer.mozilla.org] seems to discuss images solely in table cells, but IMO it's not just images in table cells that are effected by 'Almost Standards' mode. The same phenomenon can be clearly seen in sabine2's example above with the first image above the #menu. This is where your example does differ between Transitional and Strict!

Transitional allows some things strict will not.

Just to add to Marshall's post. Transitional (or 'loose') allows the use of all the deprecated elements and attributes, whereas Strict does not. Deprecated 'items' are those which are likely, or will, be removed completely from the next version of (X)HTML. They are largely presentational elements/attributes, so in the interests of separating your style and content it is a good idea not to use them anyway. So, IMHO, it is for this reason that the Dutch Govn would be better to enforce a Strict DOCTYPE over a Transitional one, rather than XHTML over HTML!?


9:45 am on Sep 25, 2007 (gmt 0)

5+ Year Member

Thank you all for helping me out.
With applying [b]clear: left[b] to the floating element I could fix the problem. I think I have to read the spec's about the float and clear property carefully again.

I agree with the statement, that the Dutch gov should ask for strict mode and not only for XHTML. I think the reason that they don't advice strict mode are the CMS applications they use. The most of them don't create pages, that would validate in strict mode whether it is XHTML or HTML.
On the other hand they have started to promote webstandards, by publishing webguidelines, which have to be applied for their projects. I think this is a good start. Here in Holland the awareness of the benefits from separating structural mark-up from presentational is rising. This goes together with the realisation, that good mark-up in (X)HTML and CSS is a profession in itself.

thanks again for pointing me to the question XHTML or HTML?


Featured Threads

Hot Threads This Week

Hot Threads This Month