On 3 Aug, 03:16, Macsig <[email protected]> wrote:
> Hello guys, I'm a CSS newbie and I'm having hard time to create a
> "simple" horizontal list like this:
>
> Basically I made the code below:
>
> #HTML
> <ul class="project_nav">
> <li><a> </a></li>
> <li><a> </a></li>
> <li><a> </a></li>
> <li><a> </a></li>
> </ul>
Your html looks decent.
> #CSS:
> project_nav {
> width: ;
> height: 29px;
It is not an good idea to spesify heights, an webpage don't work like
that, let the content of .projetc_nav spesify the height.
> background: transparent url('/images/project_counter_bg.png') no-
> repeat;
> display:inline-block;
.project_nav don't need this rule, this is something that applies to
elements outside .project.nav. Ok, but there is at least one browser
(about 10%) that don't understand display:inline-block. It might help
if you insert "display:block" before "display:inline-block". I don't
know what you want or need, but I suggest that you submit another post
and ask about this. You don't want to miss about 10% of your visitors.
> list-style:none;
list-style don't applies to list elements, only to list-items, it
wouldt or should be ignored.
.project_nav li { list-style:none } works better (list items
inside .project_nav).
http://www.w3.org/TR/CSS2/generate.html#propdef-list-style
> white-space:nowrap;
I don't know why you're using this. This will make everly line larger
than "238px" go outside the container. This is another question you
should ask this group.
> margin: 0;
> padding: 6px 0 0 0;
>
> }
>
> .project_nav li {
> display: inline;
Ok, that is clever.
> width: 27px;
But width don't applies to "non-replaced inline elements" eg it. only
applies to ordinary inline elements. (replaced elements is images,
objects or elements replaced by the os like input elements).
> height: 12px;
This is your problem. You say "But each list item is higher the 12px:
it is 17px.".
I don't know where or in witch browser you tested this, but I don't
beleve you. If that is your case, I suggest you test your pages in
different browsers. If you can you should test you page in "Safari
4.0", as this is the browser that best will tell you how tings is
supposed to be (2009-08-03). Then you can test in firefox or opera to
see if there is any differens. If there is any difference it might be
because things is not defined in the spesifications (that is often the
case), if not there is an bug someplace (it happens).
Then you have to test for IE. IE 8 and IE 7 should in most cases be
okey, IE 6 might sucks. In that case you should provide an seperate
stylesheet for IE 6 (or IE 7, or 8).
If you don't have Mac you can, in Window test you pages in Chrome,
Forefox o Opere, or in Linux test your pages in Firefox or Opera.
If you don't trust me, take this test with your favorite testing
browser at: http://acid3.acidtests.org/.
> margin: 0;
> padding: 0;
Ok, no margin, no padding. Clever and quite common.
>
> }
>
> .project_nav li a {
> background: transparent url('/images/project_counter_dot.png') no-
> repeat top left;
We don't have this .png so we dont't know how this is happening,
please help us to help you.
>
> }
>
> But each list item is higher the 12px: it is 17px.
Oh, yes. The list-item shouldn't be heigher than 12px.
.project_nav li {
height: 12px
}'
Well, I isn't. The hight of the list item is 12px, the content is
however one line-height, witch is at least (by default in some
systems) 19px. The problem is that those extra pixles will flow over
the egdes of the 12px hight list item.
>
> Am I missing something? How can I achieve my goal?
It is hard to say. It would be easyer if you could provide us an url.
I can quess that "overflow:hidden" on you li element would solve one
of your problem, but that would make another problem.
>
> Thanks for any help. I appreciate it.
>
> Have a nice day !
Have a nice day too!
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
-~----------~----~----~----~------~----~------~--~---
