Just a quick question for the css gurus

[Orracle]

Does anyone know of a standard CSS reset similar to Eric Meyer’s reset? I’ve been working on some stuff this morning, and realized that there may be a way to create a standardized reset margins and padding issues that pop up in earlier versions of IE. I’m not sure of where exactly the problem originates, but have used workarounds in the past. It would be great to have a standard reset so that only IE browsers would be reset and the browsing (and designing) world would be a better place.

Thoughts?

[PaulOB]

The Eric Meyer reset is a standard reset and sets all browsers to the same base settings. That’s what it was designed for. You don’t need to do anthing for IE as it is already covered.

In truth you don’t need a reset at all just set the margin and padding for every block element you use (apart from divs which have no margin/padding by default) and then it will be consistent between all browsers. It’s your job to make sure it’s consistent and for example if you use an h1 the set the margins and padding as required when you use it.

It couldn’t really be simpler (well I suppose it could if all browsers had the same defaults to start with but that is never going to happen).

[Luki_be]

@Paul_O_B

In truth you don’t need a reset at all just set the margin and padding for every block element you use (apart from divs which have no margin/padding by default) and then it will be consistent between all browsers. It’s your job to make sure it’s consistent and for example if you use an h1 the set the margins and padding as required when you use it.

It might not be needed but IMHO it’s always safe to have a small reset. Most of us don’t always think about the fact that there are real subtle inconsistencies. An example is the line-height: the default varies among browsers and when you don’t use a reset or think about it, it can have an effect on your lay out.

[PaulOB]

An example is the line-height: the default varies among browsers and when you don’t use a reset or think about it, it can have an effect on your lay out.

Yes but these are things you should set as you go. There’s no need to set them all once in a reset and then reset them individually again as happens with most resets.

Resets are good for beginners and bad for beginners at the same time. You even said it yourself:

Most of us don’t always think about the fact that there are real subtle inconsistencies.

The only way to conquer them is to control them yourself and understand them. Most users just cut and paste and never give a second thought to the rules within. It’s only when something goes wrong that they start asking questions.

There is a learning curve and I agree most of us start with a few defaults that we like but there’s no need to go overboard.

[Luki_be]

@Paul_O_B

Yes but these are things you should set as you go. There’s no need to set them all once in a reset and then reset them individually again as happens with most resets.

Resets are good for beginners and bad for beginners at the same time. You even said it yourself:

The only way to conquer them is to control them yourself and understand them. Most users just cut and paste and never give a second thought to the rules within. It’s only when something goes wrong that they start asking questions.

There is a learning curve and I agree most of us start with a few defaults that we like but there’s no need to go overboard.

Well, that’s the fact: not everybody sets line-height as they go or even set it at all. Having it at least consistent x-browser is a start.

For me, myself and i, a basic reset just helps me better understand and forces me to rethink the styling

But i can see your point. Except that it hurts being called a beginner

[PaulOB]

@Luki_be

Except that it hurts being called a beginner

I didn’t mean you lol

I’m not against resets and they do have their place but I just think that they are a little too bloated. I do admit to using them a lot at the start but gradually trimmed them down until I didn’t really need to to use them.

What I’m against is setting all h1,h2,p etc to zero margins and padding and then a few rules later redefining them again as you never want no margin between elements. Why not do it right just once?

[Luki_be]

@Paul_O_B

I didn’t mean you lol

I’m not against resets and they do have their place but I just think that they are a little too bloated. I do admit to using them a lot at the start but gradually trimmed them down until I didn’t really need to to use them.

What I’m against is setting all h1,h2,p etc to zero margins and padding and then a few rules later redefining them again as you never want no margin between elements. Why not do it right just once?

lol. I use it but it’s an extremely trimmed down version.

List-style-type : none; for lists and no border for img.

[Orracle]

thanks for the feedback - I thought that the Meyer reset would take care of any IE margin/padding bugs but I wasn’t sure. I usually set each one as I go through building my stylesheet, but I noticed that on my site that a small icon used to identify tags in a blog post renders correctly in all browsers except - you guessed it - IE 7. I don’t really test for IE 6 any more (I know that may not be best-practice, but I’ve only got so many hours in a day to work with).

And call me a beginner if you like, I’m not concerned I really like the fact that the reset levels the playing field. My site uses the Meyer reset, so I’m going to have to see what the problem is.

[RyanReese]

IE doesn’t have bugs just from just regular margins defaulted on elements (off the top of my head) except for when in haslayout mode margins don’t collapse…but that’s about it.

All bugs in IE (99%, there might be an exception) are caused by your own coding

If you give us a link, tell us which IE version is going wrong, and where, we will fix it in a jiffy for you :).

[markbrown4]

@RyanReese

All bugs in IE (99%, there might be an exception) are caused by your own coding

That’s a very misleading statement.

[RyanReese]

I mean they are actual IE bugs, but to trigger them you have to actually code it. Bugs just don’t randomly spurt out lol

[PaulOB]

but I noticed that on my site that a small icon used to identify tags in a blog post renders correctly in all browsers except - you guessed it - IE 7.

That’s likely to be a bug that would nit be cured by a reset anyway. It sounds as though it’s a vertical alignment and whitespace issue but we’d need to see the code. Images are inline elements and are placed on the baseline by default which leaves space underneath for descenders depending on the situation. Usually setting images to display:block, floating them or changing their vertical alignment can fix the problem.

The reset doesn’t address bugs but just browser defaults. Bugs still need to be addressed separately.

[Orracle]

It’s a Drupal 6 site -

This code -

<div class="terms">
      <ul class="links inline"><li class="taxonomy_term_18 first"><a href="/category/tags/blackberry" rel="tag" title="">Blackberry</a></li>
<li class="taxonomy_term_20"><a href="/category/tags/iphone" rel="tag" title="">iPhone</a></li>
<li class="taxonomy_term_19 last"><a href="/category/tags/web-browsing" rel="tag" title="">web browsing</a></li>

</ul>    
</div>

Is generated by this bit of php:

 
    <?php if ($terms): ?>
    <div class="terms">
      <?php print $terms; ?>
    </div>
    <?php endif;?>

The CSS in controlling the image is:

div.terms {
background-image: url(images/tag.png);
background-repeat:no-repeat;
padding:0 0 20px 20px;
font-size:85%;
}

I can link you to the live site if you’d like, I figured this might save anyone who cared to look some trouble.

[RyanReese]

It probably needs haslayout. You said only IE7 was the culprit, so try giving that CSS you just posted “min-height:0;”