#1: Re: how to cure FF problem
Posted on 2008-04-22 05:31:13 by cfajohnson
On 2008-04-22, richard wrote:
> http://roadtrip08.1littleworld.com/Page001.html
First, fix the errors:
<http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Froadtrip08.1littleworld.com%2FPage001.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"?
<http://cfaj.freeshell.org/testing/trip.jpg>
> 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).
--
Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
============================================================ =======
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Report this message |
|
|
#2: how to cure FF problem
Posted on 2008-04-22 05:35:44 by Richard
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.
Report this message |
#3: Re: how to cure FF problem
Posted on 2008-04-22 06:13:13 by Richard
On Tue, 22 Apr 2008 03:31:13 +0000, "Chris F.A. Johnson"
<cfajohnson@gmail.com> wrote:
>On 2008-04-22, richard wrote:
>> http://roadtrip08.1littleworld.com/Page001.html
>
> First, fix the errors:
>
><http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Froadtrip08.1littleworld.com%2FPage001.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"?
> <http://cfaj.freeshell.org/testing/trip.jpg>
>
>> 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).
Errors fixed. Problem still remains.
Report this message |
#4: Re: how to cure FF problem
Posted on 2008-04-22 06:35:41 by Richard
On Mon, 21 Apr 2008 20:35:44 -0700, richard <i.do.not@ca.re> wrote:
>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.
Report this message |
#5: Re: how to cure FF problem
Posted on 2008-04-22 07:09:07 by Gus Richter
richard wrote:
> 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/
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>
--
Gus
Report this message |
#6: Re: how to cure FF problem
Posted on 2008-04-22 07:14:51 by cfajohnson
On 2008-04-22, richard wrote:
> On Tue, 22 Apr 2008 03:31:13 +0000, "Chris F.A. Johnson"
><cfajohnson@gmail.com> wrote:
>
>>On 2008-04-22, richard wrote:
>>> http://roadtrip08.1littleworld.com/Page001.html
>>
>> First, fix the errors:
>>
>><http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Froadtrip08.1littleworld.com%2FPage001.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"?
>> <http://cfaj.freeshell.org/testing/trip.jpg>
>>
>>> 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).
>
>
> Errors fixed. Problem still remains.
<http://cfaj.freeshell.org/testing/Page001.html>
--
Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
============================================================ =======
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Report this message |
#7: Re: how to cure FF problem
Posted on 2008-04-22 07:15:41 by Gus Richter
richard wrote:
> how to cure FF problem
Forgot to mention that there is _NO_ FF problem, but an IE problem.
FF rendered according to the specs and IE didn't.
The image was floated.
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.
--
Gus
Report this message |
#8: Re: how to cure FF problem
Posted on 2008-04-22 13:22:51 by freemont
On Tue, 22 Apr 2008 01:15:41 -0400, Gus Richter writ:
> 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. :-)
--
"Because all you of Earth are idiots!"
¯`·.¸¸.·´¯`·-> freemont© <-·´¯`·.¸¸.·´¯
Report this message |
#9: Re: how to cure FF problem
Posted on 2008-04-22 16:37:42 by Richard
On Tue, 22 Apr 2008 01:09:07 -0400, Gus Richter
<gusrichter@netscape.net> wrote:
>richard wrote:
>> 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/
>
>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.
Report this message |
#10: Re: how to cure FF problem
Posted on 2008-04-22 17:35:44 by Gus Richter
richard wrote:
>
> Taking a clue from you, I simply applied the clear:left to an HR.
> Which helps to act as a seperator for the "rows".
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.
> But I still need that empty division.
Because you (apparently/seemingly) cannot apply a margin-top to the HR?
In which case simply add a margin-bottom to your IMG.
--
Gus
Report this message |
#11: Re: how to cure FF problem
Posted on 2008-04-22 18:29:01 by Richard
On Tue, 22 Apr 2008 11:35:44 -0400, Gus Richter
<gusrichter@netscape.net> wrote:
>richard wrote:
>>
>> Taking a clue from you, I simply applied the clear:left to an HR.
>> Which helps to act as a seperator for the "rows".
>
>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.
>
>> But I still need that empty division.
>
>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.
Report this message |
#12: Re: how to cure FF problem
Posted on 2008-04-22 23:21:20 by dorayme
In article <A9ydnRhWXPhMmJPVnZ2dnUVZ_uWdnZ2d@golden.net>,
Gus Richter <gusrichter@netscape.net> wrote:
> richard wrote:
> >
> > Taking a clue from you, I simply applied the clear:left to an HR.
> > Which helps to act as a seperator for the "rows".
>
> 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   inside if you take
the clearing div route.
--
dorayme
Report this message |
#13: Re: how to cure FF problem
Posted on 2008-04-22 23:56:31 by Gus Richter
dorayme wrote:
> In article <A9ydnRhWXPhMmJPVnZ2dnUVZ_uWdnZ2d@golden.net>,
> Gus Richter <gusrichter@netscape.net> wrote:
>
>> richard wrote:
>>> Taking a clue from you, I simply applied the clear:left to an HR.
>>> Which helps to act as a seperator for the "rows".
>> 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   inside if you take
> the clearing div route.
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?
Some times a clear or clearing div will not be enough.
That's when "clearing space" methods are needed.
See (search for: how to contain a floated element):
<http://www.google.com/search?hl=en&q=how+to+contain+a+floated+element&btnG=Google+Search>
--
Gus
Report this message |
#14: Re: how to cure FF problem
Posted on 2008-04-23 00:50:05 by dorayme
In article <ivednX21p_KNwpPVnZ2dnUVZ_gydnZ2d@golden.net>,
Gus Richter <gusrichter@netscape.net> wrote:
> dorayme wrote:
> > In article <A9ydnRhWXPhMmJPVnZ2dnUVZ_uWdnZ2d@golden.net>,
> > Gus Richter <gusrichter@netscape.net> wrote:
> >
> >> richard wrote:
> >>> Taking a clue from you, I simply applied the clear:left to an HR.
> >>> Which helps to act as a seperator for the "rows".
> >> 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   inside if you take
> > the clearing div route.
>
> 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.
--
dorayme
Report this message |
#15: Re: how to cure FF problem
Posted on 2008-04-23 01:09:54 by cfajohnson
On 2008-04-22, dorayme wrote:
> In article <A9ydnRhWXPhMmJPVnZ2dnUVZ_uWdnZ2d@golden.net>,
> Gus Richter <gusrichter@netscape.net> wrote:
>
>> richard wrote:
>> >
>> > Taking a clue from you, I simply applied the clear:left to an HR.
>> > Which helps to act as a seperator for the "rows".
>>
>> 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   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.
--
Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
============================================================ =======
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Report this message |
