Columns aren't correct width in IE

jordanwb · August 26, 2008

What else is new: IE not rendering CSS properly. If you go to http://99.224.95.32/scm in Firefox everything looks right (I enabled borders to see the problem). But if you go to the site in IE, the center column is really narrow, and the first and third column are really wide.

RalphOrange · August 26, 2008

It doens't look like the widths are set for each. They can usually be expressed in pixels.

jordanwb · August 26, 2008

It doens't look like the widths are set for each. They can usually be expressed in pixels.

Yes they are. The first and third column's widths are set to 200 pixels.

RalphOrange · August 27, 2008

I loaded it in expression web and played around with it a little bit. I set the width for container 3 and it seems to look ok. It just looks like one of the colums is not dimensioned.

jordanwb · August 27, 2008

Well yeah the center column doesn't have the width set because the container class' width is a percentage. I could set everything to a fixed width.

jordanwb · August 27, 2008

I set everything to a fixed width and it still doesn't render correctly.

TheFilmGod · August 28, 2008

why did you set 'colspan="2" ' for the middle < td>? Doesn't make sense!

jordanwb · August 28, 2008

There are never 4 real columns, but I manipulate the table into acting like there are four. There are four rows: breadcrumb, content, lower content, and footer. The first and fourth row spans four columns. In the second row the second column spans two columns. In the third row, the two columns span two columns, so that it'll give this look:

_______________
|______________|
|     |           |    |
|___|_______|___|
|           |           |
|_______|_______|
|                        |
|_______________|

[Edit] Stupid spacing.

TheFilmGod · August 28, 2008

I was feeling nice today (again) and so I coded your website for you in pure css. I have given up trying to make people to convert to the PURE CSS religion so I started giving out free stuff like this.

Enjoy!

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<style type="text/css">
  			@import url("test.css");
	</style>

	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

	<title>Jordan's Site Content Manager - Template Test</title>

</head>

<body>

<!-- Html Page Div -->
<div id="html_page">

<!-- Header -->

<div id="header">
<h1>Stuff Goes Here</h1>
</div>

<div id="body">

<div class="banner">
	<h1>Banner</h1>
</div>

<div class="column1">
	Column1
</div>
<div class="column2">
	Column2
</div>
<div class="column3">
	Column3
</div>
<div class="clear"></div>

<div class="left">
	<p>Left</p>
</div
<div class="right">
	<p>Right</p>
</div>
<div class="clear"></div>

</div>

<div id="footer">
Created by Greg Solak.
</div>

<!-- End of HTML Page Div -->
</div>

</body>

CSS:

/* Master CSS - controls basic layout - Copyright Greg Solak */

/* Change of browser default properties */

body{margin: 10px auto 30px 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px;}

a {text-decoration: none;}
a:hover {text-decoration: underline;}

* {margin: 0;padding:0}

/* Layout Div */

#html_page {margin: auto; width: 1000px; border: 1px solid #000;}

.clear {clear: both; height: 0px;}

/* Header */

#header {
border: 1px solid #ccc;
padding: 50px;
text-align: center;
}

/*  Body*/

#body {
text-align: center;
}
#body .banner {
margin: 10px 0 5px 0;
border: 1px solid #ccc;
padding: 20px;
}

#body .column1 {
width: 200px;
height: 250px;
padding: 25px 0 0 0;
float: left;
background: #aaa;
}
#body .column2 {
width: 600px;
height: 250px;
padding: 25px 0 0 0;
float: left;
}
#body .column3 {
width: 200px;
height: 250px;
padding: 25px 0 0 0;
float: left;
background: #aaa;
}

#body .left {
margin: 10px 0 0 0;
padding: 25px 0 10px 0;
float: left;
width: 500px;
background: #eee;
}
#body .right {
margin: 10px 0 0 0;
padding: 25px 0 10px 0;
float: right;
width: 500px;
background: #ccc;
}

#footer {
margin: 15px 0 5px 0;
font-weight: bold;
text-align: center;
}

The css should be straight forward, if you need help just holler.

jordanwb · August 28, 2008

All right that worked.

