CSS layout problem in everything EXCEPT Internet Explorer

[bassdog65]

Alright, simple two column layout using this CSS style sheet.

* { padding: 0; margin: 0; }

body {
font-family: Calibri;
font-size: 13px;
color: white;
}
#wrapper { 
margin:0 auto;
width: 925px;
}
#faux {
font-family:Calibri; 
font-size: 16px;
background: url(../images/faux-1-2-col.gif);
margin-bottom: 0px;
width: 100%;
}
#faux2 {
font-family:Calibri;
font-size: 16px;
background: url(../images/faux-plans-col.gif);
margin-bottom: 0px;
width: 100%;
}
#header {
color: #333;
width: 925px;
padding: 0px;
height: 50px;
margin: 10px 0px 0px 0px;
background: black;
}
#navigation {
color: #333;
width: 922px;
padding: 0px;
margin: 0px 0px 0px 0px;
background: black;
}
#leftcolumn {
display:inline;
color: #333;
margin: 0px;
padding: 0px;
width: 185px;
float: left; 
}
#rightcolumn {
float:right;
font-family:Arial; 
color: white;
margin: 0px;
padding: 0px;
width: 740px;
display:inline;
position:relative;
}
#footer { 
text-align:center;
width: 895px;
clear: both;
color: #333;
background:#464646;
margin: 0px 0px 0px 0px;
padding: 15px;
}
a:link {
font-family:"Arial Rounded MT Bold";
font-size: 14px;
color: white; 
}
a:visited {
font-family:"Arial Rounded MT Bold";
font-size: 14px;
color: white; 
}
a:hover {
color: gray; 
}

}
.clear { 
clear:both; 
background: none; }
.error {
font-weight:bold; 
color:red; }
.navlinks {
margin:15px;}
.style22 {
margin:10px 10px 10px 10px;}
.style23 {
font-weight:bold;
color: white;
}

 

It is being called up by plans.php...which is this...

 

<?php
include ('includes/header.php');
?>

<!-- Begin Columns -->
<div id="faux2">

	<!-- Begin Left Column -->
	<div id="leftcolumn">
	<?php include ('includes/leftnav.php'); ?>
	<div class="clear"></div>
	</div>
	<!-- End Left Column -->

	<!-- Begin Right Column -->
	<div id="rightcolumn">
	<h1>Placeholder</h1>
	<div class="clear"></div>
	</div>
	<!-- End Right Column -->
		   
<div class="clear"></div>
</div>	   
<!-- End Columns --> 

<?php
include ('includes/footer.php');
?>

 

I don't think the problem is in my header script, but it may be.  The problem is, when I go to the site in Internet explorer, it is fine, but when I go in firefox, safari, opera, or chrome i get a weird spacing issue.  Now normally my errors are the other way around, so I figure its a coding error with my CSS, but I don't knwo what I am missing.

 

If you want to see the space the semi-live page can be seen at http://ecommerce.premierw.com

Choose any location and choose plans...i would give a direct link, but I have a PHP script forcing the choice of a location.

 

Help!

[haku]

If the problem is in all browsers other than IE, your code is flawed. Re-code it to work in another browser, then go back and fix it to work in IE. The way you are doing it now (IE -> other browsers) means you are trying to hack broken code to work in standards compliant browsers, after defaulting to a browser that isn't compliant (IE). This will only cause you hours of headaches.

 

You will save yourself hours of troubles if you just develop in another browser first, and completely ignore IE. Then after you have it going in the other browsers, you can adjust/use conditional comments/hack to work in IE.

[bassdog65]

Understood.  But my question is, I can't seem to get it to work in any browser at all, so I know the code is flawed, and I can't figure out what I am doing wrong.

 

I don't know enough about CSS yet to see my error.

[ifubad]

No exactly sure what spacing problems you're talking about, just looked at it in IE6, practically identical to FF, except FF is showing a bit more space right below the H menu. First, fixed the validation errors, there are 60 of them.

[dropfaith]

Never opens a table

 

         <div id="footer">
	       
	<tr>

		<td><a href="index2.php">Home</a>&nbsp | &nbsp<a href="plans.php">View Plans</a>&nbsp | &nbsp<a href="features.php">View Features</a>&nbsp | &nbsp<a href="megatalk.php">MEGAtalk Plans</a>&nbsp | &nbsp<a href="promotions.php">Current Promotions</a>&nbsp | &nbsp<a href="aboutc34.php">About Us</a>&nbsp | &nbsp<a href="locationc34.php">Location</a></td>

	</tr>

         </div>

 

whats this do <td align="left" width="20%"></td> (i only ask becuase theres nothing in it and theres 5 divs on that line seems odd that your setting width in in empty div

Make sure all your code validates too will help out alot

 

[dropfaith]

upon looking in other browsers they do kinda all look alike'

 

http://browsershots.org/http://ecommerce.premierw.com/index2.php?lid=1

[haku]

I looked at it.

 

Set a fixed height to the left column to remove the bottom gap. 327px seems to work.

 

You can fix the top menu by adding this to each of the anchor tags:

 

height: 33px;

display: block;

 

 

[bassdog65]

If i set a fixed height to the left column then it doesnt dynamically resize when there is more content on the right column.  basically i have a background that repeats over and over so that if there is more stuff in the right column, the background will follow all the way down regardless of how much information is there.

 

for a few of the other responses, thank you for the responses, but the screenshots taken are of the main page, and the major problem i am having is with a gap on the plans page. at the bottom of the plans page there is a huge gap between the end of the columns and the footer, and at the top there is a small gap between the navigation buttons and the columns.  neither of them show in IE, so its clearly a coding error.

 

@ifubad: if there are validation errors, what are the errors you are seeing, and if you could point out what i am doing wrong with the code to get the errors, it might point me in the right direction to get them all sorted out.

[haku]

Then you need to cut the bottom off of the background image you are using for the left column. You can do this with a photo editor.

[bassdog65]

the background image itself isn't the problem, because it has no black space, its only about 3 pixels high, it is just repeated vertically behind both columns.  the reason i don't think it is the background causing the space is because the background always shows up, but then it abpruptly stops and there is space between the bottom of my two columns and the footer.

[bassdog65]

OK, I think I have found the source of the problem, but I am not sure what is making it behave like this.  Basically on all of my other pages, I have one area between the header and the footer, and the tiled background goes behind the text, or images, or anything else, and the formatting for that works fine, but when I try to do two column on the plans.php page, that is what causes the errors.  If I tile the background and remove the DIV tags that call #leftcolumn and #rightcolumn so it is just one area, it works fine, but then I cant separate my two columns to make them line up next to each other.  Maybe I need to just go back to my CSS book and reread the entire section...