SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    No Margin between Elements

    I am having trouble with the margin disappearing between my Company Logo/Welcome Message on one line and my Top Menu beneath them?!

    Here is my code...
    Code:
    	<h1 id="companyLogo">
    		<span></span>Debbie, Inc: Help Starting Your Own Small-Business
    	</h1>
    
            <!-- Display Welcome -->
            <p id="welcome">
              <span id="hello">Hello.</span>
                <a href="">Log In</a> to access premium content.
                &nbsp; Not a Member? &nbsp;<a href="">Start Here</a>
            </p>
    
    	<!-- Display Top Menu -->
    	<ul id="topMenu">
    Code:
    h1#companyLogo span{
    	position: relative;
    	float: left;	/**/
    	margin: 0;
    	padding: 0;
    	width: 220px;															/* Image Width. */
    	height: 36px;															/* Image Height. */
    	overflow: hidden;													/* Hide Overflow. */
    	line-height: 1.0;
    	font-size: 200%;													/* or whatever it needs to be if images are missing */
    }
    
    h1#companyLogo span{
    	position: absolute;
    	background: url('/images/Debbie_220x36.png') no-repeat 0 0;
    	left: 0;
    	top: 0;
    }
    
    #topMenu{
    	margin: 10px 0 0 0;	/**/
    	width: 1200px;                              /* Same size as max-width on #pageWrapper. */
    	min-height: 0;                              /* haslayout IE7 for float containment. */
    	list-style: none;                           /* No Bullets. */
    	background: #FFC0CB;                        /* Pink */
    }

    Why is that happening?


    Debbie

  2. #2
    SitePoint Addict dnordstrom's Avatar
    Join Date
    Jul 2006
    Location
    Amsterdam
    Posts
    337
    Mentioned
    18 Post(s)
    Tagged
    0 Thread(s)
    Do you have an example page somewhere? That would be helpful since we can then use WebKit Inspector or Firebug to look into it much faster.
    Daniel Nordstrom. of. Nintera(ctive)
    -- Featured post: Part 2. Writing NI.JS JavaScript
    ----- Follow me on Twitter. Got project? Contact me.
    -------- SitePoint: Community Guidelines Be A Great Member

  3. #3
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    I am having trouble with the margin disappearing between my Company Logo/Welcome Message on one line and my Top Menu beneath them?!
    Are you sure the solution isn't the same as the one you found in your other thread yesterday?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Is your H1 floated? If so, that would explain the margin on elements below it not working. If the H1 is floated, does it need to be?

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Is your H1 floated? If so, that would explain the margin on elements below it not working. If the H1 is floated, does it need to be?
    Here is a snippet of my code...
    Code:
    h1#companyName,
    h1#companyName span{
    	position: relative;                       /* Create "Positioned" Containing-Block. */
    	float: left;
    	margin: 15px 0 10px 0;
    	padding: 0;				/* Re-set <h1> defaults. */
    	width: 220px;				/* Image Width. */
    	height: 36px;				/* Image Height. */
    	overflow: hidden;			/* Hide Overflow. */
    	font-size: 1.1em;			/* Reduced size to fit in space of Missing Image. */
    }
    
    h1#companyName span{
    	position: absolute;
    	background: url('/images/Debbie_220x36.png') no-repeat;
    	margin: 0;
    
    	width: 100%;				/* Expand to Parent's Size. */
    	height: 100%;				/* Expand to Parent's Size. */
    }
    Yes, my <h1> is floated.

    Necessary? I think so. (Certainly easier.)

    The line highlighted in red above seems to have fixed things, but I still don't see why having a top-margin on my Menu bar wouldn't work, and yet a bottom-margin on my Logo did work?!


    Debbie

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    That's the nature of floats: a bottom margin on a float will work, but a top margin on non-floated elements will slide under a float above them, as the float is out of the document flow. I'm just assuming this is the case here, though, as you haven't posted any styles for your H1 (only for spans within it). Is that an error in your code? Both of those blocks of CSS apply to a span, not an h1.)

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    That's the nature of floats: a bottom margin on a float will work, but a top margin on non-floated elements will slide under a float above them, as the float is out of the document flow.
    I forgot that. Good catch!


    I'm just assuming this is the case here, though, as you haven't posted any styles for your H1 (only for spans within it).
    I'm certain that is it.


    Is that an error in your code? Both of those blocks of CSS apply to a span, not an h1.)
    Type-o. See my edit above in bold blue...

    Thanks,


    Ralph

  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Also once again your comments are ending up between a float and it's sibling, so you are most likely going to see content disappearing or rendered twice in IE7- and some versions of FF... which is why you can't comment that way.

    In general methinks you're overthinking this code... not exactly sure what you're even trying to accomplish... Though also that's not a p, there's no reason for the ID on the span, no reason for the id on the h1... etc, etc, etc... Some consistency in your indentation wouldn't hurt either... and it also helps to put at LEAST a # in your anchors so they test properly in IE8-...

    Oh and the span first w/no top/left method of gilder-levin doesn't work cross-browser, despite the wild claims of it doing so... you're making the font LARGER not smaller, %/em fonts under a image replacement is most always broken, declaring the height of the outer container is usually a bad idea.... gimme a minute here.

  9. #9
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <h1>
      Debbie, Inc: <small>Help Starting Your Own Small-Business</small>
      <span></span>
    </h1>
    
    <div id="welcome">
    	<span>Hello.</span>
    	<a href="#">Log In</a> to access premium content.
    	<a href="#">Not a Member? Start Here</a>
    </div>
    Code:
    h1 {
    	float:left;
    	overflow:hidden;
    	position:relative;
    	width:220px;
    	padding:15px 0 10px;
    	font:bold 14px/18px arial,helvetica,sans-serif; 
    }
    
    h1 small {
    	display:block;
    	font:normal 14px/18px arial,helvetica,sans-serif; 
    }
    
    h1 span {
    	position:absolute;
    	top:15px;
    	left:0;
    	width:220px;
    	height:36px;
    	background:url(/images/Debbie_220x36.png) 0 0 no-repeat;
    }
    I think that's what you're trying to do... Some tips -- avoid declaring heights on the h1, and you can reliably use padding instead of margin (since it has no background, who cares?). This changes the top position of the span, but that's ok since putting it second and declaring top/bottom fixes issues in non-webkit versions of iCab, IE 5.5 through 7, and certain versions of gecko based browsers.

    I'd also maybe give consideration to the idea of instead of floats, using a negative top margin and left margin to slide the welcome text into place, since the h1+image replacement is fixed width. That way no floats needed. Also makes it easier to overlap different backgrounds if desired.

    As you've already noticed, margins suck... it's why I only use them as a last resort and either use padding or pad the parent...

  10. #10
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi DeathShadow!

    Just got off work and done eating and checking messages before bed.

    Will get as far as I can tonight. (Got my butt kicked this weekend, and didn't get nearly as much done as I wanted, but I'm determined!!)


    Quote Originally Posted by deathshadow60 View Post
    Also once again your comments are ending up between a float and it's sibling, so you are most likely going to see content disappearing or rendered twice in IE7- and some versions of FF... which is why you can't comment that way.
    These comment issues are cramping my style...


    In general methinks you're overthinking this code... not exactly sure what you're even trying to accomplish...
    Can you be more specific?

    (Remember I haven't gotten to all of your and Stomme's critiques yet...)


    Though also that's not a p, there's no reason for the ID on the span, no reason for the id on the h1... etc, etc, etc...
    this??
    Code:
            <!-- Display Welcome -->
            <p id="welcome">
              <span id="hello">Hello.</span>
                <a href="">Log In</a> to access premium content.
                &nbsp; Not a Member? &nbsp;<a href="">Start Here</a>
            </p>
    Why not a <p>?

    I thought DIV-itis was BAD??

    So maybe "hello" is overkill.

    Why is it bad to over-document stuff so you know what in the hell
    Code:
    div span
    actually is?!


    Some consistency in your indentation wouldn't hurt either...
    "Expand Tabs to Spaces" or not?!

    Why?


    and it also helps to put at LEAST a # in your anchors so they test properly in IE8-...
    A real link will go in soon enough, but okay.


    Oh and the span first w/no top/left method of gilder-levin doesn't work cross-browser, despite the wild claims of it doing so...
    This??
    Code:
    /* Company Logo appears as long as "Images On" selected in browser. */
    h1#companyLogo span{
    	position: absolute;
    	background: url('/images/DoubleDee_220x36.png') no-repeat;
    	margin: 0;
    
    	width: 100%;															/* Expand to Parent's Size. */
    	height: 100%;															/* Expand to Parent's Size. */
    /*
    	left: 0;
    	top: 0;
    */
    }

    you're making the font LARGER not smaller, %/em fonts under a image replacement is most always broken, declaring the height of the outer container is usually a bad idea.... gimme a minute here.
    Check out my updated Test Site...
    http://www.doubledee.byethost2.com/

    Can't speak for your computer, but on my MacBook with FF8 it looks awesome with and without Images and CSS on!!

    Not perfect, but better than I had last week...


    Debbie

  11. #11
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Tried your code. "Business" is peaking out beneath my Logo...

    Quote Originally Posted by deathshadow60 View Post
    Code:
    <h1>
      Debbie, Inc: <small>Help Starting Your Own Small-Business</small>
      <span></span>
    </h1>
    
    <div id="welcome">
    	<span>Hello.</span>
    	<a href="#">Log In</a> to access premium content.
    	<a href="#">Not a Member? Start Here</a>
    </div>
    Code:
    h1 {
    	float:left;
    	overflow:hidden;
    	position:relative;
    	width:220px;
    	padding:15px 0 10px;
    	font:bold 14px/18px arial,helvetica,sans-serif; 
    }
    
    h1 small {
    	display:block;
    	font:normal 14px/18px arial,helvetica,sans-serif; 
    }
    
    h1 span {
    	position:absolute;
    	top:15px;
    	left:0;
    	width:220px;
    	height:36px;
    	background:url(/images/Debbie_220x36.png) 0 0 no-repeat;
    }

    Running out of time tonight.

    Your code is somewhat cleaner and I could be convinced to adopt some of it, but frankly my updated Test Site looks pretty damn good, coding style aside.


    Some tips -- avoid declaring heights on the h1, and you can reliably use padding instead of margin (since it has no background, who cares?). This changes the top position of the span, but that's ok since putting it second and declaring top/bottom fixes issues in non-webkit versions of iCab, IE 5.5 through 7, and certain versions of gecko based browsers.

    I'd also maybe give consideration to the idea of instead of floats, using a negative top margin and left margin to slide the welcome text into place, since the h1+image replacement is fixed width. That way no floats needed. Also makes it easier to overlap different backgrounds if desired.

    As you've already noticed, margins suck... it's why I only use them as a last resort and either use padding or pad the parent...
    Hmmm...

    Need to try and digest what you mean above.

    BTW, I need an ID in my <h1> be my <h1> will be *unique* on every page with the Home Page being the only one using Gilder-levin, since on article pages the article title will be the <h1>...

    Will have to kick your code around some more.

    I can "tighten up" my code, but I think its pretty okay.

    Talk to you soon...


    Debbie


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
  •