4 replies [Last post]
James R
James R's picture
Offline
Enthusiast
Dublin
Last seen: 11 years 26 weeks ago
Dublin
Timezone: GMT+1
Joined: 2007-10-19
Posts: 108
Points: 13

The CSS:

ul#menu { float:right; margin:0; padding:0; list-style:none; }


li#mn1{
width: 24px;
height: 24px;
background: url(images/menu_refresh.png) no-repeat 0 0;
}

li#mn2{
width: 24px;
height: 24px;
background: url(images/menu_save.png) no-repeat 0 0;
}

li#mn3{
width: 24px;
height: 24px;
background: url(images/menu_email.png) no-repeat 0 0;
}

li#mn4{
width: 24px;
height: 24px;
background: url(images/menu_print.png) no-repeat 0 0;
}

ul#menu a{
display:block;
float:right;
width: 24px;
height: 24px;
text-indent: -9999px;
text-decoration: none;
overflow: hidden;
}

The HTML:

I'm trying to float the list to the right of my page. At the moment it's going over there but still displaying vertically. Maybe I'm not clearing it right?!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You haven't floated the

You haven't floated the <li>s.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

James R
James R's picture
Offline
Enthusiast
Dublin
Last seen: 11 years 26 weeks ago
Dublin
Timezone: GMT+1
Joined: 2007-10-19
Posts: 108
Points: 13

ul#menu

ul#menu { float:left; width: 100px; margin:0; padding:0; list-style:none; } ul#li { float: left; } li#mn1{ width: 24px; height: 24px; background: url(images/menu_refresh.png) no-repeat 0 0; }

li#mn2{
width: 24px;
height: 24px;
background: url(images/menu_save.png) no-repeat 0 0;
}

li#mn3{
width: 24px;
height: 24px;
background: url(images/menu_email.png) no-repeat 0 0;
}

li#mn4{
width: 24px;
height: 24px;
background: url(images/menu_print.png) no-repeat 0 0;
}

ul#menu a{
display:block;
float:left;
width: 24px;
height: 24px;
text-indent: -9999px;
text-decoration: none;
overflow: hidden;
}

Still no joy :shrug:

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

That's because this: ul#li

That's because this:

ul#li { float: left; }

should be:

#menu li { float: left; }

What you've got refers to a list with an ID of li.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

James R
James R's picture
Offline
Enthusiast
Dublin
Last seen: 11 years 26 weeks ago
Dublin
Timezone: GMT+1
Joined: 2007-10-19
Posts: 108
Points: 13

Thanks Tyssen, I really

:blushing:

Thanks Tyssen, I really should have noticed that.