1 Replies - 516 Views - Last Post: 25 April 2013 - 02:17 PM

#1 Glorfindal  Icon User is offline

  • Java Enthusiast
  • member icon

Reputation: 23
  • View blog
  • Posts: 535
  • Joined: 31-December 08

Cross-Browser Compatitibility

Posted 25 April 2013 - 02:00 PM

I have returned to working on my game, however, I have decided to fix up the HTML completely so that I can move onto the server-side stuff without having to worry about the HTML later. I ran the game and took the HTML from it as a static page to use as a template after it is fixed. The issue is it looks great in Firefox however, when run in Google Chrome, Internet Explorer or Safari it is messed up. I used the W3C validator to to find and fix about 18 errors in the HTML, however with only two left the page is still displaying incorrectly with no sign of improvement. So my question is what should I do to get the page to look the same across these different browsers?

Here is a screenshot from Firefox:
Attached Image

Incorrectly in Google Chrome:
Attached Image

Here is my HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"><link rel="stylesheet" type="text/css" href="DragonCraft-CityTemplate_files/css.css">
<script type="text/javascript" src="DragonCraft-CityTemplate_files/javascript.js"></script></head>

<body id="body" style="" onload="showOverlay();disp_message();">
<div id="QuestTracker" style="height: 796px;"><div id="contentdisplacer"></div>
<span style="color:gold; text-align: center">Quest Tracker (0/3)</span><hr style="color:gold;width:100%"></div>
<div class="container" id="container"><div class="heroinfo">
<div style="background-image:url('../Images/back2.png');">
<div id="HeroPortrait" title="Hero Portrait">
<span style="color:gold;padding:2px;">Hero Name</span><br>
<img src="DragonCraft-CityTemplate_files/elf-male.png" alt="Portrait">    
<br><span style="color:gold;padding:2px;">
Level: 1</span></div>

<div id="HP" style="margin-top:5px;">
<span style="color:gold;">HP 25/25</span>
<div style="border:1px solid gold;color:white;width:100px;"><div style="width:86.4864864864865px;background:#00CC66;float:left;height:10px;"></div>
<div style="width:;height:10px;"></div></div>
<br>
<span style="color:gold;">XP: 0/30</span><div style="border:1px solid gold;color:white;width:100px;">
<div style="width: 0px;background: #3E3EB1;float:left;height:10px;"></div><div style="width:;height:10px;"></div></div></div></div>
<div id="Gold">
<span style="color:gold;">Turns:&nbsp;
28211</span><br>
<span style="color:gold;">Coins:&nbsp;
1</span>
</div>
<div id="Itemstable">
<img src="DragonCraft-CityTemplate_files/bow.htm" alt="Bow">
<a href="http://localhost/DragonCraft/inventory.asp?state=5&amp;Item=Pine%20Bow" class="link">Pine Bow</a><br>
<img src="DragonCraft-CityTemplate_files/sword.htm" alt="Sword">
<a href="http://localhost/DragonCraft/inventory.asp?state=5&amp;Item=Worn-Sword" class="link">Worn-Sword</a><br> <br>
</div>
<div id="Statstable" style="display:none;">
<span style="color:white">Coming Soon!</span>
</div>
<div id="Skillstable" style="display:none;">
<span style="color:white">Coming Soon!</span>
</div>
<div id="tabcontainer">
<div id="tab1" class="Itemstab-selected" onclick="ShowItems();">Items</div>
<div id="tab2" class="Statstab" onclick="ShowStats();">Abilities</div>
<div id="tab3" class="Skillstab" onclick="ShowSkills();">Traits</div>
</div>

<div id="hideorshowtext">
<a href="http://localhost:33679/DragonCraft/dragoth/default.asp?showtracker=false" class="link" style="font-size:12px;font-weight:bold;">Hide Tracker</a>
</div>
</div></div><br>
<div id="contentcontainer" style="float:left;">
<div class="content">
<table border="0" cellspacing="0" style="width:  80%"><tbody><tr>
<td colspan="3" align="left" valign="top" style="background-image:url('../Images/back2.png');">
<b style="font-family: Copperplate Gothic Bold; color: yellow; font-size: 20px;">Dragoth</b></td></tr>
<tr><td style="background-image:url('../Images/back2.png'); width:  82px" valign="top">
<img class="portrait" src="DragonCraft-CityTemplate_files/dragoth.png" alt="Area Portrait"></td><td style="background-image:url('../Images/back2.png'); width:  10px">&nbsp;</td>
<td valign="top" style="background-image:url('../Images/back2.png');">
<span style="color:white;">Dragoth is a small town, but well situated for new people as it has many different facilities for all different professions</span>
<br><br><b style="color:white">Town Square</b><br><a href="http://localhost:33679/DragonCraft/dragoth/market.asp" class="link">
<img src="DragonCraft-CityTemplate_files/market.png" style="border: 1px solid gold" alt="Icon"> Market</a>
<br><a href="http://localhost:33679/DragonCraft/dragoth/tavern.asp" class="link">
<img src="DragonCraft-CityTemplate_files/inn.png" style="border: 1px solid gold" alt="Icon"> Inn</a>
<br><a href="http://localhost:33679/DragonCraft/dragoth/vault.asp" class="link">
<img src="DragonCraft-CityTemplate_files/chest.png" style="border: 1px solid gold" alt="Icon"> Vault</a><br>


<br><br>
<b style="color:white">Leave Town</b><br>
<a href="http://localhost:33679/DragonCraft/dragoth/travel-gates.asp" class="link" title="Travel to the city gates requires one turn.">
<img src="DragonCraft-CityTemplate_files/gates.png" style="border: 1px solid gold;" alt="icon"> Gates (1)</a>

</td></tr></tbody></table>
</div></div><div style="color:transparent;background-color:transparent;width:100%;height:4em;"></div>
<div id="navigationBar">
<span style="color:white;"><a href="javascript:ShowMenu();" class="link">Menu</a> | 
<a class="link" href="http://localhost/DragonCraft/inventory.asp">Inventory</a> | 
<a class="link" href="http://localhost/DragonCraft/privatemessages.asp">Inbox</a> | 
<a class="link" href="http://localhost/DragonCraft/pageredirector.asp">Hide Chat</a></span>
</div>
<div id="Menu" style="visibility:hidden">
<div class="menutop"><span style="text-align:right;"></span><a href="javascript:HideMenu();" class="links">
<img src="DragonCraft-CityTemplate_files/x.png" style="border:0;" alt="X"></a></div>    
<br><br><div class="MenuButton"><a href="http://localhost/DragonCraft/logout.asp">Logout</a></div>
<br><div class="MenuButton"><a href="http://localhost/DragonCraft/quit.asp">Quit</a></div>
</div>


</body></html>


Here is my CSS:
/* Small fonts; color white; Imported from Market.asp on August 20, 2011 */

.smallwhite{font-size:12px;color:white;}
.smallwhitebold{font-size:12px;color:white;font-weight:bold}


/* User Interface added by Glorfindel on August 14 2011 */

a.link {
text-decoration:none;
color: #FFFF00 ;
}
a.link:hover {
color: #CCCC00;
/* font-style:italic; */
}

a {
text-docoration:none;
}

.MenuButton {
margin-left:auto;
margin-right:auto;
background:gold;
color:white;
width:80px;
padding:3px;
border:1px dashed red;
text-align:center;
}

.MenuButton:hover {
background:white;
color:gold;
}

#Menu {
background: Grey;
position:absolute;
height:60%;
width:40%;
bottom:20%;
top:20%;
left:30%;
right:30%;
border: 2px solid red;
border-radius: 0 0 15px 15px;
z-index:99;
}

/* Visible and hidden classes added Glorfindel on August 16, 2011 */

.visible {
visibility:visible;
}

.hidden {
visibility:hidden;
}

.menutop {
background: gold;
width:100%;
text-align:right;
}

#contentcontainer {
position:relative; 
width:85%;
color: white;
margin-left:1em; 
background-image:url('../Images/back2.png');
vertical-align:middle;
border-radius: 15px 15px 15px 15px;
}

#contentcontainerfull {
position:relative; 
width:98%; 
margin-left:auto;
margin-right:auto;
background-image:url('../Images/back2.png');
vertical-align:middle;
border-radius: 15px 15px 15px 15px;
}

#HeroPortrait {
float:left;
background-image:url('../Images/back2.png');
padding:5px;
text-align:center;
}
#HeroPortrait img {
border:1px solid gold;
vertical-align:middle;
margin: 2px;
}

#inventorybottom {
background-image:url('../Images/back2.png');
width:inherit;
clear:both;
}

#inventoryleft {
float: left;
background-image:url('../Images/back2.png');
width:200px;
}

#inventorycontent {
background-image:url('../Images/back2.png');
width:100%;
}

#inventoryright {
float: left;
background-image:url('../Images/back2.png');
}
#HP {
float:left;
background-image:url('../Images/back2.png');
vertical-align:middle;
padding-top:1em;
}
body {
margin:0px;
width:100%;
background:url('../Images/back1.png');
z-index:1;
}
.container {
width:100%;
margin:0px;
z-index:1;
}
.heroinfo {
position:relative; 
height:150px; 
width:100%; 
top:0; 
margin-left:0px; 
margin-right:0px;
background-image:url('../Images/back2.png');
}
.spacer {
float:left;
padding:5px;
}
.verticalspacer {
width:100%;
height:7px;
}
.content {
padding: .5em;

}

