SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Thread: Logo with em

  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Logo with em

    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;
    }
    Attached Images Attached Images

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Take the margin-left:1px from the em and put a padding-left:1px on h1.

  3. #3
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }
    Attached Images Attached Images

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Maybe try adding this rule instead:

    #container .logo a {padding-left: 2px; width: 454px;}

  5. #5
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;}

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    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.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,387
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Why didn't you just put the margin-left on the h1.logo and remove all the other fixes?
    Code:
    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).

  8. #8
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    .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.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    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.

  10. #10
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I just cut the extra 1px left border and blue is still showing. So, I added back your a rule:

    Code:
    .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;}

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,387
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Why are you still moving the em?

    It should be like this:

    Code:
    .logo, .logo a, .logo em {
        margin:0;
        width:456px;
        height:170px;
        position:relative;
        display:block;
        text-decoration:none;
    overflow:hidden;
    }
    .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;
    }

    To clarify:


    Code:
    .logo, .logo a, .logo em {
        margin:0;
        width:456px;/* width of image*/
        height:170px;/* height of image*/
        position:relative;
        display:block;
        text-decoration:none;
    overflow:hidden;/* needed in case user resizes text in browsers and text would creep out*/
    }

    Code:
    .logo em {
    	position:absolute;
    	left:0;
    	top:0;
    	/*margin-left:1px; no no no - that would put it in the wrong position and make it 1px bigger */
    	background:url(../images2/logo.jpg) no-repeat 0 0;
    }
    h1.logo {
     	margin: 0 0 0 1px;/* move logo container away from the edge where you have your mismatched background image*/
    }
    /* not needed as text can't possible escape from the parent due to the overflow:hidden.
    #container .logo a {padding-left: 2px; width: 454px;}
    */

  12. #12
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,387
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Sculley View Post
    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

  14. #14
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •