Help - Search - Members - Calendar
Full Version: Website appears fine for me but not for person I am coding it for
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
Lilkaos
I have coded this webpage and it appears fine for me, however it is all over the place for the person for whom I am coding it. I have several other people look at it and it appears fine for them as well. I can NOT seem to determine what the problem is. We are both using IE and firefox. My resolution is 1240x768 and theirs is 1680x1050. However I have looked at it using their resolution and it still appears fine for me. Help would be appreciated!

Here is a screen shot of how it appears for me: http://img.photobucket.com/albums/v215/imm...os80/myview.png

Here is a screen shot of how it appears for them: http://i42.tinypic.com/2nak95w.jpg

Below is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Los Deportes de Equestrian</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<STYLE TYPE="text/css">
<!--
a:link {
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: fdaa66;
text-decoration: none;
}
a:visited {
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: ffffff;
text-decoration: none;
}

-->
</STYLE>
</head>
<center>
<BODY BGCOLOR=#959595 text="ffffff" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<table width="922" height="188" background="http://img.photobucket.com/albums/v215/immortalkaos80/eltanteotop.png" border="0" cellpadding="6" cellspacing="0">
<tr><td width="922"><IMG SRC="blank.gif"
NAME="holdspace" ID="holdspace"
WIDTH="240" HEIGHT="10"
STYLE="visibility:hidden; position:top;"></td></tr>
<tr><td width="240" valign="top"><center><div style="float:center;border: 0px solid black; text-align:justify; overflow:auto; height:105px; width:240px">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Vestibulum luctus. Etiam adipiscing massa eget justo. Vestibulum
eleifend enim sed leo. Cras euismod. Fusce quis lectus.
</td><td><IMG SRC="blank.gif"
NAME="holdspace" ID="holdspace"
WIDTH="390" HEIGHT="1"
STYLE="visibility:hidden; position:top;"></td>
<td width="290" valign="top"><center><div style="float:center;border: 0px solid black; text-align:justify; overflow:auto; height:105px; width:250px">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Vestibulum luctus. Etiam adipiscing massa eget justo. Vestibulum
eleifend enim sed leo. Cras euismod. Fusce quis lectus.
</td></tr>
<table width="922" height="493" background="http://img.photobucket.com/albums/v215/immortalkaos80/eltanteocenter.png" cellpadding="3">
<tr><td width="922"><IMG SRC="blank.gif"
NAME="holdspace" ID="holdspace"
WIDTH="240" HEIGHT="15"
STYLE="visibility:hidden; position:top;"></td></tr>
<tr><td width="240" valign="top"><center><div style="float:center;border: 0px solid black; text-align:justify; overflow:auto; height:317px; width:235px">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Vestibulum luctus. Etiam adipiscing massa eget justo. Vestibulum
eleifend enim sed leo. Cras euismod. Fusce quis lectus. Suspendisse
eu sem. Donec et dui. Ut molestie. Etiam placerat porta mauris. Fusce
mauris magna, faucibus vel, dapibus nec, dictum sit amet, odio. In
eleifend velit vitae lectus. In interdum mauris ullamcorper enim.
Praesent a quam sed magna vestibulum pellentesque.Lorem ipsum dolor sit amet, consectetur adipiscing
elit.
</div></center></td>
<td width="350" valign="topcenter"><center><div style="float:center;border: 0px solid black; text-align:justify; overflow:auto; height:317px; width:390px">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Vestibulum luctus. Etiam adipiscing massa eget justo. Vestibulum
eleifend enim sed leo. Cras euismod. Fusce quis lectus. Suspendisse
eu sem. Donec et dui. Ut molestie. Etiam placerat porta mauris. Fusce
mauris magna, faucibus vel, dapibus nec, dictum sit amet, odio. In
eleifend velit vitae lectus. In interdum mauris ullamcorper enim.
Praesent a quam sed magna vestibulum pellentesque.Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Vestibulum luctus. Etiam adipiscing massa eget justo. Vestibulum
eleifend enim sed leo. Cras euismod. Fusce quis lectus. Suspendisse
eu sem. Donec et dui. Ut molestie. Etiam placerat porta mauris. Fusce
mauris magna, faucibus vel, dapibus nec, dictum sit amet, odio. In
eleifend velit vitae lectus. In interdum mauris ullamcorper enim.
Praesent a quam sed magna vestibulum pellentesque.
</div></center></td><td width="300" valign="top"><center><div style="float:center;border: 0px solid black; text-align:justify; overflow:auto; height:160px; width:252px">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Vestibulum luctus. Etiam adipiscing massa eget justo. Vestibulum
eleifend enim sed leo. Cras euismod. Fusce quis lectus. Suspendisse
eu sem. Donec et dui. Ut molestie. Etiam placerat porta mauris.
</div></center><p><center><div style="float:center;border: 0px solid black; text-align:justify; overflow:auto; height:110px; width:252px">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Vestibulum luctus. Etiam adipiscing massa eget justo. Vestibulum
eleifend enim sed leo. Cras euismod. Fusce quis lectus. Suspendisse
eu sem.
</div></center></td></tr>
<tr><td width="240" valign="top"><center><div style="float:center;border: 0px solid black; text-align:justify; overflow:auto; height:120px; width:235px">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Vestibulum luctus. Etiam adipiscing massa eget justo. Vestibulum
eleifend enim sed leo. Cras euismod. Fusce quis lectus. Suspendisse
eu sem. Donec et dui.
</div></center
><td width="350" valign="topcenter"><center><div style="float:center;border: 0px solid black; text-align:justify; overflow:auto; height:120px; width:390px">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Vestibulum luctus. Etiam adipiscing massa eget justo. Vestibulum
eleifend enim sed leo. Cras euismod. Fusce quis lectus. Suspendisse
eu sem. Donec et dui. Ut molestie. Etiam placerat porta mauris. Fusce
mauris magna, faucibus vel, dapibus nec, dictum sit amet, odio.
</div></center></td><td width="300" valign="top"><center><div style="float:center;border: 0px solid black; text-align:justify; overflow:auto; height:120px; width:245px">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Vestibulum luctus. Etiam adipiscing massa eget justo. Vestibulum
eleifend enim sed leo. Cras euismod. Fusce quis lectus. Suspendisse
eu sem. Donec et dui.
</div></center></td></tr>
</table>
<table width="922" height="141" background="http://img.photobucket.com/albums/v215/immortalkaos80/eltanteobottom.png" cellpadding="6">
<tr><td width="922"><IMG SRC="blank.gif"
NAME="holdspace" ID="holdspace"
WIDTH="240" HEIGHT="15"
STYLE="visibility:hidden; position:top;"></td></tr>
<tr><td width="922" valign="top"><center><div style="float:center;border: 0px solid black; text-align:justify; overflow:auto; height:95px; width:906px">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Vestibulum luctus. Etiam adipiscing massa eget justo. Vestibulum
eleifend enim sed leo. Cras euismod. Fusce quis lectus. Suspendisse
eu sem. Donec et dui. Ut molestie. Etiam placerat porta mauris. Fusce
mauris magna, faucibus vel, dapibus nec, dictum sit amet, odio. In
eleifend velit vitae lectus. In interdum mauris ullamcorper enim.
Praesent a quam sed magna vestibulum pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Vestibulum luctus. Etiam adipiscing massa eget justo. Vestibulum
eleifend enim sed leo.
</div></center></td></tr></table>
</body>
</center>
</html>
pandy
Can you post the URL to the page, please. What browser does the other person use, the one it's all over the place for?
Lilkaos
QUOTE(pandy @ Mar 15 2009, 06:49 PM) *

Can you post the URL to the page, please. What browser does the other person use, the one it's all over the place for?


Here is the url: http://www.virtualhorseranch.com/viewranch.php?ranch=456932

They say they are using IE.
pandy
Yeah, it's pretty much all over the place in my IE6 and it looks the same in IE7. What version of IE does it display correctly in?

Click to view attachment

I think you need to clean things up to start with. There's too many errors for it to be meaningful to work with the page as it is now
http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes

You should use a doctype. Partly so you can validate, but also because without a doctype browsers will be in Quirks Mode and the differences between them will be larger. Read about that here: http://hsivonen.iki.fi/doctype/ . Or just use this one. That's the best one for the markup you have and with it browsers won't be in Quirks Mode.

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

http://htmlhelp.com/tools/validator/doctype.html

Oh, as you can see from my screen cap, you also need a background color. happy.gif
Lilkaos
Okie dokie will do, and I'll get back to you on if it works well or not. The background is colored. That's what they wanted. I wouldn't have chosen it but then not mine lol. They chose medium gray as the background color, ick. The browser version of IE it's showing fine in is IE7. How odd.

QUOTE(pandy @ Mar 15 2009, 08:10 PM) *

Yeah, it's pretty much all over the place in my IE6 and it looks the same in IE7. What version of IE does it display correctly in?

Click to view attachment

I think you need to clean things up to start with. There's too many errors for it to be meaningful to work with the page as it is now
http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes

You should use a doctype. Partly so you can validate, but also because without a doctype browsers will be in Quirks Mode and the differences between them will be larger. Read about that here: http://hsivonen.iki.fi/doctype/ . Or just use this one. That's the best one for the markup you have and with it browsers won't be in Quirks Mode.

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

http://htmlhelp.com/tools/validator/doctype.html

Oh, as you can see from my screen cap, you also need a background color. happy.gif

pandy
You have no background color for BODY. That's why it's gray in my screen cap, because gray is the color I've set the background of my browser to. It could have been lime, you know. happy.gif
Lilkaos
Lime would be an improvement over gray! LOL I've recoded it and MY code no longer throws any validation errors. This is nested within another website (it's a game where you may have your own layout on your page but of course they add their own elements around it.) However now I can't get the top right cream colored box to line up! Can you tell me why?

http://www.virtualhorseranch.com/viewranch.php?ranch=456932

QUOTE(pandy @ Mar 15 2009, 08:10 PM) *

Yeah, it's pretty much all over the place in my IE6 and it looks the same in IE7. What version of IE does it display correctly in?

Click to view attachment

I think you need to clean things up to start with. There's too many errors for it to be meaningful to work with the page as it is now
http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes

You should use a doctype. Partly so you can validate, but also because without a doctype browsers will be in Quirks Mode and the differences between them will be larger. Read about that here: http://hsivonen.iki.fi/doctype/ . Or just use this one. That's the best one for the markup you have and with it browsers won't be in Quirks Mode.

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

http://htmlhelp.com/tools/validator/doctype.html

Oh, as you can see from my screen cap, you also need a background color. happy.gif

pandy
OK. But you can't put a complete HTML document inside another one. You can't have this bit.

CODE
50   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
51   "http://www.w3.org/TR/html4/strict.dtd">
52   <html>
53   <head>
54   <title>Los Deportes de Equestrian</title>
55   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
56   <style type="text/css">
57  
58   body {
59       color: #FFFFFF;
60       background-color: #959595;
61   }
62  
63   </style>
64   <STYLE TYPE="text/css">
65   <!--
66   a:link {
67       font-style: normal;
68       line-height: normal;
69       font-weight: normal;
70       font-variant: normal;
71       text-transform: none;
72       color: fdaa66;
73       text-decoration: none;
74   }
75   a:visited {
76           font-style: normal;
77       line-height: normal;
78       font-weight: normal;
79       font-variant: normal;
80       text-transform: none;
81       color: ffffff;
82       text-decoration: none;
83   }
84  
85   -->
86   </STYLE>
87   </head>
88   <body>


I'm afraid there still is a lot of errors.
Lilkaos
What I mean by with in their page, is it's the same as a free webhosting site. Such as free webs, you know how they put their own elements and such around what you made? That's how it is. Is there a way to get that right hand top box to line up?
pandy
You have two HEAD and two BODY. Either it's because of your host's code or if you have duplicated them yourself, you can have that.

QUOTE

<html><head><title>CGS Testing Ranch owned by tonyz_bella_testing </title><script LANGUAGE="JavaScript">
<!-- Begin -->
function NewWindow(mypage, myname, w, h, scroll) {
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scroll+',resizable'
win = window.open(mypage, myname, winprops)
if (parseInt(navigator.appVersion) >= 4) { win.window.focus(); }
}
<!-- End -->
</script>
</head><body>



<form action=viewranch.php method='post'>


<input type='hidden' name='action' value='bookmark'>
<input type='hidden' name='ranch' value='456932'>
Comment: <input type='text' name ='comments'>
<input type='submit' value='Bookmark this ranch'>
</form><br>

<center>

<table width=70 height=70 background=/brand_img/0.gif><tr><td valign=middle align=middle>
<b><font color=red size=4></a></b></font>
</td></tr></table>
<font size=4> CGS Testing Ranch </font>
<h5>Owned by tonyz_bella_testing </h5><font size=2>Player # 456932</font></h5><br><font size=2>Last on: 2009-03-17 04:17:29</font>
</h5>
<form action=contact.php method='post'>
<input type='hidden' name='action' value='sendpm'>
<input type='hidden' name='pm' value='x'>
<input type='hidden' name='pid' value='456932'>
<input type='hidden' name='to' value='tonyz_bella_testing'>
<input type='submit' value='Send CGS Testing Ranch a Message'>
</form><center><table><tr><td valign=middle><table width='600'><tr><td>
</td>
<td>
<b><a href=viewtrophy.php?ppid=456932
onclick="NewWindow(this.href,'name','400','600','yes');return false;">
<h4>View Trophy Room</h4> </a> <br>


</td><td valign='top'><b> Player Bonuses:</b> <br></td></tr></table></b>
<p>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Snow Lane Performance Horses</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css">

