I'm using the example in
<http://www.alistapart.com/stories/practicalcss/> to create a
navigation bar without using tables. The navigation buttons float to
the left and the logo floats to the right. To keep the containing div
from collapsing there is an empty div with style="clear: both;" at the
end. This works so long as there is a border to the containing div.
If there is no border then the background color is not set - just as
if the containing div had collapsed to nothing.
I'm using Mozilla. Is this a bug, and is there a good workaround? I
can think of a couple - use nbsp, only float one of the divs, make the
border the same colour as the background. But I'd really like to
understand why it makes a difference if a border is present or not.
--
__o Alex Farran
_`\<,_ Analyst / Programmer
(_)/ (_) www.alexfarran.com 9 5704
In article <m3************@localhost.localdomain>, al**@alexfarran.com
says... I'm using the example in <http://www.alistapart.com/stories/practicalcss/> to create a navigation bar without using tables. The navigation buttons float to the left and the logo floats to the right. To keep the containing div from collapsing there is an empty div with style="clear: both;" at the end. This works so long as there is a border to the containing div. If there is no border then the background color is not set - just as if the containing div had collapsed to nothing.
URL?
Jacqui or (maybe) Pete writes: URL?
<http://www.alexfarran.com/mozbug>
Fiddling around a bit it looks like background colour only extends as
far as the lines where there is non floated content, and not to the
bottom of the div as you'd expect. Layout is unaffected.
--
__o Alex Farran
_`\<,_ Analyst / Programmer
(_)/ (_) www.alexfarran.com
In article <m3************@localhost.localdomain>, al**@alexfarran.com
says...
.... <http://www.alexfarran.com/mozbug>
Fiddling around a bit it looks like background colour only extends as far as the lines where there is non floated content, and not to the bottom of the div as you'd expect. Layout is unaffected.
That's very interesting. I can't think of a reason why the borders
should affect anything, and I'd certainly be interested in any other
views on the subject - unfortunately, Jukka seems to be on holiday right
now!
OTOH, I can give you a simple fix for the problem (if you have a
problem). See: http://porjes.com/ala.html
I've just put a (non-floated) space between the two spans, which sets
the height of the div. Of course if you have bolding or font sizes on
the spans then you also have to apply them to the div (so that the space
is the same height as the spans).
Hope that's helpful.
Alex Farran wrote: <http://www.alexfarran.com/mozbug>
Fiddling around a bit it looks like background colour only extends as far as the lines where there is non floated content, and not to the bottom of the div as you'd expect. Layout is unaffected.
If the only things in the div are floated about, and there's no border,
there's no height to the div, is there?
That's what Mozilla's DOM inspector seems to indicate.
--
Jim Davis
In article <MP************************@news.cis.dfn.de>, la***@raittila.cjb.net says... In article <MP************************@news.CIS.DFN.DE>, Jacqui or (maybe) Pete wrote: In article <m3************@localhost.localdomain>, al**@alexfarran.com says... ... <http://www.alexfarran.com/mozbug>
Fiddling around a bit it looks like background colour only extends as far as the lines where there is non floated content, and not to the bottom of the div as you'd expect. Layout is unaffected.
.... http://porjes.com/ala.html
I've just put a (non-floated) space between the two spans, which sets
.... But you also set the height of div. (1.4em). Does it work whitout? Works on Opera 7.2b1, but so did all others.
No, it didn't! I'd forgotten I'd put that height in.
I thought that a non-floated space would set the height of the div, but
Mozilla ignores it. However, if I add a at the end of the div
then Mozilla finally understands: http://porjes.com/ala2.html
(I've also simplified the html some more).
Jim Davis writes: Alex Farran wrote: <http://www.alexfarran.com/mozbug> Fiddling around a bit it looks like background colour only extends as far as the lines where there is non floated content, and not to the bottom of the div as you'd expect. Layout is unaffected.
If the only things in the div are floated about, and there's no border, there's no height to the div, is there?
Normally, but there is a spacer div at the bottom with "clear: both;"
set that ought to give the containing div some height. If you were to
remove it from the containing div with a border then it wouldn't have
any height either.
That's what Mozilla's DOM inspector seems to indicate.
That looks useful. I think I'll install it.
--
__o Alex Farran
_`\<,_ Analyst / Programmer
(_)/ (_) www.alexfarran.com
Lauri Raittila writes: In article <MP************************@news.CIS.DFN.DE>, Jacqui or (maybe) Pete wrote: OTOH, I can give you a simple fix for the problem (if you have a problem). See:
http://porjes.com/ala.html
I've just put a (non-floated) space between the two spans, which sets the height of the div. Of course if you have bolding or font sizes on the spans then you also have to apply them to the div (so that the space is the same height as the spans).
But you also set the height of div. (1.4em). Does it work whitout? Works on Opera 7.2b1, but so did all others.
I don't think it will, but an character in the same place will
work.
--
__o Alex Farran
_`\<,_ Analyst / Programmer
(_)/ (_) www.alexfarran.com
Jacqui or (maybe) Pete wrote: In article <o8******************@news02.roc.ny>, re*******@frontiernet.net says...If the only things in the div are floated about, and there's no border, there's no height to the div, is there?
Yeah, but he's got a 'clear:both' div in there.
According to this: http://www.w3.org/TR/REC-CSS2/visuren.html#flow-control
It looks like the clear:both might've done something if it were /after/
the floated spans instead of before them.
I realize this isn't about margins, but I think maybe I was thinking of
this: http://bugzilla.mozilla.org/show_bug.cgi?id=200765
That had bitten me in the keister once before, and thought may possibly
be related. Still, DOM Inspector shows both divs right outside the
floats as being 0x0.
--
Jim Davis
Alex Farran wrote: Normally, but there is a spacer div at the bottom with "clear: both;" set that ought to give the containing div some height. If you were to remove it from the containing div with a border then it wouldn't have any height either.
OH! Duh. Sorry, I only saw the one above it, didn't see the "clear:
both" below the floats. Please ignore the post where I linked to CSS specs. That's what Mozilla's DOM inspector seems to indicate.
That looks useful. I think I'll install it.
Never having knowingly messed with (or even, understood the acronym) the
DOM before I used the inspector, it was kind of tricky... but very handy
and enlightening.
I realize a work-around may not be what you're looking for, but I
noticed that removing both the '<div class="spacer"></div>' divs and
adding a '<br style="clear: both;" />' immediately after the '<div
class="row">...</div>' seems to work.
--
Getting more confused by the day,
Jim Davis This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Carl Gilbert |
last post by:
Hi
I am currently writing a site that utilises tables. I have one page
that links to a second page.
The only problem is that when I link to the second page, the table
loads up with a...
|
by: KathyB |
last post by:
Hi, I'm trying to find a way to validate input text boxes where I
don't know the names until the page is rendered. I've got 2 validate
functions that fire with the onsubmit button of a "mini" form...
|
by: yurps |
last post by:
Hello here is my html, if you click the missing image in the first
column on the left, the div is shown, when clicked again the div
disappears...but the bottom border disappears as well...Is there...
|
by: Haines Brown |
last post by:
I know I'm missing something obvious. I need a short horizontal rule
to preceed a line of text (in a bibliography in which the author is
repeated). I tried this:
<p>
<div class="rule"></div>,...
|
by: Jim in Arizona |
last post by:
I'm brand new at ajax. In fact, about 20 minutes ago was the first time I
got it to work. The problem I'm having on another page did not work,
however.
I'm running into the following error:
...
|
by: dlite922 |
last post by:
The frustrating thing with coding with divs instead of tables is trying to get them to "act" like they're inside each other.
I have a container div, and three sub-divs.
First contains a plus...
|
by: kailashchandra |
last post by:
Below is my code.i want the first division should be load when window is loading.
<HTML>
<HEAD>
<script>
function tabFunc(getthis)
{
var getIn=getthis.innerHTML;
var...
|
by: happyse27 |
last post by:
Hi All,
I got this apache errors(see section A1 and A2 below) when I used a html(see section b below) to activate acctman.pl(see section c below). Section D below is part of the configuration...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
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: 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: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
| |