when “sections” or “pages” sub-navs drop down, for some odd reason it looks like the padding (left & right only) loads after everything else has loaded… so that the loading of these dropdowns is not as smooth as it should be…
I had to work heavily with padding, among other reasons, b/c I can’t set width for these nav elements, since it’s for responsive design… (only set width for top-level nav, since the sub-navs are positioned… & haven’t found another way to make sure sub-navs are positioned correctly…)
and since I don’t like selected items to be links, put <span>'s where links go for selected elements in nav… so the <li>'s have no padding setting, but the <a>'s and <span>'s are display:block and have the padding (this was the only way I could find so that when you hover over these elements style-changes apply through entire surface of <li>'s… (i.e., setting padding for <li>'s and doing inline for links and span’s doesn’t work… if you have on <li> and outside <a>'s hover is applied only on area of <a> and not entire <li>…)
I just don’t understand why the sub-nav elements load in such a weird way (it seems the padding (left & right only) loads after everything elese has loaded… why is this) this happens in FF, Chrome, & iPhone/iPad simulator…
and: this happens even if I set widths for sub-nav ul’s or sub-nav li’s… go figure…
You are setting that inner span to 100% width and then 10px left padding. I do not know why it is loading the padding after but that’s where the extra spacing is coming from.
You could set those dropdown spans to have like 85% width and then 15% left padding so thus it doesn’t overflow out of the parent <li>
thank you for your replies… but I do the same for the links… display:block and height and width to 100%… so when hover anywhere on <li> element the hover CSS settings kick in… and for uniformity/consistency’s sake… (to set bg colors, etc…)
Did you try my code first? If it doesn’t do what you want then you will need to explain why in a bit more detail.
The width and height settings on the display block element are irrelevant as the block element will automatically be as wide as it can without setting a width. You don’t want the height:100% anyway as the content height would be controlled by the element’s content anyway and is therefore superfluous.
Eliminating the width and height will stop the effect your are seeing and as far as my tests go will display exactly as you wanted.
(& there I was, thinking width:100% was the same as width:auto…
(actually width auto/100% is the default… so leaving it out has the same effect… I guess I should include it to be on the safe side. (to overwrite settings for elements “upstream”, maybe…)
(this textarea is too small, I don’t like it…;-( )
It’s a common mistake and they are different things.
On block elements an element will automatically expand to fill its container horizontally. That means you can add padding and borders without the inner element being larger than the parent. However, once you add a width then the combination of width + padding + borders + margin must always add up to less than the available space or it will overflow. That’s why the easiest option is just to omit the width. Overflowing content may be visible but may not be accounted for in the display hence the reason it is not drawn properly.
Width was commonly added as a haslayout fix for ie6 but we don’t need to do that these days as IE6 support is negligible now.
If on other occasions you do find that you want to add a width and percentage/pixel padding then you can change the box model with the css box-sizing property but won’t be suitable in this specific case.
width:100% is different than width:auto. Block level elements naturally take up as much space as it wants so it would appear that auto/100% are the same but no…inline elements auto width = as wide as needed to cover the content but different than 100%.
It’s important not to confuse the two. “Auto” is the default value.
thank you Paul… this is very useful info re widths for block elements… (yes, true, if you set a width you have to calculate the horiz padding into it… so I guess if you set a width to a %ge value and padding in pixels you can have a situation…
Just highlight the text in the original post with your mouse and a little ‘quote reply box’ pops up which you can click and the quote is automatically inserted into the reply box for you.