Go Back   CodingForums.com > :: Client side development > HTML & CSS
Reload this Page Website appears badly on different computers

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 02-07-2009, 06:44 PM   PM User | #1
millsi80
New Coder

 
Join Date: Jun 2008
Posts: 93
Thanks: 12
Thanked 1 Time in 1 Post
millsi80 is an unknown quantity at this point
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!
millsi80 is offline   Reply With Quote
Old 02-07-2009, 07:01 PM   PM User | #2
Excavator
Master Coder


 
Excavator's Avatar
 
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Excavator has a spectacular aura aboutExcavator has a spectacular aura aboutExcavator has a spectacular aura about
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
Excavator is online now   Reply With Quote
Old 02-07-2009, 07:06 PM   PM User | #3
millsi80
New Coder

 
Join Date: Jun 2008
Posts: 93
Thanks: 12
Thanked 1 Time in 1 Post
millsi80 is an unknown quantity at this point
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">
millsi80 is offline   Reply With Quote
Old 02-07-2009, 07:54 PM   PM User | #4
Excavator
Master Coder


 
Excavator's Avatar
 
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Excavator has a spectacular aura aboutExcavator has a spectacular aura aboutExcavator has a spectacular aura about
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
Excavator is online now   Reply With Quote
Old 02-07-2009, 09:06 PM   PM User | #5
effpeetee
Senior Coder

 
effpeetee's Avatar
 
Join Date: Feb 2007
Location: Clapham Junction - London SW
Posts: 4,884
Thanks: 228
Thanked 204 Times in 203 Posts
effpeetee is an unknown quantity at this point
You may find this of interest.

and also this.

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

Frank
__________________
* Sources (updated: 21.11.2012.
Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.
Last edited by effpeetee; 02-07-2009 at 09:11 PM..
effpeetee is offline   Reply With Quote
Old 02-08-2009, 02:15 AM   PM User | #6
millsi80
New Coder

 
Join Date: Jun 2008
Posts: 93
Thanks: 12
Thanked 1 Time in 1 Post
millsi80 is an unknown quantity at this point
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>
millsi80 is offline   Reply With Quote
Old 02-08-2009, 02:36 AM   PM User | #7
Excavator
Master Coder


 
Excavator's Avatar
 
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Excavator has a spectacular aura aboutExcavator has a spectacular aura aboutExcavator has a spectacular aura about
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
Excavator is online now   Reply With Quote
Users who have thanked Excavator for this post:
millsi80 (02-08-2009)
Reply

Bookmarks

Tags
appearance, computer, css, display

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 11:07 PM.
Advertisement
Log in to turn off these ads.