8 replies [Last post]
elex
Offline
Regular
Last seen: 14 years 4 weeks ago
Joined: 2005-07-19
Posts: 38
Points: 0

Hi all..

Someone said to that I could use the following trick to figure out some padding / margin differences between FF and IE...

* {padding:0; margin:0;}

Well, I had some problems in my site that some tableheads wich contain a background graphic had different heights in FF than in IE (or the other way around)...

So, I put the trick in the top of me style sheet... When it's there... the site looks the same in both browsers! But I still don't really know where to look for the errors!

Does it mean that when I put the "trick" in the style sheet that it takes 'away' ALL margins and paddings ? So that would be the same as me DELETING all padding and margin definitions ?

Could anyone explain to me how I can repair my style sheet through this trick ?

Thanks in advance...oh and sorry if this is a dumb question, but I am relatively new to CSS..

Elex

DanA
DanA's picture
Offline
Elder
Last seen: 9 years 14 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

* {padding:0; margin:0;} trick explanation needed!

If this line is the first, it should take away margin and padding definitions but you can define any margin or padding in any rule following * {padding:0; margin:0;}

* {padding:0; margin:0;}
p.m10p5 {margin:10px; padding:5px;}
 

will set margin and padding to p class="m10p5"

Stuart
Stuart's picture
Offline
Enthusiast
UK
Last seen: 15 years 25 weeks ago
UK
Joined: 2004-02-27
Posts: 107
Points: 0

* {padding:0; margin:0;} trick explanation needed!

It's not really a trick, it simply gets browsers with different rules within their default stylesheets to 'play by the same rules' (no pun intended! Laughing out loud )

What's a default stylesheet? Well, if you create a web page without a stylesheet, the layout of the elements (spacing) is setup by the web browser's default stylesheet. Adding * {margin:0;padding:0} negates these values (add this to a webpage without a stylesheet and see what happens)

Where are these 'default stylesheets'? IE6's is well hidden, and I'm not sure where Opera's is either (although a quick Google may help you out on both those counts), but Firefox's, named html.css is located at 'Program Files\Mozilla Firefox\res' on WinXP.

Why do this? As stated above, different browsers sometimes have different declarations for specific elements (a typical example is the <ul> element: Firefox defines the default spacing using padding, and IE6 uses margin - set up a page and remove padding, then margins, then both, and check the resulting pages in Firefox and IE6)

Hope that helps!

Stuart

elex
Offline
Regular
Last seen: 14 years 4 weeks ago
Joined: 2005-07-19
Posts: 38
Points: 0

* {padding:0; margin:0;} trick explanation needed!

So if I understand this correctly, it's a good idea to ALWAYS start a stylesheet with this rule ?

So, I could actually leave that thing in, and start adding paddings and margins as needed ? The only thing that happened is that the default rules are no longer in effect.

So this rule actually does NOT clear all the padding and margin definitions of MY stylesheet, but only the padding and margin definitions of the DEFAULT browser stylesheet ? Thus giving a clean beginning.

Do I get all this right ? If yes, why is it not written in all the stylesheet books to do this ? :roll: because it sure helps.

B.T.W. When having this rule in my stylesheet, I cannot center a table in well... the center with ALIGN="CENTER" in FireFox... it works well in IE... also auto margins on the left and right wont work ! How do I get my table in the center ?!

Elex

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

* {padding:0; margin:0;} trick explanation needed!

If you do this:

.steve {padding: 10px;}

* {padding: 0;}

it will remove the padding of .steve

If you do this:

* {padding: 0;}

.steve {padding: 10px;}

It will zero all padding, then apply 10px to anything with a class of steve.

Verschwindende wrote:
  • CSS doesn't make pies

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 39 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9742
Points: 3821

* {padding:0; margin:0;} trick explanation needed!

Quote:
Do I get all this right ? If yes, why is it not written in all the stylesheet books to do this ? Rolling Eyes because it sure helps.

This is an option, but not necessarily a Good Thing. There are differences of opinion with equally respected gurus falling on opposite sides of the issue. Some prefer to zero everything and explicitly set all margins. Others prefer to start with the defaults and override as desired. I mostly fall on the defaults side, myself. You should make yourself aware of browser differences, but most aren't worrisome.

Ye pays yer money and ye takes yer cherce.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 6 years 47 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

* {padding:0; margin:0;} trick explanation needed!

tph, that isn't quite right. .steve has a greater specificity and should win no matter where you place the universal selector rule. iirc, the universal selector has no specificity so any other rule in your style sheet will override it.

imho, putting the universal selector rule at the top (along with any other single html element rules) makes reading the style sheet much easier.

elex, many elements have useful margin values - semantic block elements tend to have 1em top and bottom margins. That accounts for the blank line which you normally get between two block elements. If you completely zero margins, remember you will probably have to add it back in lots of places.

Stuart
Stuart's picture
Offline
Enthusiast
UK
Last seen: 15 years 25 weeks ago
UK
Joined: 2004-02-27
Posts: 107
Points: 0

* {padding:0; margin:0;} trick explanation needed!

...BUT, if you DO zero the elements first, at least you know where you stand (and, that browser rendering discrepancies may be down to your stylesheet rather than a confusion over default settings Smile

Stuart
Stuart's picture
Offline
Enthusiast
UK
Last seen: 15 years 25 weeks ago
UK
Joined: 2004-02-27
Posts: 107
Points: 0

* {padding:0; margin:0;} trick explanation needed!

elex wrote:
B.T.W. When having this rule in my stylesheet, I cannot center a table in well... the center with ALIGN="CENTER" in FireFox... it works well in IE... also auto margins on the left and right wont work ! How do I get my table in the center ?!

Don't use the align attribute - do it with CSS. Eg:

HTML:
<div>
<table>
<tr>
 <td>blah blah blah</td>
 <td>blah blah blah</td>
</tr>
<tr>
 <td>blah blah blah</td>
 <td>blah blah blah</td>
</tr>
<tr>
 <td>blah blah blah</td>
 <td>blah blah blah</td>
</tr>
</table>
</div>

CSS:

* {margin:0;padding:0;}
div { width: 80%; margin: 0 auto;background-color:red; }
table { width: 80%;border:1px solid #000; margin: 0 auto;}

(the red background colour is there just to highlight the <div> - you can of course leave the extra <div> out!)