/    Sign up×
Community /Pin to ProfileBookmark

Why is there a white space? Firefox only

Copy linkTweet thisAlerts:
Jul 21.2008

I cannot figure this out. Underneath my navigation placeholder image and above where the products start, there is a white space of around the height of one <br /> tag that I cannot get rid of. It only does this in FF, not IE7.

[url]http://www.oddityclothing.com/[/url]

Any ideas?

The website is integrated with WordPress and an e-commerce plugin which generates its own code. That code won’t validate, so there is no way for me to do that.

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@Jeff_MottJul 21.2008 — There's a bottom margin on #masthead, which is causing some of the space (line 24 of your CSS). And then there's a top margin on #rotating_image (line 26).
Copy linkTweet thisAlerts:
@fender967authorJul 21.2008 — Jeff,

You are right about the 15px margin on #rotating_image, but the shows up in both IE and FF. The padding of 20px on #masthead is on the left, not bottom though, so its not causing the rest. Whatever is causing the rest is somehow between <div id="content" class="page"> and <div id="content_inner_wide">.

If you look at it with Firebug in inspect mode, you can tell there is extra space in #content compared to #content_inner_wide, but it all shows up blue (normal space, rather than yellow for margins or purple for padding). In the source code there is [I]nothing[/I] in between these two divs..
Copy linkTweet thisAlerts:
@Jeff_MottJul 21.2008 — I was looking at the wrong space. I thought the "About", "Artists", "FAQ", and "Contact" was your placeholder nav, and I was looking at the space immediately below that.

In that case, the problem is that paragraphs may not have DIVs inside them. So where you have [font=courier]<p><div id='products_page_container'[/font] it's actually being interpreted as [font=courier]<p></p><div id='products_page_container'[/font]. And that empty paragraph is where your extra spacing is coming from.
Copy linkTweet thisAlerts:
@KorJul 21.2008 — There's a paragraph container
<i>
</i>.format_text p {
margin:0pt 0pt 1.53846em;
}

this might bring the spaces, at least the upper space. I see no utility of that p element and I think it's even illegal, but you may play with its margins and make them 0
Copy linkTweet thisAlerts:
@fender967authorJul 21.2008 — I think you're right. Only problem is, all that code is generated with either the wordpress theme or the shopping cart plugin and there are dozens of files for them.. Crap.
Copy linkTweet thisAlerts:
@fender967authorJul 21.2008 — Awesome! I changed the .format_text p margin to 0 and it works. Thanks a lot to both of you.
Copy linkTweet thisAlerts:
@KorJul 21.2008 — I think you're right. Only problem is, all that code is generated with either the wordpress theme or the shopping cart plugin and there are dozens of files for them.. Crap.[/QUOTE]
I know how you feel. I often work with Joomla templates, and I have frequent similar problems ?
×

Success!

Help @fender967 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.17,
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,
)...