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

redkelly · 02-17-2013, 01:30 PM

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

Excavator · 02-17-2013, 06:04 PM

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>

redkelly · 02-17-2013, 11:57 PM

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

redkelly · 02-18-2013, 12:10 AM

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!

Excavator · 02-18-2013, 12:23 AM

Quote:

Originally Posted by redkelly

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

redkelly · 02-18-2013, 01:56 PM

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

Excavator · 02-18-2013, 04:05 PM

Quote:

Originally Posted by redkelly

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;}

Excavator · 02-18-2013, 04:09 PM

Quote:

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.

Quote:

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

That first snippet I posted centers things.

redkelly · 02-18-2013, 04:43 PM

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

Excavator · 02-18-2013, 04:54 PM

Quote:

Originally Posted by redkelly

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.