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:
| 1, 1 | 1, 2 |
| 2, 1 | 2, 2 |
Froefel wrote:
> For once, IE seems to do what I intend, but Firefox doesn't.
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?
'Exactly' is never a good term for a web designer.
>
> Here's the code:
>
Post a URL. Sometimes problems are not related to the part of the code
you might suspect.
HTH
bernhard
--
www.daszeichen.ch
remove nixspam to reply
"Froefel"
news:1188469889.252711.93950@d55g2000hsg.googlegroups.com...
> 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?
Will never happen. And what exactly is it supposed to look like?
> Here's the code:
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?
--
Richard.
On Aug 30, 11:31 am, Froefel
> Here's the code:
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).
--
David Dorward
http://dorward.me.uk/
http://blog.dorward.me.uk/
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
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
| 1, 1 | 1, 2 |
| 2, 1 | 2, 2 |
Froefel wrote:
> 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
>
>
>
> www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>
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...
"http://www.w3.org/TR/html4/strict.dtd">
1, 1
1, 2
2, 1
2, 2
Personalized Email
Links go here
This goes underneath both Level2 panels
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
On 2007-08-30, 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?
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.
> Here's the code:
>
>
>
>
> 1, 1
> 1, 2
>
>
> 2, 1
> 2, 2
>
>
>
>
>
>
> Personalized Email
>
>
>
> Links go here
>
>
>
> This goes underneath both Level2 panels
>
>
>
On 2007-08-30, Jonathan N. Little
[...]
> 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...
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.
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
On 2007-08-31, 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;
Since you want Level1_right to occupy all remaining horizontal space, I
think Jonathan N. Little's suggestion should do what you need?
> 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