Page looks different on two computers [Archive]

Parrot40

01-03-2010, 08:57 PM

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

01-03-2010, 11:44 PM

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

01-04-2010, 12:20 AM

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 (http://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>


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


<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>
</div>



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

</body>
</html>

Nile

01-04-2010, 12:31 AM

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

Parrot40

01-04-2010, 01:04 AM

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.

http://farm3.static.flickr.com/2765/4243004490_7da512bf44_m.jpg

Nile

01-04-2010, 01:10 AM

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

Parrot40

01-04-2010, 01:14 AM

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

Nile

01-04-2010, 01:17 AM

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

Parrot40

01-04-2010, 01:26 AM

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

01-04-2010, 01:31 AM

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.

Parrot40

01-04-2010, 01:52 AM

Here is the correct version.
http://farm3.static.flickr.com/2728/4242402863_d6bf122df3_m.jpg

I was wondering about the percentages and if that was the reason my layout was acting fluid.

Nile

01-04-2010, 02:07 AM

Probably, I don't know much about the difference between all the different kinds of layouts.

smrnsmile

01-04-2010, 05:47 AM

for ur right-col , u hv given margin-right as 305px, do not given margin-right since it pushes the div down and change the float:right to float:left.

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

correct code:-
{
float:left;
width: 250px;
margin-right:0px;
margin-top: 50px;
margin-bottom: 50px;
background: #ffffff;
border-color: #0000ff;
border-style: solid;
}

Nile

01-04-2010, 06:29 AM

Give his code a try, if that doesn't work - I'll make the layout. :D

Parrot40

01-04-2010, 02:09 PM

for ur right-col , u hv given margin-right as 305px, do not given margin-right since it pushes the div down and change the float:right to float:left.

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

correct code:-
{
float:left;
width: 250px;
margin-right:0px;
margin-top: 50px;
margin-bottom: 50px;
background: #ffffff;
border-color: #0000ff;
border-style: solid;
}

Thanks a lot! That helped bring my right column up to the correct location. The only thing now is when viewing on my desktop computer everything looks fine. But, on my laptop, when viewing in Firefox the left and right columns are pushed a little left of center and when viewing in IE the columns are pushed right of center. Weird...

smrnsmile

01-05-2010, 06:29 AM

That's a browser issue it seems. Post the Screenshots of ur design as to how it looks in firefox and IE also let me the know the resolution of ur laptop and ur pc and i will try to resolve the issue :)

Parrot40

01-05-2010, 01:16 PM

That's a browser issue it seems. Post the Screenshots of ur design as to how it looks in firefox and IE also let me the know the resolution of ur laptop and ur pc and i will try to resolve the issue :)

If you look at my original post it will have the screen resolutions. I am using the same versions of Firefox and IE on both my laptop and desktop computers.

Firefox Screenshot
http://farm3.static.flickr.com/2703/4247242125_110fc71ce0_m.jpg

IE Screenshot
http://farm5.static.flickr.com/4028/4248017226_1444a56a83_m.jpg

Thanks again.

smrnsmile

01-06-2010, 05:11 AM

Change ur left-col css as mentioned below:

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

correct code:
div#left-col {
background:url(Art/badge.gif)
no-repeat top center;
padding-top:200px;
padding-right:5px;
float:left;
width:500px;
padding-left: 241px;
margin-top: 50px;
}
What I have done is, since your width is given as 500 and margin-left was given as 259, i subtracted 500-259="241", den instead of using margin-left i used padding-left which removed the extra space and got the div in the center. Hopefully this shld work :)

Parrot40

01-06-2010, 02:24 PM

Change ur left-col css as mentioned below:

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

correct code:
div#left-col {
background:url(Art/badge.gif)
no-repeat top center;
padding-top:200px;
padding-right:5px;
float:left;
width:500px;
padding-left: 241px;
margin-top: 50px;
}
What I have done is, since your width is given as 500 and margin-left was given as 259, i subtracted 500-259="241", den instead of using margin-left i used padding-left which removed the extra space and got the div in the center. Hopefully this shld work :)

I am not sure if it was a typo or not but you said my margin-left was 259px instead of 295px. I tried it both ways using padding-left: 241px and padding-left: 205px (500-295).

Using padding-left: 241px; pushed everything a little left of the left header edge.

Using padding-left: 205px; pushed everything way left of the left header edge.

Using padding-left: 295px instead of margin-left: 295px kept everything pretty much the same...left of the header in Firefox and off to the right in IE when viewed on my laptop. Everything still looked good on my desktop computer using the padding-left: 295px.

Thanks again for helping. This little problem is very frustrating.