Web Design Web Design Forum
Registration is free! Here you can view your subscribed threads, work with private messages and edit your profile and preferences Calendar Find other members Frequently Asked Questions Search
Home Web Design

Convenient web based access to our favorite web design Usenet groups
web design reviews

This is Interesting: Free Magazines for Graphics designers and webmasters  





Pages (2): [1] 2 »   Last Thread  Next Thread
Author
Thread Post New Thread   

Firefox CSS display problem
 

Diane Wilson




quote this post edit post

IP Loged report this post
Old Post  09-15-05 - 04:21 AM   
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


[  Post Follow-Up to this message ]
Re: Firefox CSS display problem
 

Spartanicus




quote this post edit post

IP Loged report this post
Old Post  09-15-05 - 04:21 AM   
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


[  Post Follow-Up to this message ]
Re: Firefox CSS display problem
 

Diane Wilson




quote this post edit post

IP Loged report this post
Old Post  09-15-05 - 04:21 AM   
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


[  Post Follow-Up to this message ]
Re: Firefox CSS display problem
 

Jim Moe




quote this post edit post

IP Loged report this post
Old Post  09-15-05 - 09: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>&nbsp;
<a href="./intro.aspx">Intro</a>&nbsp;
<a href="./schedule.aspx">Schedule</a>&nbsp;
<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)


[  Post Follow-Up to this message ]
Re: Firefox CSS display problem
 

David Dorward




quote this post edit post

IP Loged report this post
Old Post  09-15-05 - 09:26 AM   
Diane Wilson wrote:

> The problem: the background color does not fill on Firefox

http://www.complexspiral.com/public...taining-floats/ looks like the
answer.


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


[  Post Follow-Up to this message ]
Re: Firefox CSS display problem
 

Martin Bialasinski




quote this post edit post

IP Loged report this post
Old Post  09-15-05 - 12:29 PM   
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


[  Post Follow-Up to this message ]
Re: Firefox CSS display problem
 

Diane Wilson




quote this post edit post

IP Loged report this post
Old Post  09-16-05 - 12:39 AM   
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>&nbsp;
>    <a href="./intro.aspx">Intro</a>&nbsp;
>    <a href="./schedule.aspx">Schedule</a>&nbsp;
>    <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


[  Post Follow-Up to this message ]
Re: Firefox CSS display problem
 

Diane Wilson




quote this post edit post

IP Loged report this post
Old Post  09-16-05 - 12:39 AM   
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 th
e
> 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


[  Post Follow-Up to this message ]
Re: Firefox CSS display problem
 

Diane Wilson




quote this post edit post

IP Loged report this post
Old Post  09-16-05 - 12:39 AM   
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


[  Post Follow-Up to this message ]
Re: Firefox CSS display problem
 

Jim Moe




quote this post edit post

IP Loged report this post
Old Post  09-16-05 - 12:40 AM   
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)


[  Post Follow-Up to this message ]
Sponsored Links
 





All times are GMT. The time now is 07:46 AM. Post New Thread   
Pages (2): [1] 2 »   Previous Last Thread   Next Thread next
Stylesheets archive | Show Printable Version | Email this Page | Subscribe to this Thread

Popular forums

Adobe Photoshop forum Macromedia Flash Web Site Design
Dreamweaver FrontPage forum
JavaScript Forum XML forum
Style Sheets VRML
Forum Jump:
Rate This Thread:

 

XML RSS Feed web design latest articles Syndicate our forum via XML or simple JavaScript

Web Design archive  Database administration help  


Top Home  -  Register  -  Control Panel   -  Memberlist  -  Calendar  -  Faq  -  Search Top