/    Sign up×
Community /Pin to ProfileBookmark

Weird 5px Space On Top of Logo in FireFox & Chrome

Copy linkTweet thisAlerts:
Oct 28.2012

Hi All! The page is at [url]http://www.prairiefirewinery.com/index-new.html[/url] and the CSS at [url]http://www.prairiefirewinery.com/new.css[/url]. The problem is in FireFox & Chrome (it looks fine in IE) the lower part of the logo (the part that says ‘Prairie Fire Winery’ that’s in the white area) is pushed down by 5 px — so a thin white line separates it from the top part of the logo. I have gone over the css a tone of times and tried EVERYTHING I could think of to get rid of the 5px space (even adding a negative 5 px) and NOTHING works — it’s driving me NUTS!! Does anyone have any idea what the problem is?

TIA!!!

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@rtretheweyOct 28.2012 — I expect that its the difference in the default margin on the <img> tag that's differs between IE and the other browsers. Try:
<i>
</i>img { margin:0; }


If that fixes it, you should consider using Eric Myer's CSS Reset stylesheet. It clears the margin and padding on most tags and helps cross-browser compatibility. Good luck!
Copy linkTweet thisAlerts:
@rachellauthorOct 28.2012 — Thank you so much for trying! I added the 0 margin to the image and it didn't work. This is just the weirdest thing!
Copy linkTweet thisAlerts:
@kfaizanOct 28.2012 — Nice!!!
Copy linkTweet thisAlerts:
@cootheadOct 28.2012 — Hi there rachell,

The gap is not at the top of the "[i]logoBottom.gif[/i]", but, actually, at the bottom of the "[i]logoTop.gif[/i]". ?

It is caused by the default vertical alignment of inline elements.

One of a few possible cures, is to add this to your CSS...
[color=navy]
#navigation img {
display:block;
}[/color]

This site...
[list]
  • [*]http://gtwebdev.com/workshop/gaps/image-gap.php
    • [/list]
    ...may help to give you a better understanding of this very common problem. ?

    [i]coothead[/i]
    Copy linkTweet thisAlerts:
    @rachellauthorOct 29.2012 — My Hero!!!! I was so focused on the logo div it never occurred to me the problem could be coming from the navigation -- I can't thank you enough!!!
    Copy linkTweet thisAlerts:
    @cootheadOct 29.2012 — [indent]No problem, you're very welcome. ?[/indent]


    [i]coothead[/i]
    ×

    Success!

    Help @rachell spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.28,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...