No Margin between Elements

DoubleDee · December 4, 2011, 8:17pm

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…


	<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">


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{
[COLOR="#FF0000"]	margin: 10px 0 0 0;	/**/
[/COLOR]	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

dnordstrom · December 4, 2011, 9:59pm

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.

system · December 4, 2011, 10:22pm

Are you sure the solution isn’t the same as the one you found in your other thread yesterday?

ralphm · December 5, 2011, 12:44am

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?

DoubleDee · December 5, 2011, 1:10am

Here is a snippet of my code…


[B][COLOR="#0000CD"]h1#companyName,
[/COLOR][/B]h1#companyName span{
	position: relative;                       /* Create "Positioned" Containing-Block. */
	float: left;
[COLOR="#FF0000"]	margin: 15px 0 10px 0;
[/COLOR]	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

ralphm · December 5, 2011, 1:22am

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.)

DoubleDee · December 5, 2011, 1:28am

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

system · December 5, 2011, 11:46am

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.

system · December 5, 2011, 12:01pm


<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>


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…

DoubleDee · December 6, 2011, 5:35am

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!!)

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??


        <!-- 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

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??


/* 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

DoubleDee · December 6, 2011, 5:44am

Tried your code. “Business” is peaking out beneath my Logo…

deathshadow60:


<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>


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