Layout issue with taskbar

**MikesBarto2002** · Jul 4, 2006, 16:39

Why in the world can I not get my taskbar tabs to...

Get my tabs to line up in a straight line
Get them to line up flush with the black bar above them

Here is the page, and here is my css...

Code:

body, html{
	margin : 0 auto;
	padding : 0;
	background : #FFFFFF;
	color : #000000;
}

body{
	min-width : 804px;
}


.clearfix:after{
	content : "."; 
	display : block; 
	height : 0; 
	clear : both; 
	visibility : hidden;
}

.clearfix{
	display : inline;
}

/* mac hide \*/
* html .clearfix{
	height : 1%;
}

.clearfix{
	display : block;
}
/* End hide */

/*-----------------------------*/
/*---------- LAYOUT ----------*/
/*-----------------------------*/

#container{
	width : 804px;
	margin : 0 auto;
	padding : 0;
}

#header{
	padding : 0;
	margin : 0;
}

#navigation{
	padding : 0;
	margin : 0;
}

#navigation ul{
	list-style : none;
}

#navigation ul li{
	display : inline;
}

#leftcolumn{
	float : left;
	width : 350px;
}

#rightcolumn{
	float : right;
	width : 454px;
}

#video{
	width : 320px;
	background : #6600FF;
}

#latest{
	width : 320px;
	background : #0099FF;
}

#video p, #latest p{
	margin : 0 10px;
}

.roundtop_purple{ 
	background: url('../pics/tr_purple.gif') no-repeat top right; 
}

.roundbottom_purple{
	background: url('../pics/br_purple.gif') no-repeat top right; 
}

.roundtop_blue{ 
	background: url('../pics/tr_blue.gif') no-repeat top right; 
}

.roundbottom_blue{
	background: url('../pics/br_blue.gif') no-repeat top right; 
}

img.corner {
	width: 5px;
	height: 5px;
	border: none;
	display: block !important;
}

#rightcolumn img.inlinephoto{
	margin-right : 5px;
	margin-bottom : 5px;
}

**Nadia P** · Jul 4, 2006, 17:35

Don't have time to get into your code, but I'd say the reason for your buttons not lining up and dropping down to the next line is that the image is too wide... the total of your images is 804 and your container width is also 804, but each image does have some space between them, so I'd suggest making the images a bit smaller, or recaluation your widths. Regardless, for someone viewing on 800*600, they will get a drop anyway.

Nadia

**DeafNLoud** · Jul 4, 2006, 20:22

I believe your problem is that the browsers are implementing their own "default" value for margin of the list items. Try setting the margin of the #navigation li tags to 0. I don't think you have to worry about the padding because by default if you display something inline, all padding is set to 0 to begin with. I could be wrong thought so if someone more advanced in CSS can verify that then please do.

Try that and see what happens and if that doesn't work, then I would suggest instead of doing a display:inline; on the li tags, do a float to them. With float, you can control the width, height, margins and padding a bit more.

HTH

**MikesBarto2002** · Jul 4, 2006, 21:57

Thanks for you suggestions, but neither of them worked.

I made the tabs smaller, but that still didn't move them into a straight line. And I am still having trouble getting them to butt up against the header. Anymore suggestions would be appreciated!

**Nadia P** · Jul 4, 2006, 23:10

These fixed worked for me:

Adding padding:0; margin:0; to the #navigation ul
brings the navbar directly beneath the black edge of the header.

If I changed the size of the nav images to 130px, the images all show in a row (with a couple of px to spare on the right hand side.... you will have to do some more maths if you want the nav to end flush with the right hand side of the header image.

Nadia