Re: [css-d] clearing a CSS float
Bill Brown wrote:
...
Try this:
ul, li {
list-style: none;
margin: 0;
padding:0;
}
ul {
display:inline-block; /* IE Float Clear, Part 1 */
overflow: hidden; /* Float Clear */
}
ul {
display:block;/* IE Float Clear, Part II */
}
li {
display:inline; /* IE Double Margins Bug Fix */
float: left;
padding:0 10px 0 0;
}
That should put anything after the UL below the UL. The only time this
fix won't work obviously is if you're using a fly-out menu. In that
case, you can leave the IE fix in place, but would need to adjust the
fix for other browsers using the :after pseudo element on the UL.
I would not recommend this inline-block/block trip-switch combination.
It is complicated, and someone who does not know about this peculiar
hasLayout-sidenote (that is, display:inline-block sets haslayout in a
silent way that cannot be reset later on) won't understand it no matter
what or how much you are commenting at its side.
For the 17 lines of code, 5 are just because of IE 6. From an conformant
browser's point of view, the code is hermetic and makes not much sense.
To makes things worse, the overflow-clearing is far from
self-explaining. So maintaining this code will lead to further questions
or further bugs. It should not be that difficult to clear something in CSS.
I'm not saying the code would be bad or would not work. I am using the
word hermetic here as Those who could understand this code would not
have to ask for it.
Ingo
--
http://www.satzansatz.de/css.html
http://www.dolphinsback.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] clearing a CSS float
I often run into something like this:
ul id=menu
lia href=..Link A/a/li
lia href=..Link B/a/li
/ul
h1Fancy Title/h1
pBlah blah blah ... /p
Where I am using floats in the ul menu above. This happens when I am using
columns as well.
The problem is that h1 shows up just to the right of the menu.
To try and correct that - I've added h1 { clear: both } but this obviously
doesn't work. If I wrap the h1 in a div, then all is well if the div has
style=clear: both ... but that sounds like html for the sake of style.
I'd like to keep layout OUT of the html but I'm not sure what the common
approach is here ... I've even gone as far as adding
div style=clear: bothnbsp;/div to get out of float mode ... which
works great ... but isn't elegant and not in the spirit of CSS at all.
Thoughts?
-Luther
*
HOPED FOR:*
*LinkA* *LinkB*
*Fancy Title
*
Blah Blah
*ACTUAL (not exactly, but similar):*
*LinkA* *LinkB** Fancy Title
*
Blah Blah
*Current CSS:
*
ul,
ul li
{
list-style: none;
float: left;
margin: 0;
padding: 0;
}
ul li
{
display: block;
float: left;
padding-right: 10px;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] clearing a CSS float
Luther Baker wrote:
ul id=menu
lia href=..Link A/a/li
lia href=..Link B/a/li
/ul
h1Fancy Title/h1
pBlah blah blah ... /p
Current CSS:
ul,
ul li
{
list-style: none;
float: left;
margin: 0;
padding: 0;
}
ul li
{
display: block;
float: left;
padding-right: 10px;
}
Hi Luther,
Try this:
ul, li {
list-style: none;
margin: 0;
padding:0;
}
ul {
display:inline-block; /* IE Float Clear, Part 1 */
overflow: hidden; /* Float Clear */
}
ul {
display:block;/* IE Float Clear, Part II */
}
li {
display:inline; /* IE Double Margins Bug Fix */
float: left;
padding:0 10px 0 0;
}
That should put anything after the UL below the UL. The only time this
fix won't work obviously is if you're using a fly-out menu. In that
case, you can leave the IE fix in place, but would need to adjust the
fix for other browsers using the :after pseudo element on the UL.
Hope it helps.
Bill
--
~~~
Bill Brown, MacNimble.com :: From dot concept to dot com since 1999
WebDevelopedia.com, TheHolierGrail.com, Cyber-Sandbox.com, Anytowne.com
The intuitive mind is a sacred gift and the rational mind is a
faithful servant. We have created a society that honors the servant and
has forgotten the gift. -- Albert Einstein
~~~
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] clearing a CSS float
Wow!
Krystian - h1 doesn't seem to clear for me by default (XHTML strict,
firefox) - but when I explicitly include it - it DOES work. I mistyped it
earlier but thanks to you, I revisited it and noticed ':' instead of ';'
Bill - wow! Now that's what I was looking for. Only the LIs are floating so
it makes perfect sense that UL starts and closes that box.
Super! Thanks so much!
-Luther
On Fri, Sep 19, 2008 at 2:08 PM, Bill Brown [EMAIL PROTECTED] wrote:
Luther Baker wrote:
ul id=menu
lia href=..Link A/a/li
lia href=..Link B/a/li
/ul
h1Fancy Title/h1
pBlah blah blah ... /p
Current CSS:
ul,
ul li
{
list-style: none;
float: left;
margin: 0;
padding: 0;
}
ul li
{
display: block;
float: left;
padding-right: 10px;
}
Hi Luther,
Try this:
ul, li {
list-style: none;
margin: 0;
padding:0;
}
ul {
display:inline-block; /* IE Float Clear, Part 1 */
overflow: hidden; /* Float Clear */
}
ul {
display:block;/* IE Float Clear, Part II */
}
li {
display:inline; /* IE Double Margins Bug Fix */
float: left;
padding:0 10px 0 0;
}
That should put anything after the UL below the UL. The only time this fix
won't work obviously is if you're using a fly-out menu. In that case, you
can leave the IE fix in place, but would need to adjust the fix for other
browsers using the :after pseudo element on the UL.
Hope it helps.
Bill
--
~~~
Bill Brown, MacNimble.com :: From dot concept to dot com since 1999
WebDevelopedia.com, TheHolierGrail.com, Cyber-Sandbox.com, Anytowne.com
The intuitive mind is a sacred gift and the rational mind is a
faithful servant. We have created a society that honors the servant and
has forgotten the gift. -- Albert Einstein
~~~
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
