Hi, this is my first post here. I'll probably stick around because this is a really good forum!
Anyway, I could use a little help please. I'm a relatively new designer and I can't figure this out. I'm not too good with Js yet but I'll serve separate sheets if I have to.
I have a two column design and in Firefox, it looks fine. In IE, the sidebar is pushed down like 30 px for no apparent reason. I moded a Dreamweaver basic starter page, but not by much.
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="twoColFixRtHdr.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRt #sidebar1 { width: 220px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRt #sidebar1 { padding-top: 30px; }
.twoColFixRt #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>
<body class="twoColFixRt">
<div id="container">
<div id="sidebar1">
<img src="images/slices_02.gif" width="283" height="775" alt="side" />
<!-- end #sidebar1 --></div>
<div id="mainContent">
<img src="images/slices_01.gif" width="497" height="177" alt="masthead" />
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
<!-- end #container --></div>
</body>
</html>CSS
@charset "utf-8";
* {
margin: 0; padding: 0;
}
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: white;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
img {
margin: 0;
padding: 0;
}
.twoColFixRt #container {
width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.twoColFixRt #sidebar1 {
float: right; /* since this element is floated, a width must be given */
width: 283px;
}
.twoColFixRt #mainContent {
margin: 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 0px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 0px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
