Padding and combo declarations

2 part question (more bang for the buck)

[pcguru333]

OKee Dokee

Question 1:

Padding is set to 4px and Netscape seems to have double the padding that IE does. Why is this and how do you all compensate for this discrepancy?

Question 2:

Combo declarations such as {font:1em bold italic;} aren't always working. I may be missing something that I am doing wrong but sometimes my combos aren't working. I am checking several online references. I ended up breaking up my combos and declaring them all separately. Have anyof you run across this problem?

Bonus question:

Is it 'good' CSS to use multiple classes on one element. Ex: <p class="classA classB"> I know it works, but is it supposed to?

Also it noticed thsi doesn't work for id's. Anyone read how this syntax is supposed to work?

[edited by: pcguru333 at 3:16 pm (utc) on Aug. 8, 2002]

[Robber]

Hi pc,

I know Netscape can be a little picky with things like padding and margins so it can need a bit fine tuning t get the right result. With regard to your combos, just a guess but perhaps you have some conflicting styles around.

I would think one class should be used, using more than one wouldnt seem quite right to me, but perhaps thats just me!

Cheers

[moonbiter]

The CSS 1 Recommendation [w3.org] says "no way!" but the CSS 2 Recommendation [w3.org] says "okay, if you really want to. ..."

[edited by: moonbiter at 3:18 pm (utc) on Aug. 8, 2002]

[pcguru333]

OK I do have different styles but they are supposed to CASCADE and when I actually change from {font:1em bold italic;} to {font-size:1em;font-weight: bold;font-style: italic;} it works.

what up?

[moonbiter]

Also see the HTML 4 Recommendation [w3.org] on the issue.

So. Multiple classes are legal, but only CSS 2 supports them. No doubt that means that browser support will be spotty too.

[pcguru333]

Thanks moonbiter.

Does anyone know how to treak the CSS so that my padding looks the same in IE and Netscape?

[martinibuster]

Nobody's mentioned it yet so I will: It's generally recommended that you use pixels for font sizes as the ems can be less accurate.

I wonder if the em sizing might also be affecting your padding issues... Stranger things have happened.

[pcguru333]

Not the issue, I was citing an example and in my actual code I was using px. I have only had problems with combining font styles. Other styles are combined just fine. The code for the font (that works) is as follows:

.important
{
font-face:arial;
font-style:italic;
font-weight:900;
font-size:20px;
text-align:center;
align:center;
}

I tried to use {font: arial italic 900 20px;} but it didn't work, in fact no styles were applied at all (not even body styles).

Regarding the padding... The actual code I am using is below:

#leftbar
{
position:absolute;
background-color:#048;
left:5px;
top:100px;
width:150px;
height:80%;
padding:8px;
}

Thanks all

[ergophobe]

It's generally recommended that you use pixels for font sizes

That depends... to quote tedster

Important on-going conversations, and there doesn't seem to be a consensus

That quote is in the thread on <font> sizes [webmasterworld.com]

which is continued in the
General survey on font sizes [webmasterworld.com]

But you might want to start with this thread:
Font Sizes: em vs. px vs % vs ? [webmasterworld.com]

Also see the threads on
Cross-browser font sizes [webmasterworld.com]

Tom

[pcguru333]

My divs in IE work like this (the padding is applied to the 'z' section

xxxxxxxxyyyyyyyyyyyyyyyyyyyyyy
xxxxxxxxyyyyyyyyyyyyyyyyyyyyyy
xxxxxxxxyyyyyyyyyyyyyyyyyyyyyy
xxxxxxxxyyyyyyyyyyyyyyyyyyyyyy
zzzzzzzzaaaaaaaaaaaaaaaaaaaaaa
zzzzzzzzaaaaaaaaaaaaaaaaaaaaaa
zzzzzzzzaaaaaaaaaaaaaaaaaaaaaa
zzzzzzzzaaaaaaaaaaaaaaaaaaaaaa

In Netscape it looks like this:

xxxxxxxxyyyyyyyyyyyyyyyyyyyyyy
xxxxxxxxyyyyyyyyyyyyyyyyyyyyyy
xxxxxxxxyyyyyyyyyyyyyyyyyyyyyy
xxxxxxxxyyyyyyyyyyyyyyyyyyyyyy
zzzzzzzzzzzaaaaaaaaaaaaaaaaaaa
zzzzzzzzzzzaaaaaaaaaaaaaaaaaaa
zzzzzzzzzzzaaaaaaaaaaaaaaaaaaa
zzzzzzzzzzzaaaaaaaaaaaaaaaaaaa

Sections 'x' and 'z' have set widths in px. ssections 'y' and 'a' are fluid with widths set in %.

[edited by: pcguru333 at 6:34 pm (utc) on Aug. 8, 2002]

[mivox]

Does anyone know how to treak the CSS so that my padding looks the same in IE and Netscape?

When you get into padding, you've entered the evil "box-model" zone. It seems no two browser really agree on how to display it. Technically, "padding" is supposed to create extra room inside the specified area... to separate text from <div> edges, for instance, and "margins" are supposed to add extra room outside the specified area... to leave space between neighboring <divs> for instance.

Roughly, CSS padding is equivalent to table cell padding, while margins are equivalent to cell spacing... or that's the way it's supposed to work. NN4 doesn't handle it properly, so you end up with extra space.

The only work around I've found is to write one style sheet to display correctly in NN4 (either an internal style sheet, or <link rel> attached .css file.), and then call in a second 'proper' style sheet via @import for IE, Opera, NN6, etc:

<style type="text/css" media="all">@import "extra.css";</style>

NN4 doesn't follow the @import link, so it never sees the second set of rules, while all the other browsers give the second set priority because of the 'cascade' effect.

[pcguru333]

Thanks mivox that is a great tip. My problem is that the 'evil box model' is happening in NN6.2. So the @import tweak won't help.

I guess I will have to use gif spacers, that chaps my hide, my page weight is so low right now and I don't want to add unneccessary images if CSS can do the job. I currently have 0 images on the page and I only planned on added a single logo image once I reduce its file size.

I am really enjoying my first 'all CSS-tableless page' but this cross-browser trash is disheartening.

[moonbiter]

font: arial italic 900 20px;

This doesn't work because your definition is out of order [w3.org] (of course, the syntax shorthand [w3.org] is a little confusing ...). This is the correct order:

font: italic 900 20px arial;

or

font: 900 italic 20px arial;

[mivox]

My problem is that the 'evil box model' is happening in NN6.2

Ouch. :( Hehe. I had a lovely 3 image, 0 tables, all css layout... and I ended up having to use a stupid 1px white gif for a div background, because NN4 won't handle background-color properly.

@import saved my rear on a bunch of other details that one... but I never did look at it in NN6.2. I only have NN6.1 & NN4.7 on my Mac.

Try a WebmasterWorld site search for 'box model' or give richinstyle.com's CSS bug tables a thorough going-over... there might be some key point to fix or work around it somehow.

My divs in IE work like this (the padding is applied to the 'z' section)

There's no way to tweak the layout so you can apply padding to the 'x' section as well?

[pcguru333]

I will remember the shorthand order for fonts

mivox I was able to tweak my 'padding' issue. I have a 2nd div inside the padded section so I removed the padding from the outside div and added a margin to the inside div and this gave the desired effect and IE and NS are playing nice again.

Thanks again all

[pcguru333]

Just a final note:

Thanks to this thread and your help I noticed some code that was wrong and I corrected it. Now my XHTML and my CSS both validated! WOOOHOOO!

I am a happy camper!