...

View Full Version : Alignment in FF and IE



bunny1
11-02-2009, 11:44 PM
Hi

I cannot get the alignment to work in both IE and FF. It works in one and then not in the other.

Here is my code:


@charset "utf-8";

body {
margin:0px auto;
padding:0px;
text-align: center;
background: #96B4CE;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
background:#96B4CE url(images/bg2.jpg) no-repeat;
background-position: top;
background-position: center;
width: 1024px;
height:1106px;
margin: 0 auto;
padding: 0;
z-index:1;
}
#top {
position:relative;
left:750px;
top:6px;
width:151px;
height:22px;
z-index:1;
}
#nav {
width: 715px;
height: 145px;
margin: 0px auto 0;
position:relative;
top: -14px;
}
#main {
width: 715px;
margin: 0px auto 0;
position:relative;
left:0px;
top:-105px;
}
#search {
left:270px;
top:-115px;
z-index:2;
width: 255px;
height: 30px;
display: inline;
position:relative
}
#Haves {
position:relative;
left:-58px;
top:-24px;
width:121px;
height:38px;
z-index:2;
}
#Wants {
position:relative;
left:70px;
top:-62px;
width:102px;
height:43px;
z-index:2;
}
#banner {
position:relative;
left:560px;
top:-130px;
width:344px;
height:71px;
z-index:1;
}
#footer {
position:relative;
left:7px;
top:-100px;
width:728px;
height:17px;
z-index:1;
}

.style1 {font-family: "Arial Rounded MT Bold"; font-size: x-small; color: #FFFFFF;}
.style2 {font-family: "Arial Rounded MT Bold"; font-size: small; color: #FFFFFF}
.style3 {font-family: "Arial Rounded MT Bold"; font-size: small; color: #999999}
.style4 {font-family: "Arial"; font-size: 11px; color: #747474}



<!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</title>
<link href="style.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/navigation.png" alt="" align="texttop" />
<img src="images/welcome-to-inafrenzy.jpg" alt="" width="705" height="81" align="top" /></div>

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

<div id="search">
<input name="textfield" type="text" id="textfield" value="" size="14" />&nbsp; <img src="images/search.png" align="absmiddle">
</div>

<div id="Haves" class="style2">
<p>&nbsp;</p>
<p class="style2">Recently Added Haves</p>
</div>

<div id="Wants" class="style3">
<p>&nbsp;</p>
<p class="style3">Recently Added Wants</p>
</div>

<div id="main">
<table width="705" border="0" align="top">
<tr>
<td width= "31%"><p><img src="images/video.png" alt="" align="texttop" /></p>
<p>&nbsp;</p>
<p><img src="images/justjoined.png" alt="" align="texttop" width= "210"/></p>
<p><img src="images/newusers.png" alt="" align="texttop" width="210"/></p>
<p>&nbsp;</p>
<p><img src="images/mostpopular.png" alt="" align="texttop" width="210" /></p>
<p><img src="images/newusers.png" alt="" align="texttop" width="210"/></p>
<p>&nbsp;</p>
<p>&nbsp;</p></td>
<td width = "40%"><h1><em>
<label><img src="images/middlecontent.png" alt="" align="texttop" /><br />
<img src="images/donebarters.png" alt="" width="275" height="31" /><br />
<img src="images/donebarterscontent.png" alt="" width="275" height="288" /><br />
<br />
</label>
</em></h1>
<p></p></td>
<td width = "29%" valign="top"><p></p>
<img src="images/alerts.png" alt="" width="200" height="31" align="texttop" />
<p><img src="images/categories.png" alt="" /></p>
<p><img src="images/tags.png" alt="" width="191" height="30" /></p>
<p align="center"> <img src="images/tagwords.png" alt="" align="absmiddle" /></p>
<p><img src="images/stalkuseverywhere.png" alt="" width="191" height="24" /></p>
<p><img src="images/stalk.png" alt="" width="191" height="176" /></p>
<p>&nbsp;</p></td>
</tr>
</table>
</div>
<div id="footer" class="style4" align="left">

&nbsp; 2009 Inafrenzy.com. All rights reserved.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; About | Site Map | Blog | Terms &amp; Conditions | Privacy Statement | Help</div></div></body></html>

Any ideas?

Thanks!

Paweł
11-03-2009, 12:35 AM
body{text-align:center;}
#wrap{text-align:left;margin:0 auto;}
Try to add these styles and get rid of margin:0 auto; for body. I haven't tested Your code, just given tips. Hope they'll work ;)

bunny1
11-03-2009, 10:39 AM
That hasnt made any difference.

From what i've read online i should code for FF and adjust for IE. However, i don't know what i can change in the code that will affect IE but not FF.

I have tried removing all whitespace and it hasnt worked.

Any other suggestions?

Thank you in advance

SB65
11-03-2009, 11:01 AM
What alignment are you talking about? The table?

It looks pretty similar in IE7 and FF3 to me.

bunny1
11-03-2009, 12:12 PM
I have fixed the page to be correct in FF.

The divs that appear out of line in IE are:

Top
Search
Wants
Haves
Footer


These are all out of line

Here is the updated code that is correctly aligned for FF.


@charset "utf-8";

body {
margin:0px auto;
padding:0px;
text-align: center;
background: #96B4CE;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
background:#96B4CE url(images/bg2.jpg) no-repeat;
background-position: top;
background-position: center;
text-align:center;
width: 1024px;
height:1106px;
margin: 0 auto;
padding: 0;
z-index:1;
}
#top {
position:relative;
left:750px;
top:6px;
width:151px;
height:22px;
z-index:1;
}
#nav {
width: 715px;
height: 145px;
margin: 0px auto 0;
position:relative;
top: -14px;
}
#main {
width: 715px;
margin: 0px auto 0;
position:relative;
left:0px;
top:-105px;
}
#search {
left:270px;
top:-115px;
z-index:2;
width: 255px;
height: 30px;
display: inline;
position:relative
}
#Haves {
position:relative;
left:390px;
top:-24px;
width:121px;
height:38px;
z-index:2;
}
#Wants {
position:relative;
left:525px;
top:-62px;
width:102px;
height:43px;
z-index:2;
}
#banner {
position:relative;
left:560px;
top:-130px;
width:344px;
height:71px;
z-index:1;
}
#footer {
position:relative;
left:152px;
top:-100px;
width:728px;
height:17px;
z-index:1;
}

.style1 {font-family: "Arial Rounded MT Bold"; font-size: x-small; color: #FFFFFF;}
.style2 {font-family: "Arial Rounded MT Bold"; font-size: small; color: #FFFFFF}
.style3 {font-family: "Arial Rounded MT Bold"; font-size: small; color: #999999}
.style4 {font-family: "Arial"; font-size: 11px; color: #747474}


<!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</title>
<link href="style.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/navigation.png" alt="" align="texttop" />
<img src="images/welcome-to-inafrenzy.jpg" alt="" width="705" height="81" align="top" /></div>

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

<div id="search">
<input name="textfield" type="text" id="textfield" value="" size="14" />&nbsp; <img src="images/search.png" align="absmiddle">
</div>

<div id="Haves" class="style2">
<p>&nbsp;</p>
<p class="style2">Recently Added Haves</p>
</div>

<div id="Wants" class="style3">
<p>&nbsp;</p>
<p class="style3">Recently Added Wants</p>
</div>

<div id="main">
<table width="705" border="0" align="top">
<tr>
<td width= "31%"><p><img src="images/video.png" alt="" align="texttop" /></p>
<p>&nbsp;</p>
<p><img src="images/justjoined.png" alt="" align="texttop" width= "210"/></p>
<p><img src="images/newusers.png" alt="" align="texttop" width="210"/></p>
<p>&nbsp;</p>
<p><img src="images/mostpopular.png" alt="" align="texttop" width="210" /></p>
<p><img src="images/newusers.png" alt="" align="texttop" width="210"/></p>
<p>&nbsp;</p>
<p>&nbsp;</p></td>
<td width = "40%"><h1><em>
<label><img src="images/middlecontent.png" alt="" align="texttop" /><br />
<img src="images/donebarters.png" alt="" width="275" height="31" /><br />
<img src="images/donebarterscontent.png" alt="" width="275" height="288" /><br />
<br />
</label>
</em></h1>
<p></p></td>
<td width = "29%" valign="top"><p></p>
<img src="images/alerts.png" alt="" width="200" height="31" align="texttop" />
<p><img src="images/categories.png" alt="" /></p>
<p><img src="images/tags.png" alt="" width="191" height="30" /></p>
<p align="center"> <img src="images/tagwords.png" alt="" align="absmiddle" /></p>
<p><img src="images/stalkuseverywhere.png" alt="" width="191" height="24" /></p>
<p><img src="images/stalk.png" alt="" width="191" height="176" /></p>
<p>&nbsp;</p></td>
</tr>
</table>
</div>
<div id="footer" class="style4" align="left">

&nbsp; 2009 Inafrenzy.com. All rights reserved.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; About | Site Map | Blog | Terms &amp; Conditions | Privacy Statement | Help</div></div></body></html>

Thank you

SB65
11-03-2009, 12:23 PM
Can you post a link to your page? It's difficult/impossible without the images..



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum