dmccabe Posted June 30, 2008 Share Posted June 30, 2008 So I am having a go at creating my first site, from scratch using only wordpad. The PHP is perfect however I am now working on my layout. This CSS stuff drives me insane though, I can clearly see the benefit, but never quite get the hang of the margins and padding and the spacing of it all. Would someone please point out where I am going wrong and give me some hints for making it work correct both in IE and FF (and the others, but mainly these 2). HTML: <html> <head> <title="TooSwift Mod Hosting - Seditio - phpBB - mods - plugins - images - skins and more.."> </head> <link href="default.css" rel="stylesheet" type="text/css"> <body> <div class="container"> <div class="inner_container"> <div class="header"> <div class="top_logo"> </div> <div class="right_brand"> </div> </div> <!-- navigation --> <div class="navigation"> </div> <!-- body --> <div class="body_container"> <div class="top_advert"> </div> <div class="content"> </div> <div class="top_right_advert"> </div> <div class="bottom_right_advert"> </div> <div class="bottom_logo"> </div> <!-- Footer --> <div class="footer"> </div> </div> </div> </body> </html> CSS: .container { width: 1204px; height: 1024px; background: #000000; clear: both; margin: 0px auto; padding: 50px 50px 50px 50px; } .inner_container { width: 100%; height: 768px; background: #444444; border: 1px #FFFFFF solid; clear: both; margin: 0px auto; padding: 10px 10px 10px 10px; } .header { height: 100px; width: 100%; border: 1px #FFFFFF solid; clear: both; padding: 2px 2px 2px 2px; margin: 0 0 10px 0px; } .top_logo { height: 100%; width: 60%; border: 1px #FFFFFF solid; float: left; clear: left; } .right_brand { height: 100%; width: 30%; border: 1px #FFFFFF solid; float: right; clear: right; } .navigation { height: 20px; width: 100%; border: 1px #FFFFFF solid; clear: both; margin: 0 0 10px 0px; } .body_container { width: 100%; height: 500px; border: 1px #FFFFFF solid; clear: both; padding: 10px 10px 10px 10px; } .top_advert { height: 10%; width: 80%; border: 1px #FFFFFF solid; float: left; clear: left; } .content { height: 85%; width: 80%; border: 1px #FFFFFF solid; clear: left; float: left; } .top_right_advert { } .bottom_right_advert { } .bottom_logo { } .fooer { } As you can see it is not finished as I got frustrated at the early stages, but in FF the layout is completely wrong (all shunted to the right) and in IE it is almost right, but just needs adjusting slightly in places. There may glaring errors as i have just re-wrote parts of it about 15 times and have not thoroughly checked back through, but at no stage have I got it correct. Quote Link to comment Share on other sites More sharing options...
haku Posted July 1, 2008 Share Posted July 1, 2008 I find that the best thing to do is code your site to work in firefox (or another standards compliant browser) first, then use conditional comments (http://en.wikipedia.org/wiki/Conditional_comments) to adjust your code for different versions of IE. Quote Link to comment Share on other sites More sharing options...
liamloveslearning Posted July 7, 2008 Share Posted July 7, 2008 I find that the best thing to do is code your site to work in firefox (or another standards compliant browser) first, then use conditional comments (http://en.wikipedia.org/wiki/Conditional_comments) to adjust your code for different versions of IE. Sorry to sound "daft" but why ff over ie? dont the majority of the people use IE? ??? Quote Link to comment Share on other sites More sharing options...
haku Posted July 7, 2008 Share Posted July 7, 2008 IE is not a standards compliant browser, while the other main browsers (Firefox, Safari, Opera etc) are. So if you code for the non-compliant browser then try to adjust for the compliant ones, it's a lot harder. On top of this, conditional comments only exist for IE - the other browsers don't need them, as they are compliant and don't need these extra hacks/fixes. Quote Link to comment Share on other sites More sharing options...
liamloveslearning Posted July 7, 2008 Share Posted July 7, 2008 ahh thanks Quote Link to comment Share on other sites More sharing options...
haku Posted July 8, 2008 Share Posted July 8, 2008 No worries! Trust me, it's one of the best tips you will get. Until someone told me, I was doing IE first and adjusting for firefox (this was before I even knew about other browsers), and it caused me headache after headache! I would adjust for one browser, then it wouldn't work in the other, and vice versa. Quote Link to comment Share on other sites More sharing options...
liamloveslearning Posted July 8, 2008 Share Posted July 8, 2008 ahh brilliant thanks! 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.