CSS - Floating Right Tabbed Navigation Causing Display Mayhem!

Hi, i'm having trouble in my navigation section getting the background color to display behind the links. It works fine in the content section, just not the navigation - why is this?

Here is my code -
Code:

@import url('layout.css');
body {
	background-image: /images/skyBACK.gif;
	background-repeat: repeat-y;
	background-attachment: scroll;
	background: url('images/skyBACK.gif');
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
}
#container {
	width: 1020px;
	margin: 10px auto;
}
#masthead {
	text-align: center;
	width: 698px;
    height: 140px;
	border-top: 1px solid #dcdcdc;
	border-right: 1px solid #a9a9a9;
	border-bottom: 1px solid #808080;
	border-left: 1px solid #a9a9a9;
	background-color: #fafaff;
}
#navigation {
	position: relative;
	float: left;
	width: 148px;
	margin-top: 10px;
	margin-bottom: 10px;
	border-top: 1px solid #dcdcdc;
	border-right: 1px solid #a9a9a9;
	border-bottom: 1px solid #808080;
	border-left: 1px solid #a9a9a9;
	background-color: #66cccc;
}
#content {
	float: left;
	width: 518px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	padding: 10px;
	border-top: 1px solid #dcdcdc;
	border-right: 1px solid #a9a9a9;
	border-bottom: 1px solid #808080;
	border-left: 1px solid #a9a9a9;
	background-color: #66cccc;
}
#footer {
	text-align: center;
	clear: both;
	width: 698px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-top: 1px solid #dcdcdc;
	border-right: 1px solid #a9a9a9;
	border-bottom: 1px solid #808080;
	border-left: 1px solid #a9a9a9;
	background-color: #fefeff;
}
/* Masthead Styles */
#masthead h1 {
	color: #3d6c87;
}
#masthead h3 {
	color: #5f8ea9;
}
/* Navigation Styles */
#navigation ul {
	list-style-type: none;
	width: 100%;
	display: block;
	margin: 0;
	padding: 0;
}
#navigation li {
	display: block;
	margin: 0;
	padding: 0;
	border: 1px solid #fff;
	background-color: #fff;
}
#navigation a {
	color: #0033ff;
	text-decoration: none;
	display: block;
    border: 1px solid #fff;
	background-color: #fff;
}
#navigation a:hover {
	color: #fff;
	text-decoration: none;
	border: 1px solid #5f8ea9;
	background-color: #5f8ea9;
}
/* Content Styles */
h6 {
	color: #000000;
}
h5 {
	color: #000000;
}
h4 {
	color: #000000;
}
h3 {
	color: #000000;
}
h2 {
	color: #000000;
}
#content h1 {
	color: #000000;
}
#content img {
	padding: 1px;
	border: 1px solid #808080;
}
/* Footer Styles */
#footer p {
	color: #808080;
	margin-top: 5px;
}
#footer a {
	color: #5f8ea9;
	text-decoration: underline;
}
#footer a:hover {
	color: #33627d;
	text-decoration: none;
}
a {
	color: #0033ff;
	text-decoration: underline;
}
a:hover {
	color: #33627d;
	text-decoration: underline;
}
.style_bold {
	font-weight: bold;
}
.style_italic {
	font-style: italic;
}

This is very strange to me any help would be greatly appreciated.

I'm having a little trouble getting my navigation to have the
effect of the nifty corner's script .

[EDIT]

I've put the relevant files on an example page, but it doesn't
seem that Angelfire is allowing the javascript?

[/EDIT]

I've attempted, so far, to float the menu to the left, and then
give each <li> display inline to get a horizontal menu. This part
works in Fx1.0.7, but in IE6.0 each <li> is a 100% width?

Any help would be greatly appreciated. I've never used the
nifty corners before.. so far it hasn't been that hard, except
for this episode...

If any of the CSS is redundant, please tell me so that I can fix it, I've been trying to get the nifty corners to work
and may have overlooked some errors.
Code:

	html,
	body{
		margin:20px auto 20px auto;
		padding:0px;
		background-color:#333;
		font-family:Arial,sans-serif;
	}
	#container{
		margin:auto;
		width:700px;
		min-width:300px;
		background-color:#333;
	}
	#header{
		color:#F60;
		width:700px;
		font-size:25px;
		text-align:center;
		background-color:#FFF;
		font-family:'Arial Bold',sans-serif;
	}
	#menu{
		margin:0px;
		padding:0px;
		text-align:center;
	}
	#menu #nav{
		float:left;
		padding:0px;
		list-style-type:none;
		margin: 0px 0px 15px 0px;
		background-color:#333;
	}
	#nav li{
		display:inline;
		margin-left:5px;
		margin-right:5px;
	}
	#nav li a{
		padding:2px;
	}
	#content{
		padding:10px;
		background-color:#FFF;
	}
	* a{
		color:#F60;
		font-size:10px;
		text-decoration:none;
		vertical-align:middle;
	}

Code:

<div id='menu'><ul id='nav'>
			<li><a href='#' title='' class='tab'>LOREM</a></li>
			<li><a href='#' title='' class='tab'>IPSUM</a></li>
			<li><a href='#' title='' class='tab'>DOLOR</a></li>
			<li><a href='#' title='' class='tab'>SIT</a></li>
			<li><a href='#' title='' class='tab'>AMET</a></li>
		</ul></div>
		<div style='clear:both;'></div>

Code:

function NiftyCheck(){
  if (!document.getElementById || !document.createElement) return 0;
  var b= navigator.userAgent.toLowerCase();
  if (b.indexOf('msie 5') > 0 && b.indexOf('opera')==-1) return 0;
  return 1;
}

function Rounded(selector,bk,color,size){
  var v= getElementsBySelector(selector);
  for (var i=0; i < v.length; i++){
    AddTop(v[i],bk,color,size);
    AddBottom(v[i],bk,color,size);
  }
}

function AddTop(el,bk,bColor,size){
  var d= document.createElement('b');
  var cn= 'r';
  var lim= 4;
  if (size && size=='small'){
    cn= 'rs';
    lim= 2;
  }
  d.className= 'rtop';
  d.style.backgroundColor= bk;
  for (var i=1; i <= lim; i++){
    var x= document.createElement('b');
    x.className= cn + i;
    x.style.backgroundColor= bColor;
    d.appendChild(x);
  }
  el.insertBefore(d,el.firstChild);
}

function AddBottom(el,bk,bColor,size){
  var d= document.createElement('b');
  var cn= 'r';
  var lim= 4;
  if(size && size=='small'){
    cn= 'rs';
    lim= 2;
  }
  d.className= 'rbottom';
  d.style.backgroundColor= bk;
  for(var i=lim; i > 0; i--){
    var x= document.createElement('b');
    x.className= cn + i;
    x.style.backgroundColor= bColor;
    d.appendChild(x);
  }
  el.appendChild(d,el.firstChild);
}

Hi!

Could you please help me to fix my menu in IE7.

You can see the problem on my site. But actually I don't know how to add an url he
The code is:

padding:0;
}
#menu ul#layer1 li {
background:transparent url(/site_media/images/left.png) no-repeat scroll left top;
float:left;
margin-left:6px;
padding-bottom:6px;
padding-left:6px;
padding-top:4px;
}
#menu ul#layer1 li span {
background:transparent url(/site_media/images/right.jpg) no-repeat scroll right top;
margin-right:6px;
padding-bottom:6px;
padding-right:6px;
padding-top:4px;
}
#menu li a {
background-color:#BF1E2D;
color:#FFFFFF;
padding:4px 35px 6px;
text-decoration:none;
}
#menu ul#layer1 li#current span {
background:transparent url(/site_media/images/right-gray.png) no-repeat scroll right top;
}
#menu ul#layer1 li#current {
background:transparent url(/site_media/images/left-gray.png) no-repeat scroll left top;
}
#menu ul#layer1 li#current a {
background-color:#E3E3E3;
color:#BF1E2D;
}

Hi All,

I am building a site that has the following structure for the navigation;

Code:

<div id="navigation">
    <ul id="navlist">
      <li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
      <li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
      <li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
        <ul>
          <li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
          <li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
          <li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
          <li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
          <li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
        </ul>
      </li>
      <li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
      <li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
    </ul>
  </div>

The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;.

Edit: Just noticed that I can't link to the full site that I have uploaded for preview.

What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another?

Your help would be much appreciated!

I am very new to CSS, but I am trying to use it to make a tabbed rounded-corner centered menu bar for my webpage. I've gone through a number of iterations, and I feel like I'm close, but it's not quite right. The left rounded-corner image appears to be just slightly too high compared to the middle/right part of the tab. The css and html codes are below. Thank you for any help.

Kate

CSS CODE:

#tabs8 {
float:left;
width:100%;
background:#FCF1F6;
border-bottom:4px solid #E276A7;
overflow:hidden;
position:relative;
}
#tabs8 ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#tabs8 ul li {
display:block;
float:left;
list-style:none;
margin:0 0 0 1px;
padding:0px 3px;
position:relative;
right:50%;
}
#tabs8 ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 0px;
background:url("tableft8.gif") no-repeat left top;
text-decoration:none;
line-height:1.3em;}
#tabs8 a span {
background:url("tabright8.gif") no-repeat right top;
padding:3px 10px;
color:#333;
line-height:1.3em;}

#tabs8 ul li a:hover {
background:#369;
color:#fff;
}
#tabs8 ul li a.active,
#tabs8 ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}-->




HTML CODE:

<div id="tabs8"><ul>
<li id="current">
<div align="center"><a href="index.html"><span>Home</span></a></div>
</li>
<li>
<div align="center"><a href="cake-shaping.html"><span>Cake Shaping</span></a></div>
</li>
<li>
<div align="center"><a href="decorations.html"><span>Edible Decorations</span></a></div>
</li>
<li>
<div align="center"><a href="gallery.html"><span>Gallery</span></a></div>
</li>
<li>
<div align="center"><a href="blog.html"><span>Blog</span></a></div>
</li>
<li>
<div align="center"><a href="subscribe.html"><span>Subscribe</span></a></div>
</li></ul></div>

Didn't know what to search for this--apologies if it exists somewhere on the board.

Now, with links, I know you can supply a title="" attribute to them, to get a tooltip to appear on them if you leave the mouse hovering on them for a short period. What I am trying to do is somewhat similar.

Basically, imagine that you have a column of links, and a large space to the right of them (the background of which is defined elsewhere, but links' descriptions still would show here).

Some code demonstrating the type of effect I'm grasping for is below:

Code:

-- DTD removed for space --
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
body{
	padding:    0px;
	margin:     0px;
}
.navCol{
	background: #00FFCC;
	width:      20.00%;
}
.dispInf{
	position:   absolute;
	top:        0px;
	left:       21.00%;
	width:      79.00%;
	background: #CCCCCC;
	height:     65%;
}
a:hover span{
	display:    block;
	position:   absolute;
	top:        0px;
	left:       21.00%;
	width:      79.00%;
}
a span{
	display: none;
}
-->
</style>
</head>
<body>
<div class="dispInf"></div>
<div class="navCol">
	<a href="/site1">Link 1<span>
	Description 1</span></a>
	<br />
	<a href="/site2">Link 2<span>
	Description 2</span></a>
</div>
</body>
</html>

Now, my problem is this:
This does not work in Internet Explorer, at all. Links still function; however, the text that should be appearing over in that right area does not.

Could anyone please point me in the proper direction to resolve this, if such can be done? I'm only shooting for IE6 and Mozilla compatibility, though the more the merrier.
Thank you for your time.

I'm trying to use a jQuery script to create a tabbed slide-out on the right side of the screen. At this point, the slide-out plug-in is not an option.

Here's the jQuery script:

Code:

$('#sideTabMain .button').toggle(function() {
	$('#sideTab').animate({right:'0px'}, {queue:false, duration: 500});
}, function() {
	$('#sideTab').animate({right:'-650px'}, {queue:false, duration: 500});
});

And the basic CSS for the div:

Code:

#sideTab      {
	position: absolute;
	z-index: 1000;
	top: 50px;
	right: -650px
	}

The issue is CSS-related. You can still see the slide-out div when you scroll over to the right (off the screen). How do I hide this? I tried putting the entire page in a CSS div with overflow: hidden but this completely removed the ability to scroll horizontally. Any ideas?

Thanks for your help.

My first new thread here! Hoping for some quick review and suggestions - any input is much appreciated. I have a site in the *early* stages of development and I'm using the "sliding doors" technique for tabbed navigation.

Not sure if I'm allowed to post links, so below are some code snippets and I've also attached a screenshot.

The nav container (#nav) temporarily has a yellow background just as a clear visual cue and it is not positioned on the page yet - so forgive the ugliness! - but the code for the actual tab effects is complete, or so I thought.

CSS:
Code:

/* horizontal main menu navigation */
#nav {
	float:left;
	width: 100%;
	background: yellow; /*temporary color just for visual cue */
}

#nav ul {
	margin: 0;
	padding: 0 0 0 300px;
	list-style: none;
}

#nav ul li {
	float: left;
	margin: 0;
	padding: 0;
	font: bold 1em/2em Verdana, Arial, Helvetica, sans-serif;
	background: url(images/tab_right.gif) no-repeat top right;
}

#nav a {
	float: left;
	display: block;
	margin: 0 10px 0 0;
	padding: 5px 2px;
	color: #fff;
	text-decoration: none;
	background: #284d73 url(images/tab_left.gif) no-repeat top left;
}

HTML:
Code:

<div id="nav">
 <ul>
  <li id="t-index"><a href="/" title="Gonzi's home page">HOME</a></li>
  <li id="t-about"><a href="#" title="About Us">ABOUT US</a></li>
  <li id="t-services"><a href="#" title="Our Services">OUR SERVICES</a></li>
  <li id="t-fleet"><a href="#" title="Our Fleet">FLEET</a></li>
  <li id="t-reserve"><a href="#" title="Reservations">RESERVATIONS</a></li>
 </ul>
<!-- end #nav -->
</div>

Problem is two fold:
1. The 'a' elements are styled to 'display: block' to make the entire tab clickable, yet it isn't actually rendering this way, and I'm at a loss to explain why. Perhaps something obvious I'm just missing...

2. The 'tab_right.gif' background image (in 'li' elements) and the 'tab_left.gif' background image (in the 'a' elements) don't appear to be meeting up correctly, leaving an area with no image. Again, no idea why and I'm hoping a 2nd pair of eyes may find something I'm missing...

If it would help to see the actual implementation, I can send a URL - just let me know how to get that to you (email?).

Thanks for any suggestions!
luispunchy

So I have a myspace, and I like things neat and compact. And I like filling out lots of long surveys that most likely no one will ever read, and posting them on my myspace. But when I do that, my page becomes very long and I don't like that. So my idea was something like this:

There would be a series of links across the top that would correspond to the various surverys and/or other content that I deem necessary to share with the world. The many users who visit my page looking for more details about my life click on the link of their choice. The box below all the links shows that particular survey. They read it all, and of course want more, so they click the next link. And poof, a new survery shows up right where the other one was. Compact and efficient.

I've seen sites use a slightly similar system before, often in the help/faq sections. You find the topic you need help with, click on it, and it pops up below it. However I'm pretty sure they used javascript, which isn't allowed on myspace. ("Security" or some other overrated matter). Therefore I would have to do it with CSS. I was thinking have each survey in a different table, all absolute positioned in the same place. Then when you click the link, either all the rest get visibility turned to not visible, (and that one turned to visible), or perhaps the z-index is changed. However I'm not sure you can do that in a link, especially without javascript. So I may need to find an alternative. Unfortunately, I'm not very good with CSS at all, and I'm also not very creative in problem solving.

Does anyone have any ideas on how I could implement this system without javascript or using other pages? (I just get my one little myspace homepage, although I guess I could cheat and use blog pages too. But then all the other blog crap like comments would show up on it).

I apologize if this has already been covered, I tried to look through the more recent posts for something similar and found nothing, and I wasn't really sure what to search for, since it isn't really something concrete I'm working with. I don't necessarily need code, mostly just ideas right now.

Thanks in advance to anyone who helps, and if you don't know what I'm talking about/thought it was too long, tell me and I'll try to clear it up or shorten it up, respectably (and respectfully, as it were).

PS. My myspace account, if you care and didn't already guess, is www.myspace.com/mynameismolotov. Althought it's basically empty right now.

I'm using the Spry tabbed panels widget on a website. I would like to center align the horizontal tabs. The default setting is left align. And I'm able to right align it.

Here is part of the css code:

.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%;
}

.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
}

.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 2px 6px 6px 6px;
margin: 0px 0px 0px 0px;
list-style: none;
border-left: solid 1px #999;
border-bottom: solid 1px #CCC;
border-top: solid 1px #CCC;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
background-image: url(../sprylight.png);
color: #333333;


I've tried changing the "padding" under the ".TabbedPanelsTabGroup" rule to "auto". This causes the tabs to kind of be centered, but not exactly. Also, one of the tabs breaks apart from the row and spills over to the next line.

Any help would be very much appreciated.

I'm working on a tabbed content Interface to be used at the bottom of some pages in a CMS. Works in FF but only partially in IE (sometimes).

The tabbed portion of the interface is set up with CSS and background images. In IE im having trouble getting them to show properly but only on 1 layer.

When the Javascript changes the display property of the div it brings up the appropriate background image. But only on 3 of the 4 content divs. The fourth panel "Specs" or the div#panel4{} is displaying ok, except that it will not bring up the image for the div#TopRight4

Here is the code, and a link to a test page so that you can view it in action...

any ideas?

