IE 6 Compatibility Issue

ConnorMHB

10-28-2007, 07:40 PM

i'm very sure it has something to do with width. i'm not sure what is making my calculations off. the left column flows above/into the right when the width is over it's limit. here's the page: http://datawave.medicatedsquid.com/. here's the html 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>
<title>Data Wave</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="design/style_sheets/w3c_style.css" type="text/css" />

</head>
<body>
<div id="wrap">
<div id="header">
<a href="index.php"><img src="design/images/header.jpg" alt="" /></a>
</div>
<div id="menu">
<a href="index.php"><img src="design/images/home_button.jpg" alt="" /></a><a href="about.php"><img src="design/images/about_button.jpg" alt="" /></a><a href="contact.php"><img src="design/images/contact_button.jpg" alt="" /></a><img src="design/images/menu_end.jpg" alt="" />
</div>
<div id="content">
<div id="left_column">
</div>
<div id="right_column">
<?php
include("global_codes/right_column_content.php");
?>
</div>
</div>
<div id="footer">
<?php
include("global_codes/footer_content.php");
?>
</div>
</div>
</body>
</html>

here's the css code:

body {
background: #FFFFFF;
margin: 0px;
}

div#wrap {
margin: auto;
width: 750px;
}

div#header {
height: 89px;
width: 750px;
}

div#header a img {
border: none;
}

div#menu {
height: 71px;
width: 750px;
}

div#menu a img {
border: none;
}

div#content {
margin: 5px 0px 0px 0px;
width: 750px;
}

div#content:after {
clear: both;
content: '';
display: block;
}

div#left_column {
float: left;
width: 500px;
}

div#left_column h1 {
color: #116D3C;
font-family: Arial, Sans;
font-size: 20px;
margin: 0px 0px 5px 0px;
}

div#left_column p {
color: #000000;
font-family: Tahoma, Sans;
font-size: 12px;
margin: 0px 0px 12px 0px;
text-indent: 10px;
}

div#left_column span {
color: #000000;
font-family: Tahoma, Sans;
font-size: 12px;
}

div#left_column span.red {
color: #FF0000;
}

div#left_column a {
color: #2B6A93;
}

div#left_column a:hover {
color: #000000;
}

div#left_column input {
background: url('../images/input_background.jpg') repeat-x;
border: 1px solid #000000;
color: #333333;
font-family: Arial, Sans;
font-size: 11px;
padding: 3px;
width: 150px;
}

div#left_column input.submit {
background: #BBBBBB;
color: #000000;
font-weight: bold;
width: 100px;
}

div#right_column {
float: right;
width: 240px;
}

div#right_column h1 {
color: #000000;
font-family: Arial, Sans;
font-size: 15px;
margin: 0px 0px 5px 0px;
}

div#right_column p {
color: #333333;
font-family: Tahoma, Sans;
font-size: 11px;
margin: 0px;
}

div#log_in_module {
background: #CCCCCC;
padding: 10px;
width: 220px;
}

div#footer {
border: solid #000000;
border-width: 3px 0px 0px 0px;
margin: 10px 0px 0px 0px;
padding: 5px;
text-align: center;
width: 740px;
}

div#footer span {
color: #000000;
font-family: Arial, Sans;
font-size: 11px;
}

Fang

10-28-2007, 08:24 PM

* {
margin:0;
padding:0;
}
img {
vertical-align:bottom;
}
body {
background: #FFFFFF;
margin: 0px;
font:0.7em/1.4 Verdana, Geneva, Arial, Helvetica, sans-serif;
}

ConnorMHB

10-28-2007, 08:44 PM

why exactly did you change my font? also, that didn't even help.

trigger_tre

10-28-2007, 09:20 PM

why exactly did you change my font? also, that didn't even help.

Obviously he is trying to help you with some things you did incorrectly. He might not have solved all your problems but he did address a few.

1.) your html and body in your css needs to have the padding and margins clarified. Which fang did. Though I would have done it slightly differently.

2.) as far as the font. Just declare ONE (1) time in your body and you won't have to make references to it in every other ID tag. Its a waste because not only does it cause more clutter but it also increases the file size of the css when its not necessary.

here is another way of declaring your html and body in your css.

html, body {
margin:0px;
padding:0px;
background:#FFF;
font:0.7em/1.4 Verdana, Geneva, Arial, Helvetica, sans-serif;
}
body {
padding:0px;
}

-trigger

ConnorMHB

10-28-2007, 09:43 PM

i'm very aware of that. i do things a bit differently than most people regardless of the convenience of file and code size. what i don't understand is why the columns don't come out right by my calculations.

is it actually "required" to have your html, and body elements specified to a certain margin and amount of padding?

jlhaslip

10-28-2007, 10:15 PM

You could also reduce some clutter by defining the principal Text colour in the body and then alter it in only those that require changing.

The universal selector (*) is used to eliminate all margins and padding to avoid conflicts with the way various browsers handle padding and margin. Like the colour comment above, simply add the required amount of margin/padding where they are needed. Makes coding easier (cross-browser) .