/* General */
/* Inventory */
input.merge-button {
background-image:url('../Images/wood.png');
color:white;
border:0;
font-size:12px;
}
/* Homepage */
p.welcometext {
font-family:"Copperplate Gothic Bold", "Times New Roman", serif;
font-size:18px; 
font-weight:bold;
color:#FFFFFF
}
div.container {
background-image:url('../images/back1.jpg');
background-repeat: repeat;
margin:0px;
width:100%;
overflow:hidden;
}
input.loginfield {
color:white;
background-color:black;
border:1px solid white;
}
a.pagelinks {
font-size:11px;
color:white;
text-decoration:none
}
a.pagelinks:hover {
text-decoration:underline;
} 
input.login {
background-image:url('../Images/wood.png');
color:white;
border:0;
font-size:18px;
}
input.button {
background-image:url('../Images/wood.png');
color:white;
border:1;
font-size:12px;
}
/* Miscellaneous */  
img.img {
border:0;
}
/*a.link {
color:yellow;
text-size:12px;
Text-decoration:none;
}*/
/* New Link CSS added by Glorfindel on 5/28/2010*/
a.link {
text-decoration:none;
color: #FFFF00 ;
}
a.link:hover {
color: #CCCC00;
/* font-style:italic; */
}
/* Journal */
.Journal {
color:white;
background-color:black;
}
/* Added by Glorfindel on January 20 */
img.portrait { 
border:1px solid white; 
padding:1px; 
background:black 
}
/* Added by Glorfindel on January 20 */
/* Battle Components */
a.attacklink {
color:yellow;
text-size:12px
Text-decoration:none
}
a.attacklink:hover {
  color:red;
  Text-decoration:none;
  font-weight:bold;
}
/* Register */
/* Added by Glorfindel on 3/25/2010 */
input.registerBtn {
background-image:url('http://dragoncraft.richardsprojects.net/wood.png');
color:white;
border:0;
font-size:15px;
}
input.field {
color:white;
background-color:black;
border:1px solid white;
}
a.backlink {
font-size:14px;
color:yellow;
text-decoration:none
}
a.backlink:hover {
text-decoration:underline;
}
/* END */
/* Chat Added by Glorfindel on 3/27/2010 */
.chattop {
background-image:url('http://dragoncraft.richardsprojects.net/Chat/chat_bg_top.png');
Color: Black;
font-size: 10px;
}
/* List Switcher Added by Glorfindel on 3/29/2010 */
td.stats-selected {
border-left-width:1px;
border-left-style:solid;
border-left-color:white;
border-right-width:1px;
border-right-style:solid;
border-right-color:white;
border-top-width:1px;
border-top-style:solid;
border-top-color:white;
}
td.non-selected-items {
border-right-width:1px;
border-right-style:solid;
border-right-color:white;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:white;
border-top-width:1px;
border-top-style:solid;
border-top-color:white;
}
td.non-selected-combatabilities {
border-right-width:1px;
border-right-style:solid;
border-right-color:white;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:white;
border-top-width:1px;
border-top-style:solid;
border-top-color:white;
}
td.non-selected-stats {
border-left-width:1px;
border-left-style:solid;
border-left-color:white;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:white;
border-top-width:1px;
border-top-style:solid;
border-top-color:white;
}
td.selected-items {
border-right-width:1px;
border-right-style:solid;
border-right-color:white;
border-left-width:1px;
border-left-style:solid;
border-left-color:white;
border-top-width:1px;
border-top-style:solid;
border-top-color:white;
}
.quittutorial {
background-image: url('http://dragoncraft.richardsprojects.net/images/exitbutton.png');
height: 11px;
width: 11px;
text-decoration:none;
font-size:9px;
text-align:right;
}

.quittutorial:hover {
background-position: left -11px;
}

