Welcome to WebmasterWorld Guest from 54.146.174.220

Forum Moderators: not2easy

Whitespace removal

Removing whitespace between <img> & <div>

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

5+ Year Member



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

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

5+ Year Member



Hi Fred. Without your CSS it's hard to say where the problem lies. Could you post it, or is it a secret? :-)
4:42 pm on Jan 12, 2007 (gmt 0)

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



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]

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

WebmasterWorld Senior Member 10+ Year Member



Of course, you are specifying a valid DOCTYPE, right?
4:01 pm on Jan 13, 2007 (gmt 0)

5+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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.

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

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



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

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

5+ Year Member



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

 

Featured Threads

Hot Threads This Week

Hot Threads This Month