T
tom
I am learning css and am starting to make headway. However, I occasionally
get weird results especially with I.E.
When I create a three column lay out when I first launch it the contents of
the left column get bumped into the center column! If I do a refresh of the
page it goes back to the left and stays there. Firefox and firebird never
have this issue. I have been looking into crossbrowser stuff what is going
on?
Ultimately, I would like to be dong this stuff with out help. So if any one
could recommend a good tutorial on making pages with css look good on "all"
browsers I would greatly appreciate that also.
Thanks;
Tom
------ begin html file
<!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>
<title>The Charles River Company</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="formating.css" type="text/css" />
</head>
<body>
<div id="pagewidth" >
<div id="header" >
<div class="content"> <h1>The Charles River Company</h1> </div>
</div>
<div id="outer" >
<div id="inner">
<div id="leftcol" >
<div class="content"> About Us </div>
</div>
<div id="maincol" >
<div class="content"><center> <br><b> The Charles River Company is
located at:<br>
1650 South Pacific Coast Highway<br>
Recondo Beach, CA 90277</b><br></center>
</div>
</div>
<div class="clr"></div>
</div>
</div>
<div id="footer" >
<div class="content"> Contact Webmaster</div>
</div>
<div class="clr"></div>
</div>
</body>
</html>----- end html file----- begin formating.csshtml, body{ margin:0;
padding:0; } #pagewidth{ width:100%; min-width: 500px; } #header{
height:80px; width:100%; background-color:#0000C0; color: AliceBlue; }
#leftcol{ width:180px; float:left; position:relative; margin-left:-180px;
margin-right:1px; } #outer{ border:solid white 0px; border-left-color:
#0999FF; border-left-style: solid; background-color: #FFFFFF; width:
uto; } #footer{ height:45px; width:100%; background-color:#FFFFFF; }
#inner{margin:0; width:100%;} #maincol{ float: left; width: 100%;
position: relative; margin: 0 -8px 0 -2px; } #outer>#inner {
border-bottom: 1px solid #FFFFFF; } .clr{clear:both;}
..content{padding:5px;} #header .content{padding-bottom:0;} ----- end
formating.css
get weird results especially with I.E.
When I create a three column lay out when I first launch it the contents of
the left column get bumped into the center column! If I do a refresh of the
page it goes back to the left and stays there. Firefox and firebird never
have this issue. I have been looking into crossbrowser stuff what is going
on?
Ultimately, I would like to be dong this stuff with out help. So if any one
could recommend a good tutorial on making pages with css look good on "all"
browsers I would greatly appreciate that also.
Thanks;
Tom
------ begin html file
<!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>
<title>The Charles River Company</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="formating.css" type="text/css" />
</head>
<body>
<div id="pagewidth" >
<div id="header" >
<div class="content"> <h1>The Charles River Company</h1> </div>
</div>
<div id="outer" >
<div id="inner">
<div id="leftcol" >
<div class="content"> About Us </div>
</div>
<div id="maincol" >
<div class="content"><center> <br><b> The Charles River Company is
located at:<br>
1650 South Pacific Coast Highway<br>
Recondo Beach, CA 90277</b><br></center>
</div>
</div>
<div class="clr"></div>
</div>
</div>
<div id="footer" >
<div class="content"> Contact Webmaster</div>
</div>
<div class="clr"></div>
</div>
</body>
</html>----- end html file----- begin formating.csshtml, body{ margin:0;
padding:0; } #pagewidth{ width:100%; min-width: 500px; } #header{
height:80px; width:100%; background-color:#0000C0; color: AliceBlue; }
#leftcol{ width:180px; float:left; position:relative; margin-left:-180px;
margin-right:1px; } #outer{ border:solid white 0px; border-left-color:
#0999FF; border-left-style: solid; background-color: #FFFFFF; width:
uto; } #footer{ height:45px; width:100%; background-color:#FFFFFF; }
#inner{margin:0; width:100%;} #maincol{ float: left; width: 100%;
position: relative; margin: 0 -8px 0 -2px; } #outer>#inner {
border-bottom: 1px solid #FFFFFF; } .clr{clear:both;}
..content{padding:5px;} #header .content{padding-bottom:0;} ----- end
formating.css