IE7/FF1.5 differences

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I have a tiny bug in the following code. FF1.5 renders it right, but
IE7 doesn't. To see the issue, please check out with both browsers the
DIV containing the field "Apellido", to which I'm applying a

I've first tried applying a display:inline to the DIV, because it made
more sense for me, but didn't work. So I've tried float: left and now
I got it working partially.

I'd appreciate any tip you can give me. Thanks!!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://">
<html xmlns=" ">
    <title>User lfarzati</title>
            border-right: 1px dashed #888;
            padding-right: 8px;
            width: 170px;

            list-style-type: none;
            margin-left: 0;
            padding-left: 0;

            font-family: Tahoma, Arial, Helvetica, sans-serif;
            font-size: 8pt;
            margin-bottom: 6px;

            display: block;
            border-bottom: 1px solid #ddd;

            font-weight: bold;

            float: left;
            margin-right: 12px;
    <div class="userInfo">
                <div><span class="label">Identificador</span><span
                <div class="surname"><span class="label">Apellido</
span><span class="value">Austen</span></div>
                <div class="name"><span class="label">Nombre</
span><span class="value">Kate</span></div>

Re: IE7/FF1.5 differences

Luis Farzati wrote :
Quoted text here. Click to load it

Can you upload your code on an web-accessible webpage?
Have you validated your markup and CSS code? Are you using valid code?

Quoted text here. Click to load it

What's "right" then? Please describe what is the "right" layout, your
page layout goal. Viewers can not in advance determine what is the right
intended layout in your mind.

Quoted text here. Click to load it

According to this page
Firefox version 1.5 "will be supported until April 24, 2007 with
security and stability updates."

A lot of us are using Firefox So, is it worth it to test with a
browser version no longer recommendable and no longer widely in use on
the web? Why not test with the latest stable available Firefox version?

Quoted text here. Click to load it

Can you describe what you are trying to do exactly, webpage design
requirements, purpose of webpage, intended layout, etc? If you just want
to discuss code, then we can't really help you. Adding more code is most
probably the wrong approach.

Quoted text here. Click to load it

Why "pt" ? And why so small? Is your webpage intended for printing only?
Did you know that for most people over 40 years old, 8pt on a monitor
screen is very small... for screen and for printing as well.
As coded, your code is for screen and print.

"Do not specify the font-size in pt, or other absolute length units for
screen stylesheets. They render inconsistently across platforms and
can't be resized by the User Agent (e.g browser). Keep the usage of such
units for styling on media with fixed and known physical properties (e.g
Use relative length units such as percent or (better) em (...)"

W3C Quality Assurance tip for webmasters:
Care With Font Size
Units: avoid absolute length units for screen display

Quoted text here. Click to load it

You've got right here 5 nesting levels of DOM nodes, a lot of markup and
class definitions for what seems to be a rather small amount of
text/info to render. There is such a thing as over-coding,
over-declaring, over-defining and over-excessively constraining and that
is what I think you're doing here.

Quoted text here. Click to load it

<span class="label">Apellido</
Quoted text here. Click to load it

Where is the "name" class definition in your code?

<span class="label">Nombre</
Quoted text here. Click to load it

Can you post an url?

Using Web Standards in your Web Pages (Updated Dec. 2006)

Re: IE7/FF1.5 differences

Quoted text here. Click to load it

Yes, I've uploaded the file to .
I've validated markup and CSS. In fact I've added the W3C validator
links at the bottom of the page so I can quickly check this with every

Quoted text here. Click to load it

Ok, I'll try to describe my goal. The layout I want is a left,
vertical panel containing user information. There will be more things
at the right of the page but that doesn't matter now. Some rows in
this left panel may contain two fields (one right to the other) and
some rows contains just one field.

Quoted text here. Click to load it

Yes, I didn't mention it but I'm also testing the document with FF
2=2E0.0.3. The same 'right' behavior. IE7 (and probably IE6, although I
can't test it) is the one with the issue.

Quoted text here. Click to load it

You are right, the 'pt' unit is a bad practice I'm carrying and
usually I realize the mistake later in the testing phase. But thank
you for your early advice. :)

Quoted text here. Click to load it

That was just a demo, I''ll have more information in the left panel.
You see as a bad practice to structure this kind of information in the
way I do? What I always do is to think what kind of information I am
displaying, and thus writing a structure that conceptually fits with
it. If it conceptually fits, I never pay attention to over-coding.

In this case, I represent the left "user information panel" with a
div. This panel must contain a list of user data such as Name, Phone,
Birthdate, etc. That's why I represent it with a ul . Now, I don't
want to display a plain, top-down list. I want this list to have
sublists, each one representing a logical group of data (besides I
plan to add show/hide behavior for each group). That's why I have list
items li containing sublists ul.

Finally, inside a list item containing user data, I need to display
what is the name of the data, and the value of the data. That's why I
use span for each and a div for grouping field name/value pairs.

Any thoughts, critics and suggestions about this way of structure the
information will be greatly appreciated!

I have a couple of additional questions but first let's talk about



Re: IE7/FF1.5 differences

Scripsit Luis Farzati:

Quoted text here. Click to load it

That's better, though IP addresses in place of domain names make me

Quoted text here. Click to load it


You should install e.g. the Web Developer Extension for Firefox so that you
can easily validate any page and don't need to pollute your pages with such

Quoted text here. Click to load it

Does the information have to appear in an illegibly small font?

Quoted text here. Click to load it

Have you considered whether it would best be marked up as a table, or a
collection of tables? Looks like tabular information to me.

But what is the problem? You should have told what you don't like in the
visual appearance, instead of telling us to compare it on "both" browsers to
find the difference you have in your mind.

Quoted text here. Click to load it

So why didn't you stop using it?

Quoted text here. Click to load it

But what about the original question? You told there's something wrong but
didn't specify what it was.

On the other hand, creating good markup for the material you actually have
might be the best thing to do first.

Jukka K. Korpela ("Yucca")

Re: IE7/FF1.5 differences

Quoted text here. Click to load it

Stop thinking about "FF vs. IE"  Think instead about "FF vs standards"
and "IE vs standards".  Worry about making your work match the
standards first, then worry about the browsers afterwards.

If you try to fix browser vs. browser problems, then there's no
visible and objective standard for what is truly "right" and it's
almost impossible to make progress. If you work to the standard
instead, then you might have to check it for "browser compatibility"
for each browser separately, but at least this is an easy / trivial
task, even if you have to do it a few more times. Especially because
in practice FF and Safari will usually get it right anyway, it's still
just IE that has problems.

I can't really comment further as I don't know what you're trying to
achieve and I can't see obvious rendering differences between FF and
IE. A couple of general comments though:

* Avoid setting the display property to flip block and inline elements
around unless you _need_ to. Most of the time you can just use the
right element to begin with particularly using <div> rather than
<span>. You should usually only need to use this (valuable) technique
when you're already forced into an %inline; context, such as needing
to place a block-rendered element inside <a> by using <span
style="display:block;" >

* Use containment between elements as much as possible. This is
simple, reliable and a good way to construct columns etc.

I don't know why IE has broken it here around DNI / Estado Civil, but
suspect that it's to do with the display:block you've applied to the
<span>    This is still the _right_ technique though, so persevere
despite M$oft!

Try using a <div> instead of the <span> and see if that improves
matters. Otherwise it's probably some IE funny about float having
strange behaviours in rare cicrumstances (often not "wrong"
behaviours, just surprising ones in obscure and poorly documented
conditions). Try reading as a
good guide, especially for floating.

Site Timeline