odrog Posted May 23, 2010 Report Share Posted May 23, 2010 Hi, I'm a couple steps above a newby at web design & I'm building a new site to replace the mess an "expert" built me. I've created a basic page layout (for interior site pages - not the main index) and have encountered an issue I've never run across when creating the most basic of html pages before. I'll include my CSS code below but the issue is: When adding text to the "content" div the <p> tag doesn't create a space between paragraphs. The text displays like one giant paragraph with lines separated as if I'd used a <br> tag. (Which I haven't) Here's my CSS code for the page: * { padding: 0; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; } #wrapper { margin: 0 auto; width: 922px; } #header { color: #333; width: 900px; float: left; padding: 10px; border: 1px solid #0000CC; height: 100px; margin: 10px 0px 0px 0px; background:#0000CC; } #navigation { float: left; width: 900px; color: #333; padding: 10px; border: 1px solid #0000CC; margin: 0px 0px 0px 0px; background:#FFFFCC; } #navigation ul li { list-style-type: none; display: inline; } #navigation li a { display: block; float: left; padding: 5px 10px; color:#333; text-decoration: none; border-right: 1px solid#0000CC; } #navigation li a:hover { background:#999999; } #leftcolumn { color: #333; border: 1px solid #0000CC; background:#0099CC; margin: 0px 0px 0px 0px; padding: 10px; height: 500px; width: 200px; float: left; } #leftcolumn ul li { list-style-type: none; } #content { float: left; color: #333; border: 1px solid #0000CC; background:#FFFFCC; margin: 0px 0px 0px 0px; /*top,right,bottom,left*/ padding: 10px; height: 500px; overflow:scroll; width: 678px; display: inline; } #content h1 { border-width: 10px; border-style: groove; border-color: #0000FF; color: #FFFF00; background-color: #FF6666; font: bold 30px "Times New Roman", serif; } #footer { width: 900px; clear: both; color: #333; border: 1px solid #0000CC; background-color:#F3F2ED; margin: 0px 0px 10px 0px; padding: 10px; } Have I missed something obvious here? How do I get the <p> tag to cause a visible break between paragraphs in the "content" div? (and the "leftcolumn" div if necessary) Any help with this would be greatly appreciated. I've never attempted anything this ambitious before and thought I was doing ok until this issue cropped up when I began trying to actually add content to my html page linked to this CSS page. Thanks Quote Link to comment Share on other sites More sharing options...
odrog Posted May 23, 2010 Author Report Share Posted May 23, 2010 Oh, I named the CSS file: columns2.css And this is the basic html layout I linked to it: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Article Test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="columns2.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <div id="header"> HEADER </div> <div id="navigation"> NAVIGATION </div> <div id="leftcolumn"> LEFT COLUMN </div> <div id="content"> <h1 align="center">CONTENT</h1> </div> <div id="footer"> Footer </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
falkencreative Posted May 23, 2010 Report Share Posted May 23, 2010 This line in your CSS: * { padding: 0; margin: 0; } tells the browser to remove margins and padding from all elements. Thus, your <p> tags don't get the usual top/bottom margins. To put that back, add margin: 1.12em 0; below * { padding: 0; margin: 0; } (margin value pulled from http://www.w3.org/TR/CSS2/sample.html) Quote Link to comment Share on other sites More sharing options...
odrog Posted May 23, 2010 Author Report Share Posted May 23, 2010 Awesome! Thank you very much. Quote Link to comment Share on other sites More sharing options...
odrog Posted May 23, 2010 Author Report Share Posted May 23, 2010 Having added the code as suggested I entered some random text using both <p> and <br> tags throughout. With IE it displays correctly. With Firefox the <p> generated space seems a tad large and the <br> tag causes a space as big as the <p> tag displays with IE. How do I tell Firefox to display it correctly? It has also affected the size of my "Navigation" Div... the height has increased and is encroaching on my "header" div. Quote Link to comment Share on other sites More sharing options...
Wickham Posted May 23, 2010 Report Share Posted May 23, 2010 If you have * { padding: 0; margin: 1.12em 0; } it will make all top and bottom margins for all elements 1.12 x the height of the default font size, so a <br> line break will be large. I prefer to keep * { padding: 0; margin: 0; } as the first style to make all browser default margins the same (but all 0) then add different margins where you want, so you might have different margins for p tags and each h1 to h5 tag, possibly having different top margins from bottom margins according to what you prefer:- p { margin: 3px 0; } h1, h2, h3 { 1em 0 0.5em 0; } h4, h5 { 4px 0 2px 0; } then th e<br> line break will relate to the element it's inside. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted May 23, 2010 Report Share Posted May 23, 2010 Hmm. Either the reply form ate my comment, or I typed things in incorrectly in my comment above. I had meant to say that you should add: p { margin: 1.12em 0; } below: * { padding: 0; margin: 0; } Sorry if that was confusing -- an oversight on my part. Quote Link to comment Share on other sites More sharing options...
odrog Posted May 23, 2010 Author Report Share Posted May 23, 2010 That worked & had no effect on the size of my "Navigation" div in either EI or Firefox like the original suggestion did. I tweaked it to: p { margin: 7px 0; } And it looks great. Thanks for the help. Everything I've learned about HTML, CSS & site design has come from months of research & study of online tutorials. It about drove me mad but things finally started to click and I was able to come up with the admittedly very basic designs I have such as the one shared here. There are times though, like with this issue, where I just can't solve the puzzle and feel like my brain is going to melt from the effort. Finding this community forum is a Godsend. I expect I'll be back more than once as I continue to build my site. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.