6 replies [Last post]
Zac
Offline
newbie
Last seen: 15 years 34 weeks ago
Joined: 2003-11-20
Posts: 1
Points: 0

Hi All

I have a right hand menu that is constructed using an un-ordered list

<div id="rMenu"><ul>
<li><a href="#">l1</a></li>
<li><a href="#">l2</a></li>
<li><a href="#">l3</a></li>
</ul></div>

CSS:

#rMenu ul{
padding:0px;
margin:0 0 5px 0;
list-style:none;
}

#rMenu ul li {
list-style:none;
margin:0px;
padding:0px;
}

#rMenu ul a{
font-size:0.7em;
display:block;
text-decoration:none;
padding: 3px 11px;
border-bottom:1px solid #97B0C8;
border-top:1px solid #DBF3FC;
background: #B9D1EA;
color:#000;
font-weight:600;
margin:0px;
height: 10px;
width:177px;

voice-family: "\"}\"";
voice-family:inherit;
width:166px
}

#rMenu ul a:hover {
background:#cdcdcd;
border-bottom:1px solid #fff;
border-top:1px solid #999;
color:#900;
}

This seems to display OK in all browsers but IE5 on PC where it has an area of white space below.

Can anyone suggets a way to solve this?

Thanks

Maujor
Maujor's picture
Offline
Regular
Rio de Janeiro, Brazil
Last seen: 2 years 36 weeks ago
Rio de Janeiro, Brazil
Timezone: GMT-2
Joined: 2003-11-21
Posts: 46
Points: 2

IE5 whitespace under li - even with height

Hi Zac,
Try margin:0; at #rMenu ul, and set margin-top:5px at the box below that DIV.
I'll follow your post interest in the solution. And I've two questions on your code. Would you or anyone, explain me why you declareted width:166px and width:177px?
You have 11px padding-left and right.
Total padding:22px, so width= 177px - 22px = 150px.
And, Is it necessary set lyst-style:none at ..ul and ..ul li ?
Sorry! I'm just starting learning CSS, and would appreciate your reply.

Maurício "Maujor®" Samy Silva
Site: http://maujor.com
Books: http://livrosdomaujor.com.br

Stickman
Offline
newbie
UK
Last seen: 15 years 31 weeks ago
UK
Joined: 2003-12-09
Posts: 3
Points: 0

IE5 whitespace under li - even with height

List-style only needs to be set at ul.

Stickman
Offline
newbie
UK
Last seen: 15 years 31 weeks ago
UK
Joined: 2003-12-09
Posts: 3
Points: 0

IE5 whitespace under li - even with height

Sorry, didn't read the first post properly.

To get rid of the whitespace, you can float your list items (li) inside a list with a fixed width.

So:

#rMenu ul {
width: 150px;
padding: 0;
margin: 0 0 5px 0;
list-style: none;
}

#rMenu ul li {
float: left;
margin: 0;
padding: 0;
}

css_seth
Offline
Regular
minneapolis, mn
Last seen: 15 years 28 weeks ago
minneapolis, mn
Joined: 2004-01-02
Posts: 33
Points: 0

IE5 whitespace under li - even with height

i know using a list follows the convention of logical structure and syntax. but.. when you can achieve the same effect with a simple set of display:block'd anchors, why even bother with lists? i mean, one little thing on that too is that even for all your control of lists with CSS, you can't adjust the margin between the marker (bullet, numeral, etc) and the LI content. other than list-style-position: inside or outside. but that only gives you two fixed options.

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 15 years 37 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

IE5 whitespace under li - even with height

It sounds like a known IE list bug. A bottom border
on the items fixes it.

http//www.positioniseverything.net/

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 15 years 35 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

IE5 whitespace under li - even with height

Maujor wrote:
Would you or anyone, explain me why you declareted width:166px and width:177px?
You have 11px padding-left and right.
Total padding:22px, so width= 177px - 22px = 150px.

Well 155px,

You are correct and possibly not. It will depend on how IE 5n defines the padding as written.

I hate when people use only two values for the padding: 3px 11px Will the browser treat them as just a top and right values or all 4. Our code writer here is assuming only 11, and thats why he has 166px in the hack. I also would have assumed 22px.

Use all 4 values then nobody can make a mistake on your intention.

padding: 3px 11px 0px 0px; or padding: 3px 11px 3px 11px;

Regards
Day

The only way to learn is to do it yourself