Re: [css-d] floated image is offset in Firefox only; why?
On Nov 30, 2007, at 12:03 PM, Matt Jalbert wrote:
On this page:
http://www.sparklejet.com/clients/cale/livingroom/
the logo, which is in a float-left div, renders in Firefox (both Mac
and Windows) exactly 17 pixels below where it should be. That is, the
float seems to be in the right place in Firefox, but the image in the
float -- the GIF logo with a transparent background -- is offset 17
pixels down. I have made the background of the float red to emphasize
the offending offset (it looks terrible at the moment).
It renders fine in Safari, Explorer 6 and 7.
CSS is here:
http://www.sparklejet.com/clients/cale/_css/style.css
The issue is caused by the padding on the a. Removed it (or remove
it only for that particular image), and the issue disappears.
I'm not sure what is going on however; and that annoys me. On Fx 3
beta 1 and more recent nightly builds, the underlying issue also
causes the whole header to show a vertical scrollbar, where there
should be none.
maybe a better fix:
#headerLogo a {display:block;}
#headerNav {margin: 0 0 1px; }
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] floated image is offset in Firefox only; why?
On this page: http://www.sparklejet.com/clients/cale/livingroom/ the logo, which is in a float-left div, renders in Firefox (both Mac and Windows) exactly 17 pixels below where it should be. That is, the float seems to be in the right place in Firefox, but the image in the float -- the GIF logo with a transparent background -- is offset 17 pixels down. I have made the background of the float red to emphasize the offending offset (it looks terrible at the moment). It renders fine in Safari, Explorer 6 and 7. CSS is here: http://www.sparklejet.com/clients/cale/_css/style.css Any advice on how I can modify my coding of HTML/CSS to get the logo to eliminate the image offset in Firefox? What am I doing wrong? I have tried to keep my code as clean as I could, and I generally avoid overly-sophisticated hacks. Thank you in advance for any help. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] floated image is offset in Firefox only; why?
You have the logo image wrapped in an h1 tag. h1a href=/index.htmlimg src=../_img/page/logo-CaledoniaStudios.gif alt=Caledonia Studios -- making history one piece at a time... width=463 height=62 //a/h1 Try removing the h1 Jim On Nov 29, 2007 7:03 PM, Matt Jalbert [EMAIL PROTECTED] wrote: On this page: http://www.sparklejet.com/clients/cale/livingroom/ the logo, which is in a float-left div, renders in Firefox (both Mac and Windows) exactly 17 pixels below where it should be. That is, the float seems to be in the right place in Firefox, but the image in the float -- the GIF logo with a transparent background -- is offset 17 pixels down. I have made the background of the float red to emphasize the offending offset (it looks terrible at the moment). It renders fine in Safari, Explorer 6 and 7. CSS is here: http://www.sparklejet.com/clients/cale/_css/style.css Any advice on how I can modify my coding of HTML/CSS to get the logo to eliminate the image offset in Firefox? What am I doing wrong? I have tried to keep my code as clean as I could, and I generally avoid overly-sophisticated hacks. Thank you in advance for any help.http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
