Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    92
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Alignment in FF and IE

    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:

    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}

    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=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!

  • #2
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    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

  • #3
    New Coder
    Join Date
    Feb 2007
    Posts
    92
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    What alignment are you talking about? The table?

    It looks pretty similar in IE7 and FF3 to me.

  • #5
    New Coder
    Join Date
    Feb 2007
    Posts
    92
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

    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;
    	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}
    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=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

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Can you post a link to your page? It's difficult/impossible without the images..


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •