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?!
You haven't floated the
You haven't floated the <li>s.
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:
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.
Thanks Tyssen, I really
:blushing:
Thanks Tyssen, I really should have noticed that.