body {
scrollbar-base-color:#000000;
color: #00CC00;
background-color: #000000;
}

</style>
<style type="text/css">
<!--
a:link {
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #959595
text-decoration: none;
}
a:visited {
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #ffffff;
text-decoration: none;
}

-->
</style>
</head>
<body bgcolor="#000000" text="#00CC00">
<table width="784" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">

<tr>
<td><img src="http://img.photobucket.com/albums/v215/immortalkaos80/yukilayout_01.gif" alt="header" border="0" usemap="#Map"></td>
</tr>
<tr>
<td><center><div style="float:center;border: 0px solid black; text-align:center; overflow:auto; height:612px; width:543px">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Vestibulum luctus. Etiam adipiscing massa eget justo. Vestibulum
eleifend enim sed leo. Cras euismod. Fusce quis lectus. Suspendisse
eu sem. Donec et dui. Ut molestie. Etiam placerat porta mauris. Fusce
mauris magna, faucibus vel, dapibus nec, dictum sit amet, odio. In
eleifend velit vitae lectus. In interdum mauris ullamcorper enim.
Praesent a quam sed magna vestibulum pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Vestibulum luctus. Etiam adipiscing massa eget justo. Vestibulum
eleifend enim sed leo. Cras euismod. Fusce quis lectus. Suspendisse
eu sem. Donec et dui. Ut molestie. Etiam placerat porta mauris. Fusce
mauris magna, faucibus vel, dapibus nec, dictum sit amet, odio. In
eleifend velit vitae lectus. In interdum mauris ullamcorper enim.
Praesent a quam sed magna vestibulum pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Vestibulum luctus. Etiam adipiscing massa eget justo. Vestibulum
eleifend enim sed leo. Cras euismod. Fusce quis lectus. Suspendisse
eu sem. Donec et dui. Ut molestie. Etiam placerat porta mauris. Fusce
mauris magna, faucibus vel, dapibus nec, dictum sit amet, odio. In eleifend
velit vitae lectus. In interdum mauris ullamcorper enim. Praesent a
quam sed magna vestibulum pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
luctus. Etiam adipiscing massa eget justo. Vestibulum eleifend enim
sed leo. Cras euismod. Fusce quis lectus. Suspendisse eu sem. Donec
et dui. Ut molestie. Etiam placerat porta mauris. Fusce mauris magna,
faucibus vel, dapibus nec, dictum sit amet, odio. In eleifend velit
vitae lectus. In interdum mauris ullamcorper enim. Praesent a quam
sed magna vestibulum pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Vestibulum luctus. Etiam adipiscing massa eget justo. Vestibulum
eleifend enim sed leo. Cras euismod. Fusce quis lectus. Suspendisse
eu sem. Donec et dui. Ut molestie. Etiam placerat porta mauris. Fusce
mauris magna, faucibus vel, dapibus nec, dictum sit amet, odio. In eleifend
velit vitae lectus. In interdum mauris ullamcorper enim. Praesent a
quam sed magna vestibulum pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
luctus. Etiam adipiscing massa eget justo. Vestibulum eleifend enim
sed leo. Cras euismod. Fusce quis lectus. Suspendisse eu sem. Donec
et dui. Ut molestie. Etiam placerat porta mauris. Fusce mauris magna,
faucibus vel, dapibus nec, dictum sit amet, odio. In eleifend velit
vitae lectus. In interdum mauris ullamcorper enim. Praesent a quam
sed magna vestibulum pellentesque.</p>
</div></center></td>
</tr>
<tr>
<td><img src="http://img.photobucket.com/albums/v215/immortalkaos80/yukibottom.png" alt="footer"></td>
</tr>
</table>
<map name="Map">
<area shape="rect" coords="296,636,478,673" href="http://www.virtualhorseranch.com/viewranch.php?ranch=181982" target="_blank">
</map>
</body>
</html>

<hr>
</center>


<font size=3>HORSES:</font>

<table cellpadding='3' cellspacing='2'>
<tr><td valign=top>
Horse </td><td valign=top>Breed </td><td valign=top> Gender </td><td valign=top>age </td><td valign=top>Training: level </td><td valign=top> Market
</td></tr>
<tr><td>

<b><u><a href=viewhorse.php?horse=1758799> CTR Money Sender</a>
</u>
</td><td>
Arabian
</td><td>
Mare
</td><td>
0.1 years old
</td><td>

</td><td>
Not for Sale
</td></tr></table>

<h4>Net Worth: $188000 </h4>


</td></tr></table></form></td></tr></table>

</body>
</html>
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.