homepage Welcome to WebmasterWorld Guest from 107.22.156.205
register, login, search, subscribe, help, library, PubCon, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library : Charter : Moderator: open

CSS Forum

    
Whitespace removal
Removing whitespace between <img> & <div>
fred_bloggs




msg:3217389		 3:54 pm on Jan 12, 2007 (gmt 0)

Hi,I hope i'm in the right forum here.
This has been driving me nuts for days.

I have an image that I am using for a banner.
Directly underneath is a navigation bar in a div tag.
I would like them to touch so that the navigation blends with the banner.
No matter what I try I can't get rid of the whitespace between them.
I tried removing the <p> tags of the banner and replacing with <div> but I still have a whitespace.
This is the code :

<div>
<div align="center"><img src="/climatebanner.jpg" alt="Climate change and global warming articles" width="1017" height="150" border="0">
</div>
</div>
<div id="navcontainer">
<div>
<div align="center">
<ul class="bannernav1" id="navlist">
<li id="active"><a href="/climatebanner.jpg" id="current">Item one</a></li>
<li><a href="/climatebanner.png">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
</div>
</div>

Any ideas how I can make it work?

Thanks

Fred

 

alfaguru




msg:3217404		 4:06 pm on Jan 12, 2007 (gmt 0)

Hi Fred. Without your CSS it's hard to say where the problem lies. Could you post it, or is it a secret? :-)
Fotiman




msg:3217451		 4:42 pm on Jan 12, 2007 (gmt 0)

As posted, it would be helpful if you included your CSS.

However, you could try:

1. Add an id to the outter div where your image is
2. Set it and it's nested elements to have no margin
3. Set the image to display:block.
4. Set navcontainer and it's nested elements to have no margin 


<style type="text/css"> 
#bannercontainer, 
#bannercontainer * 
{ 
 display: block; 
 margin: 0; 
} 
#navcontainer, 
#navcontainer * 
{ 
 margin: 0; 
} 
</style> 


<div id="bannercontainer"> 
 <div align="center"> 
 <img src="/climatebanner.jpg" alt="Climate change and global warming articles"  
width="1017" height="150" border="0"> 
 </div> 
</div> 
<div id="navcontainer"> 
 <div> 
 <div align="center"> 
 <ul class="bannernav1" id="navlist"> 
 <li id="active"><a href="/climatebanner.jpg" id="current">Item one</a></li> 
 <li><a href="/climatebanner.png">Item two</a></li> 
 <li><a href="#">Item three</a></li> 
 <li><a href="#">Item four</a></li> 
 <li><a href="#">Item five</a></li>  
 </ul> 
 </div> 
 </div> 
</div>

Also, you should consider removing those presentational attributes (align, border, width, and height) to CSS.

[edited by: Fotiman at 4:42 pm (utc) on Jan. 12, 2007]

[edited by: SuzyUK at 9:09 pm (utc) on Jan. 12, 2007]
[edit reason] fixed a bit of the scroll width hopefully ;) [/edit]

cmarshall




msg:3217732		 9:22 pm on Jan 12, 2007 (gmt 0)

Of course, you are specifying a valid DOCTYPE, right?
fred_bloggs




msg:3218344		 4:01 pm on Jan 13, 2007 (gmt 0)

I doubt whether the doctype is correct as I have not changed it.
(What should it be)
Here is the code for the top of the page and underneath that is the css for the navcontainer and the css applied to the body.
Thanks
Fred

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>climate change articles</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/CSS/Level1_Verdana.css" rel="stylesheet" type="text/css" />
<link href="/CSS/bannernav1.css" rel="stylesheet" type="text/css" />
</head>

<body leftmargin="0" topmargin="0">
<div>
<div align="left"><img src="/climatebanner.jpg" alt="Climate change and global warming articles" width="1017" height="150" border="0">
</div>
</div>
<div id="navcontainer">
<div>
<div align="center">
<ul class="bannernav1" id="navlist">
<li id="active"><a href="/climatebanner.jpg" id="current">Item one</a></li>
<li><a href="/climatebanner.png">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
<p>&nbsp;</p>
</ul>
</div>
</div>
</div>

Heres the css for the navcontainer

.bannernav1
ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a { padding: 3px 10px; }

#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #000000;
text-decoration: none;
}

#navlist a:hover
{
color: #fff;
background-color: #A9A9A9;
text-decoration: none;
}

Heres the css for the general body formatting

body {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
font-size: 10px;
}

td {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}

th {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
color: #D83A05;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #D83A05;
}

cmarshall




msg:3218357		 4:24 pm on Jan 13, 2007 (gmt 0)

Actually, your DOCTYPE looks OK. Here's a typical XHTML 1.0 Transitional generated by my editor:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

I'll experiment a bit more and see what I come up with.

penders




msg:3218649		 11:03 pm on Jan 13, 2007 (gmt 0)

This sounds like the "problem" (not really a problem, but just the way standards mode works) of inline elements (ie. img's) sitting on the common baseline of the surrounding/imaginary text. You get a few pixels gap beneath the image, depending on the font-size.

If this is the case, then Fotiman's suggestion:
3. Set the image to display:block.

Should sort it. Alternatively, setting vertical-align:bottom on the image should also sort it.

Check out this thread for a lot more info on this phenomenon:
[webmasterworld.com...]

If I remember correctly, you only get this 'white-space' on FF, Opera when using a strict DOCTYPE. A Transitional DOCTYPE on FF sorts the issue.
[developer.mozilla.org...]

fred_bloggs




msg:3219090		 5:35 pm on Jan 14, 2007 (gmt 0)

Phew!
Thanks Fotiman, applying a new style sheet with

<style type="text/css">
#bannercontainer,
#bannercontainer *
{
display: block;
margin: 0;
}
#navcontainer,
#navcontainer *
{
margin: 0;
}
</style>

Seems to have done the trick.
Thanks for your help all.
Fred

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of Pubcon Inc.
© Pubcon Inc. 1996-2012 all rights reserved