PDA

View Full Version : Cross Browser


bunny1
07 Nov 2009, 04:51 PM
Im finding it hard to make my site look right for Chrome and Safari.
I am aware these are the same so if i can fix for one it will be the same for the other.
This site looks good in IE7 and FF3.

Any advice??

http://www.inafrenzy.com/secure/site/socio_video.htm



@charset "utf-8";

body {
margin:0px auto;
padding:0px;
text-align: left;
background: #96B4CE;
}
* {
margin: 0;
padding: 0;
border: 0;
}
#wrap {
background:#96B4CE url(images/bg2.jpg) no-repeat;
background-position: top;
background-position: center;
text-align:center;
height:1418px;
margin: 0 auto;
padding: 0;
width: 1002px;
}
#top {
position:relative;
margin-left:780px;
top:6px;
clear: both;
}
#nav {
margin: 0px auto 0;
position:relative;
clear: both;
top: -10px;
z-index:2;
}
#welcome {
margin: 0px auto 0;
position:relative;
clear: both;
margin-left:6px;
top: -4px;
}
#main {
margin: 0px auto 0;
position:relative;
float:left;
margin-top:-25px;
text-align:center;
clear: both;
width:530px;
}
#search {
margin-left:690px;
top:-150px;
z-index:2;
display: inline;
position:relative;
clear: both;
}
#leftcolumn {
margin: 0px auto 0;
position:relative;
clear: both;
}
#middlecolumn {
margin-left:480px;
position:relative;
clear: both;
margin-top:-1002px;
}
#rightcolumn {
margin-left:780px;
position:relative;
clear: both;
margin-top:-940px;
}
#banner {
position:relative;
margin-left:440px;
margin-top:-60px;
top:-200px;
clear: both;
}
.style1 {font-family: "Arial Rounded MT Bold"; font-size: x-small; color: #FFFFFF;}
.style2 {font-family: "Arial Rounded MT Bold"; font-size: 14px; color: #FFFFFF}
.style3 {font-family: "Arial Rounded MT Bold"; font-size: 14px; color: #999999}



<!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=utf-8" />
<title>Inafrenzy Socio Video</title>
<link href="style_sociovideo.css" rel="stylesheet" type="text/css" />
</head>

<body><div id="wrap">

<div class="style1" id="top">Join! &nbsp;&nbsp;|&nbsp;&nbsp; Sign In &nbsp;&nbsp;|&nbsp;&nbsp; Help</div>

<div id="nav">
<img src="images/navigationsv.png" alt="" align="top" /> </div>

<div id="welcome">
<img src="images/welcomevideo.png" alt="" align="top" /> </div>

<div id="banner">
<img src="images/banner.png" alt="" /> </div>

<div id="search">
<input name="textfield" type="text" id="textfield" style="height: 19px;" value="" size="14" />&nbsp; <img src="images/search.png" align="middle" alt="Search" /> </div>

<div id="main">

<div id="leftcolumn">
<p><img src="images/videobox.png" alt="" align="bottom" /></p>
<p></p>
<p><img src="images/vote.png" alt="" align="top" /></p><br />
<p><img src="images/commenttitle.png" alt="" align="top" /></p>
<p></p>
<br />
<p><img src="images/comments.png" alt="" align="top" /></p>
</div>

<div id="middlecolumn">
<p><img src="images/relatedvideo.png" alt="" align="top" /><br /></p>
<p><img src="images/relatedvideocontent.png" alt="" /><br /></p><br />
<p><img src="images/morefromthissubmittertitle.png" alt="" /><br /></p>
<p><img src="images/morefromthissubmitter.png" alt="" /><br /></p>
<p><img src="images/sponsoredvideos.png" alt="" /><br /></p>
<p><img src="images/sponsoredvideoscomments.png" alt="" /><br /></p>


</div>

<div id="rightcolumn">
<p /><img src="images/advert.png" alt="" align="top" />

</div>
</div>
</div></body></html>