iEntry 10th Anniversary Webforumz RegistrationAnnouncements Contact Webforumz StaffContact
Home Resources Blogs Meet the Team Contact Register
 

Go Back   WebForumz.com > The Code > HTML, XHTML and CSS

Reply
 
LinkBack Thread Tools
Old April 7th, 2006, 07:57 PM   #1
New Member
 

Join Date: Apr 2006
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Rep Altering Power: 0 mattlowe81 is on a distinguished road
Space between <div> tags HELP NEEDED!

Good day everyone!

I’m a CSS newbie having recently moved from HTML table layouts to CSS layouts with XHTML <div> tags – better late than never!

I’m now experiencing a problem with vertical space between two <div> tags and it’s driving me up the wall (I’m one step away from tearing my hair out).

I’ve browsed the Internet for the last few days and have yet to find a solution that works for me. I’d be extremely grateful if anyone could have a look at my code and tell me if they know what I’m doing wrong and how to fix it.

Here goes.

I have a cantered container division on my page and two divisions inside the container – one division called “header” (that contains a header image background as well as the company logo) and another division called “content” (that contains a repeated background). My problem is that there is a large gap between the header and content <div>s and I need the two <div>s to meet with no space, as the backgrounds join together to complete an image.

Here’s my XHTML code:

Code:
<body>
   <!-- Begin Container -->
   <div id="container">

     <!-- Begin Header -->
     <div id="header">
         <img src="images/logo.gif" width="278" height="169" alt="" /></div>
       <!-- End Header -->

       <!-- SPACE APPEARS HERE!! -->

       <!-- Begin Content -->
       <div id="content">
         <h5>Content Here</h5>
       </div>
       <!-- End Content -->

   </div>
   <!-- End Container -->
 </body>
And here’s the CSS code:

[/code]body
{
margin: 0px;
border:0;
padding: 0px;
background-color: #E6F0F5;
}

#container
{
width: 800px;
background-color:#FF0000;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
}

#header
{
width:800px;
height:309px;
background: url(../images/bgHeader.gif) no-repeat;
padding: 20px 0px 0px 26px;
margin:0px;
}

#content
{
width: 800px;
padding: 0px 0px 0px 0px;
background: url(../images/bgContent.gif) repeat-y;
margin:0px;
}[/code]

I've attached a screen shot (from Netscape 8.0) to illustrate the problem - the red is the background and represents the space I want to remove.

I hope I've explained my problem clearly. Again, I'd be very grateful if anybody can help me out.

Thanks in advance

Matt
Attached Images
File Type: gif demo.gif (24.5 KB, 118 views)
mattlowe81 is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Old April 7th, 2006, 09:35 PM   #2
Highly Reputable Member
 
herkalees's Avatar
 

Join Date: Jul 2005
Location: Massachusetts, USA
Age: 88
Posts: 563
Thanks: 0
Thanked 0 Times in 0 Posts
Rep Altering Power: 0 herkalees will become famous soon enough herkalees will become famous soon enough
Re: Space between <div> tags HELP NEEDED!

From what I can see, nothing should be broken...

Try removing that <h5> in your content div.

If that doesn't do anything, give us 100% of your xhtml and CSS, or just post a link, we'll figure it out.
herkalees is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Old April 8th, 2006, 05:12 AM   #3
New Member
 

Join Date: Apr 2006
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Rep Altering Power: 0 mattlowe81 is on a distinguished road
Re: Space between <div> tags HELP NEEDED!

Hi Herkalees

Many thanks for looking through my code and helping me out... YOU'VE FIGURED OUT MY PROBLEM:-)

When I removed the unstyled header tag from the content <div> the unwanted space was removed. When plain unstyled text was then inserted in the content <div> the unwanted space didn't return either. The unwanted space only reappears when I insert an unstyled header as the VERY FIRST element in the content <div>. I've now styled a header tag (setting the margin and padding properties to "0") and these can now be inserted as the VERY FIRST element in the content <div> without causing the unwanted space to return.

So problem solved? Do you believe I'm correct in thinking that the default margin and padding properties of the header tag were causing the unwanted space?

Many thanks again!
mattlowe81 is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Old January 26th, 2007, 07:30 AM   #4
WebForumz Member
 

Join Date: Jan 2007
Location: Canada
Posts: 77
Thanks: 0
Thanked 0 Times in 0 Posts
Rep Altering Power: 0 Moonlilly is on a distinguished road
Exclamation Re: Space between <div> tags HELP NEEDED!

I have the EXACT same problem, but I don't have any H tags! If someone could help me out, that would be awsome, as I am on the verge of going bald myself!! Lol. Here is my code:

<title>Index - Atelier du Druide</title>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
color: #FFFFFF;
text-decoration: none;
}

#Header {
position: relative;
width:100%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
border: solid black 0px;
background-color: #FFFFFF;
text-align: left;
background-image: url(Images/template%20index%20top.jpg);
height: 311px;
background-repeat: no-repeat;
background-position: center top;
}
#Center1 {
position: relative;
width:100%;
margin-left: auto;
margin-right: auto;
margin-top: auto;
border: solid black 0px;
background-color: #00FF66;
background-image: url(Images/template%20index%20middle.jpg);
height: 275px;
background-repeat: no-repeat;
background-position: center top;
}
#Center2 {
position: relative;
width:100%;
margin-left: auto;
margin-right: auto;
border: solid black 0px;
background-color: #9900CC;
background-image: url(Images/template_middle.jpg);
background-repeat: repeat-y;
background-position: center top;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
}
#Footer {
position: relative;
width:100%;
margin-left: auto;
margin-right: auto;
margin-top: auto;
border: solid black 0px;
background-color: #FFFFFF;
text-align: left;
background-image: url(Images/template_bottom.jpg);
background-repeat: no-repeat;
background-position: center top;
height: 23px;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
.style1 {font-family: Arial, Helvetica, sans-serif}

-->
</style>
</head>
<body alink="#FFFFFF">

<div align="center" id="Header"></div>

<div align="center" id="Center1"></div>

<div align="center" id="Center2">
<p align="center"><font color="#000000"><font face="Arial">Some text</font> </font> <BR>
<p align="center"> <font color="#000000">Some more text</font>
<p align="center">
<p align="center"><b><font face="Arial" size="4"><u><a href="Accueil.htm">Fran&ccedil;ais</a></u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <u><a href="Home.htm">English</a></u></font></b></div>


<div align="center" id="Footer">
</div>

</body>
</html>

Last edited by Moonlilly; January 26th, 2007 at 07:31 AM.. Reason: spelling mistakes
Moonlilly is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Old January 26th, 2007, 08:35 AM   #5
WebForumz Member
 

Join Date: Jan 2007
Location: Canada
Posts: 77
Thanks: 0
Thanked 0 Times in 0 Posts
Rep Altering Power: 0 Moonlilly is on a distinguished road
Re: Space between <div> tags HELP NEEDED!

Ok, never mind... I just fixed the problem TOTTALY by FLUKE!!! I am using DW8, and I decided, just for fun, to set the Center 2 div tag to Overflow: hidden. And it worked!!! Yippee!!!
Moonlilly is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Old April 2nd, 2009, 12:56 AM   #6
New Member
 

Join Date: Apr 2009
Location: Minnesota
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Rep Altering Power: 0 aframe is on a distinguished road
Re: Space between <div> tags HELP NEEDED!

I am having a similar problem, my website displays fine in IE, but not in ff or safari. there is a gap between navbar and main, and main and footer div tags. I know the culprit is <p> but it shouldn't be and I am trying to figure out a workaround. Do i need to add another div tag?, if so where. Thanks in advance for the help. the website is www.jjremodelers.com, below is my css.

body {
font-size: 12px;
background-image: url(Images/powerpoint-bkgd.jpg);
background-repeat: repeat;
}
#header {
height: 190px;
width: 800px;
}
#navbartop {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-image: url(Images/navbar-bkgd.png);
background-repeat: no-repeat;
height: 26px;
width: 800px;
margin: 0px;
padding: 0px;
}
#main {
background-image: url(Images/main-bckgd.png);
background-repeat: repeat-y;
height: auto;
width: 800px;
text-indent: 35px;
margin: 0px;
padding: 0px;
}
h1, h2, h3, h4, h5 {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h4 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
color: #333333;
text-indent: 0px;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.2em;
font-weight: bold;
color: #649D35;
text-indent: 0px;
}
#footer {
background-image: url(Images/footer.png);
background-repeat: no-repeat;
height: 85px;
width: 800px;
margin: 0px;
padding: 0px;
}
#main p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
padding-right: 35px;
padding-left: 35px;
}
#wrapper {
width: 800px;
margin-top: 15px;
margin-right: auto;
margin-left: auto;
}
.navbarimage {
display: inline;
padding-top: 3px;
padding-right: 4px;
padding-left: 4px;
}
.footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
text-align: center;
}
aframe is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Old April 2nd, 2009, 01:47 PM   #7
WebForumz Member
 

Join Date: Jan 2007
Location: Canada
Posts: 77
Thanks: 0
Thanked 0 Times in 0 Posts
Rep Altering Power: 0 Moonlilly is on a distinguished road
Re: Space between <div> tags HELP NEEDED!

Don't ask me why this works, but try adding a 1px padding to your footer instead of 0, like this:

#footer {
background-image: url(Images/footer.png);
background-repeat: no-repeat;
height: 85px;
width: 800px;
margin: 0px;
padding: 1px;
}

Works on my screen anyway, hope it works for you too
Moonlilly is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Old April 2nd, 2009, 06:53 PM   #8
Reputable Member
 

Join Date: Feb 2008
Location: chelmsford,essex
Posts: 108
Thanks: 24
Thanked 1 Time in 1 Post
Rep Altering Power: 0 snelll is on a distinguished road
Re: Space between <div> tags HELP NEEDED!

On the footer paragraph do: margin: 0;.

Actually add this to your CSS file:
Code:
* {
margin: 0;
}

Last edited by snelll; April 2nd, 2009 at 07:20 PM..
snelll is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Old August 24th, 2009, 08:22 PM   #9
New Member
 

Join Date: Aug 2009
Location: Vancouver
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Rep Altering Power: 0 Prez is on a distinguished road
Re: Space between <div> tags HELP NEEDED!

Quote:
Originally Posted by snelll View Post
On the footer paragraph do: margin: 0;.

Actually add this to your CSS file:
Code:
* {
margin: 0;
}

Perfect! (and so simple too)

After adding various versions of Margin = 0, Padding = 0, Border = 0, deleting my headings, adding Margin = 1 etc, etc, I just posted that tiny bit of code to the top of my CSS style sheet, and like magic, the space was gone!

Thankyou very much Snell!
Prez is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Bookmarks

Tags
space , between , ltdivgt , tags , help , needed


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Title Tags, Meta Tags and SEO - Keyword Density or Keyword Spamming? pctank Search Engine Optimization (SEO) 2 July 4th, 2008 08:52 AM
alt tags in css multichild HTML, XHTML and CSS 1 February 24th, 2008 09:35 AM
Tags acrikey The Café 28 July 12th, 2007 06:20 AM
Help with Tags... courtjester Classic ASP 15 September 19th, 2004 04:38 AM


Search Engine Optimization by vBSEO 3.2.0 RC8