Background-color: spilling over in IE

HTML & CSS
1

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

2

Believe it or not, I never been to a Dairy Queen… LOL

They don’t have them in NY for some stupid reason.

3

not 100% sure what you mean, but welcome.

DQ = dairy Queen? Yes Please

4

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

5

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?

6

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?

7

How does it mess it up?

Try

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


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

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?

9

haha yes, one blizzard please!

10

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

11

your CSS File is hard to read, you need


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

ahhh,

Thanks again Ryan for all your help man.

You still at DQ cause you are worth like 1000000 x more than that…

:smiley:

13

yes, I meant Dairy Queen.