CSS IE Anchor Box Model

rpanning

Not a PHP question but just anoying the hack out of me. Though I'd post it here, someone must know this.

I've setup a list with anchors (links) and took the indent away from the list. So, the anchors do the indenting. However, IE is having troubles. Take a look at the example I setup. Look at it in IE, now in FireFox. Notice the diff?

There is a space after every <li> or <a>. I've found when I style the <a> to width:100% it fixes this but then pushes the box out of the right side. That must be because of the box model.

So, if you have an idea please let me know. Thanks!

Weedpacket

Reopening and moving to Echo Lounge as agreed with original author.

Bumping while I'm about it 🙂

rpanning

Ok, I've found a workaround! Since this only happens in IE on Windows I used the underscore hack to specify a width for each anchor. So, in edition to my example, the CSS code now looks like.

#Navigation ul a {
    background-position: 3px .5em;
    padding-left: 12px;
    _width: 188px;
}
#Navigation ul ul a {
    background-position: 15px .5em;
    padding-left: 24px;
    _width: 176px;
}
#Navigation ul ul ul a {
    background-position: 27px .5em;
    padding-left: 36px;
    _width: 164px;
}
...

piersk

There is another workaround too...

Have a look at goldbug's posts here

rpanning

I've seen that hack before but never knew how it worked exactly. I've never needed a hack before until now. LOL Thanks for the suggestion piersk.

goldbug

Another thing you can do to avoid goofy differences in browser padding/margins:

*
{
  margin: 0;
  padding: 0;
}

...at the very beginning of your style definitions. This way, you don't have to worry about different browsers having different padding/margin defaults--pretty much every browser will respect this and set padding and margins to zero for every element. All you do next is specify your own padding/margins where you want.

piersk

why would you use *? why not html or body?

goldbug

Originally posted by piersk
why would you use *? why not html or body?

Because the asterisk matches ANY element, not just html or body. It resets margin and padding on every element--if you used just html or body, it might not cascade down like you would expect it to.