Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.
Browser Specific Problems: background image in list using display: inline;
Bottom of Page1 to 4 of 4
-
is this possible? without display: block; i can't specify the height and width so parts of the background image get cut off.
how does one go about getting each element to display in it's correct size? i've tried the image in the bg of both the li and a. no luck either way.
EXAMPLE - http://test1.figure3a.com/list.php
thanks. -
I think you're looking for something like this:
click -
- CommentAuthoraxe_sosharp
- CommentTimeMar 13th 2007
To display the list inline float the block elements. On your page the CSS would be
#topnav li {
width: 67px;
height: 18px;
margin: 0;
padding: 0;
list-style-type: none;
background: url(/img/bg_topnav.gif) no-repeat left 50%;
display:block;
float:left;
}
You can then adjust the padding and margins so that it renders as you require.
@jorkas
Nice page but to be semantically correct all the examples should be coded as lists, including the inline examples. -
yes I know :) but my goal is to show only that this style can be applied to floated ,inline and block elements as well... I've made this css for other type of needs.. but I thought that it could be usefull in this case :)
1 to 4 of 4