Why the gap?

seanybravo · Sep 7, 2005

I am training myself to use css in my web pages and everytime I think that I am getting an understanding of it something does not work as expected. Could someone please tell me why there is a gap between the header and the Navigation Divs? My knowledge of css tells me that there should not.

I hae tried both Mac Safari 1.3.1 and PC IE 6.0.2.

If anyone can offer an explination why this is happening I would be very grateful. There is only a small amount of code.

Thanks

Sean

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Page Layout Tutorial</title>
<style type="text/css">

</style>
</head>

<body>

<div id="wrapper">

<div id="header"><img src="Header.jpg" width="600" height="100" /></div>

<div id="navigation"><ul id="navlist"><li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">Page1</a></li>
<li><a href="#">Page2</a></li>
<li><a href="#">Page3</a></li>
</ul>
</div>

<div id="footer">
Footer
</div>
</div>
</body>
</html>

BabyJeffy · Sep 7, 2005

For an immediate fix:

Code:

ul {margin:0;}

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

BillyRayPreachersSon · Sep 7, 2005

It might well be because of the way certain browsers handle whitespace. Try this if Jeff's CSS fix doesn't work:

Code:

 <div id="header"><img src="Header.jpg" width="600" height="100" />[b</div><div id="navigation">[/b]

(i.e. removing whitespace between closing div of header, and opening div of navigation).

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

BillyRayPreachersSon · Sep 7, 2005

Oops..that should have read:

Code:

 <div id="header"><img src="Header.jpg" width="600" height="100" />[b]</div><div id="navigation">[/b]

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

seanybravo · Sep 7, 2005

Thanks both Jeff's solution worked.

Regards

Sean

ChrisHunt · Sep 7, 2005

Jeff's probably on the money there. Something to add to your studies in CSS would be an understanding of vertical margin collapsing - where (amongst other things) a child element's margin can "stick out" of its parent element. There's a good explanation here:

http://www.andybudd.com/archives/2003/11/no_margin_for_error/index.php

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Why the gap?

seanybravo

IS-IT--Management

BabyJeffy

Programmer

BillyRayPreachersSon

Programmer

BillyRayPreachersSon

Programmer

seanybravo

IS-IT--Management

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor