Any idea how to get rid of the blue mark to the left of the logo on this page? If you zoom way in you can see a blue mark to the left of the logo. I tried: margin-left:-1000px; and text-decoration:none;
Thank you!
.logo, .logo a, .logo em {
margin:0;
width:456px;
height:170px;
position:relative;
display:block;
}
.logo em {
position:absolute;
left:0;
top:0;
margin-left:1px;
background:url(…/images2/logo.jpg) no-repeat 0 0;
}
#logo h1 {
margin-left:-1000px;
}
Thanks noonnope. Not sure I’m following you.
If I remove the margin-left:1px from the em and add a padding-left:1px to h1, the blue goes away but then the left border is jagged.
.logo, .logo a, .logo em {
margin:0;
width:456px;
height:170px;
position:relative;
display:block;
text-decoration:none;
}
.logo em {
position:absolute;
left:0;
top:0;
background:url(…/images2/logo.jpg) no-repeat 0 0;
}
#logo h1 {
padding-left:1px;
}
Take the margin-left:1px from the em and put a padding-left:1px on h1.
Maybe try adding this rule instead:
#container .logo a {padding-left: 2px; width: 454px;}
By golly, that did it :-). Thanks Ralph!
So I have:
.logo, .logo a, .logo em {
margin:0;
width:456px;
height:170px;
position:relative;
display:block;
text-decoration:none;
}
.logo em {
position:absolute;
left:0;
top:0;
margin-left:1px;
background:url(…/images2/logo.jpg) no-repeat 0 0;
}
#logo h1 {
margin-left:-1000px;
padding-left:1px;
}
#container .logo a {padding-left: 2px; width: 454px;}
Great. Ideally the code would be a bit neater (as you have one rule which is then overridden), but it looks like this is a temporary page anyway. The trick was to move the anchor text to the right a little, as it was hanging out a bit.
Why didn’t you just put the margin-left on the h1.logo and remove all the other fixes?
h1.logo {
margin: 0 0 0 1px;
}
The main problem was that your main page background image has a 1px strip down the left side so just needed to move the inner content over by 1px (or edit the image and make the page wrapper size 1px smaller to match).
Thanks Ralph.
Paul, good eye about 1px on left!! For other fix, I think you mean the below but I can’t tell if it’s working. On regular view it still seems like 2 dots there but when I blow it up, don’t see it. Here I’ve uploaded it.
.logo, .logo a, .logo em {
margin:0;
width:456px;
height:170px;
position:relative;
display:block;
text-decoration:none;
}
.logo em {
position:absolute;
left:0;
top:0;
margin-left:1px;
background:url(../images2/logo.jpg) no-repeat 0 0;
}
h1.logo {
margin: 0 0 0 1px;
}
Actually, I think I can still see them just a bit when I magnify it.
I think the anchor text will hang out no matter where you put the H1, because of its size. That’s why I suggested padding on the <a> itself. The text is hanging out again.
Yeah, I just cut the extra 1px left border and blue is still showing. So, I added back your a rule:
.logo, .logo a, .logo em {
margin:0;
width:456px;
height:170px;
position:relative;
display:block;
text-decoration:none;
}
.logo em {
position:absolute;
left:0;
top:0;
margin-left:1px;
background:url(../images2/logo.jpg) no-repeat 0 0;
}
h1.logo {
margin: 0 0 0 1px;
}
#container .logo a {padding-left: 2px; width: 454px;}
Why are you still moving the em?
It should be like this:
.logo, .logo a, .logo em {
margin:0;
width:456px;
height:170px;
position:relative;
display:block;
text-decoration:none;
[B]overflow:hidden;[/B]
}
.logo em {
position:absolute;
left:0;
top:0;
[B]/*margin-left:1px;*/[/B]
background:url(../images2/logo.jpg) no-repeat 0 0;
}
h1.logo {
[B]margin: 0 0 0 1px;[/B]
}
To clarify:
.logo, .logo a, .logo em {
margin:0;
[B] width:456px;/* width of image*/[/B]
[B] height:170px;/* height of image*/[/B]
position:relative;
display:block;
text-decoration:none;
[B]overflow:hidden;/* needed in case user resizes text in browsers and text would creep out*/[/B]
}
.logo em {
position:absolute;
left:0;
top:0;[B]
/*margin-left:1px; no no no - that would put it in the wrong position and make it 1px bigger */[/B]
background:url(../images2/logo.jpg) no-repeat 0 0;
}
h1.logo {
[B]margin: 0 0 0 1px;/* move logo container away from the edge where you have your mismatched background image*/[/B]
}
/* not needed as text can't possible escape from the parent due to the overflow:hidden.
#container .logo a {padding-left: 2px; width: 454px;}
*/
Got it. That worked Paul. So you added overflow:hidden and a couple of other things.
I’m not familiar with commented out rules (/margin-left:1px;/). I see that a lot but how does it work if it’s commented out and when do you use?
lol - I just left it in to show you that it should be removed. Sometimes when I remove properties the OP doesn’t notice what’s been taken out only what’s been put in 
Sometimes during testing comments are useful for saving the original settings so you can revert them back if yo what you tried didn’t work. Once everything is working redundant or commented out properties should be removed.
You may be confusing this with the old ie5 mac double comment hack but we don’t need that any more
Thanks Paul. No, not familiar with old Mac5 double commenting. It was the commenting out. Thanks! I use comments, it’s just that I thought someone had mentioned that they actually work so so glad you clarified. Thank you!!