Jump to content

Positioning Problem


davetacular

Recommended Posts

I have only recently started using CSS (one week ago) and I'm currently practising creating page layouts. I have just finished my first one but have run into a little problem. Whenever I put any paragraph tags in the navigation bar (#nav), a gap of around 10 or 15 pixels is created between the header (#head) and the navigation bar. However this only appears to happen in Firefox 2.0.0.4. The only other browser I have is Internet Explorer 6, and the gap is not present.Can I fix this problem? Or is it a Firefox bug?Also feel free to leave me hints or tips on improving my code, I need them.Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""DTD/xhtml1-strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>test</title><style type="text/css">body{background-color:#647D8F}#container{width:780px;height:565px;margin:0 auto;}#head{width:780px;height:80px;background-color:#596F80;}#nav{width:780px;height:25px;background-color:#6096BF;}#right{float:right;width:390px;height:460px;background-color:#CFDCE6;}#left{float:left;width:390px;height:460px;background-color:#596F80;}#foot{width:780px;height:25px;clear:both;background-color:#6096BF;text-align:center;}</style></head><body><div id="container"><div id="head"></div><div id="nav"><p>test</p></div><div id="right"></div><div id="left"></div><div id="foot"></div></div></body></html>

Link to comment
Share on other sites

I tried changing my resolution from 1024x768 to 800x600 but it still creates the gap. Opera also does the same thing so I'm guessing it's a browser rendering problem or there are errors in my code. I also noticed that this happens with list tags (<ul>, <ol> etc).Any other thoughts?Please try out my code to see if it does the same for you.

Link to comment
Share on other sites

Try #nav p { margin-top: 0; }, or try defining margins and paddings to start with.One piece of advise, modern browsers place paddings, margins and outlines 'inside' the box model. Some older browsers place them 'outside' the box. You'll notice soon enough.Test with as many browsers as possible, starting with the worst (IE6) ascending to more standard conform (Firefox, Opera, and perhaps Safari). Once it validates and looks good in these browsers, you're good to go and ready to test your skills on a next project.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...