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 11  10821 
Diane Wilson <di***@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
In article
<kg********************************@news.spartanic us.utvinternet.ie>, in*****@invalid.invalid says... Diane Wilson <di***@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.
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
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)
Diane Wilson <di***@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
In article <w6********************@giganews.com>, jmm-list.AXSPAMGN@sohnen-
moe.com says... 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.
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. Now why, exactly, does that feel like such a *hack*?
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
In article <dg*******************@news.demon.co.uk>, do*****@yahoo.com
says... Diane Wilson wrote:
The problem: the background color does not fill on Firefox
http://www.complexspiral.com/publica...aining-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
In article <87************@haitech.martin.home>, ag********@uni-koeln.de
says... Diane Wilson <di***@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">
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
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)
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
Diane Wilson <di***@firelily.com> wrote: In article <87************@haitech.martin.home>, ag********@uni-koeln.de
says... <!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>.
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. <span id="Quote1_lblQuote"><div class=footerQuote> is invalid. A SPAN
cannot contain a DIV.
The <span> is generated code and is effectively irrelevant;
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 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: mike |
last post by:
I have a page that uses a some javascript and it works fine in IE but
fails to work in Firefox. Basically what I'm trying to do is have 3
iframes on a page but only displaying one of them at a...
|
by: Jeremy Epstein |
last post by:
Hi guys,
I've got a page that shows a number of packages available for sale. Each
package has a little description, and then a (sometimes long) list of
features for each package. I thought it...
|
by: LRW |
last post by:
(Sorry if this is a repost...my newsreader keeps crashing on the
posting--I don't know if the message going out or not)
For some reason this javascript just won't work in Firefox. It works
fine...
|
by: David Hayes |
last post by:
I've made tooltips work in Firefox*, but tooltip doesn't appear at the
specified location until the SECOND time that the user passes the mouse over
the location with the mouseover event. What I...
|
by: books1999 |
last post by:
Hi there,
I have a problem with this css/div and i cannot work it out. I would
like either container to be able to push the background box to grow but
in Firefox it overflows. Can someone find a...
| | |
by: Coder |
last post by:
Hi I have the following code in java script, it is not giving proper
output in FIREFOX but running fine in IE... can anybody help me out to
make this run in FIREFOX .
<script...
|
by: Noah Sussman |
last post by:
Hello,
I am writing a function to reposition an element based on whether one
of its edges is outside the visible area of the browser window (the
code is below). My client has asked for code...
|
by: Xah Lee |
last post by:
Look at this page
http://xahlee.org/emacs/wrap-url.html
Look at it in Firebox, look at it in Safari, in Opera, and look at it
in Microsoft Internet Explorer.
The only fucked up case, is...
|
by: autospanker |
last post by:
Ladies and Gentleman,
I have been having this problem that has been driving me insane. I have a website that when viewed in Firefox first, the content in the body area is pushed down. Then when...
|
by: SAL |
last post by:
Hello, I did google this issue and found some stuff related to BrowserCaps
section of either web.config or machine.config but it didn't work.
It seems that most pages in my webapp are okay but a...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
| | |
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
| | |
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| |
