Firefox CSS display problem

**Spartanicus** · Sep 15 '05, 12:25 AM

Re: Firefox CSS display problem

Diane Wilson <diane@firelily .com> wrote:
[color=blue]
>This site is *almost* working correctly; it looks fine in IE6 and
>Opera, but the top <div> does not display correctly on Firefox.
>The page is at http://dianewilson.us/buffy/[/color]

Define a 194px height for div#header, the div containing the image is
floated so it is removed from the flow, hence the div#header's height
collapses.

--
Spartanicus

**Diane Wilson** · Sep 15 '05, 12:45 AM

Re: Firefox CSS display problem

In article
<kgfhi1piqv5cm5 o1b7l2om8lja5rk 2vkar@news.spar tanicus.utvinte rnet.ie>,
invalid@invalid .invalid says...[color=blue]
> Diane Wilson <diane@firelily .com> wrote:
>[color=green]
> >This site is *almost* working correctly; it looks fine in IE6 and
> >Opera, but the top <div> does not display correctly on Firefox.
> >The page is at http://dianewilson.us/buffy/[/color]
>
> Define a 194px height for div#header, the div containing the image is
> floated so it is removed from the flow, hence the div#header's height
> collapses.
>
>[/color]
ohhhh kaaayyyyy

I had to go to 200px to even up the bottom edge of the black area
across the page, but it does work. Thanks.

Now why, exactly, does that feel like such a *hack*?

Diane

**Jim Moe** · Sep 15 '05, 06:45 AM

Re: Firefox CSS display problem

Diane Wilson wrote:[color=blue]
>
> I had to go to 200px to even up the bottom edge of the black area
> across the page, but it does work. Thanks.
>[/color]
Because #logo and #pageheaer have different margin values.

Why are the two images wrapped in a <div> each, anyway? It is rather
unnecessary. After copying everything in "#header #nav p" to "#header
#nav", change the whole header to this (extraneous stuff pruned):

<div id="header">
<p id="nav">
<a href="./index.aspx">Hom e</a> 
<a href="./intro.aspx">Int ro</a> 
<a href="./schedule.aspx"> Schedule</a> 
<a href="./notes.aspx">Not es</a>
</p>
<img src="./unitarian.jpg" alt="The Unitarian Slayer">
<img src="./banner.jpg" alt=" ">
</div>

No more alignment problems.
[color=blue]
> Now why, exactly, does that feel like such a *hack*?
>[/color]
Because you do not understand how it works yet, grasshopper.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

**David Dorward** · Sep 15 '05, 06:45 AM

Re: Firefox CSS display problem

Diane Wilson wrote:
[color=blue]
> The problem: the background color does not fill on Firefox[/color]

http://www.complexspiral.com/publica...aining-floats/ looks like the
answer.

--
David Dorward <http://blog.dorward.me .uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

**Martin Bialasinski** · Sep 15 '05, 10:15 AM

Re: Firefox CSS display problem

Diane Wilson <diane@firelily .com> wrote:
[color=blue]
> The page is at http://dianewilson.us/buffy/[/color]

Besides what was already said: Your page is in quirks mode. So browser
emulate incorrect behaviour of their previous versions. Use a doctype
that makes the browser use standards mode for more consistent
behaviour.

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

Another thing:

<span id="Quote1_lblQ uote"><div class=footerQuo te> is invalid. A SPAN
cannot contain a DIV.

For every invalid thing, the browsers try to correct the error. How
they correct it may differ, so it is better to use valid markup for
predictable results.

Check out the W3C validator.

Bye,
Martin

**Diane Wilson** · Sep 15 '05, 04:35 PM

Re: Firefox CSS display problem

In article <w6OdnV1m9JgiiL TeRVn-vw@giganews.com >, jmm-list.AXSPAMGN@s ohnen-
moe.com says...[color=blue]
> Diane Wilson wrote:[color=green]
> >
> > I had to go to 200px to even up the bottom edge of the black area
> > across the page, but it does work. Thanks.
> >[/color]
> Because #logo and #pageheaer have different margin values.[/color]

Umm, no they don't, except to maintain a .5% gap between them.
[color=blue]
> Why are the two images wrapped in a <div> each, anyway? It is rather
> unnecessary. After copying everything in "#header #nav p" to "#header
> #nav", change the whole header to this (extraneous stuff pruned):
>
> <div id="header">
> <p id="nav">
> <a href="./index.aspx">Hom e</a> 
> <a href="./intro.aspx">Int ro</a> 
> <a href="./schedule.aspx"> Schedule</a> 
> <a href="./notes.aspx">Not es</a>
> </p>
> <img src="./unitarian.jpg" alt="The Unitarian Slayer">
> <img src="./banner.jpg" alt=" ">
> </div>
>
> No more alignment problems.[/color]

No, that just changes the alignment problems, and breaks the intent
of the page design. The top nav should be aligned with the right image.
The vertical alignment needs to run from top nav all the way to the
bottom of the page, across all the <div> tags. Which is exactly
what tables do so well and CSS does so poorly.
[color=blue][color=green]
> > Now why, exactly, does that feel like such a *hack*?
> >[/color]
> Because you do not understand how it works yet, grasshopper.[/color]

It's a hack because one should never set the vertical height for
a container. Nor should one code height or width or text size in
pixels without an extremely good reason.

Diane

**Diane Wilson** · Sep 15 '05, 04:35 PM

Re: Firefox CSS display problem

In article <dgb4oq$odn$1$8 302bc10@news.de mon.co.uk>, dorward@yahoo.c om
says...[color=blue]
> Diane Wilson wrote:
>[color=green]
> > The problem: the background color does not fill on Firefox[/color]
>
> http://www.complexspiral.com/publica...aining-floats/ looks like the
> answer.
>
>
>[/color]
Thanks for the link to an interesting page, but it doesn't seem to
address the problem here. I want a 2x3 rectangular grid. CSS just
doesn't seem to know how to do that.

Diane

**Diane Wilson** · Sep 15 '05, 04:45 PM

Re: Firefox CSS display problem

In article <87fys6n0g0.fsf @haitech.martin .home>, agr30+news@uni-koeln.de
says...[color=blue]
> Diane Wilson <diane@firelily .com> wrote:
>[color=green]
> > The page is at http://dianewilson.us/buffy/[/color]
>
> Besides what was already said: Your page is in quirks mode. So browser
> emulate incorrect behaviour of their previous versions. Use a doctype
> that makes the browser use standards mode for more consistent
> behaviour.
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">[/color]

Which breaks the original fix to correct the lack of fill in a <div>.
[color=blue]
> Another thing:
>
> <span id="Quote1_lblQ uote"><div class=footerQuo te> is invalid. A SPAN
> cannot contain a DIV.[/color]

The <span> is generated code and is effectively irrelevant; there are
no style characteristics to correspond to it. And I don't that an
invalid <span> in the footer is breaking the header.

The <div> is also generated code, but at least that's *my* code and
I can fix it.... although a <div> is really the preferred way to
contain a quote that may have multiple paragraphs.
[color=blue]
> For every invalid thing, the browsers try to correct the error. How
> they correct it may differ, so it is better to use valid markup for
> predictable results.
>
> Check out the W3C validator.[/color]

I'd be a lot happier with validators if there were a way to cope
with markup that's generated by tools but doesn't have anything
to do with display and rendering. I'm not going back to hand
coding, and I *need* the tools for server-side work, whether they
generate perfect markup or not.

Diane

**Jim Moe** · Sep 15 '05, 06:15 PM

Re: Firefox CSS display problem

Diane Wilson wrote:[color=blue]
>
> No, that just changes the alignment problems, and breaks the intent
> of the page design. The top nav should be aligned with the right image.
> The vertical alignment needs to run from top nav all the way to the
> bottom of the page, across all the <div> tags. Which is exactly
> what tables do so well and CSS does so poorly.
>[/color]
I cannot visualize what your are hoping to achieve from the description.
Provide a test case showing the table-based layout you wish to emulate,
and your best effort to date.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

**David Dorward** · Sep 15 '05, 06:46 PM

Re: Firefox CSS display problem

Diane Wilson wrote:
[color=blue]
> I want a 2x3 rectangular grid. CSS just doesn't seem to know how to do
> that.[/color]

div { display: table-row; }
div div { display: table-cell; }

<div>
<div>a</div>
<div>b</div>
<div>c</div>
</div>
<div>
<div>d</div>
<div>e</div>
<div>f</div>
</div>

Needs a CSS 2 capable browser.

--
David Dorward <http://blog.dorward.me .uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

**Martin Bialasinski** · Sep 16 '05, 12:15 AM

Re: Firefox CSS display problem

Diane Wilson <diane@firelily .com> wrote:
[color=blue]
> In article <87fys6n0g0.fsf @haitech.martin .home>, agr30+news@uni-koeln.de
> says...[color=green]
>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
>> "http://www.w3.org/TR/html4/strict.dtd">[/color]
>
> Which breaks the original fix to correct the lack of fill in a <div>.[/color]

Then you can use a fix that does the thing on a standards page. Put a copy of
the page online with the standards doctype, and people can have a look. In
quirks mode, margins, padding, widths, and heights are very
inconsistent between browsers. Thous the differences you see, because the
browsers emulate different bugs instead of adhering to the common
standard.
[color=blue][color=green]
>> <span id="Quote1_lblQ uote"><div class=footerQuo te> is invalid. A SPAN
>> cannot contain a DIV.[/color]
>
> The <span> is generated code and is effectively irrelevant;[/color]

I do not say this has anything to do with the header, it was a general
remark. I just say, that browsers could build their internal
representation of the structure of the page (the DOM) in a way you do
not expect them to do, when they try to fix the error in the
markup. Which then can make things break, as the DOM defines what
thing do get applied to what element.

Bye,
Martin

Firefox CSS display problem

Firefox CSS display problem

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment