how to cure FF problem

Chris F.A. Johnson · Apr 22, 2008

http://roadtrip08.1littleworld.com/Page001.html

First, fix the errors:

<http://validator.w3.org/check?verbose=1&uri=http://roadtrip08.1littleworld.com/Page001.html>

And use 4.01 strict, not transitional, for new pages.

How do you get FF to show the image correctly within the division
bprders as desired?
IE has no problem.

IE doesn't do it correctly.

http://roadtrip08.1littleworld.com/

Works fine here.

This is "working fine"?

said:
I just don't like the coding webdwarf generates.

I haven't seen any code generator do a decent job (apart from
special purposes ones written by people who know how to code HTML
and CSS).

richard · Apr 22, 2008

http://roadtrip08.1littleworld.com/Page001.html

How do you get FF to show the image correctly within the division
bprders as desired?
IE has no problem.

http://roadtrip08.1littleworld.com/

Works fine here.
I just don't like the coding webdwarf generates.

richard · Apr 22, 2008

First, fix the errors:

<http://validator.w3.org/check?verbose=1&uri=http://roadtrip08.1littleworld.com/Page001.html>

And use 4.01 strict, not transitional, for new pages.

IE doesn't do it correctly.

This is "working fine"?

I haven't seen any code generator do a decent job (apart from
special purposes ones written by people who know how to code HTML
and CSS).

Errors fixed. Problem still remains.

richard · Apr 22, 2008

http://roadtrip08.1littleworld.com/Page001.html

How do you get FF to show the image correctly within the division
bprders as desired?
IE has no problem.

http://roadtrip08.1littleworld.com/

Works fine here.
I just don't like the coding webdwarf generates.

The problem appears to be that "auto" in FF does not account for
images. Only text. Giving the division a height to include the image
works fine.

Chris F.A. Johnson · Apr 22, 2008

Errors fixed. Problem still remains.

<http://cfaj.freeshell.org/testing/Page001.html>

freemont · Apr 22, 2008

A floated item is taken out of the normal flow, therefore it presents no
height to the container div. The clearing div basically tells the
container div where its bottom is.

This just solved a problem for me.

richard · Apr 22, 2008

First of all, make it work first in FF "Strict" and IE will probably be
OK most of the time.
Secondly, do use "Strict" as included below.
Thirdly, do _not_ use deprecated elements.
The key is the clearing div in the markup.
Here are your changes:

.ccell {width:32%; float:left; }
h2 {text-align:center;}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<div class="row">
<h2>Wisconsin</h2>
<div class="acell">
<img src="image/001t-pitts.jpg" alt="photo">
</div>
<div class="bcell">2</div>
<div class="ccell">3</div>
<div style="clear:left;"></div>
</div>

Taking a clue from you, I simply applied the clear:left to an HR.
Which helps to act as a seperator for the "rows".
But I still need that empty division.

richard · Apr 22, 2008

No problem if HR works for you. Some people use BR while others an empty
P. Any will probably do. I prefer to use the generic DIV.

Because you (apparently/seemingly) cannot apply a margin-top to the HR?
In which case simply add a margin-bottom to your IMG.

Hadn't really considered that option but I will now. Thanks.

dorayme · Apr 22, 2008

Gus Richter said:
No problem if HR works for you. Some people use BR while others an empty
P. Any will probably do. I prefer to use the generic DIV.

Not any will do. Some empty divs do not work for Internet Explorer in
some situations. To be sure of IE, at least a &nbsp inside if you take
the clearing div route.

dorayme · Apr 22, 2008

Gus Richter said:
I seriously question using   in a clearing div since it will
present a possibly undesired height to the div. In what situation does
IE choke here? Can you give an example?

I thought you would ask for an example. I will have to dig one up. I
made this discovery the hard way. It still annoys me the time I spent on
it when trying to complete a first draft of a website, all I needed to
was the right thing to put in a conditional for IE 6 eyes only!

It was a case where I used overflow: hidden to make a container grow
height to cover a float for all good browsers. Unfortunately, it was
also a case where IE6 did not grow height naturally (as it often does
without needing any special coaxing.)

Since it does not understand overflow: hidden for this purpose, I tried
an empty clearing div, and it still did not work. This led to a wild
goose chase until I thought to stick some content in. Being lazy, I used
a fullstop, (it was perfect because it got lost in a special speckled
background!).

I will be back, I am firing up my winbox especially for you Gus! But it
is also breakfast time. When I return, I will see what cases are on the
windows machine.

Chris F.A. Johnson · Apr 23, 2008

Not any will do. Some empty divs do not work for Internet Explorer in
some situations. To be sure of IE, at least a &nbsp inside if you take
the clearing div route.

However, in this situation, IE doesn't need the <DIV> to do what
the OP wnts, so there's no point including   which may have
undesirable side effects.

Validation crisis	12	Sep 28, 2023
div problem with IE but not FF why? code posted...	1	Mar 11, 2006
iframe in ie & ff & Chrome & Opera	5	Dec 5, 2008
Really basic float right problem cross browser	11	Sep 23, 2009
How to modify firstChild property for FF?	3	Feb 8, 2008
Even McMahon fails validation	21	Nov 17, 2011
Please help me to make it work in FF...	1	Apr 15, 2008
the final word on my limerick page	10	Oct 29, 2011

how to cure FF problem

Chris F.A. Johnson

richard

richard

richard

Chris F.A. Johnson

freemont

richard

richard

dorayme

dorayme

Chris F.A. Johnson

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads