Page looks different on two computers

[Parrot40]

Hello everyone. I am new to the site and new to using CSS so be gentle.

My first attempt at building a site using CSS has left me baffled. The desktop computer where I built the site shows it perfectly in Firefox and IE. However, when viewed on my laptop the main page does not look as it should, ie. the right column is bumped way down.

The screen res for the desktop is 1440x900 and the laptop is 1366x768. Both computers are running the same versions of Firefox and IE.

I can post code if needed.

Any help would be greatly appreciated.

[Nile]

Please post a link to the page on your site that contains the problematic script so we can check it out.

Please include your code so that we can take a look at it, we can't do much without it. When you do post your code remember to use [code] tags. That includes [ html ], [ code ], and [ php ].

Please do the above before further assistance.

[Parrot40]

I am sure there are mistakes in my CSS although I did use the CSS and html validator with the tidy up function enabled and then copied and pasted the corrected code.

The url is www.boonesoccerclub.com

The site is pretty simple with nothing fancy.

*{margin:0;padding:0}


.clear { clear: both; }


body 	{
	background: url(Art/Grid.gif)
	repeat-x ;
	background-attachment:fixed;
	font-size: 63%; 
	font-family: "Arial", san-serif;
	}



p	{
	font-size: 1.5em;
	line-height: 1.7em;
	margin-bottom: 0.8em;
	text-align:justify;
	text-indent:1em;
	color:black;
	background-color:white;
	}


a	{
	color: black; 
	text-decoration: none;
	}


h1 	{
	font-family: "American Typewriter Medium BT", serif;
	font-size: 3.0em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	text-align:center;
	}


h2 	{
	font-size: 1.5em;
	margin-bottom: 0.5em;
	text-align: center;
	}


h3 	{
	font-size: 2em;
	margin-bottom: 0.5em;
	text-align: center;
	background-color: red;
	}


h4 	{
	font-size: 2em;
	color: #ffffff;
	font-variant:small-caps;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	text-align: center;
	background-color: #0000ff;
	}


hr	{
	background-color: #00cc00;
	height: 5px;
	}


div#page-wrap 	{
		width: 1050px; margin:0 auto; 
		}



ul#headernav 	{
		height:170px; width:800px;
		background:url(Art/PageHeaderNew.gif)
		no-repeat; 
		list-style: none;
		margin-left: 110px;
		text-align:center;
		}



ul#headernav li 	{
			display: inline; 
			font-size: 1.2em;
			}



ul#headernav li a 	{
			width: 80px;
			float:left;
			margin-top: 152px;
			margin-left: 18px;
			color: white;
			font-weight: bold;
			text-decoration: none;
			outline: none;
			}



ul#headernav li a:hover, 
ul#headernav li a:active	{ 
				color: red;
				}






div#main-content { }



div#main-content
div#left-col 			{
				background:url(Art/badge.gif)
				no-repeat top center;
				padding-top:200px;
				padding-right:5px;
				float:left; 
				width:500px;
				margin-left: 300px;
				margin-top: 50px;
				}


div#main-content
div#left-col			
a:hover, 	
a:active			{
				color: #ffffff;
				}


div#main-content 
div#left-col 
div#imga 			{
				padding-top:25px;
				padding-bottom: 25px;
				padding-right: 15px;
				margin-left: 10px;
				margin-top: 25px;
				margin-bottom: 50px;
				}


div#main-content 
div#left-col 
div#imgb 			{
				padding-top:25px;
				padding-bottom: 25px;
				padding-right: 15px;
				margin-left: 15px;
				margin-top: 25px;
				margin-bottom: 50px;
				}



div#main-content 
div#right-col 			{
				float:right;
				width: 250px;
				margin-right: 305px;
				margin-top: 50px;
				margin-bottom: 50px;
				background: #ffffff;
				border-color: #0000ff;
				border-style: solid;
				}





div#main-content 
div#right-col p 		{
				width: 210px;
				margin-left: 20px;
				}


div#main-content 
div#right-col li 		{
				width: 220px;
				margin-left: 25px;
				font-size: 1.5em;
				font-weight:bold;
				}


div#main-content 
div#right-col li a 		{
				color: #0000ff;
				}



div#schedules 
ul#links li a:hover, 	
div#schedules 
ul#links li a:active		{
				color: red;
				}


div#main-content 
div#right-col h1 		{
				margin-left: 10px;
				}
				



div#footer 	{
		background: url(Art/Grass.png) 
		repeat-x;	
		height: 40px; margin-top: 5px;
		padding: 20px 0 10px 0;
		text-align: center;
		border-top: 5px solid #0000ff;
		clear:both; 
		}



ul#footernav li 	{
			display:inline;
			font-size: 1.2em;
			}



ul#footernav li a 	{
			font-size: 1.2em;
			color: #0000ff;
			word-spacing: 1em;
			font-weight: bold;
			text-decoration: none; 
			outline: none;
			}


ul#footernav li a:hover, 
ul#footernav li a:active 	{ 
				color: red; 
				}

Here is the html code

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Boone County Soccer Club</title>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="Stylesheet.css" />
<meta name="description" content="Welcome to Boone County Soccer Club, a developmental soccer league for Boone County West Virginia." />
<meta name="keyword" content="soccer, club, boone, county, west virginia, madison, danville" />
</head>


<body>
<div id="page-wrap">
<ul id="headernav">
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="registration.html">REGISTRATION</a></li>
<li><a href="contacts.html">CONTACTS</a></li>
<li><a href="links.html">LINKS</a></li>
</ul>
</div>

<div id="main-content">
<div id="left-col">
<hr />
<h1>BOONE COUNTY SOCCER CLUB</h1>
<h2>Welcome from the Boone County Soccer Club</h2>
<p>Our GOAL is to provide the youth of Boone County, West Virginia a positive environment where they can have fun, learn to play soccer and get to participate regardless of 

their ability.</p>
<p>This will help them to not only develop the skills necessary to play soccer, but also to help them have the confidence to excel in everything they attempt in life.</p>
<p>We believe this challenging sport is fun to play and is also a great way to get the physical fitness necessary to maintain a healthy lifestyle when combined with the proper 

diet. It is also a great way to nurture life skills such as teamwork, self discipline and following orders.</p>
<p>We look forward to seeing you this season at the soccer fields.</p>
<hr />
<div id="imga"><img src="Art/kidsone.jpg" width="100%" height="100%" alt="** Image of kids playing soccer. **" /></div>
</div>
<!-- END left-col -->


<div id="right-col">
<h3>ANNOUNCEMENTS</h3>
<h4>Registration</h4>
<p>Registrations will be Saturday, January 16, February 6 and February 13 from 11:00 am until 3:00 pm at the Danville Community Center cafeteria. Please bring a copy of your 

child's birth certificate. Cost is $40 for the first child and $25 for the second. NO REGISTRATIONS WILL BE ACCEPTED AFTER 3:00 PM ON FEBRUARY 13.</p>
<h4>Schedules</h4>
<p>The Boone County Soccer Club's schedules will be available at the links below once the season begins.</p>


<div id="schedules">
<ul id="links">
<li><a href="#">U4</a></li>
<li><a href="#">U6</a></li>
<li><a href="#">U8</a></li>
<li><a href="#">U10</a></li>
<li><a href="#">U12</a></li>
</ul>
</div>
<!--END schedules-->

<h4>League Meetings</h4>
<p>The Boone County Soccer Club meetes the second Thursday of each month in the cafeteria at the Danville Community Center at 7:00 pm. All league members are encouraged to 

attend.</p>
</div>
<!--END right-col--></div>

<!--END main-content-->


<div id="footer">
<ul id="footernav">
<li><a href="index.html">| Home |</a></li>
<li><a href="about.html">| About |</a></li>
<li><a href="registration.html">| Registration |</a></li>
<li><a href="contacts.html">| Contacts |</a></li>
<li><a href="links.html">| Links |</a></li>
</ul>
&copy 2009 Boone County Soccer Club. All rights reserved.</div>
<!--END footernav-->
</body>
</html>

[Nile]

Can you take a screen shot on both computers so I can see what they look like?

[Parrot40]

I'll try.

Here is the incorrect version. There should be a blue box with text on the right column beside the text. Also, the green rule and text should be aligned with the left side of the header.

When I zoomed out on the page the page corrected itself, but after more zooms the left and right column got further apart.

[Nile]

Ok, give me about a day to re do this layout. (I'm bad when it comes to looking at other's CSS).

[Parrot40]

Thanks, but you don't have to redo the layout. That's a lot of work.

[Nile]

Nah, I've got all tomorrow, and all the next day free.... I'm very bored.

[Parrot40]

Thanks. If possible, could you let me know where I went wrong so I can learn from it.

The background behind my problem is I found a tutorial on how to take a photoshop mock-up and use CSS to create a live web page. I used the author's examples and changed the code to fit my page. That is the reason some of the code may be out of place, etc. I got it to work with Firefox and IE on my desktop computer and thought I was okay.

[Nile]

Again - I'm not that good at debugging other's CSS, so sorry... I cannot tell you where you went wrong - but you can look at my CSS, and learn from the way I style.

Can you please take a picture of the right version so I know how to code it?

Some of your problems is that your not using percentages, and your layout is to narrow.