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

    browsers / layout all messed up

    Hi Alll

    I have no idea what is going on with my layout. This page looks fine on my laptop on IE7. It looks fine on my friends latop on IE7. But it looks terrible on other peoples IE7. And then it totally messes up for other browsers.
    What do i need to do??
    http://www.inafrenzy.com/secure/site/

    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 Welcome</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" />                </div>
                    
                    <div id="welcome">
           	      		<img src="images/welcome-to-inafrenzy.jpg" alt="" 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="middle">        		</div>
            
      				<div id="Haves" class="style2">
    				   <p class="style2">Recently Added <br>Haves</p>
        			</div>
      				<div id="Wants" class="style3">
      				  <p class="style3">Recently Added <br />
      				    Wants</p>
      </div>
      			<div id="main">
                      
                      	<div id="leftcolumn">
                                <p><img src="images/video.png" alt="" align="bottom" /></p>
    							<p></p>
                            	<p><img src="images/justjoined.png" alt="" align="texttop" /></p>
                            	<p><img src="images/newusers.png" alt="" align="texttop" /></p>
    							<p></p>
                                <p><img src="images/mostpopular.png" alt="" align="texttop" /></p>
                            	<p><img src="images/mostpopularcontent.png" alt="" align="texttop" /></p>
                        </div>
                        
                        <div id="middlecolumn">
                        		<p><img src="images/middlecontent.png" alt="" align="texttop" /><br /></p>
                              	<p><img src="images/donebarters.png" alt="" /><br /></p>
                              	<p><img src="images/donebarterscontent.png" alt="" /><br /></p>
                        </div>
                        
                        <div id="rightcolumn">
                 				<p><img src="images/alerts.png" alt="" align="texttop" />
                              	<p><img src="images/categories.png" alt="" /></p>
                            	<p><img src="images/tags.png" alt="" /></p>
                            	<p align="center"> <img src="images/tagwords.png" alt="" align="absmiddle" /></p>
                                <p><img src="images/ad.png" alt="" /></p>
                            	<p><img src="images/stalkuseverywhere.png" alt="" /></p>
                            	<p><img src="images/stalk.png" alt="" /></p>
                        </div>                
      </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;	&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>


    Code:
    @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;
    }
    #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:-85px;
    	clear: both;
    }
    #search {
    	margin-left:690px;
    	top:-150px;
    	z-index:2;
    	display: inline;
    	position:relative;
    	clear: both; 
    }
    #leftcolumn {
    	margin: 0px auto 0;
    	position:relative;
    	clear: both;
    	margin-left:190px;
    }
    #middlecolumn {
    	margin-left:472px;
    	position:relative;
    	clear: both;
    	margin-top:-1007px;
    }
    #rightcolumn {
    	margin-left:822px;
    	position:relative;
    	clear: both;
    	margin-top:-970px;
    }
    #Haves {
    	position:relative;
    	margin-left:-140px;
    	top:-13px;
    	z-index:2;
    	clear: both;
    }
    #Wants {
    	position:relative;
    	margin-left:185px;
    	top:-45px;
    	z-index:2;
    	clear: both;
    }
    #banner {
    	position:relative;
    	margin-left:440px;
    	margin-top:-60px;
    	top:-200px;
    	clear: both; 
    }
    #footer {
    	position:relative;
    	margin-left:180px;
    	margin-top:24px;
    	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}
    .style4 {font-family: "Arial"; font-size: 11px; color: #747474}

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Start with fixing the errors in your markup ,see http://validator.w3.org/check?uri=ht...Inline&group=0
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    It doesn't look right in more modern browsers either.

  • #4
    New Coder
    Join Date
    Feb 2007
    Posts
    92
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the suggestion

    I have checked my mark-up and fixed it.

    However i dont know where to go from here. it looks good in my IE7 but im not sure about other people's

    And how do i ensure it looks good in other browsers without messing it up for IE7?

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello bunny1,
    Try making your #wrap fit the square on your background image, instead of the whole image. You might want to put the image on body so you can see the outside edges but the square is what's supposed to wrap your #top, #nav, ...

    Try this just for starters:
    Code:
    #wrap {   
    width: 920px;
        background:#96B4CE url(images/bg2.jpg) no-repeat; 
    	text-align:center;
    	margin: 0 auto;
    position: relative;
    }
    of course all your ap elements will need to be re-positioned.


    [edit] Good job on the valid code by the way!</edit>
    Last edited by Excavator; 11-07-2009 at 01:15 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Feb 2007
    Posts
    92
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ive managed to fix this

    but i still have problems with the footer and search box

    they look fine in IE7 but not in FF3 and Chrome

  • #7
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Quote Originally Posted by bunny1 View Post
    they look fine in IE7 but not in FF3 and Chrome
    How could that happen since you, of course, used FF3 or Chrome to create the site?

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello bunny1,
    Does your footer work if it's under the wrap?
    Have a look at doing it like this:
    Code:
    	<p align="center"> <img src="images/tagwords.png" alt="" align="middle"></p>
                                <p><img src="images/ad.png" alt=""></p>
                            	<p><img src="images/stalkuseverywhere.png" alt=""></p>
                            	<p><img src="images/stalk.png" alt=""></p>
                        </div>   
                                    <div class="push"></div> 
                 
      </div>
    <!--end wrap--></div>
      				<div id="footer" class="style4" align="left"> <p>&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;	&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</p></div>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    Feb 2007
    Posts
    92
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks Excavator. I managed to fix it.
    I want to thank you for all your help but im not sure how to send a "thanks"??

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by bunny1 View Post
    Thanks Excavator. I managed to fix it.
    I want to thank you for all your help but im not sure how to send a "thanks"??
    Look to the bottom right of posts in the active forum. There is a "Thank user for this helpful post" button.

    I'm glad you got it fixed!
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    bunny1 (11-07-2009)


  •  

    Posting Permissions

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