This is the page that I am putting together:
http://www.reiki-evolution.co.uk/dra...urse-dates.htm
The site consists of three columns: a sidebar floated left, a sidebar floated right, and the 'main content' which has wide margins to accommodate the floated sidebars.
I am working on the main content. I have information that needs to be displayed in a table. When I view the page in Firefox or Safari or Netscape I see what I intended, with the table restricted to the 'main content' div.
When I view the page in IE, the table begins below the content of the two sidebars and the table breaks free from the confines of the 'main content' div, ranging to the right and overlapping the right sidebar div.
Here is the CSS that I am using:
-
Setting up the divisions
-
-----------------------------
-
#content {
-
background-color:white;
-
margin-left:15%;
-
margin-right:18%;
-
margin-bottom:0px;
-
padding:0 10px 10px 10px;
-
}
-
-
#sidebar_b {
-
float:right;
-
width:15%;
-
margin-bottom:10px;
-
margin-top:10px;
-
padding:10px;
-
}
-
-
#sidebar_a {
-
float:left;
-
width:12%;
-
margin-bottom:10px;
-
margin-top:10px;
-
padding:10px;
-
}
-
-
CSS for the Table
-
-----------------------
-
-
table #coursetab {
-
border:1px solid #333;
-
font: normal 1.0em 'Lucida Grande Unicode', 'Lucida Grande', Verdana, Arial, Sans-serif;
-
}
-
-
#coursetab th, td {
-
border:1px solid #333;
-
padding:3px;
-
vertical-align:top;
-
}
-
-
#coursetab th {
-
width:15%;
-
text-align:left;
-
color:purple;
-
background-color:#EDE9E9;
-
}
-
-
#coursetab td {
-
background-color:#EDE9E9;
-
border-style:solid;
-
border-width:1px;
-
border-color:#FFF #AAA #666 #FFF;
-
}
-
-
#coursetab tr th img {
-
width:80px;
-
margin-top:10px;
-
}
-
HTML used for the table
------------------------------
<table id="coursetab" align="center">
followed by simple <tr>, <th>, <td> etc.
How do I persuade IE to display what I can see on Firefox, Safari etc?
Many thanks,
Taggart King
