Jump to content

Positioning Problem


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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...