No replies
renzocj's picture
Last seen: 12 years 14 weeks ago
Timezone: GMT-5
Joined: 2010-08-30
Posts: 1
Points: 2

Puzzled This is very strange. (or maybe is common and the problem is that I don't know how to solve it).

The problem is this: sometimes you need to creat an horizontal menu with links (using ul with display: inline) and this links must sometimes be inside an entire area that must go from the left edge to the right edge of the web. The real problem is to insert the menu in this area that must be with the same color as the links in order creat a visual impression that all is part as the same main horizontal menu.

There are several ways that I tried:

- First, I tried to make [ul] the same background-color as the [li] and give the first the style width all the way as the entire "wrapper". The problem is that when you insert a border to the [ul] to match the [li] borders, in firefox they match perfectly but in IE the [li] are 1px up from the main [ul] making a visual 2px border around every [li].

- Second try, was to creat a background-image in the div where was the [ul] with the links, this image was the same color as the [li] and with 1px border (same color border as every link ([li]). After did this, and having the [ul] with no background colors and no borders, the result was a perfect match between the links and the background image. The borders of every [li] match with the borders of the background-image of the div. The huge problem is that in IE there is a 1px move up, the entire [li] links are 1px up from the the [ul], creating a 2px border visual effect in every link square ([li]).

- I also tried several things but when I try to fix the IE problem I creat the problem for the Firefox version, in other words, in firefox is ok but when trying to fix the problem for the IE I affect the firefox. I was trying to find a solution that only affects the IE like a conditional but I don't know sincerely what that to do. So trying to put more padding or playing with margins could solve the problem for IE but creat a problem for firefox that match perfectly for now.

Any help or comment, would be of great help. Thanks

<div id="menu" class="bug">
    	<li><a href="professional_prof.html">Professional Profile</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="values.html">Values</a></li>
        <li><a href="experiences.html">Experiences</a></li>
        <li><a href="clients.html">Clients</a></li>
        <li><a href="gallery.html">Gallery</a></li>

Here are the CSS styles

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
 padding: 0;
 margin: 0;
 font-size: 100%;
 font-weight: normal;
table { border-collapse: collapse; border-spacing: 0; }
td, th, caption { font-weight: normal; text-align: left; }
img, fieldset { border: 0; }
ol { padding-left: 1.4em; list-style: decimal; }
ul { padding-left: 1.4em; list-style:square; }
q:before, q:after { content:''; }
#wrapper {
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	height: 1000px;
	background-color: #FFF;
#wrapper #menu {
	width: 900px;
	height: 22px;
	position: relative;
	background-image: url(../Notes/menu_background.jpg);
	background-repeat: no-repeat;
#wrapper #menu ul {
	list-style-type: none;
	margin-left: -23px;
#wrapper #menu ul li {
	display: inline; 
	border-bottom: none;
	background-color: #666;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: white;
	cursor: pointer;
#wrapper #menu ul li a {
	text-decoration: none;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	padding: 2px 7px 2px 7px;
	margin: 0 -5px 0 0px;
	border: 1px solid #333;
#wrapper #menu ul li a:hover {
	color: black;
	background-color: #999;