davetacular Posted June 23, 2007 Share Posted June 23, 2007 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 More sharing options...
Xtazy Posted June 24, 2007 Share Posted June 24, 2007 Maybe it's something about your screen's resolution ... or some kind of browser bug...try with another Firefox and see what happens...or try to change the resolution and use Firefox 2.0.0.4 as well.... Link to comment Share on other sites More sharing options...
davetacular Posted June 24, 2007 Author Share Posted June 24, 2007 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 More sharing options...
Xtazy Posted June 24, 2007 Share Posted June 24, 2007 yeah, pretty spooky...i use mozilla firefox and i can see that gap, but in IE it disappears...strange....i even tried with absolute positioning, but no result... :| Link to comment Share on other sites More sharing options...
yoshida Posted June 25, 2007 Share Posted June 25, 2007 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.