CSS: background image not behind all text

jasonpc1

11-15-2010, 11:45 AM

wanting background image only on bottom menu section but i can not seem to get the image to show behind all of the menu items.

<div class="header">
<ul>
<li class="firstmenuitem"><a href="#">Welcome</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<li><a href="#">Menu 7</a></li>
<li><a href="#">Menu 8</a></li>
</ul>
<br style="clear: both; line-height: 8px;">
<ul class="RoundMenuBox">
<li class="customerfirst"><a href="#">Menu 9</a></li>
<li><a href="#">Menu 10</a></li>
</ul>
<br style="clear: both;">
</div>

CSS

.header { margin: 0 auto; text-align: center; padding: 10px 10px 5px 10px; position: relative; font-size: 12px; }
.header ul { display: block; text-align: center; width: 100%; list-style: none; padding: 0; height :12px; }
.header li { padding: 0 8px 0 10px; color: #000; display: inline; position: relative; top: 30%; border-left: 2px solid #319cfe; }
li.firstmenuitem { border-left: 0px; }
li.customerfirst { border-left: 0px; }

.Round_MenuBox { background:url(../images/RoundMenuBox.gif) no-repeat center center; }

I have attached both the image i am using and my original photoshop file.

can anyone see why the image is not showing correctly ?

SB65

11-15-2010, 12:23 PM

Your classes don't match:

<ul class="RoundMenuBox">

.Round_MenuBox { background:url(../images/RoundMenuBox.gif) no-repeat center center; }

jasonpc1

11-15-2010, 02:27 PM

opps sorry i copied the code in my live script, i did not have the _ in the CSS when i tested it first off

i get the image above center and the text below center. ? obviously wanting the text to be center center of the image

SB65

11-15-2010, 02:41 PM

Remove the height from .header ul.

jasonpc1

11-15-2010, 03:32 PM

Remove the height from .header ul.

thank you.

I have opted to use this method instead of images but now have different views in IE than what is correctly showing in Firefox.

also i wish for the bottom menu to be in the centre like the top menu, but can not seem to get this right even using a centered div

.header { margin: 0 auto; text-align: center; padding: 10px 10px 5px 10px; position: relative; font-size: 12px; }
.header ul { display: block; text-align: center; width: 100%; list-style: none; padding: 0; height :12px; }
.header li { padding: 0 8px 0 10px; color: #000; display: inline; position: relative; top: 30%; border-left: 2px solid #319cfe; }
li.firstmenuitem { border-left: 0px; }
li.customerfirst { border-left: 0px; }

.RoundMenuBox { position: relative; background: #4B8EC3; margin: 0px 5px; width: 400px; color: #ffffff; }
.rtopcolour1, .rbottomcolour1{ display: block; background: #ffffff; }
.rtopcolour1 *, .rbottomcolour1 *{ display: block; height: 1px; overflow: hidden; background: #4B8EC3; line-height: 1px;}

<div class="header">
<ul>
<li class="firstmenuitem"><a href="#">Welcome</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Vehicles</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Quote Me</a></li>
<li><a href="#">Bookings</a></li>
<li><a href="#">Accounts</a></li>
<li><a href="#">Accounts LOG OUT</a></li>
</ul>
<br style="clear: both; line-height: 8px;">
<ul><div class="RoundMenuBox"><div class="rtopcolour1"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div><li class="customerfirst"><a href="#">Change password or email address</a></li><li><a href="#">Manage Passengers Details</a></li><div class="rbottomcolour1"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div></div></ul>
<br style="clear: both;">
</div>

i have attached images of IE and Firefox views

this is what doctype i have set..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
..
..

SB65

11-15-2010, 03:57 PM

I'm confused now, since both your images show the lower menu not centred.

However, I'd suggest adding:

*{margin:0;padding:0)

to the top of your css (always best to do this anyway). IE indents lists via margin, so while you are setting the ul to padding:0 which will take care of all the other browsers, that might be why IE is different.