Hello everybody!
This is my first post, so hopefully I do it alright.
Here is my question/problem:
I'd like to make a menue with a simple list (<ul>), shown in three
columns. Putting the list in a <div>, filling it with nine <li> and
formatting it with something like
ul {display: block; height: 100px; with:300px; list-style: none;}
li {display: block; float: left; height: 30%; width: 30%;}
everything works fine for me.
But my goal is to visually tilt the list a little bit. here you can find
how it should look like in the end:
http://www.machers.at/clubtest/menue.jpg
I tried to position three different images inside the <div> formatted with
{float: left; clear: left;}. I read about this in "Eric Meyer on CSS". It
works fine in IE6 and Opera 7something, but not in Firefox and Netscape7.1.
In the last two browsers the <ul> starts down at the last image, not at
the first image in the box like I want it to be.
So I changed to
ul {display: inline;}
li {display: inline;}
In this case, everything is "floating". But I desperately _need_ widths an
heights to style the menue independent from the text/links inside the
<li>s.
What I tried last, was to put the <a> elements inside the <li> to
{display: block; float: left; height: 30%; width: 30%;}
with the nearly the same result as described above: ie works, opera works,
firefox and netscape (i guess mozilla too) fail.
Look here with different browsers: http://www.machers.at/clubtest/ and
tell me, what I do wrong, or if there is an other possibility to achieve
this.
regards,
chris
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
