Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts

    nav links not expanding to full width

    Hi,

    See URL: http://livearedhotlife.com.

    Shrink your browser down to mobile size (approx. 300px). the nav links are not expanding to full width (see attached mobile.jpg) and I can't see what's preventing it.

    CODE:
    Code:
    #access {
    		padding: 10px 0;
    		background: #cb0606;
    	}
    	
    	#access li a {
    		color: #f5f5f5;
    		display: block;
    		margin: 2px;
    		padding: 5px;
    		border: 1px solid #e53030;
    		-moz-border-radius: 5px;
    		-webkit-border-radius: 5px;
    		border-radius: 5px;
    	}
    Any help would be much appreciated.

    John
    Attached Thumbnails Attached Thumbnails nav links not expanding to full width-mobile.gif  

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello johndove,
    Look what happens when you remove this bit of padding -
    Code:
    #branding .only-search + #access div {
        padding-right: 205px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    johndove (04-11-2013)

  • #3
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    AHH, EXCAVATOR... my old friend. : )

    Okay, I've probably been looking at this too long today (in fact I'm sure I have) but...

    a) isn't display:block suppose to stack the <li>s?

    b) what do I need to do to get the sub menu items under "More Red Hots" closed up? (li li a)

    c) how come by mobile #branding img swap doesn't kick in? (see attached)

    CODE:
    Code:
    @media only screen and (max-width: 480px) {
    	#branding img {
    		background: url("http://livearedhotlife.com/wp-content/uploads/2013/04/mobile_header.jpg") no-repeat;
    		display: block;
    		width: 100%;
    	}
    THANK YOU, THANK YOU, THANK YOU!

    John
    Attached Thumbnails Attached Thumbnails nav links not expanding to full width-mobile_header.jpg  

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by johndove View Post
    AHH, EXCAVATOR... my old friend. : )

    Okay, I've probably been looking at this too long today (in fact I'm sure I have) but...

    a) isn't display:block suppose to stack the <li>s?
    Long time johndove Always glad to see a friendly face here!

    Your li's are floated. An li is naturally a block level element so if you don't want your li's sided by side, don't float them.

    That doesn't work with a wider display though. I much prefer to let the menu flow naturally (like yours is now) and have the li's display in one line in your ul at wider resolutions and drop as needed when the browser window is narrowed.

    It looks like you are already looking into resolution specific CSS. I never have. Because of that, I doubt I will be much help with your question #3 ...

    As for your dropdown, let me look in some other browsers to see if there's a problem. FF21 shows More Red Hots... and drops 3 li's when I hover on it.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    johndove (04-11-2013)

  • #5
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    re: #1: Right. I don't know much but I did know that. (did I mention I've been looking at this too long today?) and I agree that with such a short menu, better to not take up a lot of vertical space.

    Yeah, I surprised at how few people seem to know about media queries and designing for mobile (and everything else between refrigerator and postage stamp size). Could they make us any crazier? : )

    As always, thank you my friend.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    The dropdown works fine in IE9 and breaks in IE8 and lower...but only in lower resolutions.

    I wonder if part of the problem is the new html5 elements? <nav> would not normally be supported by IE8 without help.

    I'm still digging around in it...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Der,
    Skip that last, just found your html5.js in IE8 and lower.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    In #access a (for lte IE9 ...I think) add white-space: nowrap;

    That makes the menu work in IE8 and 7 the way it does in higher IE's and FF.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •