homepage Welcome to WebmasterWorld Guest from 50.19.172.0
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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

5+ Year Member



 
Msg#: 3217387 posted 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

5+ Year Member



 
Msg#: 3217387 posted 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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3217387 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3217387 posted 9:22 pm on Jan 12, 2007 (gmt 0)

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

fred_bloggs

5+ Year Member



 
Msg#: 3217387 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3217387 posted 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

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 3217387 posted 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

5+ Year Member



 
Msg#: 3217387 posted 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.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved