Gahhh!! CSS is just frustrating the hell out of me!

[wienerdog]

I am trying to get a section of text to be colored white with an orange background and 6 px of surrounding orange background. I had relative positioning originally, and it worked in IE but not Firefox. I changed it to absolute, and now it works in neither. Anyone know this stuff well-enough to take a quick look and lend a hand?

Here's my CSS that controls it:

.orange_background {
position: absolute;
color: #FFFFFF;
background-color: #FF6600;
text-align: left;
padding: 6px 6px 6px 6px;
width: 160px;
font-weight: bold;
}

Here's a snippet of my HTML:

<div id="leadership">
<div class="orange_background">Team</div>

<p>
<a href="about_leadership.html">Rob Rush</a><br />
President &amp; CEO <br />
<br />
<a href="about_leadership_lashner.html">Stan Lashner</a><br />
Chief Operating Officer <br />
<br />
<a href="about_leadership_rubin.html">Paul Rubin</a><br />
Chief Financial Officer <br />
<br />
<a href="about_leadership_roberto.html">John Roberto</a><br />
Executive Vice President – <br />
Quality Assurance Group<br />
<br />
<a href="about_leadership_bell.html">Bush Bell</a><br />
Vice President – <br />
Consulting Services Group<br />
<br />
<a href="about_leadership_bille.html">Constance
Bill&eacute;, M.Ed.</a><br />
Director of Organizational Development & Training <br />
<br />
<a href="about_leadership_conen.html">Zachary Conen</a><br />
Director of Marketing <br />
<br />
<a href="about_leadership_fisch.html">Ted Fisch</a><br />
Director of Business Development <br />
<br />
<a href="about_leadership_lyons.html">Bob Lyons</a><br />
Director of CEM <br />
Strategy Consulting<br />
<br />
<a href="about_leadership_lusch.html">Robert L&uuml;sch</a><br />
Director of Information Technology <br />
<br />
<a href="about_leadership_mcdade.html">Sean McDade,
Ph. D.</a><br />
Director of Research <br />
<br />
<a href="about_leadership_peel.html">Nancy Peel</a><br />
Director of Standards Development and Content Management </p></div>
</div>

[morea]

kick it. :D

[wienerdog]

This is why I'm not a web designer. I need so much more experience with CSS to even grasp what's happening half the time.

[EC]

what is your problem, exactly wienerdog? you're just doing a subtitle, right? I wouldn't think you need position it. Absolute positioning will take this element out of the normal flow, it doesn't "know" anything else is on the page.

Not sure what "leadership" is doing it's not very descriptive, but if you wish to post your full code that might help.

Also, if it were me, I'd use an Hx class for this. i.e. <h2 class="orange_background">Team</h2>

[wienerdog]

Thanks, EC. I think that was it! You're right, why did I even have positioning on there? It is supposed to be a header that will remain where I want it because it's already in a <div> tag that is used as a container.

However, why does IE put some space after a </div> and before a <p> but Firefox doesn't. Here's what I'm talking about:

check out my company website (I don't want to put a direct link because I'd like to prevent SE from finding this page)

LRAworldwide.com/about_leadership_test.html

[morea]

wienerdog, today is tiara day! You need a tiara!

[wienerdog]

Do men wear tiaras?

[morea]

GDF men do. Check it out! ;)

http://www.graphicdesignforum.com/forum/showthread.php?t=16567

[G-Man79]

Dude...just do it. She's got the hose at the ready...

[chris_bcn]

the best thing to do in my humble opinion (anyone care to elp start a campaign to rid forums of crappy acronyms like AFAIK, IMHO, TBH etc.? No? Just me. Oh, ok, I'll get me coat) is sto start each stylesheet with

*{
margin:0;
pading:0;
}

This will remove all the spacing on every element.

you then add it to the relevant tags:

e.g.
p,h2,a{
margin:8px
}

etc. That way it will look basically the same in all browsers. Seems a bit hassly but is much faster in the longrun

[wienerdog]

When I added the hack, it screwed up my <li>'s and removed the spacing between lots of other lines of text.

It looks like without the hack, IE is putting too much space under “Section Navigation” and the right amount above “Team.” However, Firefox is putting too much space above “Section Navigation” and no space above “Team”, shoving it right under the navigation.

[chris_bcn]

it's not a hack!!!!

It removes all the default padding and margins. As IE and firefox have different defaults this is the way to ensure consistency across those browsers.

Post up the code and CSS and I'll have a look at it if you like

[EC]

my prototype starts like this:

/* Remove padding and margin universally */
* {
margin: 0;
padding: 0;
}

/* Put margins back on certain elements */
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, fieldset, table, ul {
margin: 1em 0;
}


Yes you do have to put the margins back in to the individual elements after you universally remove them.

[EC]

^actually that's from CSS Mastery, not my *own* invention. ;)

[chris_bcn]

That has been officially put into my stylesheet template

Cheers EC

[EC]

most welcome. :)

[morea]

Dude...just do it. She's got the hose at the ready...

lmao!

[flutterby nut]

^actually that's from CSS Mastery, not my *own* invention. ;)

author for CSS Mastery please?...is this a good source for examples of css templates as well?...thanks!

[EC]

author for CSS Mastery please?...is this a good source for examples of css templates as well?...thanks!

Andy Budd. http://www.amazon.com/gp/product/1590596145/104-1492470-5838334?v=glance&n=283155

Not a source for templates, but more advanced techniques and concepts for people that know the basics but want to stretch a bit. There are downloads that come with the book though (above link) which is cool. :)

[flutterby nut]

got it...thanks EC!