Positioning problem in FF vs IE

F

Froefel

For once, IE seems to do what I intend, but Firefox doesn't. Can
anyone help make the result in FireFox look exactly like the one in
IE?

Here's the code:

<div id="Level1_left" style="float:left; background-color:gray;">
<table id="Level1_table" style="border:2px solid red">
<tr>
<td>1, 1</td>
<td>1, 2</td>
</tr>
<tr>
<td>2, 1</td>
<td>2, 2</td>
</tr>
</table>
</div>

<div id="Level1_right" style="float:right; background-
color:lightgrey;">
<div id="Level2_left" style="float:left; border:2px solid yellow;">
Personalized Email
</div>

<div id="Level2_right" style="float:right; border:2px solid yellow">
Links go here
</div>

<div id="Level2_bottom" style="clear:both; border:2px solid green">
This goes underneath both Level2 panels
</div>
</div>
 
B

Bernhard Sturm

Froefel said:
For once, IE seems to do what I intend, but Firefox doesn't.
Click to expand...

This is always a good starting point to think the other way round: if IE
shows it right, your code might be broken.
Can
anyone help make the result in FireFox look exactly like the one in
IE?
Click to expand...

'Exactly' is never a good term for a web designer.
Here's the code:
Click to expand...

Post a URL. Sometimes problems are not related to the part of the code
you might suspect.

HTH
bernhard
 
R

rf

Froefel said:
For once, IE seems to do what I intend, but Firefox doesn't. Can
anyone help make the result in FireFox look exactly like the one in
IE?
Click to expand...

Will never happen. And what exactly is it supposed to look like?
Here's the code:
Click to expand...

<sigh/>

You are the fifteenth poster this week who is expecting me to:

1) Open my editor
2) copy/paste your code from this post into my editor, assuming it is in
fact the code that evidences the problem you have.
3) Save this somewhere on my file system, which I'll probably forget about
and then have to spend time next year cleaning up.
4) Open the saved page in my browsers to see exactly what you are talking
about.

Compare this with *you* providing the URL to a test page and me simply:
1) clicking on the link.

I hope you can you see why I am totally disinterested in your problem?
 
D

David Dorward

Here's the code:
Click to expand...

Which is invalid. Fix that and post a URL to a test case. (Note the
importance of a complete test case, context is very important and the
Doctype can have major implications for how content is rendered).
 
F

Froefel

For those who wanted the entire content. Below is the entire page:

Richard and others, please forgive me for not being able to provide a
link. I'm on a corporate network that doesn't allow FTP out so I can't
upload anything to my test server at home. Does anyone have a
suggestion on where I could upload test pages for free, so I could
refer to them in my posts?

-- Hans


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>

<div id="Level1_left" style="float:left; background-color:gray;">
<table id="Level1_table" style="border:2px solid red">
<tr>
<td>1, 1</td>
<td>1, 2</td>
</tr>
<tr>
<td>2, 1</td>
<td>2, 2</td>
</tr>
</table>
</div>

<div id="Level1_right" style="float:right; background-
color:ButtonFace;">
<div id="Level2_left" style="float:left; border:2px solid yellow;">
Personalized Email
</div>

<div id="Level2_right" style="float:right; border:2px solid yellow">
Links go here
</div>

<div id="Level2_bottom" style="clear:both; border:2px solid green">
This goes underneath both Level2 panels
</div>
</div>

</body>
</html>
 
J

Jonathan N. Little

Froefel said:
For those who wanted the entire content. Below is the entire page:

Richard and others, please forgive me for not being able to provide a
link. I'm on a corporate network that doesn't allow FTP out so I can't
upload anything to my test server at home. Does anyone have a
suggestion on where I could upload test pages for free, so I could
refer to them in my posts?

-- Hans


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
Click to expand...

<double sigh>

Firstly I'd dump the XHTML unless you have a very good reason to require
it, and I bet you don't.

Next if what you describe "IE seems to do what I intend" is "I want
'Level1_right' DIV to be to the right of 'Level1_left' DIV" (&deity; I
wish folks would learn how to articulate their problems!) then a
solution would be to remove float on div.Level1_right and add 'overflow:
hidden;' and then on div.Level2_bottom change the clear from both to
right...



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>template</title>
</head>
<body>
<div id="Level1_left" style="float:left; background-color:gray;">
<table id="Level1_table" style="border:2px solid red">
<tr>
<td>1, 1</td>
<td>1, 2</td>
</tr>
<tr>
<td>2, 1</td>
<td>2, 2</td>
</tr>
</table>
</div>

<div id="Level1_right" style="overflow: hidden;
background-color:lightgrey;">
<div id="Level2_left" style="float:left; border:2px solid yellow;">
Personalized Email
</div>

