[css-d] Float drop problem
Hello,
Does anyone have a minute to look at my problem? I was tinkering with my
site this morning, and caused a float drop problem in IE6. What happened
was. I was trying to create some white space between my secondary nav and
the side of my page. My site is: drafting services . com (remove all
spaces). My code is:
/* = Secondary Navigation = */
/* = 0border+0padding+10margin+190width=200 = */
#navtwocontainer {
float: left;
padding: 10px 0px 0px 0px;
margin: 0px 0px 0px 10px;
width: 190px;
}
#navtwocontainer ul {
padding-left: 0;
margin-left:0;
list-style-type: none;
}
/* = 0border+20padding+170width=190 = */
#navtwocontainer a {
display: block;
padding: 3px 10px;
margin: 0;
width: 170px;
text-decoration: none;
color: #000;
background-color: #EAEAEA;
border-bottom: 1px solid #fff;
}
#navtwocontainer a:hover
{
text-decoration: underline;
}
Sincerely,
Brian M. Curran | CAD Consultant
__
css-discuss [cs...@lists.css-discuss.org]
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] Float drop problem
Brian M. Curran wrote:
I was tinkering with my
site this morning, and caused a float drop problem in IE6. What happened
was. I was trying to create some white space between my secondary nav and
the side of my page. My site is: drafting services . com (remove all
spaces).
Sincerely,
Brian M. Curran | CAD Consultant
Brian,
IE/6.0 doubles the margin-left causing the float to drop.
The correction is:
* html #navtwocontainer {
display : inline;
} /* only IE/6.0 sees the star hack */
Best,
~d
reference
http://www.satzansatz.de/cssd/onhavinglayout.html
--
:: desktop and mobile ::
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
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] Float drop problem
Brian M. Curran wrote:
Hello,
Does anyone have a minute to look at my problem? I was tinkering with my
site this morning, and caused a float drop problem in IE6. What happened
was. I was trying to create some white space between my secondary nav and
the side of my page. My site is: drafting services . com (remove all
spaces). My code is:
/* = Secondary Navigation = */
/* = 0border+0padding+10margin+190width=200 = */
#navtwocontainer {
float: left;
padding: 10px 0px 0px 0px;
margin: 0px 0px 0px 10px;
width: 190px;
}
[snip]
Sincerely,
Brian M. Curran | CAD Consultant
I would say the best approach is to hit the floated element that is
dropping. Add a negative margin-left.
#contentRight {
float: right;
margin: 0;
padding: 10px;
width: 220px;
background: #eee;
margin-left:-10px; /* add to allow the left edge of the float to
overlap #contentMiddle in IE6 */
}
This should not affect the other browsers.
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
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] Float drop problem
David Laakso wrote:
Brian,
IE/6.0 doubles the margin-left causing the float to drop.
The correction is:
* html #navtwocontainer {
display : inline;
} /* only IE/6.0 sees the star hack */
Best,
~d
reference
http://www.satzansatz.de/cssd/onhavinglayout.html
Quite correct.
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
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] Float drop problem
Brian M. Curran wrote:
I was tinkering with my
site this morning, and caused a float drop problem in IE6. What
happened was. I was trying to create some white space between my
secondary nav and the side of my page. My site is: drafting services .
com (remove all spaces).
Sincerely,
Brian M. Curran | CAD Consultant
From: David Laakso
Brian,
IE/6.0 doubles the margin-left causing the float to drop.
The correction is:
* html #navtwocontainer {
display : inline;
} /* only IE/6.0 sees the star hack */
Best,
~d
reference
http://www.satzansatz.de/cssd/onhavinglayout.html
Thank you David!! I normally don't think bug when something is going wrong
in my desired results.
-Brian
__
css-discuss [cs...@lists.css-discuss.org]
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] Float drop problem
Brian M. Curran wrote:
Thank you David!! I normally don't think bug when something is going wrong
in my desired results.
-Brian
I think what Alan suggested will work as well and avoids writing a hack.
But then if you prefer to retaliate then what Georg Sortun wrote below
gives you yet another viable alternative :-) .
* html body {display: none;} ... I haven't figured out why some think
this hack is discriminating.
Best,
Paul Klee
--
:: desktop and mobile ::
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
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] different colour of an active link/page
Hi there,
I've been googling for it and a:active doesn't work as I'd like it to.
I've got a menu. When I hover over a menu item the colour changes to
orange. I'd like it
to stay orange as long as I'm on this particular page for visitors to
know where they are at the moment.
That's my css:
===
ul.nav {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
overflow: hidden;
/*background: url(images/menu-background-grey.gif) repeat-x; */
}
ul.nav li {
float: right;
}
ul.nav a {
display: block;
padding: 0 2em;
line-height: 40px;
text-decoration: none;
background: url(images/divider1.png) repeat-y right top;
color: grey;
}
ul.nav a:hover, ul.nav a:focus {
color: orange;
}
===
I tried the following:
ul.nav a: hover, ul.nav a:focus, ul.nav a:active {
color: orange;
}
but it doesn't work like I thought. The moment I remove the mouse
pointer from the link, it goes
back to gray.
Thank you
__
css-discuss [cs...@lists.css-discuss.org]
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] different colour of an active link/page
Martin wrote:
Hi there,
I've been googling for it and a:active doesn't work as I'd like it to.
I've got a menu. When I hover over a menu item the colour changes to
orange. I'd like it
to stay orange as long as I'm on this particular page for visitors to
know where they are at the moment.
Thank you
This i one way you might do it..?
css
li b {
color:#ff7f00;
display: block;
padding: 0 2em;
line-height: 40px; color:#ff7f00;
}
markup
ul
libhome/b/li
lia href=#work/a/li
lia href=#play/a/li
/ul
Best,
~d
--
:: desktop and mobile ::
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
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] different colour of an active link/page
On 08/28/2010 02:45 PM, David Laakso wrote:
Martin wrote:
Hi there,
I've been googling for it and a:active doesn't work as I'd like it to.
I've got a menu. When I hover over a menu item the colour changes to
orange. I'd like it
to stay orange as long as I'm on this particular page for visitors to
know where they are at the moment.
Thank you
This i one way you might do it..?
css
li b { color:#ff7f00;
display: block;
padding: 0 2em;
line-height: 40px; color:#ff7f00;
}
markup
ul
libhome/b/li
lia href=#work/a/li
lia href=#play/a/li
/ul
Best,
~d
That's clever.
Thank you!
regards
martin
__
css-discuss [cs...@lists.css-discuss.org]
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] different colour of an active link/page
Yeah. a:active doesn't do that. There is, however, a neat trick I
found somewhere that will do this for you.
First, on each and every page represented in the navigation, you have to
give the body tag an id like:
body id=home or body id=products Whatever the page is...
Then, in the navigation you need a separate id for each navigation
element (I'm just showing the hrefs):
a href=/ id=homenavHome/a or a href=products.htm
id=productsnavProducts/a and so on...
Then, in your CSS you need:
body#home a#homenav,
body#services a#productsnav {
background: rgb(212,201,182); --- substitute whatever color you want
here (make sure it's different than the default color)...
}
You can see how you'd add additional pages...
Now, when you navigate to a page, the associated link/button is highlighted.
Hope this helps...
On 8/28/2010 11:12 AM, Martin wrote:
Hi there,
I've been googling for it and a:active doesn't work as I'd like it to.
I've got a menu. When I hover over a menu item the colour changes to
orange. I'd like it
to stay orange as long as I'm on this particular page for visitors to
know where they are at the moment.
That's my css:
===
ul.nav {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
overflow: hidden;
/*background: url(images/menu-background-grey.gif) repeat-x; */
}
ul.nav li {
float: right;
}
ul.nav a {
display: block;
padding: 0 2em;
line-height: 40px;
text-decoration: none;
background: url(images/divider1.png) repeat-y right top;
color: grey;
}
ul.nav a:hover, ul.nav a:focus {
color: orange;
}
===
I tried the following:
ul.nav a: hover, ul.nav a:focus, ul.nav a:active {
color: orange;
}
but it doesn't work like I thought. The moment I remove the mouse
pointer from the link, it goes
back to gray.
Thank you
__
css-discuss [cs...@lists.css-discuss.org]
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-discuss [cs...@lists.css-discuss.org]
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] different colour of an active link/page
Martin wrote: Hi there, I've been googling for it and a:active doesn't work as I'd like it to. I've got a menu. When I hover over a menu item the colour changes to orange. I'd like it to stay orange as long as I'm on this particular page for visitors to know where they are at the moment. Thank you Martin, On my site I did what you're trying to do the hard way. Actually, it wasn't hard, but a little clunky. My solution was to place some css in the head of my pages. Check out my site, and you'll see how I did it: drafting services . com (remove spaces). -Brian __ css-discuss [cs...@lists.css-discuss.org] 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] different colour of an active link/page
On 08/28/2010 02:57 PM, Kevin Rodenhofer wrote:
Yeah. a:active doesn't do that. There is, however, a neat trick I
found somewhere that will do this for you.
First, on each and every page represented in the navigation, you have
to give the body tag an id like:
body id=home or body id=products Whatever the page is...
Then, in the navigation you need a separate id for each navigation
element (I'm just showing the hrefs):
a href=/ id=homenavHome/a or a href=products.htm
id=productsnavProducts/a and so on...
Then, in your CSS you need:
body#home a#homenav,
body#services a#productsnav {
background: rgb(212,201,182); --- substitute whatever color you want
here (make sure it's different than the default color)...
}
You can see how you'd add additional pages...
Now, when you navigate to a page, the associated link/button is
highlighted.
Hope this helps...
On 8/28/2010 11:12 AM, Martin wrote:
Hi there,
I've been googling for it and a:active doesn't work as I'd like it to.
I've got a menu. When I hover over a menu item the colour changes to
orange. I'd like it
to stay orange as long as I'm on this particular page for visitors to
know where they are at the moment.
That's my css:
===
ul.nav {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
overflow: hidden;
/*background: url(images/menu-background-grey.gif) repeat-x; */
}
ul.nav li {
float: right;
}
ul.nav a {
display: block;
padding: 0 2em;
line-height: 40px;
text-decoration: none;
background: url(images/divider1.png) repeat-y right top;
color: grey;
}
ul.nav a:hover, ul.nav a:focus {
color: orange;
}
===
I tried the following:
ul.nav a: hover, ul.nav a:focus, ul.nav a:active {
color: orange;
}
but it doesn't work like I thought. The moment I remove the mouse
pointer from the link, it goes
back to gray.
Thank you
__
css-discuss [cs...@lists.css-discuss.org]
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-discuss [cs...@lists.css-discuss.org]
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/
Thanks a lot guys
I can move on with the website now.
regards
martin
__
css-discuss [cs...@lists.css-discuss.org]
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] different colour of an active link/page
Hi
On my site i did this:
#navigation li a:hover { background-image:url(../images/hoover-btn.png);
color:#0af915;}
}
li#current li a:link, li#current li a:visited {
color: #0af915;
}
You can have a look, hoover changes only background button and text color,
after that it remains text color
http://tk-studio-design.webhop.org/Joomla/ under development( at the
moment) with IE6 issues and IE7 layout problems..
and no words about http://tk-studio-design.webhop.org :))
Tom
On Sat, Aug 28, 2010 at 5:43 PM, Martin mhe...@gmail.com wrote:
On 08/28/2010 02:57 PM, Kevin Rodenhofer wrote:
Yeah. a:active doesn't do that. There is, however, a neat trick I found
somewhere that will do this for you.
First, on each and every page represented in the navigation, you have to
give the body tag an id like:
body id=home or body id=products Whatever the page is...
Then, in the navigation you need a separate id for each navigation element
(I'm just showing the hrefs):
a href=/ id=homenavHome/a or a href=products.htm
id=productsnavProducts/a and so on...
Then, in your CSS you need:
body#home a#homenav,
body#services a#productsnav {
background: rgb(212,201,182); --- substitute whatever color you want here
(make sure it's different than the default color)...
}
You can see how you'd add additional pages...
Now, when you navigate to a page, the associated link/button is
highlighted.
Hope this helps...
On 8/28/2010 11:12 AM, Martin wrote:
Hi there,
I've been googling for it and a:active doesn't work as I'd like it to.
I've got a menu. When I hover over a menu item the colour changes to
orange. I'd like it
to stay orange as long as I'm on this particular page for visitors to
know where they are at the moment.
That's my css:
===
ul.nav {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
overflow: hidden;
/*background: url(images/menu-background-grey.gif) repeat-x; */
}
ul.nav li {
float: right;
}
ul.nav a {
display: block;
padding: 0 2em;
line-height: 40px;
text-decoration: none;
background: url(images/divider1.png) repeat-y right top;
color: grey;
}
ul.nav a:hover, ul.nav a:focus {
color: orange;
}
===
I tried the following:
ul.nav a: hover, ul.nav a:focus, ul.nav a:active {
color: orange;
}
but it doesn't work like I thought. The moment I remove the mouse pointer
from the link, it goes
back to gray.
Thank you
__
css-discuss [cs...@lists.css-discuss.org]
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-discuss [cs...@lists.css-discuss.org]
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/
Thanks a lot guys
I can move on with the website now.
regards
martin
__
css-discuss [cs...@lists.css-discuss.org]
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-discuss [cs...@lists.css-discuss.org]
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] different colour of an active link/page
On 8/28/10 8:51 AM, Martin wrote:
On 08/28/2010 02:45 PM, David Laakso wrote:
Martin wrote:
Hi there,
I've been googling for it and a:active doesn't work as I'd like it to.
I've got a menu. When I hover over a menu item the colour changes to
orange. I'd like it
to stay orange as long as I'm on this particular page for visitors to
know where they are at the moment.
This i one way you might do it..?
css
li b { color:#ff7f00;
display: block;
padding: 0 2em;
line-height: 40px; color:#ff7f00;
}
markup
ul
libhome/b/li
lia href=#work/a/li
lia href=#play/a/li
/ul
Best,
~d
That's clever.
Thank you!
regards
martin
Not only clever, but better because it takes the link to the current
page out of the markup. You don't really want visitors to reload the
current page, methinks.
(Personally I use strong to emphasize You are here--but I pick
nits.)
The :active state is the condition when the mouse button is depressed;
the transfer to the linked location takes place when the mouse button
is released. FWIW IE6 (wrongly) applies the :active state when the link
receives keyboard focus (by tabbing to it). Since IE6 does not
understand the :focus pseudo class, this feature is actually useful
as a substitute.
Cordially,
David
--
__
css-discuss [cs...@lists.css-discuss.org]
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] IE8 collapsing spaces
Hello, In Firefox my nav bar above and below my bread crumb trail are spaced nicely. In IE8 both navs are sucked against my bread crumb trail. Any suggestions on how to stop IE8 from collapsing that space? Site: www . draftingservices . com (remove spaces). Sincerely, Brian M. Curran | CAD Consultant __ css-discuss [cs...@lists.css-discuss.org] 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] IE8 collapsing spaces
Brian Curran wrote: Hello, In Firefox my nav bar above and below my bread crumb trail are spaced nicely. In IE8 both navs are sucked against my bread crumb trail. Any suggestions on how to stop IE8 from collapsing that space? Site: www . draftingservices . com (remove spaces). Sincerely, Brian M. Curran | CAD Consultant I came up with an okay fix for now. Thanks if you looked at this. Web design is imperfect, when working across browsers. I need to remember that. -Brian __ css-discuss [cs...@lists.css-discuss.org] 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] [+] Re: Float drop problem
Thank you David!! I normally don't think bug when something is going wrong in my desired results. I think what Alan suggested will work as well and avoids writing a hack. Actually I think there is no need for the selector hack. One can safely style floats with display:inline as per spec the computed value will be *block* anyway. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ css-discuss [cs...@lists.css-discuss.org] 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] [+] Re: Float drop problem
Thierry Koblentz wrote: Thank you David!! I normally don't think bug when something is going wrong in my desired results. I think what Alan suggested will work as well and avoids writing a hack. Actually I think there is no need for the selector hack. One can safely style floats with display:inline as per spec the computed value will be *block* anyway. -- Regards, Thierry draftingservices . com Yes, that's correct. Note Brian has either read your response and deleted the * html preceding the selector -- or, he neglected to include * html preceding the selector in the first place. And either way, the float does not drop. But, on a purely personal note, I would leave the star html. This may be because I sometimes suffer from short-term-memory-loss. Best, ~d -- :: desktop and mobile :: http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] 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] [+] Re: Float drop problem
Thierry Koblentz wrote: Thank you David!! I normally don't think bug when something is going wrong in my desired results. I think what Alan suggested will work as well and avoids writing a hack. Actually I think there is no need for the selector hack. One can safely style floats with display:inline as per spec the computed value will be *block* anyway. -- Regards, Thierry David wrote: draftingservices . com Yes, that's correct. Note Brian has either read your response and deleted the * html preceding the selector -- or, he neglected to include * html preceding the selector in the first place. And either way, the float does not drop. But, on a purely personal note, I would leave the star html. This may be because I sometimes suffer from short-term-memory-loss. Best, ~d Speaking of memory loss... Yes, I forgot the selector. Ouch, and thanks for pointing it out. It's back now. I'm leaving the hack in too. As they say... If you don't have the time, and it aint broke, then don't fix it. -Brian __ css-discuss [cs...@lists.css-discuss.org] 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] Using efficient selectors?
Hi!
I have a question about efficient selectors. I tried Page Speed
extension for Firebug which analyzed use of efficient CSS selectors
among lots of other things.
Page Speed considered longer(#header ul li a) selectors inefficient and
recommended to fix them.
Is there a good reason to use this kind of selector #header ul li a
{..., instead of just #header li a? Is it considered best practice,
or why this is so commonly used?
Ville
__
css-discuss [cs...@lists.css-discuss.org]
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] [+] Re: Float drop problem
Yes, that's correct. Note Brian has either read your response and deleted the * html preceding the selector -- or, he neglected to include * html preceding the selector in the first place. And either way, the float does not drop. But, on a purely personal note, I would leave the star html. This may be because I sometimes suffer from short-term-memory-loss. Speaking of memory loss... Yes, I forgot the selector. Ouch, and thanks for pointing it out. It's back now. I'm leaving the hack in too. As they say... If you don't have the time, and it aint broke, then don't fix it. I'm sorry, but I don't understand your approach. What's your reasoning for using the selector hack? -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ css-discuss [cs...@lists.css-discuss.org] 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] Using efficient selectors?
On Sat, 28 Aug 2010, Ville Viklund wrote:
I have a question about efficient selectors. I tried Page Speed extension for
Firebug which analyzed use of efficient CSS selectors among lots of other
things.
Page Speed considered longer(#header ul li a) selectors inefficient and
recommended to fix them.
Is there a good reason to use this kind of selector #header ul li a {...,
instead of just #header li a? Is it considered best practice, or why this
is so commonly used?
I doubt that the difference in speed would be significant, but I'd
use the shorter one on principle.
The longer version can be used if you need extra specificity for
this rule.
--
Chris F.A. Johnson, http://cfajohnson.com
Author:
Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
__
css-discuss [cs...@lists.css-discuss.org]
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] [+] Re: Float drop problem
Thierry Koblentz wrote: I'm sorry, but I don't understand your approach. What's your reasoning for using the selector hack? -- Regards, Thierry To remember, not to forget, that display:inline; it is only needed by a browser that is on death row. If that bothers you, delete the star hack preceding the selector. Add a comment to that effect. Then, when IE/6 is on a block-of-ice, you and your children, will remember, not to forget, that that line of code is no longer needed or necessary :-) . Best, ~d -- :: desktop and mobile :: http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] 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] [+] Re: Float drop problem
I'm sorry, but I don't understand your approach. What's your reasoning for using the selector hack? To remember, not to forget, that display:inline; it is only needed by a browser that is on death row. If that bothers you, delete the star hack preceding the selector. Add a comment to that effect. Then, when IE/6 is on a block-of-ice, you and your children, will remember, not to forget, that that line of code is no longer needed or necessary :-) . David, My comment was not addressed to you, you'd already given that explanation following my first post in this thread saying: I would leave the star html. This may be because I sometimes suffer from short-term-memory-loss. ;-) -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ css-discuss [cs...@lists.css-discuss.org] 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] Using efficient selectors?
Ville Viklund wrote:
Is there a good reason to use this kind of selector #header ul li a
{..., instead of just #header li a? Is it considered best practice,
or why this is so commonly used?
I would venture a guess that it is commonly used because of a fairly
widespread misunderstanding of exactly how contextual selectors work.
If one consults (e.g.) Htmlhelp.com, an early reference site for
HTML CSS, one is told :
Contextual selectors are merely strings of two or more simple selectors
separated by white space. These selectors can be assigned normal properties
and, due to the rules of cascading order, they will take precedence over simple
selectors. For example, the contextual selector in
P EM { background: yellow }
is P EM. This rule says that emphasized text within a paragraph should have a
yellow background; emphasized text in a heading would be unaffected.
Note emphasized text within a paragraph; nowhere does this
suggest that the rule might apply to (e.g.) emphasized text
within spanned element within a paragraph, so the naïve user
might believe that in order to achieve the latter, he/she
should write P SPAN EM.
One could even argue that the W3 prose is not as helpful
as it might be, although the spec. is unambiguous if
one reads it properly. For example, at :
http://www.w3.org/TR/REC-CSS1/#contextual-selectors
one can read (for H1 EM) In the example above, the search
pattern matches if 'EM' is a descendant of 'H1',
i.e. if 'EM' is inside an 'H1' element.
Note is inside an 'H1' element, which again may suggest
to the naïve reader that it must be /directly/ inside.
I really think it is as simple as that : a widespread
misunderstanding.
Philip Taylor
__
css-discuss [cs...@lists.css-discuss.org]
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] [+] Re: Float drop problem
Thierry Koblentz wrote: I'm sorry, but I don't understand your approach. What's your reasoning for using the selector hack? -- Regards, Thierry David Laakso wrote: To remember, not to forget, that display:inline; it is only needed by a browser that is on death row. If that bothers you, delete the star hack preceding the selector. Add a comment to that effect. Then, when IE/6 is on a block-of-ice, you and your children, will remember, not to forget, that that line of code is no longer needed or necessary :-) . Best, ~d Ahh!!, Lol!!! Okay, I need to look at what I did in my code. First dinner though. :-) __ css-discuss [cs...@lists.css-discuss.org] 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] [+] Re: Float drop problem
Thierry Koblentz wrote: I'm sorry, but I don't understand your approach. What's your reasoning for using the selector hack? -- Regards, Thierry David Laakso wrote: To remember, not to forget, that display:inline; it is only needed by a browser that is on death row. If that bothers you, delete the star hack preceding the selector. Add a comment to that effect. Then, when IE/6 is on a block-of-ice, you and your children, will remember, not to forget, that that line of code is no longer needed or necessary :-) . Okay, I've seen what you all are talking about. I was actually getting two different conversations confused. I've edited my code, and only left the inline code there. There are no float drops, thanks so much!! -Brian __ css-discuss [cs...@lists.css-discuss.org] 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/
