This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > September 2005 > Firefox CSS display problem
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
Firefox CSS display problem
|
|
| Diane Wilson 2005-09-14, 11:21 pm |
| I'm still working my way through the CSS box model to do tableless
layout. Thanks to all here who have helped previously; I'm making
progress but still running into issues.
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/
The top of the page is a <div> defined as follows:
#header {
padding: 0;
margin: 0;
width: 100%;
background-color: black;
clear: both;
}
Additional id styles are defined for use inside this <div>.
Those <div>'s also set background color of black, and some
contain images with black background. However, the problem
becomes evident below the left-side image, and also between
the images if the window is wide enough.
The problem: the background color does not fill on Firefox
(or on Safari, although my Safari is back-level). The
<div> areas inside <div id=header> *do* fill properly (also
set for background-color: black).
Also, there is a gap above the <div> on Firefox.
Any suggestions on how to fix?
Diane
| |
| Spartanicus 2005-09-14, 11:21 pm |
| Diane Wilson <diane@firelily.com> wrote:
>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/
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 2005-09-14, 11:21 pm |
| In article
<kgfhi1piqv5cm5o1b7l2om8lja5rk2vkar@news.spartanicus.utvinternet.ie>,
invalid@invalid.invalid says...
> Diane Wilson <diane@firelily.com> wrote:
>
>
> 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.
>
>
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 2005-09-15, 4:26 am |
| Diane Wilson wrote:
>
> I had to go to 200px to even up the bottom edge of the black area
> across the page, but it does work. Thanks.
>
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">Home</a>
<a href="./intro.aspx">Intro</a>
<a href="./schedule.aspx">Schedule</a>
<a href="./notes.aspx">Notes</a>
</p>
<img src="./unitarian.jpg" alt="The Unitarian Slayer">
<img src="./banner.jpg" alt=" ">
</div>
No more alignment problems.
> Now why, exactly, does that feel like such a *hack*?
>
Because you do not understand how it works yet, grasshopper.
--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
| |
|
|
| Martin Bialasinski 2005-09-15, 7:29 am |
| Diane Wilson <diane@firelily.com> wrote:
> The page is at http://dianewilson.us/buffy/
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_lblQuote"><div class=footerQuote> 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 2005-09-15, 7:39 pm |
| In article <w6OdnV1m9JgiiLTeRVn-vw@giganews.com>, jmm-list.AXSPAMGN@sohnen-
moe.com says...
> Diane Wilson wrote:
> Because #logo and #pageheaer have different margin values.
Umm, no they don't, except to maintain a .5% gap between them.
> 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">Home</a>
> <a href="./intro.aspx">Intro</a>
> <a href="./schedule.aspx">Schedule</a>
> <a href="./notes.aspx">Notes</a>
> </p>
> <img src="./unitarian.jpg" alt="The Unitarian Slayer">
> <img src="./banner.jpg" alt=" ">
> </div>
>
> No more alignment problems.
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.
> Because you do not understand how it works yet, grasshopper.
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 2005-09-15, 7:39 pm |
| In article <dgb4oq$odn$1$8302bc10@news.demon.co.uk>, dorward@yahoo.com
says...
> Diane Wilson wrote:
>
>
> http://www.complexspiral.com/public...taining-floats/ looks like the
> answer.
>
>
>
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 2005-09-15, 7:39 pm |
| In article <87fys6n0g0.fsf@haitech.martin.home>, agr30+news@uni-koeln.de
says...
> Diane Wilson <diane@firelily.com> wrote:
>
>
> 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">
Which breaks the original fix to correct the lack of fill in a <div>.
> Another thing:
>
> <span id="Quote1_lblQuote"><div class=footerQuote> is invalid. A SPAN
> cannot contain a DIV.
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.
> 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.
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 2005-09-15, 7:40 pm |
| Diane Wilson wrote:
>
> 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.
>
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 2005-09-15, 7:40 pm |
| Diane Wilson wrote:
> I want a 2x3 rectangular grid. CSS just doesn't seem to know how to do
> that.
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
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|