Forums

Registration

Click here to register. Registration is required if you want to post to the forums.

If you register, we can also contact you with news on new module versions, and upgrades to new modules as we make them available. 

Use of your registration information is subject to our privacy policy.

Inventua Forums

Subject: Firefox ignores height in topmenu css
Prev Next
You are not authorized to post a reply.

Author Messages
Peter Walker
Posts:3

09 Jan 2008 9:04 PM  

Hello dear Inventua Users,

I am working on a DNN website at the moment and am using the inventua Topmenu and the Inventua Sidemenu for Navigation.

I managed to make the skin work as intended on the Internet explorer but the Topmenu keeps looking messed up in Firefox. It seems it completely ignores certain css styles.

Moreover Firefox does not include the spacer in between the menu items, even though Internet explorer does without problems.

I cannot give you the Link because the Website is to be kept private until release but maybe you can spot a mistake in the css styles or the skin code i pasted below.

Skin Code:


 
  
   
  
 

   

    
     
      
      
      
     
    
[INVTOPMENU]

   

   

The XML code for the Topmenu is:


     [INVTOPMENU]
     
 
         MenuBarCssClass
         TMenuBar
      

      
         MenuItemCssClass
         TMenuItem
      

      
         MenuHighlightCssClass
         TMenuHighlight
      

      
         CurrentItemCssClass
         TMenuCurrent
      

      
         UseName
         true
      

      
         Seperator
         <span class="tmenuspacer" width="6"></span>
      

     

   

And finally the CSS code for the Topmenu:

.tmenuspacer
{
 background-image: url(img/topmenu-spacer.png);
 background-repeat: no-repeat;
 height: 27px;
 width: 6px;
 vertical-align: middle;
}

.TMenuBar
{
 height: 27px;
 vertical-align: middle;
 color: #fff;
}

.TMenuItem
{
 background-image: url(img/topmenu-item.png);
 color: #fff;
 background-repeat: repeat-x;
 vertical-align: middle;
 height: 27px;
}

.Link
{
color: #fff;
height: 27px;
cursor: hand;
vertical-align:middle;
position: relative; 
top: 0px;
padding: 5px 5px 5px 5px;
}

.TMenuItem A, .TMenuItem A:Link .TMenuItem A:Hover,
.TMenuItem A:Active, .TMenuHighlight A, .TMenuHighlight A:Link, .TMenuHighlight A:Hover, .TMenuHighlight A:Active, .TMenuCurrent A, .TMenuCurrent A:Link, .TMenuCurrent A:Hover, .TMenuCurrent A:Active, .TMenuBar A, .TMenuBar A:Hover, .TMenuBar A:Link, .TMenuBar A:Active
{
 color: #fff;
}

.TMenuHighlight
{
 background-image: url(img/topmenu-hover.png);
 background-repeat: repeat-x;
 vertical-align: middle;
 height: 27px;
 color: #fff;
}

.TMenuCurrent
{
 background-image: url(img/topmenu-current.png);
 background-repeat: repeat-x;
 color: #fff;
 cursor: hand;
 height: 27px;
 padding: 5px 5px 5px 5px;
 position: relative; 
 top: 0px;
}

I found out there was a mysterious style called .Link which overwrote my styles for the Topmenu so i just added .Link to my css file and made my own settings for it.

As i said, everything works fine in IE, but Firefox cant display it correctly.

I would really appreciate it if you could help me out with this one since i have a deadline for the Page on January the 15th and this display bug in Firefox is the only issue i have left with the page.

Kind regards

 Peter Walker

Anthony Glenwright
Posts:11337

10 Jan 2008 9:13 AM  
.tmenuspacer refers to a span, which is an inline element. Heights and widths cannot be applied to inline elements (except in IE, which "breaks the rules"). Add display: block to your .tmenuspacer class.
Peter Walker
Posts:3

10 Jan 2008 11:00 PM  

Thank you very much for your answer, it helped me understand why things do not work.

display: block; messed up the menu totally.

I now changed the spacers xml value to

<img border="0" src="img/topmenu-spacer.png" width="6" height="27">

and the spacer shows as intended in Firefox as well as in IE.

This led me to the assumption that all height tags in my css are useless because they only work because of the IE breaking the standards. So i removed all of them.
The Menu Items do not have the correct height now, maybe i can make them have the correct size in some other way.

Basically i assumed skinning the topmenu would be very simple because all i need is:

A Horizontal Topmenu which has no background img in between Items but a spacerimg 6px wide.
a 1px wide background that is repeated as often as needed for the length of a single menuitem.

A different 1px wide background repeated-x for current items and hovered items.

All Items 27px high.

But i just cant get them to work in both browsers

Peter Walker
Posts:3

10 Jan 2008 11:32 PM  
And now i made them work.

i used the following css code:

.TMenuBar
{
color: #fff;
position: relative; top: 0px;

}
.TMenuItem
{
color: #fff;
}
.Link
{
background-image: url(img/topmenu-item.png);
background-repeat: repeat-x;
color: #fff;
padding: 8px 5px 8px 5px;
}

.TMenuItem A, .TMenuItem A:Link .TMenuItem A:Hover,
.TMenuItem A:Active, .TMenuHighlight A, .TMenuHighlight A:Link, .TMenuHighlight A:Hover, .TMenuHighlight A:Active, .TMenuCurrent A, .TMenuCurrent A:Link, .TMenuCurrent A:Hover, .TMenuCurrent A:Active, .TMenuBar A, .TMenuBar A:Hover, .TMenuBar A:Link, .TMenuBar A:Active
{
color: #fff;
position: relative; top: -8px;
}

.TMenuHighlight
{
background-image: url(img/topmenu-hover.png);
background-repeat: repeat-x;
color: #fff;
}
.TMenuCurrent
{
background-image: url(img/topmenu-current.png);
background-repeat: repeat-x;
color: #fff;
cursor: hand;
padding: 8px 5px 8px 5px;
}


So basically i adjusted the height with padding and then changed the position.
You are not authorized to post a reply.
Forums > Inventua Forums > DotNetNuke Modules/Components Support > Firefox ignores height in topmenu css



ActiveForums 3.7