SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    belfast
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning of Logo ...

    Once more I find myself posting in here after pulling out all of my hair ...

    I want to move the logo in the top left hand side down 6px ... http://www.dtcommercials.com

    HTML is:
    HTML Code:
    <div id="top">
    	<div id="logo">
    </div>
    </div>
    and CSS is:
    Code:
    #top {
    margin-top: 10px;
    margin-right: 20px;
    margin-left: 20px;
    background: #E8E8E8;
    height: 100px;
    }
    
    #logo {
    margin-top: 6px;
    margin-left: 50px;
    margin-bottom: 0px;
    background-position: left top;
    background-image: url(../images/logo.gif);
    padding-bottom: 0px;
    background-repeat: no-repeat;
    height: 100px; /*Set height of text box */
    }
    I've put a border round it so as to demonstrate what I mean ...

    If you look at the site in IE its grand ... however firefox doesnt move it down at all ... if for testing purposes I set the margin-top to be 50px, in firefox it moves my logo and grey border 50px down from the top of the screen ...

    Any ideas ...

    regards,

    Ronan

  2. #2
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe worth taking the margin off the inside element and placing some padding on the outer div like such:

    CSS:
    Code:
    #top {
    margin: 10px 20px 0 20px;
    background: #E8E8E8;
    padding-top: 6px;
    height: 100px;
    }
    
    #logo {
    clear: left;
    margin: 0 0 0 50px;
    background: url(images.gif) no-repeat left top;
    padding: 0px;
    height: 100px; /*Set height of text box */
    }
    Code:

    Code:
    <div id="top">  
    	<div id="logo">
    </div>
    Hope this helps

    /Ox
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Ox's solution should work ok because it avoids mozillas top margin bug. Mozilla sometimes inhertits the top margin of its first child div which is happening in your case. All that happens is that parent moves down instead of the child as you increase the margin.

    Setting a top border on the parent will usually kill the bug.

    Code:
    #top {
    margin-top: 10px;
    margin-right: 20px;
    margin-left: 20px;
    background: #E8E8E8;
    border-top:1px solid #E8E8E8;
    height:107px}
    You would then need to increase the height of #top to accommodate the extra 6px margin of the child (as above).

    Ox's solution by-passes the margin bug and so should work fine

    Paul

  4. #4
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    belfast
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey guys,

    thanks for the tip ...

    Regards,

    Ronan


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
  •