CSS Forum

**aschecht** · 02-06-2008, 05:08 AM

First off, please be gentle as this is my very first attempt at doing anything with CSS.

Based on the advice of some wise folks from this forum, I'm trying to convert my poorly laid out, table-based site to a CSS layout.
The original site is: http://www.icdmeister.com/site/
The CSS version in development is at: http://www.icdmeister.com/csstest/css_test.htm

The layout is looking pretty nice in IE7 but when I pulled it up in Firefox it was a disaster. What am I doing wrong and what tips can you offer that will make my layout cross-browser compatible?

Thanks,

Andrew

**MarvinLeRouge** · 02-06-2008, 06:30 AM

Hi,

Tips :
1) use a doctype enabling strict layout mode, like any xhtml doctype, for example. It will put IE in strict mode, which will be much more "compliant" with css layout rules.
2) test first on firefox : he's more css-compliant, so let's test with the best one, and then make less corrections for the others : more practical, much faster too.

**aschecht** · 02-06-2008, 11:40 AM

Thanks. I'll give that a try.

A.

**TMS-King** · 02-06-2008, 03:29 PM

Try this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>CSS Test</title>
<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">

body
{
text-align: center;
background-image: url(../site/images/line_bg.jpg);
background-repeat: repeat-x;
background-color: #02B2D7;
}

div.container
{
width: 600px;
margin: 0px auto; 
height: 490px;
text-align: left;
border: 0px;
background-color: #eee;
}

div.header
{
width: 100%;
height: 106px;
background-image: url('../site/images/header.jpg');
background-repeat: no-repeat;
background-color: rgb(0,120,150);
}

div.left
{
	float: left;
	clear: left;
	width: 204px;
	height: 338px;
	background-color: white;
	padding: 8px 3px;
}

div.content
{
	float: right;
	width: 390px;
	height: 338px;
	background-color: white;
}

div.footer
{
	width: 100%;
	height: 50px;
	background-color: #BDD8DD;
	font-family: Verdana;
	font-size: 11px;
	color="#008FAE";
	text-align: center;
	padding: 0.5cm 0 cm;
	clear: both;
}

a.foot:link {color="#008FAE"; text-decoration: none}
a.foot:visited {color="#008FAE"; text-decoration: none}
a.foot:hover {color="#008FAE"; text-decoration: overline underline;}

a.search:link {color="#000000"; text-decoration: none}
a.search:visited {color="#000000"; text-decoration: none}
a.search:hover {color="#000000"; text-decoration: underline;}


div.searchbox
{
float: left;
clear: both;
width: 200px;
height: 45px;
border: 0;
margin-top: 0.4cm;
margin-left: 14px;
padding: 14px 5px 0px 15px;
}

div.advsearch
{
float: left;
clear: both;
position: relative;
top: -15px;
width: 200px;
height: 30px;
border: 0;
margin-left: 14px;
padding: 5px 25px;
font-family: Verdana; 
font-size: 11px; 
font-weight: bold;
color: #000000;
text-decoration: none;
}

div.framenav
{
width: 160px;
height: 30px;
margin: 0.2cm 28% 0 28%;
}

table
{
table-layout: automatic;
table-border: 1;
text-align: center;
border-collapse: collapse;
}

div.iframe
{
width: 100%;
}



</style>
</head>

<body>
<div class="container">
  <div class="header">

		<div class="searchbox">
			<form method="GET" action="search/search.php">
			<input name="zoom_query" size="12">&nbsp;&nbsp;  
            <input type="submit" value="" style="border-style: none; background: url('../site/images/search.jpg') no-repeat; width: 60px; height: 24px; align:center;">
        	</form>		
		</div>
		<div class="advsearch">
			<a class="search" href="http://www.icdmeister.com/site/search/advanced_search.htm">Advanced Search</a>&nbsp;
			<img src="../site/images/Arrow.jpg" alt="" width="5" height="8" />

		</div>
  </div>
  <div class="content">
		<div class="framenav">

			<table border="1" width="100%"><tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>		
			</tr></table>
		</div>

		<div class="iframe">
		
		</div>	
  </div>
	<div class="left">
		<div id="flashcontent">This content requires Macromedia Flash Player.</div>
        	<script type="text/javascript">
  			var so = new SWFObject("menu.swf", "menu", "201", "322", "6", "#FFFFFF"); 
  			so.write("flashcontent"); 
			</script> 
  </div>

	
  <div class="footer">Copyright ©2008 MeisterMed | 
			<a class="foot" href="../about_icdmeister.htm">About ICDMeister</a> |
			<a class="foot" href="http://www.meistermed.com">MeisterMed</a> | 
			<a class="foot" href="../feedback.htm">Feedback</a>
</div>
</div>

</body>

</html>

**LadynRed** · 02-06-2008, 06:44 PM

XHTML isn't necessary, HTML 4.01 Strict would do just as well. In fact, ANY valid doctype is helpful. NOT having one means IE renders in Quirks mode.

**aschecht** · 02-07-2008, 04:09 AM

Thanks! Adding the DOCTYPE line helped as did moving the content div before the left div. I also found some syntax mistakes in my link code which fixed up as soon as I stuck to the rules.

With one small shortcoming, it's now formatted exactly how I want it.
http://www.icdmeister.com/csstest/css_test.htm

On neither browser is the white space above and below the left navigation menu symmetrical. It's pretty close in FF but in IE7 it's a lot larger at the bottom than the top. I can't figure out how to fix this since the only padding that I see that should be influencing this div is the padding: 3px; I added to the div.middle.

Any fixes for this?

Andrew