IE7/FF1.5 differences

Luis Farzati · Apr 18, 2007

Hi,

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
float:left.

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

Luis

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>User lfarzati</title>
<style>
.userInfo
{
border-right: 1px dashed #888;
padding-right: 8px;
width: 170px;
}

ul
{
list-style-type: none;
margin-left: 0;
padding-left: 0;
}

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

.label
{
display: block;
border-bottom: 1px solid #ddd;
}

.value
{
font-weight: bold;
}

.surname
{
float: left;
margin-right: 12px;
}
</style>
</head>
<body>
<div class="userInfo">
<ul>
<li>
<div><span class="label">Identificador</span><span
class="value">kate</span></div>
</li>
<li>
<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>
</li>
</ul>
</div>
</body>
</html>

=?ISO-8859-1?Q?G=E9rard_Talbot?= · Apr 18, 2007

Luis Farzati wrote :

Hi,

I have a tiny bug in the following code.

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

FF1.5 renders it right, but
IE7 doesn't.

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.

To see the issue, please check out with both browsers

According to this page
http://www.mozilla.com/en-US/firefox/all.html
Firefox version 1.5 "will be supported until April 24, 2007 with
security and stability updates."

A lot of us are using Firefox 2.0.0.3. 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?

the

DIV containing the field "Apellido", to which I'm applying a
float:left.

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.

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.

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

Luis

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>User lfarzati</title>
<style>
.userInfo
{
border-right: 1px dashed #888;
padding-right: 8px;
width: 170px;
}

ul
{
list-style-type: none;
margin-left: 0;
padding-left: 0;
}

li
{
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 8pt;

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
print).
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
http://www.w3.org/QA/Tips/font-size

margin-bottom: 6px;
}

.label
{
display: block;
border-bottom: 1px solid #ddd;
}

.value
{
font-weight: bold;
}

.surname
{
float: left;
margin-right: 12px;
}
</style>
</head>
<body>
<div class="userInfo">
<ul>
<li>
<div><span class="label">Identificador</span><span
class="value">kate</span></div>
</li>

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.

<li>
<div class="surname">

span><span class="value">Austen</span></div>
<div class="name">

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

span><span class="value">Kate</span></div>
</li>
</ul>
</div>
</body>
</html>

Can you post an url?

Gérard

Luis Farzati · Apr 18, 2007

Luis Farzati wrote :

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

Yes, I've uploaded the file to http://200.32.3.194/test/index.html .
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
change.

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.

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.

A lot of us are using Firefox 2.0.0.3. 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?

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

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.

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.

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.

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

Thanks,

Luis

Jukka K. Korpela · Apr 18, 2007

Scripsit Luis Farzati:

Yes, I've uploaded the file to http://200.32.3.194/test/index.html .

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

I've validated markup and CSS.
Fine.

In fact I've added the W3C validator
links at the bottom of the page so I can quickly check this with every
change.

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

The layout I want is a left,
vertical panel containing user information.

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

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.

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.

You are right, the 'pt' unit is a bad practice I'm carrying

So why didn't you stop using it?

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

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.

Andy Dingley · Apr 18, 2007

I'd appreciate any tip you can give me.

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 http://brainjar.com/css/positioning/ as a
good guide, especially for floating.

Positioning CSS components	1	Nov 16, 2023
Buttons lining up	1	Feb 6, 2022
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Survey details won't go through using php, ajax, Mysql	0	Oct 26, 2023
Is it possible an iframe can overlapp another?	3	Apr 20, 2022
How can I get my menu inside of a menu to function properly?	1	Jan 19, 2023
Can someone help me correct this code? It should be a two line countdown timer.	3	Jan 26, 2023
Why is this WordPress comments form not submitting?	1	Jan 12, 2020

IE7/FF1.5 differences

Luis Farzati

=?ISO-8859-1?Q?G=E9rard_Talbot?=

Luis Farzati

Jukka K. Korpela

Andy Dingley

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads