Re: [css-d] Fixed LI dimension with XHTML
On Jun 11, 2008, at 3:36 PM, <[EMAIL PROTECTED]> <[EMAIL PROTECTED]
> wrote:
> Why didn't I think of that :) Thank you. However is there anyway I
> could get the hyperlink to fill the entire
> LI element once it's been floated? I would like for my mouseover
> effect to be applied when you are over the
> entire menu item and not only the text itself.About the fixed
> height, you are right it would be better to apply a min-height then
> I guess.
#menu ul li a {display:block;}
/* trigger 'hasLayout' for IE6, else it won't show the link as a full
width block*/
As for the height, I'd only use the font-size+padding-top/bottom.
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fixed LI dimension with XHTML
[EMAIL PROTECTED] wrote:
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
>
>
> http://www.w3.org/1999/xhtml";>
> />Test
>
>
> * {border: 0;margin: 0;padding: 0; } body {font-family:
> Verdana, Helvetica, Sans-Serif;font-size: .75em; }#menu {
> background-color: #0f0;width: 900px; } #menu ul { padding: 2px;
> position: relative; text-align: left; }
> #menu ul li { display: inline; background-color: #000;
> list-style: none; width: 150px;
> height: 80px;; }
> #menu ul li a { color: #aaa; font-weight: bold; line-height:
> 2.8em; padding: 10px 20px; text-decoration: none; width: 100%;
> height: 100%; }
> #menu ul li a:hover { color: #fff; text-decoration: none; }
> #menu ul li a:active { background-color: #a6e2a6; text-decoration:
> none; }
> #menu ul li.selected a { background-color: #FFF; color: #000; }
>
>
> Home Pagehref="#">New Product Specialshref="#">My Account Contact Us
>
>
To get it working on FF2, IE7, IE6, Safari add the following to
#menu ul li a {
background-color: #000;
...
...
}
To optimize the code you can remove:
#menu ul li a {
width: 100%; //remove
height: 100%; //remove
...
...
}
Also remove ALL the spaces between the li elements so that the spaces
between the li elements in the browser display of IE7, FF2, FF3, Safari
will disappear!
Like David said i would not put fixed width and height on the li
elements, since you can sort that out via the padding of the a element.
regards, Jens
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fixed LI dimension with XHTML
Philippe,
Why didn't I think of that :) Thank you. However is there anyway I could get
the hyperlink to fill the entire
LI element once it's been floated? I would like for my mouseover effect to be
applied when you are over the
entire menu item and not only the text itself.About the fixed height, you are
right it would be better to apply a min-height then I guess.
.Andreas
> CC: [EMAIL PROTECTED]> From: [EMAIL PROTECTED]> To:
> css-d@lists.css-discuss.org> Subject: Re: [css-d] Fixed LI dimension with
> XHTML> Date: Wed, 11 Jun 2008 08:49:04 +0900> > > On Jun 11, 2008, at 5:39
> AM, <[EMAIL PROTECTED]> <[EMAIL PROTECTED] > > wrote:> > > Is it possible to
> display a unordered list inline, have a hyperlink > > fill the full size of
> the LI element and force the LI element to > > have a fixed dimension> >
> using XHTML? It works if I just let it fall back to QUIRKSMODE but > >
> obviously I don't want that =)> >> > I'm trying to make six LI elements
> horizontally line up and have a > > dimension of 150x80 pixels and have the
> entire LI be covered by a > > hyperlink element. I've> > tried these two
> doctypes with the same outcome. Its only been tested > > on IE7 so far...
> IE7, FF, Safari would be nice to have it work in> >> > #menu ul li { display:
> inline; background-color: #000; > > list-style: none; width: 150px;> >
> height: 80px;; }> > width and height do not apply to inline elements>
> <http://www.w3.org/TR/CSS21/visudet.html#propdef-width>> > You could float
> your 's:> #menu ul li {float:left; width:150px; ..}> > locking the
> height is not a good idea, it could give strange results > if the user has a
> different font-size than the one you have choosen.> > Philippe> ---> Philippe
> Wittenbergh> http://l-c-n.com/> > > > >
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fixed LI dimension with XHTML
On Jun 11, 2008, at 5:39 AM, <[EMAIL PROTECTED]> <[EMAIL PROTECTED]
> wrote:
> Is it possible to display a unordered list inline, have a hyperlink
> fill the full size of the LI element and force the LI element to
> have a fixed dimension
> using XHTML? It works if I just let it fall back to QUIRKSMODE but
> obviously I don't want that =)
>
> I'm trying to make six LI elements horizontally line up and have a
> dimension of 150x80 pixels and have the entire LI be covered by a
> hyperlink element. I've
> tried these two doctypes with the same outcome. Its only been tested
> on IE7 so far... IE7, FF, Safari would be nice to have it work in
>
> #menu ul li { display: inline; background-color: #000;
> list-style: none; width: 150px;
> height: 80px;; }
width and height do not apply to inline elements
You could float your 's:
#menu ul li {float:left; width:150px; ..}
locking the height is not a good idea, it could give strange results
if the user has a different font-size than the one you have choosen.
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Fixed LI dimension with XHTML
Hi
Is it possible to display a unordered list inline, have a hyperlink fill the
full size of the LI element and force the LI element to have a fixed dimension
using XHTML? It works if I just let it fall back to QUIRKSMODE but obviously I
don't want that =)
I'm trying to make six LI elements horizontally line up and have a dimension of
150x80 pixels and have the entire LI be covered by a hyperlink element. I've
tried these two doctypes with the same outcome. Its only been tested on IE7 so
far... IE7, FF, Safari would be nice to have it work in
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
http://www.w3.org/1999/xhtml";>
Test
* {border: 0;margin: 0;padding: 0; } body {font-family:
Verdana, Helvetica, Sans-Serif;font-size: .75em; }#menu {
background-color: #0f0;width: 900px; } #menu ul { padding: 2px;
position: relative; text-align: left; }
#menu ul li { display: inline; background-color: #000; list-style:
none; width: 150px;
height: 80px;; }
#menu ul li a { color: #aaa; font-weight: bold; line-height:
2.8em; padding: 10px 20px; text-decoration: none; width: 100%;
height: 100%; }
#menu ul li a:hover { color: #fff; text-decoration: none; }
#menu ul li a:active { background-color: #a6e2a6; text-decoration:
none; }
#menu ul li.selected a { background-color: #FFF; color: #000; }
Home Page New Product Specials My Account Contact Us
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
