Sent by Ingo Chao on 10 November 2006 09:09
Taryn Regish wrote:
> I am having a problem when I try to specify a class on a navigation bar. I
> have the navigation working but when I try to add a class "utilmenu" the
> flyouts break.
....
> http://www.ism.ws/includes/test/newheaderv7.cfm
> http://www.ism.ws/files/style/combinedv7.css
>
> When I remove the .utilmenu from the code below the flyouts work fine.
>
> /* top level utility navigation links */
> div#utilnav a.utilmenu:link, div#utilnav a.utilmenu:visited, div#utilnav
> a.utilmenu:active {
> color: #FFFFFF;
> background-color: #153D7A;
> text-decoration: none;
> display: block;
> font-size: x-small;
> width: 8.7em;
> border-top: none;
> border-right: none;
> border-bottom: none;
> border-left: 1px solid #FFFFFF;
> height: 2.1em;
> padding: 0px .55em 0px .55em;
> text-align: center;
> line-height: 2.1em;
> }
>
The flyout properties are declared here:
/* style -- flyout links */
div#utilnav ul ul a:link, div#utilnav ul ul a:visited, div#utilnav ul ul
a:active {
background: #E4E0D7;
color: #000000;
font-size: x-small;
font-weight: normal;
text-align: left;
height: auto;
line-height: 1em;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
border-bottom: none;
border-left: none;
width: 13.9em;
padding: 5px .5em;
}
These flyout links are at inline level. Fx Dom Inspector (Computed
Style) says they keep on being inline.
If you remove the .utilmenu class from the upper selector, the
display:block take effect on the flyout links, too. When at block level,
the width and height will apply to the flyout links.
Haven't tested it, but display:block seems to work.
Ingo
--
http://www.satzansatz.de/css.html
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/