background-color: spilling over in IE.....

**tombempty** · Oct 12, 2010 10:01

I am trying to make this menu on the left at this link here http://kardwelldev.com/wheelsofchance/newsite

so that when you hover over, the whole div fills in and not just the words.

I have seemed to have accomplished this in Firefox but when in IE, it seems to spill over the HR i have to create a line seperator.

any suggestions or advice would be a great help,

Paul

**rguy84** · Oct 12, 2010 10:18

your CSS File is hard to read, you need

Code css:

#menuitems a:hover {
  ...
  display:block;
}

**tombempty** · Oct 12, 2010 10:47

Thanks Ryan,

When I do that though, It messes up my main content.

I need another box next to the menu to put the main content in however, it just puts it below the menu and makes a white space.

What am I doing wrong here?

thanks for any help or advice on this,

Paul

**tombempty** · Oct 12, 2010 11:50

Anyone have any thoughts on this as to how to get the two div's next to each other.

I have the left column set but the right column sits right underneath it and not next to it.

I have tried position: absolute but that puts the text in the black area of the footer.

What can I be doing wrong here with this?

**rguy84** · Oct 12, 2010 12:03

How does it mess it up?

Try

HTML Code:

<ul id="menuitems">
	<li><a href="custom-wheels.htm">Casino-Quality Custom Wheels of<br>Chance with Your Design</a></li>
	<li><a href="deluxe-wheels.htm">Casino-Quality Carnival Wheels:<br>Number, Money, Horse, More</a></li>
	<li><a href="custom-prize-wheels.htm">Custom Prize Wheels<br>with Insert Slots for Your Graphics</a></li>
	<li><a href="wheel-accessories.htm">Wheel of Chance Accessories</a></li>
</ul>

Code CSS:

#menuitems{
  width: 300px;
}
#menuitems li{
  margin : 0;
  list-style-type : none;
}
#menuitems a, #menuitems a:visited{
  color: #767981;
  padding: 1px 5px 1px 15px;
  text-decoration: none;
  background-color: #edede4;
  border-top: 1px solid #fff;
  display: block;
}
#menuitems a:hover, #menuitems a:active, #menuitems a:focus {
  background-color: #ccc;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

**tombempty** · Oct 12, 2010 12:14

hmm, well if you look now, It seemed to fix the column issue I was having with the main content not sitting right.

Now the two columns sit side by side the way I intended but I loose my 1px border on the left and right sides.

Is this related or no?

**tombempty** · Oct 12, 2010 12:21

Basically all i did was add float:left; to the left menu item so that the right column would sit right next to it.

However, i seem to loose my 1px black border now on either side.

Is there anythign I can do for this and still keep the menu the way I want?

**rguy84** · Oct 12, 2010 12:30

You are loosing the border because it is taking the height of the rightcolcontainer to draw its border. You need to set min-height:100% on html, body, container, contentcontainer, and rightcolcontainer to draw it down