Support Forum Softcomplex logo
About Us  | Services  | Download  | Order  | Support  | |
| Search | Today's Posts | Stats | Board Rules | Not logged in [ Login | Register ]
go to bottom
Last active: Never

Printable Version | Subscribe | Add to Favourites   Post new thread
Author: Subject: Firefox problems
gerard
Newbie

Posts: 1
Registered: 12/18/2005
Member Is Offline
posted on 12/18/2005 at 02:31 PM Reply With Quote
Firefox problems


When my menu is perfect in ie, in firefox and safari the position is ok but the height of the menu item is twice as heigh. Also the text is not exactly centered.

What do i wrong
View User's Profile View All Posts By User U2U Member
Bowfonz
Newbie

Posts: 1
Registered: 1/28/2006
Member Is Offline
posted on 1/28/2006 at 05:48 PM Reply With Quote

Same here. Perfect in IE, but in Firefox/Netscape the horizontal menu has a huge gap above it, menu height is much greater and text is not centered in cells.

I'm aware that different browsers render CSS differently. And even though I'll never understand why 30px isn't 30px everywhere, I'm just wondering what we can do about it?

Thanks
View User's Profile View All Posts By User U2U Member
tigra
Administrator

Posts: 2049
Registered: 6/17/2002
Location: US, CO
Member Is Offline
posted on 2/8/2006 at 04:47 PM Reply With Quote

The size of the item may differ from your setting if it is expanded by its contents.

We have two nested tags (each can have margin and padding on both sides) and also the text inside, so:

margin_outer *2 + padding_outer *2 + margin_inner *2 + padding_inner * 2 + text_size <= item_size

otherwise you may experience unexpected results. Also there may be differences in the CSS treatment in different browsers. In the distribution package we've provided the menu configurations that work in both IE an FF so just follow the sample.
View User's Profile View All Posts By User U2U Member
massimo
Junior Member

Posts: 2
Registered: 2/13/2006
Location: Sweden
Member Is Offline
posted on 2/13/2006 at 09:52 PM Reply With Quote

Same here. I'm using the menu as horisontal and the "main menu" has the height twice as in the submenus. Also, the last submenu link is also twice as high as the others. No problems in IE!

I'm using the compressed version of menu.js so I have no idea of what to modify in your post tigra.

(// Version: 2.0 (size optimized version)
// Date: 04-05-2003 (mm-dd-yyyy)

Please help, this is really annoying.
Thanks Dennis
View User's Profile View All Posts By User U2U Member
tigra
Administrator

Posts: 2049
Registered: 6/17/2002
Location: US, CO
Member Is Offline
posted on 2/14/2006 at 08:37 PM Reply With Quote

Ok, as mentioned above the problem is caused by the difference in the ways browsers interprete the CSS. Here is some settings that we found both IE and FF like the same.

In menu.css you have padding set for the box properties (say 4px). Make that 0px and add margin property to the class with text style and set it to the value you had in the padding. Example:

was:

Code:

/* grayscale - all levels; text properties for states: normal, hover, click */
.TM0i0 {
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;;
color: #000000;
font-size: 12px;
font-weight: normal;
font-style: normal;
text-decoration: none;
}

/* grayscale - all levels; box properties for states: normal */
.TM0o0 {
background: #FFFFFF;
border: 1px solid #606060;
padding: 4px;
text-align: left;
vertical-align: middle;
text-decoration: none;
}

/* grayscale - all levels; box properties for states: hover, click */
.TM0o1 {
background: #C0C0C0;
border: 1px solid #606060;
padding: 4px;
text-align: left;
vertical-align: middle;
text-decoration: none;
}


fixed:

Code:

/* grayscale - all levels; text properties for states: normal, hover, click */
.TM0i0 {
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;;
color: #000000;
font-size: 12px;
font-weight: normal;
font-style: normal;
text-decoration: none;
margin: 4px;
}

/* grayscale - all levels; box properties for states: normal */
.TM0o0 {
background: #FFFFFF;
border: 1px solid #606060;
padding: 0px;
text-align: left;
vertical-align: middle;
text-decoration: none;
}

/* grayscale - all levels; box properties for states: hover, click */
.TM0o1 {
background: #C0C0C0;
border: 1px solid #606060;
padding: 0px;
text-align: left;
vertical-align: middle;
text-decoration: none;
}

View User's Profile View All Posts By User U2U Member
nalanthi
Junior Member

Posts: 3
Registered: 2/14/2006
Member Is Offline
posted on 2/14/2006 at 09:12 PM Reply With Quote
almost there


that made mine look a whole lot better. oddly enough though, it's still like 2 pixels off... i suppose i'll play around with it for a bit.
View User's Profile View All Posts By User U2U Member
massimo
Junior Member

Posts: 2
Registered: 2/13/2006
Location: Sweden
Member Is Offline
posted on 2/14/2006 at 10:04 PM Reply With Quote

As nalanthi said "almost there". But it look a lot nicer now. Thanks, unless someone does'nt come up with anything else, I'm satisfied. Now, one has to know the effect to see it, unless you look hard. But those last pixles on the lowermost menu is *abit* annoying still...
View User's Profile View All Posts By User U2U Member
nalanthi
Junior Member

Posts: 3
Registered: 2/14/2006
Member Is Offline
posted on 2/15/2006 at 02:36 PM Reply With Quote

is there a difference in FF and IE pixels? i think i've read that somewhere before. to make mine look good in both browsers i had to shrink it down by 2 pixels. now it fits just right in FF but is 2 pixels too small in IE. fortunately the 2 pixels in IE is barely noticeable on my site.
View User's Profile View All Posts By User U2U Member
tigra
Administrator

Posts: 2049
Registered: 6/17/2002
Location: US, CO
Member Is Offline
posted on 2/15/2006 at 03:42 PM Reply With Quote

The problem is most likely in the way browsers apply the border. Some browsers put the border around area with the specified size others inside that area.
View User's Profile View All Posts By User U2U Member
nalanthi
Junior Member

Posts: 3
Registered: 2/14/2006
Member Is Offline
posted on 2/15/2006 at 04:25 PM Reply With Quote

i can see that it's the border now. there is clearly a difference in the way the border looks in IE and FF. in my experience the best way to get around a border problem is to create your own border. so instead of applying a border attribute in css, you could use a 3x3 table where the outer rows/colums are 1 pixel in hieght/width and a different bg color. would this work for all browsers? is there a better way? what about a div rested inside of another div that has a 1px margin?
View User's Profile View All Posts By User U2U Member
tigra
Administrator

Posts: 2049
Registered: 6/17/2002
Location: US, CO
Member Is Offline
posted on 2/16/2006 at 02:51 AM Reply With Quote

You can also use background image with the border drawn in it.
View User's Profile View All Posts By User U2U Member
Post new thread

Related Links:
Product Page Tigra Menu
Product Demonstrations Live Demos:
Traditional Blue
White Steps
Inner HTML
All Together
Frames Targeting
Free Download Free Download
Free Download Menu Builders
Online Builder
Builder for Windows
Product Documentation Documentation:
Documenation Page
Change Log
Menus Comparison Table
Support Forum Support Forum
 

Go To Top


Powered by XMB 1.9.1 Nexus
Developed By Aventure Media & The XMB Group © 2002-2004