Popups play up when switch from ID to class

HTML & CSS
1

Hi - I’m trying to switch my popups in my navboxes from an ID to a class, so I can use them in multiple navboxes if needed.

But when I do so, the font goes crazy + level 3 pops up to right instead of to left. I’m guessing it’s that usual 80% thing which I dislike so much because I still don’t understand why css assumes I want a different font in a child box… I know Paul explained it’s useful… but it’s big hassle for me…

Here’s Paul’s original pop-ups using an ID #artnav - this is how they’re meant to look - please scroll down to first menu box at bottom of page labeled “Fun to Read” + level 3 is above “Recipes” in that box:

http://www.greensmoothie.com/1gs/

And here’s what they do when I change #artnav to .navbox - also in “Fun to Read”:

http://www.greensmoothie.com/1gs/blend/green.html

Is there perhaps an easy way to fix this?

Opera has a hard time jumping over to level 3, you have to move right on top of level 3 link words before it’ll highlight the box. I guess there’s nothing we can do about that? Chrome, Safari + IE’s are all acting normally (normal being the Beloved, FF).

thank you! - Val

2

Hi Val,

ids carry more weight and when you changed them to a class then the existing styles that were targeted via #footernav took over and carried more weight and over-ruled any conflicting styles.

You would need to add more weight to the rules via a parent idd to counteract the existing footer styles.

e.g.


[B]#footernav[/B] .navbox ul li:hover ul,
[B]#footernav[/B] .navbox ul li.over ul {left:0}
    /*now target 3rd level + hide it*/
[B]#footernav[/B] .navbox ul li:hover ul ul,
[B]#footerna[/B]v .navbox ul li.over ul ul {left:-99em}
    /*now target 3rd level + reveal it*/
[B]#footernav[/B] .navbox ul li li:hover ul,
[B]#footernav[/B] .navbox ul li li.over ul {left:0}
    /*above shows on top of 2nd level, so now shift 3rd to lft or rgt by menu width 197+little extra*/
[B]#footernav [/B].navbox ul ul ul {margin-left:-207px; bottom:0}
    /*above shifts 3rd level to lft of 2nd and - #artnav ul ul ul {margin-left:207px; bottom:0} - shifts it to rgt*/
[B]#footernav[/B] .navbox ul ul {
    background:white;
    position:absolute;
    bottom:1.9em; /*not too far away or you lose focus*/
    left:-999em;
    padding:0;
    border:1px solid #f00251;
    border-bottom:none;
    text-align:left;
    z-index:99;
}
[B]#footernav[/B] .navbox li li {
    clear:left;
    float:left;
    border-bottom:1px solid #f00251;
    font-size:100%;
    padding:0;
}
[B]#footernav[/B] .navbox li li a {
    clear:left;
    float:left;
    position:relative;
    width:207px; /*max menu charactrs 28 for 1-line + matches - #artnav ul ul ul - above*/
    padding:2px 5px; /*2px is height of each line in popup*/
    white-space:normal;
    line-height:normal;
}[B]
#footernav [/B].navbox li li a:hover {background:red; font-weight:bold; color:white}

I also notice that you have done this:


* html .navbox, .truebox, #artnav {height:1%}

It should be this:


* html .navbox, [B]* html [/B].truebox,[B]* html [/B]#artnav {height:1%}

What you did could have serious complications in browsers apart from IE6 :slight_smile:

3

Hi Paul - thank you! I’m so grateful there’s a simple solution and I don’t have to go calculating new sizes.

I’m switching to zoom:1.0 so I’m protected from ever repeating that error of forgetting to target ie6!

(1) Can I change this:

.clearfix:after {
content:“.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/mac hide \/

  • html .clearfix {height:1%;}
    .clearfix {display:block;}

to this:

.clearfix:after {
content:“.”;
display:block;
zoom:1.0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/mac hide \/
.clearfix {display:block;}

(2) I don’t need overflow:visible after zoom:1.0 do I?

(3) How do you know when to place a space after the ID and when not to? e.g. why is it this:

#footernav .navbox {} /with space/
#txtnav h3 {}

and yet also this:

h1.hdr { } /with no space)/

(4) Is there a blanket rule that every class within an ID (and you know you’ll never use that class outside of that ID) should be preceded by the ID? e.g. should this:

#footernav {}
.ebk-sm {} /newsltr subscribe form inside #footernav and above the bottom navboxes/

be changed to this:

#footernav {}
#footernav .ebk-sm

then this will maybe work:

#footernav .ebk-sm .submit {width:170px}

Because submit width for IE6/7 does not work here at bottom of page. Yet it works perfectly at top left of page for same subscribe form:

#head {}
.ebk {}
.ebk .submit {width:170px}

thank you! - Val

4

Hi - should this have visibility:hidden; added to it? And is there any need for font-size:0;?

#content:after {/this ruleset clears floats inside content but not in txtbox/
clear:both;
content:" ";
display:block;
height:0;
font-size:0;
}

I notice my other “:after” rules all have visibility:hidden and none have font-size:0

thanks! - Val

5

It’s best not to mess with the clearfix as it has be specially constructed to target browsers and browser bugs through the ages.

IE6 and 7 don’t understand :after so there is no point using zoom in that rule. You could replace the last bit with zoom.


.clearfix {display:inline-block;}
/*mac hide \\*/
.clearfix {display:block;}
/*  */

replace to:


.clearfix{zoom:1.0}

However you lose IE5 mac on the way which is no big deal.

The height:0 in the first rule ii not for IE anyway but for all browsers that understand :after so that any space the “.” rule adds is negated. the visbility:hidden is to hide the generated content (i.e. the dot).

Suffice to say that the clearfix is a myriad of styles that are best left alone unless you know what you are doing :slight_smile:

(2) I don’t need overflow:visible after zoom:1.0 do I?

No only when you use the height:1% hack in case there is an overflow:hidden rule cascading through from somewhere else.

(3) How do you know when to place a space after the ID and when not to? e.g. why is it this:

#footernav .navbox {} /with space/
#txtnav h3 {}

and yet also this:

h1.hdr { } /with no space)/

You know this already :slight_smile:

When there is a space between elements it identifies a descendant selector structure (div p {color:red}). You wouldn’t say divp {} and expect it to be the same would you?

(the white space is actually called a combinator (the combinator we use in a descendant selector is a whitespace character;a space, horizontal tab, carriage return, line feed, or form feed))

e.g.

div .test{} - Will target the element that has a class of test because it is a descendant of the parent div:

<div><p class=“test”> test </p></div>

However div.test would mean that the structure was this:

<div class="test"><p> test </p></div>

The difference being that the class is attached to the div itself.

(4) Is there a blanket rule that every class within an ID (and you know you’ll never use that class outside of that ID) should be preceded by the ID? e.g. should this:

The rule is specificity and can be calculated exactly and I went into specific detail here :slight_smile:

The simple answer is that you must always use a rule in the same format as you previously did to make sure that it has equal (or more) weight and therefore the one later in the stylesheet will win out.

If you originally said #footer p {color:blue} - It would do you no good to add a class to that p element and say p.warning {color:red}. the p element would still be blue because the former rule wins out.

To make the p element turn red you would need to use the original format with the class added (e.g. #footer p.warning{color:red}).

It’s a logical process and not really as complicated as it sounds. In practice just target elements in the same way that they were targeted before to make sure the new rules work.

6

thank you! I’m gonna go thro my css closely + make sure everything’s targeted correctly. Maybe that will stop all my fonts dancing to their own tune, maybe they’ll begin to hear the tune I think I’m playing…