Forum Moderators: not2easy
I have this multiplatform render issue which is casing some headaches. I know what is causing the problem in IE, but if I remove the line, the menus don't work on every other browsers that I have teste (Firefox, Safari, Opera), so its either IE or the others, but never working on all. Can you help me out on this one. Here is the code:
Css
/*------------------------------ menu list 01 --------------------------*/
#menuList01 {
margin: 0px;
margin-top: -1em; /* if I remove this, it fixes the problem in IE, but creates a line break in Safari, Firefox and Opera in OS X and WinXP */
width: 800px;
height: 25px;
border: 0;
background-color: #B98A6D;
}
#menuList01 ul {
margin-left: 0;
}
#menuList01 li {
float: left;
list-style: none;
}
#menuList01 li a {
display: block;
padding-left: 10px;
padding-right: 10px;
border-width: 0px;
color: #FFECE4;
text-decoration: none;
}
#menuList01 li a:hover {
border-width: 0px;
color: #78DFEB;
}
/*------------------------------------ menu list 02 ---------------------------------*/
#menuList02 {
margin: 0px;
margin-top: -1em; /* if I remove this, it fixes the problem in IE, but creates a line break in Safari, Firefox and Opera in OS X and WinXP */
width: 800px;
height: 20px;
border: 0;
background-color: #D8BCAB;
}
#menuList02 ul {
margin-left: 0;
}
#menuList02 li {
float: left;
list-style: none;
}
#menuList02 li a {
display: block;
padding-left: 10px;
padding-right: 10px;
border-width: 0px;
color: #9E5C34;
text-decoration: none;
}
#menuList02 li a:hover {
border-width: 0px;
color: #60B444;
}
/*------------------------------------menu list 03 ---------------------------------*/
#menuList03 {
margin: 0px;
margin-top: -1em; /* if I remove this, it fixes the problem in IE, but creates a line break in Safari, Firefox and Opera in OS X and WinXP */
width: 800px;
height: 20px;
border: 0;
background-color: #E6D8CF;
}
#menuList03 ul {
margin-left: 0;
}
#menuList03 li {
float: left;
list-style: none;
}
#menuList03 li a {
display: block;
padding-left: 10px;
padding-right: 10px;
border-width: 0px;
color: #794628;
text-decoration: none;
}
#menuList03 li a:hover {
border-width: 0px;
color: #FF41AC;
}
<div id="menuList01">
<ul>
<li><a href="test">Option 1</a></li>
<li><a href="test">Option 2</a></li>
<li><a href="test">Option 3</a></li>
<li><a href="test">Option 4</a></li>
</ul>
</div>
<div id="menuList02">
<ul>
<li><a href="test">Option 1</a></li>
<li><a href="test">Option 2</a></li>
<li><a href="test">Option 3</a></li>
<li><a href="test">Option 4</a></li>
<li><a href="test">Option 5</a></li>
</ul>
</div>
<div id="menuList03">
<ul>
<li><a href="test">Option 1</a></li>
<li><a href="test">Option 2</a></li>
</ul>
</div>
Thnks in advance. Your help is much appriciated.
bd.
PS: the Code tag is acting weird, sorry if it doesn't sow up well.
ul {
margin:0;
}
...and removing your negative margins
When I "zeroed out" all elements (see first line in CSS) I actually had to add padding to get the same effect out of IE. Economized code below, tested only in FF/IE7 -XP, looking identical here.
If you're still having troubles remember floated elements are taken out of the normal flow, so you need to do one of two things to get the UL's to "clear:" add float:left to the UL (floated elements will contain/clear their floated children) or add overflow:hidden on the UL. Doesn't look necessary at this point . . .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
* { margin:0; padding:0; }
body { margin: 0 8px; }
#menuList01, #menuList02, #menuList03 { width: 800px; }
#menuList01 li, #menuList02 li, #menuList03 li {
float: left;
list-style: none;
}
#menuList01 li a, #menuList02 li a, #menuList03 li a {
display: block;
padding: 0 10px 0px 10px;
text-decoration: none;
}
#menuList01 ul, #menuList02 ul, #menuList03 ul { padding-left: 40px; }
#menuList01 { height: 25px; background-color: #B98A6D; }
#menuList01 li a { color: #FFECE4; }
#menuList01 li a:hover { color: #78DFEB; }
/*------------------------------------ menu list 02 ---------------------------------*/
#menuList02 { height: 20px; background-color: #D8BCAB; }
#menuList02 li a { color: #9E5C34; }
#menuList02 li a:hover { color: #60B444; }
/*------------------------------------menu list 03 ---------------------------------*/
#menuList03 { height: 20px; background-color: #E6D8CF; }
#menuList03 li a { color: #794628; }
#menuList03 li a:hover { color: #FF41AC; }
</style>
</head>
<body>
<div id="menuList01">
<ul>
<li><a href="test">Option 1</a></li>
<li><a href="test">Option 2</a></li>
<li><a href="test">Option 3</a></li>
<li><a href="test">Option 4</a></li>
</ul>
</div>
<div id="menuList02">
<ul>
<li><a href="test">Option 1</a></li>
<li><a href="test">Option 2</a></li>
<li><a href="test">Option 3</a></li>
<li><a href="test">Option 4</a></li>
<li><a href="test">Option 5</a></li>
</ul>
</div>
<div id="menuList03">
<ul>
<li><a href="test">Option 1</a></li>
<li><a href="test">Option 2</a></li>
</ul>
</div>
</body>
</html>
Now figger out how to center that puppy without setting a fixed width and having it blow up and you will make my day. :-)
