JasonDavis Posted February 16, 2011 Report Share Posted February 16, 2011 Hi all, I'm still trying to polish up my first hand-coded site using CSS. Here it is: http://www.wvconfidential.com/test/ So a few things are obviously wrong. Firstly, my mainframe element stretches out to the entire width of the page on Firefox. On Chrome and IE, it seems to look okay. Next, as you can see, my footer element is overlaying the reviews in all browsers. And third, more of a minor thing, in IE, I'm getting an ActiveX security warning regarding the "hack" that I tried to install in order to get the curved borders. Apparently IE doesn't natively support this. Anyone have a better way? Thanks! Quote Link to comment Share on other sites More sharing options...
falkencreative Posted February 16, 2011 Report Share Posted February 16, 2011 The width issue is due to an unnecessary space in your CSS file: #mainframe { width: 800 px; Also, if you remove the set "height: 255px;" from #reviews in your CSS stylesheet that will fix the footer issue. Quote Link to comment Share on other sites More sharing options...
Andrea Posted February 17, 2011 Report Share Posted February 17, 2011 You need to add a doctype !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> and the charset: <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> You shouldn't be using <br>s or  's to create space - that's what margins and padding are for. In your CSS under #mainframe width, remove the space between 800 and px and add 'clear: both;' to your #reviews - that should do it. Quote Link to comment Share on other sites More sharing options...
Andrea Posted February 17, 2011 Report Share Posted February 17, 2011 Ben's right about the height - for some odd reason, adding the clear both also put the footer in place, Quote Link to comment Share on other sites More sharing options...
JasonDavis Posted February 17, 2011 Author Report Share Posted February 17, 2011 As always, THANKS! That did the trick. If you refresh your cache the page loads correctly: http://www.wvconfidential.com/test/ So a couple questions: why did that work? I understand the space problem. However, why did removing the height from the footer fix that part? And what does 'clear: both' have to do with anything? Just trying to understand. Andrea, about the <br> and   issue - what do I do for that part? Should I make those images a <div> as well, and give them their own padding, etc? Thanks! Quote Link to comment Share on other sites More sharing options...
Andrea Posted February 17, 2011 Report Share Posted February 17, 2011 The height made the division a specific height, and the footer division appeared right under that. However, there was more content in the division than did fit, so what didn't just spilled over the edge, but was ignored by the footer division, so you had the overlap. Once you removed the height, the division adjusted itself to whatever it needed to be to hold the content - and again, the footer lined itself up following the bottom edge. The 'clear' is used to make sure a non-floating division following floating divisions lines itself up under those, not somewhere in the middle. I am not sure why adding the clear: all also worked for this page, but my guess is that somehow, your overspill acts like a float. Andrea, about the <br> and   issue - what do I do for that part? Should I make those images a <div> as well, and give them their own padding, etc? You would change this: <div id="blog"> <img src="[url="view-source:http://www.wvconfidential.com/test/gfx/b.png"]gfx/b.png[/url]" style=vertical-align:middle> <h1>Blog</h1> <br> <br> Your questions answered! Send stories, comments and concerns to Ms. Manvell, and she will address them on her blog. </div> to that <div id="blog"> <img src="[url="view-source:http://www.wvconfidential.com/test/gfx/b.png"]gfx/b.png[/url]" style=vertical-align:middle> <h1>Blog</h1> <p>Your questions answered! Send stories, comments and concerns to Ms. Manvell, and she will address them on her blog.</p> </div> and in your CSS, you could do this: img {margin-right: 5px;} h1 {padding-bottom: 15px;} p {margin: 10px 0;} These are just examples - the px can be adjusted any way you like, and you can use either margin or padding (or both) to create your space. Quote Link to comment Share on other sites More sharing options...
danhodge Posted February 17, 2011 Report Share Posted February 17, 2011 (edited) Didn't see Andrea's post above this, but this is an alternative i think... #blog img{ margin-bottom: 5px; } #philosophy img{ margin-bottom: 5px; } #books img{ margin-bottom: 5px; } This takes the '#blog' div, and changes the properties of any images inside it. Don't forget im still new to coding, so if it doesn't work, you have my apologies :L Edited February 17, 2011 by danhodge 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.