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 10 of 10
  1. #1
    New Coder
    Join Date
    Feb 2013
    Posts
    23
    Thanks
    15
    Thanked 0 Times in 0 Posts

    CSS ul.tabs as Nav Bar - not scaling correctly?

    Hello there -

    First of all, let me say that I'm new here, and have learned any CSS and html I know by trial and error, and the seat of my pants...

    I've been working on a new site using home-made approach, and finally got it just about where I envisioned it to be, only I've only recently discovered that the tabbed navigation I have set up, even though it has a width set at 100%, doesn't scale correctly when zoomed in on Safari (at least) - not to mention not displaying correctly at all in IOS 6...

    Anyway, here's the CSS:

    Code:
    <style type="text/css">
    
    ul.tabs {
    margin: 0;
    padding:4px;
    float: left;
    list-style: none;
    height: 32px; 
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;
    width: 100%;
    }
    
    ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 31px; 
    line-height: 31px; 
    border: 0px solid #000000;
    border-left: none;
    margin-bottom: -1px; 
    overflow: hidden;
    position: relative;
    background: #A52A2A;
    }
    
    ul.tabs li a {
    text-decoration: none;
    color: #FFFFCC;
    display: block;
    font-size: 1.4em;
    padding: 0 5px;
    border: 1px solid #000000; 
    outline: none;
    }
    
    ul.tabs li a:hover {
    background: #CD5C5C;
    }
    
    
    html ul.tabs li.active, html ul.tabs li.active a:hover  { 
    background: #000;
    border-bottom: 1px solid #000; 
    
     </style>
    here's how it looks at the default resolution in Safari:



    and after zooming in one notch:



    Any ideas on how to prevent this... or generally what I'm doing wrong?

    Thanks so much!

    -red

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello redkelly,
    Does it zoom better like this?
    Code:
    <!doctype html>
    <html>
     <head>
     <meta charset="utf-8">
     <title>Untitled Document</title>
     <style type="text/css">
    html, body {
    	margin: 0;
    	font: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    #container {
    	width: 900px;
    	margin: 0 auto;
    	padding: 0 0 200px;
    	background: #ccc;
    }
    ul.tabs {
    	margin: 0;
    	padding: 4px;
    	list-style: none;
    	background: #000;
    	text-align: center;
    }
    	ul.tabs li {
    		line-height: 31px;
    		display: inline-block;
    	}
    		ul.tabs li a:link,
    		ul.tabs li a:visited {
    			padding: 0 5px;
    			display: block;
    			text-decoration: none;
    			color: #fffcc;
    			font-size: 1.4em;
    			outline: none;
    			background: #a52a2a;
    		}
    		ul.tabs li a:hover,
    		ul.tabs li a:active  {background: #cd5c5c;}
    </style>
     </head>
     <body>
        <div id="container">
    		<ul class="tabs">
            	<li><a href="#">home</a></li>
            	<li><a href="#">1960</a></li>
            	<li><a href="#">1961</a></li>
            	<li><a href="#">1962</a></li>
            	<li><a href="#">1963</a></li>
            	<li><a href="#">1964</a></li>
            	<li><a href="#">1965</a></li>
            	<li><a href="#">1966</a></li>
            	<li><a href="#">1967</a></li>
            	<li><a href="#">1968</a></li>
            	<li><a href="#">1969</a></li>
            	<li><a href="#">1970's</a></li>
            	<li><a href ="#">more</a></li>
            </ul>
        <!--end container--></div>
    </body>
    </html>
    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:

    redkelly (02-17-2013)

  • #3
    New Coder
    Join Date
    Feb 2013
    Posts
    23
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Excavator -

    Thank You for your quick response!

    BUT - actually, no... your suggestion actually made things worse, with the bar messed up right from the start:



    hmmm....

  • #4
    New Coder
    Join Date
    Feb 2013
    Posts
    23
    Thanks
    15
    Thanked 0 Times in 0 Posts
    After a little more investigation... do you think the problem may be coming in due to the pixel value specified for the tab height:

    Code:
    ul.tabs {
    margin: 0;
    padding:4px;
    float: left;
    list-style: none;
    height: 32px; 
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;
    width: 100%;
    }
    being mixed in with the font-size specified in em's:

    Code:
    ul.tabs li a {
    text-decoration: none;
    color: #FFFFCC;
    display: block;
    font-size: 1.4em;
    padding: 0 5px;
    border: 1px solid #000000; 
    outline: none;
    }
    ???

    thanks!

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Quote Originally Posted by redkelly View Post
    After a little more investigation... do you think the problem may be coming in due to the pixel value specified for the tab height:
    Adding that height to the snippet I posted doesn't seem to break it. Making this change highlighted in red does -
    Code:
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    Mess around with it a bit I guess, see if you can figure out what change will stop it from zooming correctly...
    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

  • #6
    New Coder
    Join Date
    Feb 2013
    Posts
    23
    Thanks
    15
    Thanked 0 Times in 0 Posts
    I thought you might be interested to hear that I was able to fix the scaling issue by changing the font-size attribute to a pixel value rather than em:

    Code:
    <style type="text/css">
    
    ul.tabs {
    margin: 0;
    padding:4px;
    float: left;
    list-style: none;
    height: 32px; 
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;
    width: 100%;
    }
    
    ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 31px; 
    line-height: 31px; 
    border: 0px solid #000000;
    border-left: none;
    margin-bottom: -1px;
    overflow: hidden;
    position: relative;
    background: #A52A2A;
    }
    
    ul.tabs li a {
    text-decoration: none;
    color: #FFFFCC;
    display: block;
    font-size: 17px;
    padding: 0 5px;
    border: 1px solid #000000; 
    outline: none;
    }
    
    ul.tabs li a:hover {
    background: #CD5C5C;
    }
    
    
    html ul.tabs li.active, html ul.tabs li.active a:hover  { 
    background: #000;
    border-bottom: 1px solid #000; 
    
     </style>
    ...just as I had suspected, only now the tabs don't appear to be either

    a.) filling out the whole width (which is set at 100%, right?) or

    b.) failing that, being at least centered within the body as it scales...

    Perhaps it will make more sense if you see the actual test page:

    http://cosimocode.com/

    Thanks!

    -red

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Quote Originally Posted by redkelly View Post

    BUT - actually, no... your suggestion actually made things worse, with the bar messed up right from the start:
    You are mixing our two codes together to get that.

    Something you should know -
    See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

    When you have ul.tabs set to 100%, it get's it's width from 660px wide parent #content. When you add 4px padding, you make ul.tabs 668px wide.

    Look at it this way -
    Code:
    ul.tabs {
        border-bottom: 1px solid #000000;
        border-left: 1px solid #000000;
        /*float: left; no need to float a full width element*/
        height: 32px;
        list-style: none outside none;
        margin: 0;
        padding: 4px;
        width: 652px;
    }
    ul.tabs li {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        float: left;
        height: 31px;
        line-height: 31px;
        /*margin: 0 0 -1px; */
        width: 50px;    overflow: hidden;
        padding: 0;
        position: relative;}
    Last edited by Excavator; 02-18-2013 at 04:16 PM.
    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:

    redkelly (02-18-2013)

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts

    a.) filling out the whole width (which is set at 100%, right?) or
    That would make the ul the full width of it's parent. It doesn't do anything for the li's though. If you have too many, you will see float: drop; and too few will not fill the ul accross it's full width.




    b.) failing that, being at least centered within the body as it scales...
    That first snippet I posted centers things.
    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:

    redkelly (02-18-2013)

  • #9
    New Coder
    Join Date
    Feb 2013
    Posts
    23
    Thanks
    15
    Thanked 0 Times in 0 Posts
    BINGO!!

    Thanks, man... didn't realize the padding would do that -

    I actually stumbled across setting the width for each of the 13 tabs at 50px myself, which resulted in almost same thing, giving a total width of 650.

    Do you think it better to specify the one ul width (652px), the separate li widths of 50px, or both, as you have it?


    Thanks again!

    -red

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Quote Originally Posted by redkelly View Post
    Do you think it better to specify the one ul width (652px), the separate li widths of 50px, or both, as you have it?


    Thanks again!

    -red
    The ul will get it's width from somewhere. Either you specify it or it expands enough to contain it's li's. Since you have li's width set, I would not specify the ul's width.

    I would also not specify the height. The ul can get it's height from the li's as well. You will need to clear the floats for that to work.
    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


  •  

    Tags for this Thread

    Posting Permissions

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