8 replies [Last post]
Blakles
Offline
newbie
Greenville, SC
Last seen: 9 years 39 weeks ago
Greenville, SC
Timezone: GMT-5
Joined: 2009-11-20
Posts: 4
Points: 5

If anyone can help explain to me why this is happening and offer a solution, I would greatly appreciate it!

I am eventually going to edit the images used to create these menu tabs so that the space in between them is the same blue as the header instead of white.

As you can see from the screenshot, below the header there is some blank space where you can see my striped background, then comes in my tab menu and main site content. I want the tab menu to be flush with the header. What am I doing wrong? Thanks to all for any help.

CSS

/* basic elements */
 
html {
	margin: 0;
	padding: 0;
	height: 100%;
	}
 
body {
	font-family: georgia, sans-serif;
	text-align: center;
	line-height: 1.88889;
	color:black;
	background-image: url('path-to-stripe.png');
	margin: 0;
	padding: 0;
	height: 100%;
	}
 
p {
	font-size: 12px;
	margin-top: 0;
	text-align: justify;
	color:black;
	}
 
a:link {
	font-weight: bold;
	text-decoration: none;
	color: #001155;
	}
 
a:visited {
	font-weight: bold;
	text-decoration: none;
	color: #D4CDDC;
	}
 
a:hover, a:active {
	text-decoration: none;
	color: #01a;
	}
 
/* Sticky Footer */
 
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -3em;
	}
.footer, .push {
	height: 3em;
	}
 
/* specific divs */
 
#headercontainer {
	background-color: #333366;
	margin-left: auto;
	margin-right: auto;
	width: 700px;
	text-align: left;
	padding-top:10px;
	padding-bottom:0px;
	padding-right:25px;
	padding-left:25px;
	position: relative;
	}
 
#menubar {
	background-color: #336;
	width: 750px;
	height: 24px;
	margin-top:0px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	}
 
#navigation a {
	color: #000;
	background: #ffa20c url('left-tab.gif') left top no-repeat;
	text-decoration: none;
	padding-left: 10px;
	}
 
#navigation a span {
	background: url('right-tab.gif') right top no-repeat;
	padding-right: 10px;
	}
 
#navigation a, #navigation a span {
	display: inline;
	float: left;
	}
 
/* Hide from IE5-Mac \*/
#navigation a, #navigation a span {
	float: none;
	}
/* End hide */
 
#navigation a:hover  {
	color: #fff;
	background: #781351 url('left-tab-hover.gif') left top no-repeat;
	padding-left: 10px;
	}
 
#navigation a:hover span {
	background: url('right-tab-hover.gif') right top no-repeat;
	padding-right: 10px;
	} 
 
#navigation ul {
	list-style-type:none;
	list-style-image:none;
	padding: 0px;
	margin: 0px;
	}
 
#navigation li {
	float: right;
	margin: 0px;
	list-style-type:none;
	}
 
#container {
	background-color: white;
	margin-left: auto;
	margin-right: auto;
	width: 650px;
	text-align: left;
	padding-top:25px;
	padding-bottom:25px;
	padding-right:50px;
	padding-left:50px;
	position: relative;
	}
 
#titlecontainer {
	text-align: left;
	position: relative;
	}
 
#companyname {
	font-family: georgia, sans-serif;
	font-size: 15px;
	font-color: white;
	}
 
#heading2 {
	font-family: georgia, sans-serif;
	color: #333366;
	line-height: 1.88889;
	}
 
#footer {
	font-family: verdana, arial, sans-serif;
	font-size: 11px;
	color: black;
	text-align: center;
	}

HTML
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> 
 
<html>
<head>
<title>Carolina Oaks Dental Care :: Greenville, SC</title>
<link rel="stylesheet" type="text/css" href="CarolinaOaks.css" />
</head>
 
<body>
	<div class="wrapper">
	<div id="headercontainer">
<img src="caroaks-logo.gif" alt="Carolina Oaks Dental Care" /><br>
	</div><!--end headercontainer-->
 
	<div id="menubar">
<ul id="navigation">
  <li><a href="#"><span>Home</span></a></li>
  <li><a href="#"><span>About</span></a></li>
  <li><a href="#"><span>Services</span></a></li>
  <li><a href="#"><span>Contact</span></a></li>
  <li><a href="#"><span>Tips</span></a></li>
</ul>
	</div><!--end menubar container-->
 
	<div id="container">
 
<h2 div id="heading2">Our Office</h2>
 
<p>Carolina Oaks Dental Care is a quality general dentistry serving Greenville, SC. In addition to family dentistry needs, we also have a wide range of expanded services.<br><br>
 
Our experienced and knowledgeable staff includes Dr. Marc D. Workman (DMD), Dr. W. Allen Lynch (DDS), and Dr. J. Wesley Harden (DMD). Click here to learn more.<br><br>
 
For more information, or to schedule an appointment, contact us. We look forward to hearing from you!</P>
 
<h2 div id="heading2">My Vision</h2>
 
<p>To create a home for orphaned children in Uganda. A place where they can learn to dream again, have a childhood, an education, and safe haven from poverty and war. To also bring in leaders of Uganda and all over to give leadership training classes to the children so that they can learn how to be a good strong leader in their country. Besides leadership classes they will also learn a trade so that when they are older they can support themselves in where life takes them.
This can be done through sponsorship and donations. Also money can be raised through selling craft items.</p>
 
 
	</div> <!--end container-->
	<div class="push"></div> <!--end push-->
	</div> <!--end wrapper-->
	<div class="footer">
<div id="footer"><a href="www.carolinaoaks.com/index">Home</a> | <a href="www.carolinaoaks.com/about">About</a> | <a href="www.carolinaoaks.com/services">Services</a> | <a href="www.carolinaoaks.com/contact">Contact</a> | <a href="www.carolinaoaks.com/tips">Tips</a><br>Carolina Oaks Dental Care (c) 2009 :: Site Design by Leslie Wood</div>
	</div> <!--end footer-->
 
 
</body>
</html> 

AttachmentSize
screenshot.png22.79 KB
Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 9 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Without seeing a live

Without seeing a live example, i can only assume that it's the <br> in your headercontainer div.
I would also suggest that you use semantic coding practices. If it's your header, then us a header tag, h1.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Blakles
Offline
newbie
Greenville, SC
Last seen: 9 years 39 weeks ago
Greenville, SC
Timezone: GMT-5
Joined: 2009-11-20
Posts: 4
Points: 5

Sorry, it's not the < br >. It has

Sorry, it's not the < br >. It has been removed.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 59 min 34 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

See if the solution can't be

See if the solution can't be found here: That mysterious gap under images.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ben17
ben17's picture
Offline
Regular
Sunderland
Last seen: 9 years 36 weeks ago
Sunderland
Joined: 2009-11-23
Posts: 34
Points: 37

Hi I may have a idea what is

Hi

I may have a idea what is causing the problem.

Maybe if you clear the floats on the container off the navigation by puting: clear: right and then adding the overfow to hidden, it may take the gap away.

Thanks

Ben

"I am always doing that which I cannot do, in order that I may learn how to do it."

Pablo Picasso (25 October 1881 – 8 April 1973)

Blakles
Offline
newbie
Greenville, SC
Last seen: 9 years 39 weeks ago
Greenville, SC
Timezone: GMT-5
Joined: 2009-11-20
Posts: 4
Points: 5

That works Ben!

Thanks for that solution Ben! If I add the clear: right; and overflow: hidden to the #menubar container that holds the menu tabs, the gap goes away.

ben17
ben17's picture
Offline
Regular
Sunderland
Last seen: 9 years 36 weeks ago
Sunderland
Joined: 2009-11-23
Posts: 34
Points: 37

Hi Good to hear ..... the

Hi

Good to hear Smile ..... the overflow element is a little known technique to force a containg div to wrap without using the more popular technique of .clearfix.

am always glad to help and if you need anything else just give me a shout Smile

Thanks

Ben

"I am always doing that which I cannot do, in order that I may learn how to do it."

Pablo Picasso (25 October 1881 – 8 April 1973)

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 46 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

overflow: hidden

Quote:

Good to hear..... the overflow element is a little known technique to force a containing div to wrap without using the more popular technique of .clearfix.

I dunno how little-known it is, but it's my first clearing technique in my toolbox (remember IE6 needs Haslayout instead for wrapping floats).

However there's something else that happens:
once I had a right-floated menu with floated anchors inside, and even though I had clear on the following element, IE (6 and 7) showed this pesky gap on the bottom (even though everyone was a block).
overflow: hidden removed the gap in that instance.

I'm not quite sure what happened there: even though overflow does set Haslayout in IE7, the gap also disappeared in IE6, who does not wrap floats with overflow at all (IE6 needs haslayout)... plus, the menu being floated in the first place already gave it Layout.
So I wonder if it changed some margin-collapse or something in IE?

BTW, in the OP's situation, is it possible that overflow: hidden simply stopped Gary's image gap from overflowing?

I'm no expert, but I fake one on teh Internets

Blakles
Offline
newbie
Greenville, SC
Last seen: 9 years 39 weeks ago
Greenville, SC
Timezone: GMT-5
Joined: 2009-11-20
Posts: 4
Points: 5

Uh-Oh...

Unfortunately now I have another problem. The blank gap disappeared, but now I cannot figure out why the "menubar" container is so tall! I do not have a specified height for it, but when I do, it cuts it off from the bottom up.

Any ideas on how to make all this excess space in the menubar container go away. I have attached a screenshot with my updated code:

(I have made the background of the menubar a bright yellow just so you can see how tall it is. I will eventually make this background the same shade of blue as the banner container. Thanks everyone.

screenshotNew.PNG

the code again:

/* basic elements */
 
html {
	margin: 0;
	padding: 0;
	height: 100%;
	}
 
body {
	font-family: georgia, sans-serif;
	text-align: center;
	line-height: 1.88889;
	color:black;
	background-image: url('path-to-stripe.png');
	margin: 0;
	padding: 0;
	height: 100%;
	}
 
p {
	font-size: 12px;
	margin-top: 0;
	text-align: justify;
	color:black;
	}
 
a:link {
	font-weight: bold;
	text-decoration: none;
	color: #001155;
	}
 
a:visited {
	font-weight: bold;
	text-decoration: none;
	color: #D4CDDC;
	}
 
a:hover, a:active {
	text-decoration: none;
	color: #01a;
	}
 
/* Sticky Footer */
 
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -3em;
	}
.footer, .push {
	height: 3em;
	}
 
/* specific divs */
 
#bannercontainer {
	background-color: #333366;
	margin-left: auto;
	margin-right: auto;
	width: 700px;
	text-align: left;
	padding-top:10px;
	padding-bottom:0px;
	padding-right:25px;
	padding-left:25px;
	position: relative;
	overflow: hidden;
	}
 
#menubar {
	background-color: #ff0;
	width: 750px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	overflow: hidden;
	}
 
#navigation a {
	color: #000;
	background: #ffa20c url('left-tab.gif') left top no-repeat;
	text-decoration: none;
	padding-left: 10px;
	}
 
#navigation a span {
	background: url('right-tab.gif') right top no-repeat;
	padding-right: 10px;
	}
 
#navigation a, #navigation a span {
	display: inline;
	float: left;
	}
 
/* Hide from IE5-Mac \*/
#navigation a, #navigation a span {
	float: none;
	}
/* End hide */
 
#navigation a:hover  {
	color: #fff;
	background: #781351 url('left-tab-hover.gif') left top no-repeat;
	padding-left: 10px;
	}
 
#navigation a:hover span {
	background: url('right-tab-hover.gif') right top no-repeat;
	padding-right: 10px;
	} 
 
#navigation ul {
	list-style-type:none;
	list-style-image:none;
	padding: 0px;
	margin: 0px;
	}
 
#navigation li {
	float: right;
	margin: 0px;
	list-style-type:none;
	}
 
#container {
	background-color: white;
	margin-left: auto;
	margin-right: auto;
	width: 650px;
	text-align: left;
	padding-top:25px;
	padding-bottom:25px;
	padding-right:50px;
	padding-left:50px;
	position: relative;
	}
 
#titlecontainer {
	text-align: left;
	position: relative;
	}
 
#companyname {
	font-family: georgia, sans-serif;
	font-size: 15px;
	font-color: white;
	}
 
#heading2 {
	font-family: georgia, sans-serif;
	color: #333366;
	line-height: 1.88889;
	}
 
#footer {
	font-family: verdana, arial, sans-serif;
	font-size: 11px;
	color: black;
	text-align: center;
	}

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> 
 
<html>
<head>
<title>Carolina Oaks Dental Care :: Greenville, SC</title>
<link rel="stylesheet" type="text/css" href="CarolinaOaks.css" />
</head>
 
<body>
	<div class="wrapper">
	<div id="bannercontainer">
<img src="caroaks-logo.gif" alt="Carolina Oaks Dental Care" />
	</div><!--end bannercontainer-->
 
	<div id="menubar">
<ul id="navigation">
  <li><a href="#"><span>Home</span></a></li>
  <li><a href="#"><span>About</span></a></li>
  <li><a href="#"><span>Services</span></a></li>
  <li><a href="#"><span>Contact</span></a></li>
  <li><a href="#"><span>Tips</span></a></li>
</ul>
	</div><!--end menubar container-->
 
	<div id="container">
 
<h2 div id="heading2">Our Office</h2>