Hello all,
I am currently re-working the code for my new website design and am
having problems with a dropdown (dropup?) menu in Safari.
The markup in question is here:
http://www.madewithpixels.co.uk/sandbox4
the css here:
http://www.madewithpixels.co.uk/sandbox4/includes/css/madewithpixels.css
The menu this question relates to can be found under the 'Or choose a
category' menu (the blue link at the bottom of the 'portfolio / featured
project' box, below the 3 images)
in PC/Firefox the menu displays correctly on mouse over, filling the box
above it. However in Safari, there is a small gap above the button,
which is a) unsightly, and b) causes the menu to stop functioning when
the user 'mouses off' the trigger button to reach the list entries.
I'm convinced that this problem stems from the fact that I am setting
font-sizes using:
body { font-size:62.5%; }
p {font-size:1em; }
Raising the percentage to 75% and setting the EM sizes accordingly fixes
the problem, but does not provide me with a reliable way to hack all the
other browsers back into submission. I have already tried the following:
body {
font-size:75%; /* for safari */
_font-size:62.5% /* for winMSIE */
}
p {
font-size:1.1em;
_font-size:1em;
}
But of course, my primary target browser of FireFox PC (and MAC)
understands the 75% declaration and raises the font-size accordingly.
This is incredibly frustrating, I've worked hard to make this tricky
design as semantically 'tight' as possible, this is the third iteration
of the code now, and I have managed to remove nearly 300 lines of CSS
since the last build.
Aside from this menu issue, the design is 100% cross browser compatible,
even down to MAC IE 5.2 and I dont want to compromise by taking the menu
out, or resorting to server side browser sniffing.
Can anyone shed any light on this for me? I've been tweaking code for
hours now, and am getting nowhere.
Is it purely down to Safaris default font-size being lower than the
normal (hmmm) 16px?
I am not aware of any CSS hacks that can specifically target safari /
firefox and therefore can see no way around this.
I should also say that I dont intend to implement any javascript hacks
to make the dropdown functionality work in MSIE (pc or mac) the menu is
purely repetitous of the navigation that will appear in the left hand
coloumn of the portfolio section itself.
Thanks very much in advance,
Mike
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
