Link to home
Start Free TrialLog in
Avatar of corin_pearce
corin_pearce

asked on

Left hand menu heights problem in IE7

Hi
I'm having trouble with menu heights - they differ between Firefox (which shows them perfectly) and IE7 (which adds bottom space for some reason)

I'm using styled li tags that change colour when hovered.

I hope the code is self-explanatory - you can see it at http://www.torpedoharringay.com/wow/

I've also added it below.

Thanks
Corin
********* HTML
 
<HTML>
<HEAD>
	<title>Comedy Gig 2009 : War on Want</title>
	<style type="text/css" media="all">@import "css/master.css";</style>
</HEAD>
<BODY>
<div id="wrapper">
	<div id="lhs">
		<img src="images/title.jpg" alt="War on Want Comedy Gig logo">
		<ul class="sidemenu">
		<li class="book"><a href="book_tickets.html">Book tickets</a></li>
		<li class="separator">Profiles</li>
		<li class="normal"><a href="adam_bloom.html">Adam Bloom</a></li>
		<li><a href="tim_vine.html">Tim Vine</a></li>
		</ul>
	</div>
	<div id="rhs">
		test
	</div>
</div>
</BODY>
</HTML>
 
********* CSS
 
html, body {
text-align: center;
}
 
/* Classes */
 
#wrapper {
	width: 750px;
	margin: auto;
	padding: 5px;
	background-color: white;
}
 
#lhs {
	width: 200px;
	float: left;
	background-color: white;
}
 
#rhs {
	background-color: green;
}
 
/* menu */
 
ul.sidemenu {
	padding: 0;
	text-align: left;
	padding-top: 20px;
	margin: 0;
	list-style: none;
	border-bottom: 1px solid #333333;
	width: 200px;
	background-color: #ffffff;
	font-size: 0.8em;
	font-family: verdana, arial, helvetica, sans-serif;
}
 
ul.sidemenu li {
	border-top: 1px solid #333333;
	border-left: 1px solid #333333;
	border-right: 1px solid #333333;
}
 
ul.sidemenu li a {
	text-decoration: none;
	display: block; /* makes whole area linkable */
	color: #333333;
	font-weight: bold;
	padding: 6px 10px; /* top+bottom left+right paddings */
}
 
ul.sidemenu li a:hover {
	background-color: #aa0000;
	color: #ffffff;
}
 
ul.sidemenu li.separator {
	background-color: #333333;
	color: #ffffff;
	font-weight: bold;
	padding: 10px 10px; /* top+bottom left+right paddings */
}
 
ul.sidemenu li.book {
	margin-bottom: 20px;
	border-bottom: 1px solid #333333;
}

Open in new window

Avatar of corin_pearce
corin_pearce

ASKER

to clarify, the problem occursa on the Adam Bloom/Tim Vine menu items, but seems to be fine on the rest
ASKER CERTIFIED SOLUTION
Avatar of dzamfir
dzamfir
Flag of Czechia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
oh wow, that's simple. thanks!
1.  class="normal" has not been specified
2.  I have edited the code somehow. See below. You can even float the <li> left...
3.  Usually you should use padding:0 and margin:0 for the main divs to fix the IE bug.
4.  try ul a {
display: block;
float: left;
clear: left;
}

5.  the ff may help:

http://www.alistapart.com/articles/horizdropdowns


MD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 
<link type="text/css" rel="stylesheet" href="main.css" />
<link href="../menubar/MenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script src="../menubar/MenuBar.js" type="text/javascript"></script>
 
<style type="text/css">
 
 
/* Classes */
 
#wrapper {
        width: 750px;
        margin: auto;
        padding: 5px;
        background-color: white;
}
 
#lhs {
        width: 200px;
        float: left;
        background-color: white;
}
 
#rhs {
        background-color: green;
}
 
/* menu */
 
ul.sidemenu {
        padding: 0;
        text-align: left;
/*        padding-top: 20px;omit this*/
        margin: 0;
        list-style: none;
        border-bottom: 1px solid #333333;
        width: 200px;
        background-color: #ffffff;
        font-size: 0.8em;
        font-family: verdana, arial, helvetica, sans-serif;
}
 
ul.sidemenu li {
        border-top: 1px solid #333333;
        border-left: 1px solid #333333;
        border-right: 1px solid #333333;
		padding:0;
		margin:0;
}
 
ul.sidemenu li a {
        text-decoration: none;
        display: block; /* makes whole area linkable */
        color: #333333;
        font-weight: bold;
        padding: 6px 10px; /* top+bottom left+right paddings */
}
 
ul.sidemenu li a:hover {
        background-color: #aa0000;
        color: #ffffff;
}
 
ul.sidemenu li.separator {
        background-color: #333333;
        color: #ffffff;
        font-weight: bold;
        padding: 10px 10px; /* top+bottom left+right paddings */
}
 
ul.sidemenu li.book {
        margin-bottom: 20px;
        border-bottom: 1px solid #333333;
}
 
 
</style>
</head>
<html>
 
<body>
 
<div id="wrapper">
        <div id="lhs">
                <img src="images/title.jpg" alt="War on Want Comedy Gig logo">
                <ul class="sidemenu">
                <li class="book"><a href="book_tickets.html">Book tickets</a></li>
                <li class="separator">Profiles</li>
                <li class="normal"><a href="adam_bloom.html">Adam Bloom</a></li>
                <li><a href="tim_vine.html">Tim Vine</a></li>
                </ul>
        </div>
        <div id="rhs">
                test
        </div>
</div>
</body>
</html>

Open in new window

myderrick:  you need to stop posting unhelpful, untested information on EE.  Your post above does NOT solve the poster's problem.  Screenshot below is from your code:  the white gap is still there.  Plus your comments are almost completely incoherent... I don't see how you think any of that will be helpful in the solution of the problem.  This is the third time in just a few days that you have done this on threads I have been following.  Please -- stop & think before posting!  
whitespace-still-there-in-myderr.jpg
yessirnosir, I always test the codes on multiple pc (browsers) and validate them before advising. I tried the codes on IE 6, 7 and 8 and FF and chrome before advising. I try not to take offense most of the time.

In this case I will decline to take offense. I would appreciate if you desist from using such offensive approach on public threads. There was nothing wrong with the codes. I was just trying to help.

The question has been closed. I didn't expect this from you.

MD.


===>>>  I always test the codes on multiple pc (browsers) and validate them before advising.
If this is true, why did the code that you posted NOT solve the user's problem?

===>>>  There was nothing wrong with the codes. I was just trying to help
I don't doubt that you are trying to help.  But in many cases your posts are disrupting the efforts of others to solve the problem.  eg. you also received feedback from level9wizard 3 days ago on this thread  https://www.experts-exchange.com/questions/24078315/Footer-at-bottom-of-page.html where he said "myderrick, please read my full original question before commenting"  You wouldn't be getting that kind of feedback from people if your comments were appropriate.

I've been a member of EE for over 5 years, and you are the first poster who has ever been so disruptive in his/her comments as to inspire me to give such strong feedback.  Lots of people post things that turn out to be wrong, including me.  But your posts have included far more errors and unhelpful comments than I've ever seen from anyone on EE.   Three times now your posts have been so unhelpful that I have considered contacting moderators.  Maybe I should have done that.  But  I decided instead to try to give you constructive feedback directly in the hope you will be a little more careful to make accurate and relevant comments in the future.   You seem to think I am being offensive by giving you this feedback -- that is certainly not my intent.  My feedback is intended only to help EE continue to be a place where people can get quick and accurate answers to their questions.  
I'm sure every comment you ever gave on EE was helpful.

I will keep your feedback in mind.

MD