[WSG] IE not displaying a link as a block level element

2005-05-11 Thread Drake, Ted C. 
Hi All
I've got an issue that I haven't seen before. I've got a fairly simple
vertical nav with nested lists. 

For some reason, the links are not displaying as block level elements in IE.

Here's the CSS
#mainnav {background:#29475d; width:182px;  list-style-
type:none;padding:10px 0 10px 7px;}
#mainnav li {list-style-type:none; margin:0;padding:0;display:inline;}
#mainnav li a {display:block; border-top:1px solid #fff; padding-right:5px;
padding-left:5px; text-decoration:none; 
font-weight:bold!important; color:#fff;  background:#0b73c1; }
#mainnav li a:hover {background-color:#fff; color:#000; border-right:2px
solid #29475d; }
#mainnav li ul li a {background-color:#7fc4f7; color:#333; padding-
left:15px;}
#mainnav li ul li ul li a {background-color:#C7E7FF; padding-left:30px;}
#mainnav li ul, #mainnav li ul li ul, #mainnav li ul li ul li ul
{display:none;}


The rest of the styles use body classes to show or hide specific nested
menus.

Does anyone see a reason why the links would not display as block? It is
causing some flashing as you mouse over the links and hit dead air. The
hover goes off and on

Thanks
Ted

**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**

Re: [WSG] IE not displaying a link as a block level element

2005-05-11 Thread Thierry Koblentz 
Drake, Ted C.  wrote:
 The rest of the styles use body classes to show or hide specific
 nested menus.
 
 Does anyone see a reason why the links would not display as block? It
 is causing some flashing as you mouse over the links and hit dead
 air. The hover goes off and on

Hi Ted,
To fix IE, try:
#mainnav a {height:1%}

HTH,
Thierry | http://www.TJKDesign.com
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**

Re: [WSG] IE not displaying a link as a block level element

2005-05-11 Thread Bert Doorn 
G'day
Drake, Ted C. wrote:
For some reason, the links are not displaying as block level elements in IE.
Here's the CSS
...
#mainnav li a {display:block; border-top:1px solid #fff; padding-right:5px;
padding-left:5px; text-decoration:none; 
	font-weight:bold!important; color:#fff;  background:#0b73c1; }
Try adding a width.   If a fixed width nav block, fix the width, 
otherwise play with 100% (but you might need a hack to hide 
that from browsers other than Windows IE)

Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**

Re: [WSG] IE not displaying a link as a block level element

2005-05-11 Thread kemie guaida 




#mainnav li {list-style-type:none; margin:0; 	padding:0;display:inline;}
You can't have a block-level element within an inline one... try changing display:inline to float:left instead

cheers

kemie



...:| kemie |:...

.:| www.monolinea.com
|:.

RE: [WSG] IE not displaying a link as a block level element

2005-05-11 Thread Drake, Ted C. 








Ding, ding, ding, 

We have a winner.



I used the display:inline/display:block
combination from this Andy Budd post:

http://www.andybudd.com/archives/2003/12/css_crib_sheet_1_gaps_between_vertical_nav_elements_in_ie5/index.php



When I switched it to float:left, the nav
elements shrank to the size of the text and did strange floating things.



So, I added the width:1% to the list items
and Voila, the links are now block level and the white space is gone.



But, it looked horrible in Firefox, so I
dropped the two rules down to my trusty Holly Hack section.

/* \*/

* html #mainnav li {

 height: 1%;

 float:left;

 }

* html #mainnav li a {

 height: 1%;

 }

/* */

And it is now looking good in both
browsers.



I could probably generalize the holly
hacks to the whole site, but for now I am doing it on the individual nav. Are
there reasons why I shouldn't just say * html li and * html a ?

At least for the height:1%

Ted













From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf
Of kemie guaida
Sent: Wednesday, May 11, 2005
10:12 AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] IE not displaying
a link as a block level element





#mainnav li {list-style-type:none; margin:0;  padding:0;display:inline;}You can't have a block-level element within an inline one... try changing display:inline to float:left insteadcheerskemie



...:| kemie |:... 
.:| www.monolinea.com
|:.

Re: [WSG] IE not displaying a link as a block level element

2005-05-11 Thread Thierry Koblentz 
Drake, Ted C.  wrote:
 I could probably generalize the holly hacks to the whole site, but
 for now I am doing it on the individual nav.  Are there reasons why I
 shouldn't just say * html li and * html a ?

Did you try to use Conditional Comments instead of CSS filetrs?
IMO, that's where this declaration belong...

The height:1% lets you also use padding with *regular* anchors in IE.

Thierry | http://www.TJKDesign.com
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**