<div id="Level2_right" style="float:right; border:2px solid yellow">
Links go here
</div>

<div id="Level2_bottom" style="clear:right; border:2px solid green">
This goes underneath both Level2 panels
</div>
</div>

</body>
</html>
 
B

Ben C

For once, IE seems to do what I intend, but Firefox doesn't. Can
anyone help make the result in FireFox look exactly like the one in
IE?
Click to expand...

It's no good saying "make it look like IE" or people who don't have IE,
like me, don't know what you mean.

In this case I can perhaps guess though. You've got a right float with
auto width containing a left float and a right float.

They key box here is Level1_right. How wide should it be? It's a float
with width: auto so its width should be the "shrink-to-fit width", which
is a function of its contents. In this case its contents consist of more
floats, and that's the thing Firefox interprets differently from some
other browsers.

This is what CSS 2.1 10.5 says about shrink-to-fit width:

Roughly: calculate the preferred width by formatting the content
without breaking lines other than where explicit line breaks occur,
and also calculate the preferred minimum width, e.g., by trying all
possible line breaks. CSS 2.1 does not define the exact algorithm.
Thirdly, find the available width: [...] Then the shrink-to-fit width
is: min(max(preferred minimum width, available width), preferred
width).

This tells us roughly how to calculate shrink-to-fit width as a function
of the text in a container. But what about the floats in a container?
CSS 2.1 does not define the exact algorithm for that either...

Opera and Konqueror use the maximum of the width of Level2_bottom and
the sum of the widths of Level2_left and Level2_right as the preferred
width of Level1_right's contents. Since Level2_bottom is wider than that
sum in practice, Level2_bottom's width is the preferred width of
Level1_right.

Firefox on the other hand reckons that since Level2_left and
Level2_right are a left and a right float, they would "prefer" to be as
far apart as possible, and so apparently uses a preferred width of
infinity. Level1_right's shrink-to-fit width therefore works out as the
full available width.

How to make Firefox do what you want? With a slight compromise, you
could just set an explicit width of about 20em on Level1_right. To get
exactly the behaviour of Opera or Konqueror here, where Level1_right
shrinks to fit max(Level2_bottom width, Level2_left width + Level2_right
width), I can't think of a way without resorting to a table.
 
B

Ben C

On 2007-08-30 said:
Next if what you describe "IE seems to do what I intend" is "I want
'Level1_right' DIV to be to the right of 'Level1_left' DIV" (&deity; I
wish folks would learn how to articulate their problems!) then a
solution would be to remove float on div.Level1_right and add 'overflow:
hidden;' and then on div.Level2_bottom change the clear from both to
right...
Click to expand...

I see what you mean, good idea, but then Level1_right still occupies its
full available width, with "Personalized email" immediately to the right
of the little table with numbers in it rather than over to the right of
the page. Maybe that's what IE does and what the OP wants anyway.
 
F

Froefel

I appreciate everyone's input and realize that I'd better describe
precisely what the result is that I'm looking for, compatible with IE,
FF and Safari. So here goes (referencing my original post):

Level1_left DIV should be only as wide as its contents (the table with
numbers);
Level1_right DIV should go to the right of Level1_left and occupy all
remaining horizontal space;

then within Level1_right DIV:
Level2_left DIV should be only as wide as its contents ("Personalized
email");
Level2_right DIV should go to the right of Level2_left and sit flush
right within Level1_right. Its width can either fit its content or
take all remaining space... doesn't matter;
Level2_bottom DIV should go below Level2_left and Level2_right and
occupy the entire width of Level1_right

I hope this description of the desired result will be useful for
follow-up posts.

-- Hans
 
B

Ben C

I appreciate everyone's input and realize that I'd better describe
precisely what the result is that I'm looking for, compatible with IE,
FF and Safari. So here goes (referencing my original post):

Level1_left DIV should be only as wide as its contents (the table with
numbers);
Level1_right DIV should go to the right of Level1_left and occupy all
remaining horizontal space;
Click to expand...

Since you want Level1_right to occupy all remaining horizontal space, I
think Jonathan N. Little's suggestion should do what you need?
 

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

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Positioning CSS components 1
Need help with <rowspan> in an HTML table 1
Bootstrap contact form not working 2
Hello I am learning how to code and I tried making a calculator with HTML and js with some CSS I am stuck at thing, Like the screen value is 0
Help with Visual Lightbox: Scripts 2
Having trouble centering contents of td ? 3
Positioning a popup 10

Members online

No members online now.
Total: 417 (members: 0, guests: 417)
Robots: 123

Forum statistics

Threads
474,266
Messages
2,571,075
Members
48,772
Latest member
Backspace Studios

Latest Threads

Top