Rens Posted January 18, 2007 Share Posted January 18, 2007 hello i am making a web site with dreamweaver but i'm already having some troubles. take a look at my site so far: http://www.rens.110mb.comthe picture in firefox is well placed, but in IE it's total out of the frame i checked on css and html validation and i passed it.i'm kind of a newbie on this.(and i don't know if this is the right forum for it to be honest )can anyone help me?Greetz,Rens Link to comment Share on other sites More sharing options...
jlhaslip Posted January 18, 2007 Share Posted January 18, 2007 Absolute Positioning is probably the problem. Avoid it until you have a better grasp on the consequences of using it. For a three column layout such as you want to acheive, there are other alternatives which don't use Absolute positioning. Try this one: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>CSS layout, 3 columns with Header and Footer, Ordered columns, Netscape4 compatible</title> <!-- the methods on this page are largely the hard work (freely given) of many people from the css-discuss list [http://www.css-discuss.org], including (but not limited to) Big John, Holly Bergevin, Douglas Livingstone, Scott Sauyet, Victor Caston, Mike Papageorge, and me, Alex Robinson [css-stuff@alex.cloudband.com] --> <!-- <script type="text/javascript" src="ResizeReloadNN4.js"></script> --> <style type="text/css">/* ====================================================================GENERAL STYLING-------------------------------------------------------------------- *//* border:nones are for NN4 */html { margin: 0px; padding: 0px; }body { margin: 10px; padding: 0px; background-color: #999999; }div { margin: 0px; padding: 0px; }p {padding: 0px; margin: 0px;}.clear { clear: both;} /* CSS HACK: only for NN4, so now use Caio hack to cleanse palette *//*/*/ .clear { display: none; } /* *//* box-wrap is only needed if you want to set a background color for the columns, put a border round the content block or fix the content width */.box-wrap { color : #000000; background: #cccccc; border: 10px solid #000000; }.box-header { color: #000000; background: #996699; margin: 0px; padding: 0.5em; border: none; }h1 { margin: 0px; }h2 { font-size: 1em; color: #ffffff; background-color: #000000; margin: 0px 0px 0.5em 0px; padding: 0.25em; } .box-footer { background: #999966; padding: 0.5em; clear: both; border: none }/* ====================================================================COLUMNS LAYOUT-------------------------------------------------------------------- */.columns-float { float: left; width: 67%; }.column-one { float: left; width: 50%; }/* CSS HACK: Caio hide from NN4 since NN4's float model is all wrong *//*/*/.column-two { margin-left: 50%; }.column-three {margin-left: 67%;}/* */.column-one-content, .column-two-content, .column-three-content { padding: 6px; border: none; color: #000000; }.column-one-content { background: #ff6666; }.column-two-content { background: #66ff66; }.column-three-content { background: #6666ff; }/* GUTTERS BETWEEN COLUMNS */.column-two-content { margin-left: 10px; margin-right: 10px; }/* HORIZONTAL PADDING OUTSIDE COLUMNS */.column-one-content { margin-left: 10px; }.column-three-content { margin-right: 10px; }/* VERTICAL PADDING ABOVE COLUMNS */.box-header { margin-bottom: 010px; }.column_padding_after { height:010px; font-size: 1px; line-height: 0px; clear: both; }/* CSS HACK: position:relative needed by IE6 otherwise the header and col 2 don't show up on initial rendering - they're there but you have to minimise the window or switch to another app and back to see the full effect. But IE5(pc) doesn't like it. And nor does NN4.NB. the use of pos:rel has to go way beyond skin-deep - any nested element that needs a background colour appears to require to be be relatively positioned */ /*/*/.box-wrap, .columns-float, .column-one, .column-two, .column-three, h2 { p\osition: relative; }/* */ </style> <!-- Controls.css only used to style the layout controls and style display --> <link rel="stylesheet" type="text/css" href="3Col_OrderedFloats_C.css"></head> <body> <div class="box-wrap"> <div class="box-header"> <h1>3Col_NN4_FMFM - header<br> <em>Ordered Columns, float-margin/float-margin model</em></h1> </div> <div class="columns-float"> <div class="column-one"> <div class="column-one-content"> <h2>column one</h2> <p>column one</p> <p>column filler</p> <p>column filler</p> <p><a href="#" title="fake link for testing">test link</a></p> </div> </div> <div class="column-two"> <div class="column-two-content"> <h2>column two</h2> <p>column two</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p><a href="#" title="fake link for testing">test link</a></p> </div> </div> </div> <!-- close columns-float --> <div class="column-three"> <div class="column-three-content"> <h2>column three</h2> <p>column three</p> <p>column filler</p> <p>column filler</p> <p><a href="#" title="fake link for testing">test link</a></p> </div> </div> <div class="column_padding_after"> </div> <!-- only required if spacing needed after columns --> <div class="clear"> </div> <!-- clear only required for NN4 compatibility --> <div class="box-footer">footer </div> </div><!-- close box-wrap --> <p><a href="http://validator.w3.org/check/referer" title="Valid XHTML 1.0"><img src="valid-xhtml10.png" width="88" height="31" alt="Valid XHTML 1.0"> </a> <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Valid CSS"><img src="vcss.png" width="88" height="31" alt="Valid CSS"> </a> <a href="http://creativecommons.org/licenses/publicdomain" title="Public Domain Dedication"><img src="norights.gif" width="88" height="31" alt="Public Domain Dedication"> </a></p> <p><a href="http://www.fu2k.org/alex/css/index.mhtml" title="CSS Enterprise">Back to CSS index</a></p> <br> </body></html> Set the margins, etc to suit your likes / dis-likes. Page link is at the bottom for the original source. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now