spanning width/height with color 1

[skiflyer]

Two separate questions... I have a simple framing system on my page, title bar all the way across the top, nav bar down the side starting at the bottom of the title bar.

Title bar css looks like

.banner
{
	position: absolute;
	font-family : Verdana;		
	top : 0px;
	left: 0%;
	height: 80px;
	width: 100%;
	text-align: center;
	font-weight: bold;
	color: #fff;
	border-bottom: 2px solid #000;
	background: #6699cc;/*#000066;*/
	font-size: 55px;
	background-position: center center;
}

But due to the fact that left: 0% actually shifts the thing left in IE (built in margin I guess?), I'm stuck with built in whitespace to the right. Adding a few pixels or percents runs the risk of a right/left scroll, and guarantees one in other browsers.

I have the same issue with my nav bar which runs like...

#sideNav {
	position : absolute;
	top : 80px; 
	left : 0%;
	width : 185px;
	height: 90%;	
	background: #3b6fa2;
	font-size: 80%;
	padding-top: 10px;
}

Basically this works alright for one page worth of content as a percent or two of vertical scroll is unnoticable, but it's sloppy, and for long pages looks silly as the navbar just disappears on scroll. Is there a more elegant solution to this, is there a more elegant solution to this without resorting to iframes? (this sheet is being applied to many a page, and I'd rather not redo those.)

 

[BillyRayPreachersSon]

put "padding:0px;" and "margin:0px;" into the "body" css for all your affected frames.

Hope this helps,

Dan

 

[skiflyer]

Had the padding, not the margin... works like a charm! Thanks much.

Not to push my luck, but you have any help on that sidebar too?

 

[BillyRayPreachersSon]

Not sure I understand the navbar problem. Do you want a floating sidenav?

Dan