CSS positioning issues in Firefox
- Started
- Last post
- 19 Responses
- scrap_paper
Hey folks,
Can one of the CSS masterminds here kindly take a look at this site:
http://www.kausticdesign.com/itr…
http://www.kausticdesign.com/itr…
http://www.kausticdesign.com/itr…What I am finding is that in Firefox a strange space is added above the divs once I add paragraph tags within them. exotics.html has the page with text exoticstest.html is the page without content and also how the backgrounds should work.
Any ideas?
- brains0
beware of how browsers interpret <p> tags, even when they've been defined in css.
- as 0 margin / 0 padding. If you just defined a div class seperately, I believe the problem would dissapear.brains
- but I could be wrong.brains
- So use the padding of the div to "shape" the paragraph that lives inside of it?
scrap_paper - or just define the paragraph style as a class like .bodyText or something. I didn't look too deeply into it.. maybe try it out.brains
- 7340
your problem may lie in the span in the p... if you change it to display:block; does this change anything? i'm guessing... i have no idea... i hate when this kinda of crap happens
also you can try using padding-top to even them out
- Yeah try taking out the <span> tags to troubleshoot. Put them back in later.nocomply
- Even without the <span> or <h1> tags the space still occursscrap_paper
- nocomply0
It may be the <h1> <h2> etc... in there throwing things off. Did you try it with just the <p> elements alone and also with just the <h1> elements alone?
Take things out 1 by 1 and see when it starts working again. That's how I usually troubleshoot these things.
- Gave that a try but the intro at the top doesn't contain a <h1> tag and its still addingi the weird space
scrap_paper
- Gave that a try but the intro at the top doesn't contain a <h1> tag and its still addingi the weird space
- autonoma0
I've gotten into the habit of including a CSS "Reset" file that essentially zeros out all browsers' default settings. Here's the one I've been using:
- scrap_paper0
Thanks a lot so far all. Much appreciated.
I stripped the <h1> and <span> out of the "intro" paragraph and I'm still getting that space. Tried to Reset stuff as well but its not dealing with the issue.
The problem seems to be the effect the <p> is having on its container div. Should I try to shape the paragraph with div padding or should I use margin/padding definitions of the <p> to shape it?
grumble....
- brains0
I'd stay away from the <p> tag? maybe create a class for the text with padding etc.. although ie may do some funny business with it.
- just try to achieve what you want with a .p instead of a <p> tag. firefox might be tagging some of its own goodies to the <p> tag regardless of what you've given it's attributes in css.brains
- <p> tag, regardless what you've defined in css.brains
- Sorry, excuse my ignorance. How do I accomplish that? Do I make a div for the paragraph and give it class properties?scrap_paper
- Is that what you mean witih .p?scrap_paper
- if you want semantic markup, leave in the <p> tag.dtan
- brains0
Does that make sense?
- scrap_paper0
Sorry, excuse my ignorance. How do I accomplish that? Do I make a div for the paragraph and give it class properties? Is that what you mean witih .p?
- You could try that out, I'm just looking at your source right now, and I'm seeing if I can find a solution.brains
- scrap_paper0
So:
<div class="container><div class="p">Paragraph content</div></div>
With all the padding/margins defined in .p?
- not semantic but worth a shot... the browsers still are such pains in the ass... even with standardization734
- brains0
yeah, I would give that a whirl.
- scrap_paper0
It worked!!
So FF has its own characteristics that it gives to <p> tags that you can't control using css? Well thats a huge pain.
You know, I totally see the point of trying to use standards compliant coding practices but holy crap have my headaches gotten so much bigger in the process. The whole damn thing seems to be hack upon hack without any clear logical underpinning. Am I wrong about this? Please tell me I am. It will make the regular project meltdowns a little easier to handle.
- oh yes completely wrong, dont worry.... [sigh didn't have the heart to tell him the truth]734
- LOLscrap_paper
- brains0
Good, I thought that would do it.
All in all every browser will interpret a <p> tag with certain default characteristics, same with <h1>, <h2> etc etc.
- dtan0
you should still be able to deal with <p> tags in FF just fine.
- scrap_paper0
I was able to use <p> tags in other projects without issue but this one just didn't like them.
Well, thanks for the help and tips to all. If I could buy you guys a pint I would.
- dtan0
where do you live scrap_paper? you could possibly buy me one heh
- brains0
Toronto right? FedEx overnight will work. I wouldn't mind a pint that way.
- scrap_paper0
Hah! Done.
- dtan0
ya any good local brews from up there?
- scrap_paper0
Not as many as the Upper North West. For all the jokes that people make about American beer being crappy you guys have a ton of really good microbrews.