Jump to content

Strange Line Breaks Appear In My Div Layout When Using <p> Or <h1-3> Tags?


Morgan
 Share

Recommended Posts

Ok so... I have this design that I just whipped up in a few minutes out of boredom. Layout looks pretty good, and its using CSS to specify design (no images)Here is my problem, when I try to use the <h1> tag in the heading section, or a <p> tag in the main content section, it pushes those divs down slightly out of place, and ends up showing the background (main) div that is being used to set div size.Here is an example of what I mean, while trying to use h1 and p. (Note: The red background is there to demonstrate the location of the MAIN div, and where it is interfering with the design.)http://www.tmcustomcomputers.com/breaktest1.htmlAs you can see, directly above the paragraph, and directly above the H1, there is about 20pixels of random dead space that shouldn't be there (and isn't there when you remove the h1 tag or the p tag from the page.Here is what it SHOULD look like:http://www.tmcustomcomputers.com/breaktest2.htmlCan anyone take a quick look and maybe point out an aspect I may have missed or overlooked? I can't figure out why this is happening.Thanks!

Link to comment
Share on other sites

As you can see, directly above the paragraph, and directly above the H1, there is about 20pixels of random dead space that shouldn't be there (and isn't there when you remove the h1 tag or the p tag from the page.Thanks!
The default margins and padding are doing you in. Add the universal reset to the top of your css and the spacing goes away. At least it did for my FF3.* {margin:0; padding:0;}
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...