tr.list-bottom {
border-right-width:1px;
border-right-style:solid;
border-right-color:white;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:white;
border-left-width:1px;
border-left-style:solid;
border-left-color:white;
}
td.selected-combatabilities {
border-right-width:1px;
border-right-style:solid;
border-right-color:white;
border-top-width:1px;
border-top-style:solid;
border-top-color:white;
}
td.non-selected-items2 {
border-right-width:1px;
border-right-style:solid;
border-right-color:white;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:white;
border-top-width:1px;
border-top-style:solid;
border-top-color:white;
border-left-width:1px;
border-left-style:solid;
border-left-color:white;
}
/* Admin Section added by Glorfindel on 5/29/2010 */
textarea.admin-textarea {
color:white;
background-color:black;
}
div.admin-bar {
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:white;
}
input.admin-button {
background-image:url('http://www.dragonkwest.net/dragonkwest/wood.png');
color:white;
border:0;
font-size:18px;
}
/* Headings Added by Glorfindel on 5/30/2010 */
span.h1 {
font-family:Copperplate Gothic Bold,Times New Roman,serif;
Color:Yellow;
Font-Size:21px
}
/* Hidden and visible table classes added by Glorfindel on Monday October 24, 2011 */
#Itemstable {
float:left;
background-image:url('../Images/back2.png');
vertical-align:middle;
margin-top:1em;
margin-left:1em;
border:1px solid gold;
padding:5px;
height:6.5em;
width:175px;
}
#Statstable {
float:left;
background-image:url('../Images/back2.png');
vertical-align:middle;
margin-top:1em;
margin-left:1em;
border:1px solid gold;
padding:5px;
height:6.5em;
width:175px;
}
#Skillstable {
float:left;
background-image:url('../Images/back2.png');
vertical-align:middle;
margin-top:1em;
margin-left:1em;
border:1px solid gold;
padding:5px;
height:6.5em;
width:175px;
}
#Itemstable-hidden {
display:none;
}
#Statstable-hidden {
display:none;
}
#Skillstable-hidden {
display:none;
}
/* End of hidden and visible classes. */
div.Itemstab-selected {
float:left;
background-image:url('../Images/back2.png');
vertical-align:middle;
border-bottom:1px solid gold;
border-right:1px solid gold;
border-top:1px solid gold;
border-left:1px solid #444444;
padding:3px;
height:1em;
width:100%;
margin-left:-1px;
color:White;
border-radius: 0px 15px 0px 0px;
}
div.Itemstab {
float:left;
background:#1E1E1E;
vertical-align:middle;
border: 1px solid gold;
padding:3px;
height:1em;
width:100%;
margin-left:-1px;
color:White;
border-radius: 0px 15px 0px 0px;
}
div.Statstab {
float:left;
background:#1E1E1E;
vertical-align:middle;
border:1px solid gold;
padding:3px;
height:1em;
width:100%;
color:white;
margin-left:-1px;
}
div.Statstab-selected {
float:left;
background-image:url('../Images/back2.png');
vertical-align:middle;
border-bottom:1px solid gold;
border-right:1px solid gold;
border-top:1px solid gold;
border-left:1px solid #444444;
padding:3px;
height:1em;
width:100%;
color:white;
margin-left:-1px;
}
div.Skillstab-selected {
float:left;
background-image:url('../Images/back2.png');
vertical-align:middle;
border-bottom:1px solid gold;
border-right:1px solid gold;
border-top:1px solid gold;
border-left:1px solid #444444;
padding:3px;
height:1em;
width:100%;
color:white;
margin-left:-1px;
border-radius: 0px 0px 15px 0px;
}
div.Skillstab {
float:left;
background:#1E1E1E;
vertical-align:middle;
border:1px solid gold;
padding:3px;
height:1em;
width:100%;
color:white;
margin-left:-1px;
border-radius: 0px 0px 15px 0px;
}

#tabcontainer {
float:left;
background-image:url('../Images/back2.png');
vertical-align:middle;
margin-top:1em;
bottom-padding:5px;
height:6.5em;
width:80px;
}
#Gold {
float:left;
background-image:url('../Images/back2.png');
vertical-align:middle;
padding-top:1em;
margin-left:1em;
}
#QuestTracker{
    width : 12%;
	float:right;
	background-image:url('../Images/back2.png')
}
#contentdisplacer{
    width : 100%;
	height:150px;
	background-color:#444444;
}
#hideorshowtext {
float:right;
background-image:url('../Images/back2.png');
vertical-align:middle;
padding-top:125px;
margin-left:1em;
padding-right:5.5%;
}

#navigationBar {
border-top: 1px solid gold;
border-left: 1px solid gold;
border-right: 1px solid gold;
background-color: Grey;
position: fixed;
bottom:0; 
left:20%;  
right:20%; 
width: 60%;
padding: 5px;
border-radius:15px 15px 0 0; 
text-align: center
}


Is This A Good Question/Topic? 0
  • +

Replies To: Cross-Browser Compatitibility

#2 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2890
  • View blog
  • Posts: 9,597
  • Joined: 12-December 12

Re: Cross-Browser Compatitibility

Posted 25 April 2013 - 02:17 PM

You have errors in the inline css of these lines:

<div style="width:;height:10px;"></div></div>

<div style="width:;height:10px;"></div></div></div></div>


I have to mention:

If you are using an external stylesheet why do you also have lots of inline styles?! Why not put them in the stylesheet :whistling:;
If you are familiar with css, why are you using br-tags? This is a poor practice and br-tags should be used infrequently;
Why do you have so many nested divs? Suffering divitis!

You have some errors in your css as well

http://jigsaw.w3.org...dator/validator
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1