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 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    93
    Thanks
    12
    Thanked 1 Time in 1 Post

    Exclamation Website appears badly on different computers

    Hi,

    I tried previewing my website on 2 other computers (laptops) and showed up like the picture below:



    This what it is suppose to look like:



    (I hope the pics arent to big, I dont know how to resize them in BB Code )

    The reason the buttons arent there is because they are local so they werent on the other comps.

    Is there a way to fix this so it appears like the second image on all comps and monitors?

    Thanks!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello millsi80,
    Hard to say from screenshots. We'll need to have the code to see what's wrong with it.
    A link is always best but you can also post code - inside [c ode][/ code] tags please.
    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

  • #3
    New Coder
    Join Date
    Jun 2008
    Posts
    93
    Thanks
    12
    Thanked 1 Time in 1 Post
    Sure!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
    <html><head><title>glish.com : CSS layout techniques : 3 columns, the holy grail</title>
    
    <style type="text/css">
    		
    	body {
    	margin:10px 10px 0px 10px;
    	padding:0px;
    	background-color: #000000;
    	background-image: url();
    		}
    	
    	#leftcontent {
    		position: absolute;
    		left:10px;
    		top:50px;
    		width:200px;
    		background:#fff;
    		border:1px solid #000;
    		}
    
    	#centercontent {
    		background:#fff;
       		margin-left: 199px;
       		margin-right:199px;
    		border:1px solid #000;
    		voice-family: "\"}\"";
    		voice-family: inherit;
       		margin-left: 20%;
       		margin-right:20%;
    		
    		}
    		
    	html>body #centercontent {
    	margin-left: 350px;
    	margin-right:350px;
    		}
    
    	#rightcontent {
    		position: absolute;
    		right:10px;
    		top:50px;
    		width:200px;
    		background:#fff;
    		border:1px solid #000;
    		}
    	
    	#banner {
    		background:#fff;
    		height:40px;
    		border-top:1px solid #000;
    		border-right:1px solid #000;
    		border-left:1px solid #000;
    		voice-family: "\"}\"";
    		voice-family: inherit;
    		height:39px;
    		
    		}
    	html>body #banner {
    	height:100px;
    	margin-left: 350px;
    	margin-right: 350px;
    	background-image: url(banner%20copy.jpg);
    		}
    		
    	p,h1,pre {
    		margin:0px 10px 10px 10px;
    		}
    		
    	h1 {
    		font-size:14px;
    		padding-top:10px;
    		}
    		
    	#banner h1 {
    	font-size:14px;
    	padding:10px 10px 0px 10px;
    	margin:0px 10px 10px 10px;
    	background-image: url(banner%20copy.jpg);
    		}
    	
    	#rightcontent p {
    		font-size:10px
    		}
    		
    	#nav {
    	background:#36384f;
    	height:40px;
    	border-top:1px solid #000;
    	border-right:1px solid #000;
    	border-left:1px solid #000;
    	voice-family: "\"}\"";
    	voice-family: inherit;
    	height:39px;
    	overflow:auto;
    	text-align: center;
    	margin:0 auto;
    	
    		}
    		
    	html>body #nav {
    	height:45px;
    	margin-left: 350px;
    	margin-right: 350px;
    	text-align: center;
    	
    		}
    		
    	p,h1,pre {
    		margin:0px 10px 10px 10px;
    		}
    		
    	h1 {
    		font-size:14px;
    		padding-top:10px;
    		}
    		
    	#nav h1 {
    	font-size:14px;
    	padding:10px 10px 0px 10px;
    	margin:0px 10px 10px 10px;
    		}
    		
     #home, #astro, #iss, #sat, #logo, #csa, #isa, #pic, #bib {
    	height: 45px;
    	display: block;
    	float: left;
    	
    }
    #home {
    	background: url(homebutton.jpg) no-repeat 0 0;
    	width: 107px
    	
      }
    	#home:hover { 
    		background: #00f url(homebuttonover.jpg) no-repeat 0 0;
    		width: 107px
    	}    
    #astro {
    	background: url(astro.jpg) no-repeat 0 0;
    	width: 120px
    }
    	#astro:hover {
    	background: url(astroover.jpg) no-repeat 0 0;
    	width: 120px;
    	}
    
    #iss {
    	background: url(iss.jpg) no-repeat 0 0;
    	width: 107px
    }
    	#iss:hover {
    	background: url(issover.jpg) no-repeat 0 0;
    	width: 107px;
    	}
    	
    #sat {
    	background: url(satellites.jpg) no-repeat 0 0;
    	width: 120px;
    }
    	#sat:hover {
    	background:url(satellitesover.jpg) no-repeat 0 0;
    	width: 120px;
    	}
    
    #csa {
    	background: url(csa.jpg) no-repeat 0 0;
    	width: 107px
    }
    	#csa:hover {
    	background: url(csaover.jpg) no-repeat 0 0;
    	width: 107px;
    	}
    	
    #isa {
    	background: url(isa.jpg) no-repeat 0 0;
    	width: 107px
    }
    	#isa:hover {
    	background: url(isaover.jpg) no-repeat 0 0;
    	width: 107px;
    	}
    
    #pic {
    	background: url(pic.jpg) no-repeat 0 0;
    	width: 107px
    }
    	#pic:hover {
    	background: url(picover.jpg) no-repeat 0 0;
    	width: 107px;
    	}
    	
    #bib {
    	background: url(bib.jpg) no-repeat 0 0;
    	width: 145px
    }
    
    	#bib:hover {
    	background: url(bibover.jpg) no-repeat 0 0;
    	width: 145px;
    	}
    
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body>
    <div id="banner">
      <h1>&nbsp;</h1>
    </div>
    
    <div id="nav">
    <p style="text-align:center">
    <a id="home" href="#" title="Home"></a>
    <a id="astro" href="#" title="Astronauts"></a>
    <a id="csa" href="#" title="Canadian Space Agency"></a>
    <a id="isa" href="#" title="International Space Agency"></a>
    <a id="iss" href="#" title="International Space Station"></a>
    <a id="sat" href="#" title="Satellites"></a>
    <a id="pic" href="#" title="Pictures"></a>
    <a id="bib" href="#" title="Bibliography"></a>
    </p>
    </div>
    
    <div id="centercontent">

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    You have not cleaned this up from the last time I saw it.
    You still have #home, #astro, #iss, #sat, #logo, #csa, #isa, #pic, #bib {height: 45px;
    all stuffed into #nav that's only height:40px or height:39px;, depending on which of your height's you choose.

    #banner has heights of 39px, 40px or 100px to choose from.

    You have a other conflicting settings like
    Code:
    #centercontent {
    		background:#fff;
       		margin-left: 199px;
       		margin-right:199px;
    		border:1px solid #000;
    		voice-family: "\"}\"";
    		voice-family: inherit;
       		margin-left: 20%;
       		margin-right:20%;		
    		}
    You also have a lot of things just scattered around your CSS and I'm not sure you know what they are supposed to be doing.
    Code:
    voice-family: "\"}\"";
    voice-family: inherit;
    
    html>body 
    
    all of those can go I think.
    This might be a start for you, I don't have the images so I have no idea how it looks but I cleaned up some of the mistakes -
    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>glish.com : CSS layout techniques : 3 columns, the holy grail</title>
    <style type="text/css">		
    body {
    	margin:10px;
    	padding:0px;
    	background-color: #000000;
    	background-image: url();
    }	
    #banner {
    	background:#fff;
    	height:40px;
    	border-top:1px solid #000;
    	border-right:1px solid #000;
    	border-left:1px solid #000;
    	margin-left: 350px;
    	margin-right: 350px;
    
    }	
    #banner h1 {
    	font-size:14px;
    	padding:10px 10px 0px 10px;
    	margin:0px 10px 10px 10px;
    	background-image: url(banner%20copy.jpg);
    }		
    #nav {
    	background:#36384f;
    	height:40px;
    	border-top:1px solid #000;
    	border-right:1px solid #000;
    	border-left:1px solid #000;
    	margin-left: 350px;
    	margin-right: 350px;
    	overflow:auto;
    	text-align: center;
    }
    #home, #astro, #iss, #sat, #logo, #csa, #isa, #pic, #bib {
    	height: 45px;
    	display: block;
    	float: left;
    }
    		#home {
    			background: url(homebutton.jpg) no-repeat 0 0;
    			width: 107px
    		}
    		#home:hover { 
    			background: #00f url(homebuttonover.jpg) no-repeat 0 0;
    			width: 107px
    		}    
    #astro {
    	background: url(astro.jpg) no-repeat 0 0;
    	width: 120px
    }
    #astro:hover {
    	background: url(astroover.jpg) no-repeat 0 0;
    	width: 120px;
    }
    		#iss {
    			background: url(iss.jpg) no-repeat 0 0;
    			width: 107px
    		}
    		#iss:hover {
    			background: url(issover.jpg) no-repeat 0 0;
    			width: 107px;
    		}
    #sat {
    	background: url(satellites.jpg) no-repeat 0 0;
    	width: 120px;
    }
    #sat:hover {
    	background:url(satellitesover.jpg) no-repeat 0 0;
    	width: 120px;
    }
    		#csa {
    			background: url(csa.jpg) no-repeat 0 0;
    			width: 107px
    		}
    		#csa:hover {
    			background: url(csaover.jpg) no-repeat 0 0;
    			width: 107px;
    		}
    #isa {
    	background: url(isa.jpg) no-repeat 0 0;
    	width: 107px
    }
    #isa:hover {
    	background: url(isaover.jpg) no-repeat 0 0;
    	width: 107px;
    }
    		#pic {
    			background: url(pic.jpg) no-repeat 0 0;
    			width: 107px
    		}
    		#pic:hover {
    			background: url(picover.jpg) no-repeat 0 0;
    			width: 107px;
    		}
    #bib {
    	background: url(bib.jpg) no-repeat 0 0;
    	width: 145px
    }
    #bib:hover {
    	background: url(bibover.jpg) no-repeat 0 0;
    	width: 145px;
    }
    #centercontent {
    	background:#fff;
    	margin-left: 199px;
    	margin-right:199px;
    	border:1px solid #000;
    }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <div id="banner">
        	<h1>text here</h1>
                    <div id="nav">
                        <p>
                            <a id="home" href="#" title="Home"></a>
                            <a id="astro" href="#" title="Astronauts"></a>
                            <a id="csa" href="#" title="Canadian Space Agency"></a>
                            <a id="isa" href="#" title="International Space Agency"></a>
                            <a id="iss" href="#" title="International Space Station"></a>
                            <a id="sat" href="#" title="Satellites"></a>
                            <a id="pic" href="#" title="Pictures"></a>
                            <a id="bib" href="#" title="Bibliography"></a>
                        </p>
                    <!--end nav--></div>
        <!--end banner--></div>
    </body>
    </html>
    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

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    You may find this of interest.

    and also this.

    Both about the "Holy Grail", as mentioned in your title.
    (Greetings Excavator.)

    Frank
    Last edited by effpeetee; 02-07-2009 at 10:11 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    New Coder
    Join Date
    Jun 2008
    Posts
    93
    Thanks
    12
    Thanked 1 Time in 1 Post
    Thanks everyone for your help so far! I have applied excavators trimmed code with a few modifications and used the container div as one of the sites that Frank suggested used.

    Now, one more thing, everyone is looking good except for 1 thing, one of the buttons (the last one bibliography) is on a seperate line. I have tried float right, as well as reducing it down to ''sources''

    Is there a way to make that button move up to the same row as the rest?

    Here is a screen and the code:



    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>glish.com : CSS layout techniques : 3 columns, the holy grail</title>
    <style type="text/css">		
    body {
    	margin:10px;
    	padding:0px;
    	background-color: #000000;
    	background-image: url();
    }	
    
    #container {
      padding-left: 50px;   /* LC width */
      padding-right: 50px;  /* RC width */
    }
    #container .column {
      position: relative;
      float: left;
    }
    
    #banner {
    	height:100px;
    	border-top:1px solid #000;
    	border-right:1px solid #000;
    	border-left:1px solid #000;
    	width: auto;
    	background-image: url(banner%20copy.jpg);
    	background-repeat: no-repeat;
    }	
    #banner h1 {
    	font-size:14px;
    	padding:10px 10px 0px 10px;
    	margin:0px 10px 10px 10px;
    	background-image: url(banner%20copy.jpg);
    }		
    #nav {
    	background:#36384f;
    	height:65px;
    	border-top:1px solid #000;
    	border-right:1px solid #000;
    	border-left:1px solid #000;
    	width: auto
    	overflow:auto;
    	text-align: center;
    }
    #home, #astro, #iss, #sat, #logo, #csa, #isa, #pic, #bib {
    	height: 45px;
    	display: block;
    	float: left;
    }
    		#home {
    			background: url(homebutton.jpg) no-repeat 0 0;
    			width: 107px
    		}
    		#home:hover { 
    			background: #00f url(homebuttonover.jpg) no-repeat 0 0;
    			width: 107px
    		}    
    #astro {
    	background: url(astro.jpg) no-repeat 0 0;
    	width: 120px
    }
    #astro:hover {
    	background: url(astroover.jpg) no-repeat 0 0;
    	width: 120px;
    }
    		#iss {
    			background: url(iss.jpg) no-repeat 0 0;
    			width: 107px
    		}
    		#iss:hover {
    			background: url(issover.jpg) no-repeat 0 0;
    			width: 107px;
    		}
    #sat {
    	background: url(satellites.jpg) no-repeat 0 0;
    	width: 120px;
    }
    #sat:hover {
    	background:url(satellitesover.jpg) no-repeat 0 0;
    	width: 120px;
    }
    		#csa {
    			background: url(csa.jpg) no-repeat 0 0;
    			width: 107px
    		}
    		#csa:hover {
    			background: url(csaover.jpg) no-repeat 0 0;
    			width: 107px;
    		}
    #isa {
    	background: url(isa.jpg) no-repeat 0 0;
    	width: 107px
    }
    #isa:hover {
    	background: url(isaover.jpg) no-repeat 0 0;
    	width: 107px;
    }
    		#pic {
    			background: url(pic.jpg) no-repeat 0 0;
    			width: 107px
    		}
    		#pic:hover {
    			background: url(picover.jpg) no-repeat 0 0;
    			width: 107px;
    		}
    #bib {
    	background: url(sourcesbutton.jpg) no-repeat 0 0;
    	width: 145px
    }
    #bib:hover {
    	background: url(sourcesbuttonover.jpg) no-repeat 0 0;
    	width: 145px;
    }
    #centercontent {
    	background:#fff;
    	width: auto
    	border:1px solid #000;
    	
    }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
    <div id="container">
        <div id="banner">
    </div>
    <div id="nav">
                        <p>
                            <a id="home" href="#" title="Home"></a>
                            <a id="astro" href="#" title="Astronauts"></a>
                            <a id="csa" href="#" title="Canadian Space Agency"></a>
                            <a id="isa" href="#" title="International Space Agency"></a>
                            <a id="iss" href="#" title="International Space Station"></a>
                            <a id="sat" href="#" title="Satellites"></a>
                            <a id="pic" href="#" title="Pictures"></a>
                            <a id="bib" href="#" title="Bibliography"></a>
                        </p>
       
    </div>

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    That's float drop, it will do that when there's not enough room to fit.

    Resize your browser and watch more buttons drop as the viewport gets narrower.
    Now put the missing ; on the end of your width:auto like this:
    Code:
    		
    #nav {
    	background:#fff;
    	height:65px;
    	border-top:1px solid #000;
    	border-right:1px solid #000;
    	border-left:1px solid #000;
    	width: auto;
    	overflow:auto;
    	text-align: center;
    }
    --the validator would find errors like that for you.

    Still not quite what your after.
    You need to set a width that your buttons fit in, instead of letting the browser window squeeze the width of your site too narrow for your buttons to sit on one line.
    I thought width: 920px; was close... can't remember now. Give it a try and then check in whatever browsers you have available.

    How wide is your banner copy.jpg?
    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:

    millsi80 (02-08-2009)


  •  

    Tags for this Thread

    Posting Permissions

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