html4strict Code:
Original - html4strict Code <html> <style type="text/css"> <!-- body {margin:0;padding:0;} div#container {position:absolute;left:20px;top:20px;width:631px;} div#panel2, div#panel3, div#panel4 {display:none;} div#panel1 {display:block;} div#panel_style{margin-top:5px;} div.panel_links1{width:131px;float:right;text-align:center;line-height:47px;vertical-align:50%;} div.panel_links2{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links3{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links4{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links a{text-decoration:none;} div.panel_links a:hover{color: gray;text-decoration:underline;} div.panelTopLeft{ background-image:url(images/CP_top_left.gif); width:100%; height:47px; float:left; } div.panelTopRight1{ background-image:url(images/CP_Four_Tab4.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight2{ background-image:url(images/CP_Four_Tab3.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight3{ background-image:url(images/CP_Four_Tab2.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight4{ background-image:url(images/CP_Four_Tab1.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelCenterLeft{ background-image:url(images/CP_center_left.gif); background-repeat:repeat-y; width:100%; float:left; height:100%; } div.panelCenterRight{ background-image:url(images/CP_center_right.gif); background-repeat:repeat-y; background-position:100% 0; width:100%;height:100%; float:right; } div.panelLowLeft{ background-image:url(images/CP_low_left.gif); background-repeat:no-repeat; width:631px; float:left;} div.panelLowRight{ background-image:url(images/CP_low_right.gif); background-repeat:no-repeat; width:6px; height:6px; float:right;} --> </style> <script language="JavaScript" type="text/javascript"><!-- var divArray = new Array('panel1','panel2','panel3','panel4'); function setDisplay(objectID){ for ( var i = 0; i < divArray.length; i++ ) { var d = document.getElementById(divArray[i]); d.style.display = (d.id==objectID)?'block':'none'; } } --></script> </head> <body> <div id="container"> <div id="panel1"> <div class="panelTopLeft"> <div class="panelTopRight1"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4">Options</div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>Blah Blah Blah</p> </div> </div> <div class="panelLowLeft"> <div class="panelLowRight">&nbsp;</div> </div> </div> <div id="panel2"> <div class="panelTopLeft"> <div class="panelTopRight2"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3">Features</div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>More Blah Blah Blah</p> </div> </div> <div class="panelLowLeft"> <div class="panelLowRight">&nbsp;</div> </div> </div> <div id="panel3"> <div class="panelTopLeft"> <div class="panelTopRight3"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2">Swatches</div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>Still Some more Blah Blah Blah</p></div> </div> <div class="panelLowLeft"> <div class="panelLowRight">&nbsp;</div> </div> </div> <div id="panel4"> <div class="panelTopLeft"> <div class="panelTopRight4"> <div class="panel_links1">Specs</div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>And the last bit of Blah Blah Blah</p></div> </div> <div class="panelLowLeft"> <div class="panelLowRight">&nbsp;</div> </div> </div> </div> </body>

  

 <html> 


 <style type="text/css">


 <!--


 body {margin:0;padding:0;}


 div#container {position:absolute;left:20px;top:20px;width:631px;}


 div#panel2, div#panel3, div#panel4 {display:none;}


 div#panel1 {display:block;}


 div#panel_style{margin-top:5px;}


 div.panel_links1{width:131px;float:right;text-align:center;line-height:47px;vertical-align:50%;}


 div.panel_links2{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;}


 div.panel_links3{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;}


 div.panel_links4{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;}


 div.panel_links a{text-decoration:none;}


 div.panel_links a:hover{color: gray;text-decoration:underline;}




 div.panelTopLeft{


   background-image:url(images/CP_top_left.gif);


   width:100%;


   height:47px;


   float:left;


 }




 div.panelTopRight1{


   background-image:url(images/CP_Four_Tab4.gif);


   background-repeat:no-repeat;


   background-position: 100% 0;


   width:533px;


   height:47px;


   line-height:47px;


   float:right;}


   


 div.panelTopRight2{


   background-image:url(images/CP_Four_Tab3.gif);


   background-repeat:no-repeat;


   background-position: 100% 0;


   width:533px;


   height:47px;


   line-height:47px;


   float:right;}


   


 div.panelTopRight3{


   background-image:url(images/CP_Four_Tab2.gif);


   background-repeat:no-repeat;


   background-position: 100% 0;


   width:533px;


   height:47px;


   line-height:47px;


   float:right;}


   


 div.panelTopRight4{


   background-image:url(images/CP_Four_Tab1.gif);


   background-repeat:no-repeat;


   background-position: 100% 0;


   width:533px;


   height:47px;


   line-height:47px;


   float:right;}




 div.panelCenterLeft{


     background-image:url(images/CP_center_left.gif);


     background-repeat:repeat-y;


     width:100%;


     float:left;


     height:100%;




 }


 div.panelCenterRight{


     background-image:url(images/CP_center_right.gif);


     background-repeat:repeat-y;


     background-position:100% 0;


     width:100%;height:100%;


     float:right;


 }




 div.panelLowLeft{


   background-image:url(images/CP_low_left.gif);


   background-repeat:no-repeat;


   width:631px;


   float:left;}


 div.panelLowRight{


   background-image:url(images/CP_low_right.gif);


   background-repeat:no-repeat;


   width:6px;


   height:6px;


   float:right;}


 -->


 </style>


 <script language="JavaScript" type="text/javascript"><!--


 var divArray = new Array('panel1','panel2','panel3','panel4');


 function setDisplay(objectID){


     for ( var i = 0; i < divArray.length; i++ ) {


         var d = document.getElementById(divArray[i]);


         d.style.display = (d.id==objectID)?'block':'none';


     } 


 }




 --></script>


 </head>


 <body>


 <div id="container">


 <div id="panel1">


      <div class="panelTopLeft">


         <div class="panelTopRight1">


           <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div>


           <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div>


           <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div>


           <div class="panel_links4">Options</div>


         </div>


      </div>


      <div class="panelCenterRight">


         <div class="panelCenterLeft"><br />


           <p>Blah Blah Blah</p>


         </div>


       </div>


       <div class="panelLowLeft">


          <div class="panelLowRight">&nbsp;</div>


       </div>


      </div>


      <div id="panel2">


      <div class="panelTopLeft">


         <div class="panelTopRight2">


           <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div>


           <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div>


           <div class="panel_links3">Features</div>


           <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div>


         </div>


      </div>


      <div class="panelCenterRight">


         <div class="panelCenterLeft"><br />


 <p>More Blah Blah Blah</p>


           </div>


       </div>


       <div class="panelLowLeft">


          <div class="panelLowRight">&nbsp;</div>


       </div>


      </div>


      <div id="panel3">


      <div class="panelTopLeft">


         <div class="panelTopRight3">


           <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div>


           <div class="panel_links2">Swatches</div>


           <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div>


           <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div>


         </div>


      </div>


      <div class="panelCenterRight">


         <div class="panelCenterLeft"><br />


           <p>Still Some more Blah Blah Blah</p></div>


       </div>


       <div class="panelLowLeft">


          <div class="panelLowRight">&nbsp;</div>


       </div>


      </div>


      <div id="panel4">


      <div class="panelTopLeft">


         <div class="panelTopRight4">


           <div class="panel_links1">Specs</div>


           <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div>


           <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div>


           <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div>


         </div>


      </div>


      <div class="panelCenterRight">


         <div class="panelCenterLeft"><br />


           <p>And the last bit of Blah Blah Blah</p></div>


       </div>


       <div class="panelLowLeft">


          <div class="panelLowRight">&nbsp;</div>


       </div>


      </div>


 </div>


 </body>  

Test Page

I really can't seem to even find the words to describe this error. I have posted before in regards to another issue that seemed to have alluded you guys so i am posting again for another error that is more important.

What is the Error?
Ok basically the yahoo(google has same issue) ad lags when you scroll up and down. When I say lag i mean it sort of stays in it's position while the rest of the layout moves on, after a second it corrects itself.

I have excluded everything in my layout except the header, and even tried removing the ad from the div and everything and can't seem to figure out what is causing this issue.

http://www.unlimitedgamer.net/header_re.php

For users on WINDOWS (for some reason it works fine on MAC) based computers simply focus your eyes on the advertisement, and scroll up and down while watching it. It's impossible not to see it.

Note, this issue doesn't occur in IE7 (note sure about IE6)

Any help would be greatly appreciated as this lil bug is holding up the opening of my layout

100% height, floats, renders fine in FF but in IE I get a scrollbar and a bit of space underneath the wrapper div. I can put up a screenshot if needed. I've been trying to solve the issue for 2 days now. Thanks for the help.

CSS
Code:

@charset "utf-8";
/* CSS Document */
html, body {
	height: 100%;
}

body {
	background-color: #63aacf;
	margin-top: 0;
	margin-left: 0;
	padding: 0;
}

h1 {
	margin-top: 0;
	padding: 0;
}

#header {
	background-image: url(images/top.png);
	background-repeat: repeat-y;
	margin-bottom: 0;
}

#content {
	margin-top: 0;
}

#spacer {
	background-image: url(images/supra_02.png);
	background-repeat: no-repeat;
}

#wrapper {
	width: 800px;
	min-height: 100%;
	margin: 0;
	padding: 0;
	background-image: url(images/bg.png);
	background-repeat: repeat-y;
	overflow: hidden;
}

* html #wrapper {
	height: 100%;	
}

#sidebar {
	width: 200px;
	float: left;
}

#mainContent {
	width: 600px;
	float: right;
}

#clearfloats {
	height: 0;
	clear: both;
	overflow: hidden;
}

HTML
Code:

<div id="wrapper">
	<div id="header">
    	<h1>boogy</h1>
        <div id="spacer">&nbsp;</div>
    </div>
    <div id="content">
    	<div id="sidebar">
        Link <br /> Link <br /> Link        </div>
        <div id="mainContent"> Hello World</div>
        <div id="clearfloats"></div>
    </div>
</div>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

I've tried several differnt doc types, but all of them prevent my left menu items' text to change colors when you hover over the text.

Is this common? Is it my code?

You'll also notice the 2 pages below have some general layout css issues, like too much white space above the grey line AND though they both use the same right bar (I uses a PHP include) the format is different in both. The green line is the toughest...it won't extend the height of the page.

Any ideas?

I attached my style sheet as well. thanks.

http://bowtree.org/latest/luminaries.php
http://bowtree.org/latest/index.php

Hi to all,

I have a problem with an empty div. I have created an empty div as follows: Code:

<div id="more"></div>Hello

Now I set the height property of the empty div equals to 20px. On IE 7.0 it looks fine, with the hello under the empty div, however in FireFox and Opera Hello is being display nearly inside the empty div. What can i do to fix this and make it display always under the empty div?

Thanks and Regards,
Sim085

ps: I am using the Strick Doc Type. and I need the empty only to colour it in a different colour (for style that is).