IE / Firefox layout - help please

jarv · 02-04-2008, 06:41 PM

as you can see my website, the left collumn is in teh center in IE and looks alright in Firefox: http://www.mypubspace.com/wr/

why is this and can someone please help?!

css:

Code:

/* CSS Document */
body{
background-color:#000000;
}
#Wrapper{
margin: auto;
width:1024px;
height:768px;
border:#666666 thin solid;
background-image:url(../images/bg.gif);
background-repeat:repeat-x;
}
#top_left{
clear:both;
float:left;
width:403px;
height:246px;
background-image:url(../images/top_left.jpg);
background-repeat:no-repeat;
}
#top_right{
width:621px;
height:246px;
background-image:url(../images/top_right.jpg);
background-repeat:no-repeat;
float:right;
}
#opacity_nav{
width:621px;
height:28px;
background-color:#000000;
opacity:0.4;filter:alpha(opacity=30);
margin-top:100px;
z-index:0;
}
#linksinnavbox
{
padding-left:15px;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
a.nav:link{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;
font-weight:bold;
z-index:0;
}
a.nav:active{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;
font-weight:bold;
}
a.nav:hover{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;
font-weight:bold;
}
a.nav:visited{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;
font-weight:bold;
}
#leftcollumn
{
float:left;
clear:both;
position:absolute;
width:200px;
height:582px;
margin-top:184px;
border-right:#333333 2px groove;
border-top:#333333 2px groove;
background-color:#000000;
opacity:0.4;filter:alpha(opacity=30);
color:#FF6600;
}
#center
{
	left:340px;
	top:200px;
	position:absolute;
	width:590px;
	height:480px;
	z-index:0;
	border-top: 2px groove #333333;
	border-bottom: 2px inset #333333;
}
#ad
{
left:330px;
float:left;
clear:both;
position:absolute;
width:570px;
height:110px;
padding:10px;
top:680px;
}
#rightad
{
position:absolute;
width:180px;
height:570px;
margin-bottom:50px;
background-color:#333333;
border: thin #000000 solid;
float:right;
clear:all;
top:198px;
left:945px;
}
#headertext
{
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
color:#FFFFFF;
padding-top:20px;
padding-left:20px;
border-bottom:#FFFFFF 1px solid;
}
#contenttext_right
{
clear:both;
width:95%;
height:400px;
float:right;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
padding-top:20px;
padding-left:20px;
scrollbar-3dlight-color:#fff;
scrollbar-arrow-color:#fff;
scrollbar-base-color:#fff;
scrollbar-darkshadow-color:#fff; 
scrollbar-face-color:#666666;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#fff;
overflow: auto;
}
#mainpic{
float:left;
width:348px;
height:279px;
float:left;
}

jcdevelopment · 02-04-2008, 06:57 PM

if you dont mind me asking whu are you positioning the left nav absolutely? You probably dont need to do that. here is a great site for layouts with 3 columns http://blog.html.it/layoutgala/ .

jarv · 02-04-2008, 07:52 PM

thanks but the site is in italian, i removed the absolute positioning and i am still having problems?!

jcdevelopment · 02-04-2008, 08:00 PM

ok, try this, just replace this with the old one

Code:

#leftcollumn
{
float:left;
clear:left;
position:relative;
width:200px;
height:582px;
margin-top:0px;
border-right:#333333 2px groove;
border-top:#333333 2px groove;
background-color:#000000;
opacity:0.4;filter:alpha(opacity=30);
color:#FF6600;
}

jarv · 02-04-2008, 08:37 PM

thanks, I think i messed up the HTML, could you please have a look at the HTML?

Code:

<body>
<div id="Wrapper">
		
		<div id="top_left"></div>
		<div id="leftcollumn">lefter</div>	
		<div id="top_right"><div id="opacity_nav">
				<div id="linksinnavbox"><a href="#" class="nav">hello</a>				
			</div>		
		</div>
			
				<div id="center"><div id="headertext">Staples to Naples</div>
				<div id="contenttext_right"><div id="mainpic"><img src="images/mapmain.jpg" border="0" title="Staples to Naples" alt="Staples to Naples" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ante massa, auctor eu, rhoncus commodo, tempus non, ipsum. Sed sollicitudin, augue ac bibendum dapibus, tortor lectus dapibus dolor, sed vulputate ligula nibh vel elit. Phasellus dolor. Donec nec neque sed diam hendrerit venenatis. Vivamus mattis est sed diam. Nullam et augue. Quisque consectetuer laoreet purus. Aenean varius libero ut nunc. Donec quam viverra eleifend bibendum.

Start :: Calais – France
Finish :: Naples – Italy
Miles :: 1450
Days :: 5</div></div>
		  </div></div>
  </div>
		
			
		<div id="ad">
		<img src="images/eclipse_logo.jpg" alt="Eclipse leisure" title="Eclipse Leisure" border="0" />
		<img src="images/medecins_logo.jpg" alt="Medecins Sans Frontiers" title="Medecins Sans Frontiers" border="0" />
		<img src="images/aa_logo.jpg" alt="The AA" title="The AA" border="0" />
		<img src="images/fb_logo.jpg" alt="FaceBook" title="FaceBook" border="0" />
		<img src="images/justgiving_logo.jpg" alt="Just Giving" title="Just Giving" border="0" />
		</div>
		<div id="rightad">right ad</div>
		
</div></div></div>
</div>
</body>

jcdevelopment · 02-04-2008, 08:55 PM

yeah, it looks as if you need to take the left column out of the top divs, and place it right below them, because i guess it was absolute positioned so you put it anywhere but now it matters, see how that works!!

barkermn01 · 02-04-2008, 10:04 PM

the answer is dont support Firefox lol
Firefox was a grate idear but i have never got div styles to work
but i dont know how to do it but you can try XSL it might work better