gerard
Newbie
Posts: 1
Registered: 12/18/2005
Member Is Offline |
| posted on 12/18/2005 at 02:31 PM |
|
|
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
|
|
|
Bowfonz
Newbie
Posts: 1
Registered: 1/28/2006
Member Is Offline |
| posted on 1/28/2006 at 05:48 PM |
|
|
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
|
|
|
tigra
Administrator
Posts: 1926
Registered: 6/17/2002
Location: US, CO
Member Is Offline |
| posted on 2/8/2006 at 04:47 PM |
|
|
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.
|
|
|
massimo
Junior Member
Posts: 2
Registered: 2/13/2006
Location: Sweden
Member Is Offline |
| posted on 2/13/2006 at 09:52 PM |
|
|
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
|
|
|
tigra
Administrator
Posts: 1926
Registered: 6/17/2002
Location: US, CO
Member Is Offline |
| posted on 2/14/2006 at 08:37 PM |
|
|
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;
}
|
|
|
|
nalanthi
Junior Member
Posts: 3
Registered: 2/14/2006
Member Is Offline |
| posted on 2/14/2006 at 09:12 PM |
|
|
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.
|
|
|
massimo
Junior Member
Posts: 2
Registered: 2/13/2006
Location: Sweden
Member Is Offline |
| posted on 2/14/2006 at 10:04 PM |
|
|
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...
|
|
|
nalanthi
Junior Member
Posts: 3
Registered: 2/14/2006
Member Is Offline |
| posted on 2/15/2006 at 02:36 PM |
|
|
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.
|
|
|
tigra
Administrator
Posts: 1926
Registered: 6/17/2002
Location: US, CO
Member Is Offline |
| posted on 2/15/2006 at 03:42 PM |
|
|
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.
|
|
|
nalanthi
Junior Member
Posts: 3
Registered: 2/14/2006
Member Is Offline |
| posted on 2/15/2006 at 04:25 PM |
|
|
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?
|
|
|
tigra
Administrator
Posts: 1926
Registered: 6/17/2002
Location: US, CO
Member Is Offline |
| posted on 2/16/2006 at 02:51 AM |
|
|
You can also use background image with the border drawn in it.
|
|
|
|
Tigra Menu
Live Demos:
Free Download
Menu Builders
Documentation:
Support Forum