Thanks.

jordanwb · August 28, 2008

Is there some advantage to using

		<style type="text/css">
  			@import url("test.css");
	</style>

as opposed to

<link href="test.css" rel="stylesheet" />

jordanwb · August 28, 2008

I wish I could edit my posts. I implemented pretty much everything you showed. It looks good in FF and IE, but in IE there's a big space above the footer and the left and right section. Any ideas?

TheFilmGod · August 28, 2008

I wish I could edit my posts. I implemented pretty much everything you showed. It looks good in FF and IE, but in IE there's a big space above the footer and the left and right section. Any ideas?

Stupid IE! I was only using FF when coding the website. I'll look into later tonight. I have some stuff to do before hand. It's odd though, because it's basic css stuff!

Oh, and there really isn't a huge advantage to using @import opposed to link href. I just prefer using the @import since it's easier to link up 3 or 4 stylesheets at once. I feel like its more "web 2.0" but it really boils down to preference.

Haku, may tell you the main difference though. He says their is a bug when using @import concering :hover... but I really don't know.

jordanwb · August 28, 2008

Stupid IE! I was only using FF when coding the website. I'll look into later tonight. I have some stuff to do before hand. It's odd though, because it's basic css stuff!

Yours worked perfectly in IE, however my implementation doesn't work quite right.

Oh, and there really isn't a huge advantage to using @import opposed to link href. I just prefer using the @import since it's easier to link up 3 or 4 stylesheets at once. I feel like its more "web 2.0" but it really boils down to preference.

Okee dokee

Haku, may tell you the main difference though. He says their is a bug when using @import concering :hover... but I really don't know.

All right.

[Edit]

I found is has to do with this line:

<div class="clear"></div>

In IE even though the height is set to 0px, in IE they still have height.

jordanwb · August 28, 2008

Let me edit dammit. I can fix it by setting the clear class' height to a negative value.

TheFilmGod · August 29, 2008

Hey the problem is that one div tag wasn't complete! I forgot a "<"!

	<div class="left">
	<p>Left</p>
</div
<div class="right">
	<p>Right</p>
</div>
<div class="clear"></div>

See that "</div" that should be "</div>".

Just change it! Checking if it was valid would have helped, but since someone else wrote it for you, I'm sure you assumed it already was valid! Sorry about that!

jordanwb · August 29, 2008

I did notice that but that wasn't the problem. In the .clear class I set the height to -7 and it works.

TheFilmGod · August 29, 2008

I did notice that but that wasn't the problem. In the .clear class I set the height to -7 and it works.

no no. You can not do that! The top gap or the correct term is "margin-top" is actually created by the other float boxes! If you want to get rid of a gap like that you need to change the css! I can do this for you, just tell me which gap or vertical space you are talking about. Trust me, you NEVER want to use negative heights. That's just illogical.

jordanwb · August 29, 2008

I can do this for you, just tell me which gap or vertical space you are talking about.

All right I'll change it back. It's a gap above the two box row and the footer.

TheFilmGod · August 29, 2008

alright... well it's time for you to learn some css. First step is for you to use pure css layouts and then learn how to manipulate them. Open the css page that I made for you. Find the "gap" you want take out. The gap is created by the a margin: __ something something something;

So you need to find the element(s) that are creating these gaps. In this situation you want to take out the gap ABOVE the two boxes. So the gap is created by the two boxes. If you look in the html you see the two boxes are called "class="left"" and class="right" so go to the css box and find a the classes with this. Change the first number of the margin: declaration to 0.

#body .left {
margin: 0 0 0 0;
padding: 0;
float: left;
width: 500px;
background: #eee;
}
#body .right {
margin: 0 0 0 0;
padding: 0;
float: right;
width: 500px;
background: #000;
}

That should be final result! You are quite welcome. I'll send the bill in the mail - just kidding.

EDIT: I'm more than willing to help, but I can't do EVERYTHING for you. Try playing around with the "margin." Change one thing at a time, and see how it interacts!

jordanwb · August 29, 2008

Okay I think we're done here.

Sign In

Columns aren't correct width in IE

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information