[Heidenreich12]

hey everyone!

The problem is, that in IE 6 the 3 columns just fall under each other ...so in otherwise its just 1 column. It works fine in ...Firefox, Safari, IE 7, and probally most other broswers. I am unsure on what I would do to fix this. The site that the problem is occuring on is... http://www.ezgraphicstudio.com

[pkcidstudio]

can you post your css i think i know whats up but want to check to make sure

[Heidenreich12]

Theres the link too it. I got a bunch of random crap in the css file...the actual stuff for the columns i have labeled...left...center...etc.
Style CSS

[Spaced]

I'm going to say from quick once over that since IE and other browsers interput padding and margin different you may need to play with your width/paddings on #left, #middle, and #right until you can make it work in all the browsers.

[pkcidstudio]

Code:

/************************ LEFT SIDE COLUMN *****************/
#left {
margin-left:0px
	padding: 5px;
	width:18%;
	}
	
#left h1, #right h1 {
	font-size:15px;
	padding-top:5px;
	font-family:helvetica, arial, georgia, times, sans-serif;
	border-bottom:1px dotted #c4c4c4;
}

#left p {
	font-size:10px;
	padding-bottom:10px;
	margin-top:-3px !important; /*****  FIREFOX  *****/
	margin-top:-14px;             /***** INTERNET EXLORER *****/
	color:#404040;
}	
/************************** MAIN CONTENT IN MIDDLE ******************/

#middle {
 margin-left:250px
	width:54%;
	line-height:1.01em;
	padding-left:3.5%;
	padding-right:3.5%;
}
	
#middle p, p {
	font-size:10px;
	color:#404040;
}

#middle h1 {
	font-family:"Century Gothic", verdana, arial, times, sans-serif;
	font-size:21px;
	font-weight:normal;
	border-bottom:1px solid #c4c4c4;
	padding-bottom:3px;
	margin-top:24px;
}
/***************************  RIGHT COLUMN  *********************/
#right {
 margin-left:500px
	font-size:11px;
	width:18%;
	line-height:1.6em;
}

#right a {
	line-height:2em;
	
}

#right br {
	line-height:0.7em;
}

you might have to edit the numbers but let me know what this does?

[Heidenreich12]

pkcidstudio, i'm not sure which numbers you are talking about. The Margins? I tried taking out all hte padding..etc...just too see waht would happen, but it still had everything in the left column.

[pkcidstudio]

did you try takeing the code i had above and replace with the propper sections?
numbers= the margin number in case you want it further from one side

[Heidenreich12]

ok, i did what you said, and copied the given code. Pretty much the same thing happenend. Everything went under each other. Except, they were not all under each other in the left column. They were in their columns, but still moved under the one before them. I played around with the settings but they still stayed in the same area....any other ideas? Btw...it looked like that in IE and Firefox when i did what i was explaining above.

[pkcidstudio]

Code:

/************************ LEFT SIDE COLUMN *****************/
#left {
position:absolute;
margin-left:0px;
	padding: 5px;
	width:18%;
	display: block;
	clear:both;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#CCCCCC;
	font-size: 11px;

	}
	
#left h1, #right h1 {
	font-size:15px;
	padding-top:5px;
	font-family:helvetica, arial, georgia, times, sans-serif;
	border-bottom:1px dotted #c4c4c4;
}

#left p {
	font-size:10px;
	padding-bottom:10px;
	margin-top:-3px !important; /*****  FIREFOX  *****/
	margin-top:-14px;			 /***** INTERNET EXLORER *****/
	color:#404040;
}	
/************************** MAIN CONTENT IN MIDDLE ******************/

#middle {
position:absolute;
	clear:none;
 margin-left:250px;
	width:54%;
	line-height:1.01em;
	padding-left:3.5%;
	padding-right:3.5%;
}
	
#middle p, p {
	font-size:10px;
	color:#404040;
}

#middle h1 {
	font-family:"Century Gothic", verdana, arial, times, sans-serif;
	font-size:21px;
	font-weight:normal;
	border-bottom:1px solid #c4c4c4;
	padding-bottom:3px;
	margin-top:24px;
}
/***************************  RIGHT COLUMN  *********************/
#right {
position:absolute;
	clear:right;
 margin-left:500px;
	font-size:11px;
	width:18%;
	line-height:1.6em;
}

#right a {
	line-height:2em;
	
}

#right br {
	line-height:0.7em;
}

let me know just go ahead and copy and paste this into place
just tested this works-

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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="left">bla la la</div>
<div id="middle">dsfhldsfjkdklj</div>
<div id="right"><b>dfdsfdsfs</b></div>
</body>
</html>

[Heidenreich12]

thanks for all the help that your giving me on this. That actually didn't work out either..lol. I think its because of the properties for the header...etc..so i would have to add more margin's and play around with it a bit more. But i can use what you gave me as a sort of building block for it. I've also went to another site and posted the same thing, and they are giving me some feedback as well, so i will post what i get to work hopefully soon!