Weird padding problem for a show/hide element

HTML & CSS
1

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…

would appreciate help/suggestions…

thank you…

2

a ittle prob with new SP forum:

if I bookmark this post, and try to get back to it on a different browser tab, it doesn’t load, browser just hangs, & get a JS error…

window.location.search.test is not a function

yikes…:wink:

(& I hope I still get notified by email if I get a response, w/o having to set that again… and hopefully link in email will work…:-o )

3

Works fine for me. What browser are you using?

It depends on your user preferences: http://www.sitepoint.com/community/users/maya90/preferences

At the moment, you have them set to send you an email when you get a reply etc. :slight_smile:

4

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>

5

I’d set the width to auto and un-hard code the left position.

a.link_nav, #nav_pgs span, #nav_sects span {
	padding:4px 10px 4px;
	display:block;
	width:auto;
}
#nav_pgs, #nav_sects {
	display:none;
	top:0;
	left:100%;
}
6

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…)

a.link_nav, #nav_pgs span, #nav_sects span {    
    display: block;    height: 100%;    padding: 4px 0 4px 10px;    width: 100%;
}

so this is a problem if I set it like this only for the <span>'s? (for when that element is selected/active…) hmmm…:wink:

thank you…

7

Hi,

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.:slight_smile:

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.

8

if I take out the padding/display:block for the span… it looks as expected… span doesn’t cover entire <li> area…

and for the links the same thing (weird loading of padding after the rest has loaded) continues to happen…

thanks again for your help…

9

setting width to auto instead of 100% worked!!!

thank you Paul… :slight_smile:

(& there I was, thinking width:100% was the same as width:auto…:wink:
(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.:wink: (to overwrite settings for elements “upstream”, maybe…)

(this textarea is too small, I don’t like it…;-( )

10

Have you seen this?

11

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.

12

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.

13

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…:wink:

thanks again…

14

thank you TechnoBear! (how do I reply with quote? like you did? can’t find…)

thank you…

15

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.

16

See (4th item in the first post)

17

great – tbanks!!!