Pixel perfect position in all browsers for icon (Ha Ha)

[grovesk]

Hi

I’ve got alogin box that I’m working on (See Link

The small padlock icon to the right of MY ACCOUNT needs to be very close to the T. I’ve been playing with this for a bit now. I can get it to be 100% perfect in IE, FF and Chrome, but in Safari the icon is behind the T. If it’s perfect in Safari, it’s too far to the right in all the other browsers.

Would love some pointers. Should the h1 tag and the icon be in their own divs?

The HTML for the H1 tag is:

 
My Account

The CSS for that tag is:

h1.myAccount {

width:auto;

background-image: url(../images/blue-padlock-icon.gif);

background-repeat: no-repeat;

background-position: 110px 2px;

display: block;

}

Thanks, Karen

[wolfcry911]

I’d float the the h1 (which will shrinkwrap it to the content size), add a bit of right padding (for the lock) and position the background image right center.

[noahgelman]

Floating would be pointless and only creates problems. Just switch it to display:inline-block.

EDIT (for clarification):

Use this CSS

h1.myAccount {

background: url(../images/blue-padlock-icon.gif) top right no-repeat;

display: inline-block;

padding-right:13px;

}

[wolfcry911]

pointless? I don’t think so. the only problem it causes is that the next element (.login-intro) needs a clear: left; – hardly a problem.

display: inline-block; will shrinkwrap the content in the same way the float did, but it also has a problem – it pushes the next element down a bit. Not to mention it was not fully supported in IE6, IE7, and FF up to 3.

[noahgelman]

Setting the h1 to display:inline-block works fine in IE6, 7 and FF3. If pushing the next element down is a problem, that can be solved by adjusting the margin or line-height on the H1.

[grovesk]

Hi guys – Thanks for the feedback.

I had tried float:left earlier and it did cause problems with the paragraph below on another page.

clear:left on the next element could work, however, this H1 appears in several places throughout the site, that would mean I’d have to apply clear:left to several elements.

The display: inline-block works everywhere but IE7 right now. (Padlock all the way to the right) but I can deal with that.

Thanks, Karen

[Fatbat]

I would just do something simple like this…

Header Goes Here

.icon {

vertical-align: middle;

margin: 0 0 0 8px;

}

Works exactly the same in every browser except IE7 where it shifts a few pixels up. I haven’t solved that but it could be fixed a number of ways.

[grovesk]

That could work in some cases, but this is going into a CMS so it’s better to have the icon only in the CSS. Otherwise, the end-user who’s editing the site (i.e. a non-web person) would need to know how to apply this each time they applied an H1. And that would be a big can of worms. :)

[Author]

Posts