Webbsida ser fel ut på vissa datorer
Jag har suttit i närmare 10 veckor med en webbsida nu (tack alla swecare för all hjälp) och har skickat ut sidan live på företagets interna nät. Det är ett verktyg som inte kommer vara tillgängligt utanför företaget, så jag kan inte länka till sidan.
Det dröjde dock inte länge innan jag fick samtal om att sidan var fel.
Vid undersökning ser det ut som om datorn bara läser en viss del av CSS'en, men det är CSS2-saker den har problem med. Testade på fyra datorer, Internet Explorer och FireFox på alla fyra och 2 datorer fungerade felfritt, men 2 datorer visade detta fel i båda webbläsarna.
Felloggen ger inga varningar alls!
Här är en bild, som jag tror kan förklara felet lite bättre:
och här är CSS'en i sin helhet:
body
{
background-color: white;
}
a
{
text-decoration: none;
color: #666666;
}
a:visited
{
color: #666666;
}
a:hover
{
color: #666666;
text-decoration: underline;
}
header
{
width: 900px;
height: 20px;
color: white;
text-align: center;
padding-bottom: 2px;
background-image: url("../../img/headBG.png");
background-repeat: repeat-x;
background-color: #333333;
border-radius: 2px;
position: relative;
margin: auto;
}
header p
{
display: inline;
margin: 0;
margin-top: 10px;
}
header ul
{
list-style: none;
}
header li
{
text-align: left;
margin: 0;
padding: 2px;
border-right: 1px solid white;
border-left: 1px solid white;
float: left;
}
header li:hover
{
background-color: #006837;
}
header h1
{
font-size: 1.1em;
}
#wrapper
{
position: relative;
margin: auto;
width: 1000px;
}
#planowrapper
{
position: relative;
margin: auto;
width: 1247px;
}
#noCanvasText
{
display: none;
border: 5px solid #f8dc0c;
float: left;
clear: both;
padding: 10px;
font-size: 1.2em;
background-color: #6FC7F2;
}
#container
{
max-width: 1000px;
max-height: 1000px;
min-width: 935px;
min-height: 735px;
float: left;
}
#containerBack
{
width: 100%;
background-color: white;
}
#container canvas
{
display: block;
border: 2px dotted #666666;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
box-shadow: 5px 5px 5px #a9a3a3;
}
#sidebar
{
float: left;
width: 305px;
height: 760px;
overflow: auto;
margin-left: 5px;
margin-top: 0px;
border: 1px solid #666666;
border-left: 0;
background-color: white;
}
#toolbar
{
float:left;
margin-left: 5px;
background-color: white;
position: relative;
}
#list
{
float: right;
max-width: 300px;
height: 299px;
border: 1px solid #666666;
overflow: scroll;
margin-left: 5px;
padding: 5px;
background-color: white;
}
#list p
{
border: 1px solid #666666;
}
#nameList
{
padding: 5px;
float: left;
margin: 5px;
width: 300px;
min-height: 300px;
background-color: #bbb;
}
#nameList p
{
margin: 0;
margin-bottom: 2px;
border: 1px solid black;
padding: 2px;
padding-left: 15px;
background-color: #999;
}
#nameList h1
{
margin: 0;
margin-bottom: 2px;
padding: 2px;
font-size: 1.1em;
}
#indexForm
{
background-color: #bbb;
text-align: right;
float: left;
width: 635px;
height: 300px;
padding: 5px;
margin: 5px;
}
.format
{
margin: 15px;
}
#formsubmit
{
border: 2px solid #666;
border-radius: 2px;
padding: 5px;
padding-left: 25px;
color: white;
background-color: #bbb;
float: right;
margin-right: 350px;
margin-top: 2px;
}
#formsubmit:hover
{
color: #eee;
background-color: #ddd;
}
.hiddenDiv
{
display: none;
}
.visibleDiv
{
display: block;
float: left;
width: 275px;
height: 275px;
border: 1px solid #666666;
border-radius: 2px;
margin-bottom: 2px;
background-color: white;
}
.visibleDiv p
{
border: 1px solid #666666;
margin: 0;
background-color: #39B54A;
}
.visibleDiv img
{
max-width: 175px;
max-height: 175px;
border: 2px solid #666666;
border-radius: 5px;
display: block;
margin-left: auto;
margin-right: auto;
}
#printPlanogram
{
float: left;
max-width: 750px;
}
#printPlanogram img
{
float: left;
}
#printPlanogram #canvas
{
width: 500;
height: 1300;
background-color: white;
}
#printList
{
float: left;
max-width: 400px;
border: 1px solid #666666;
margin-left: 5px;
margin-top: 100px;
padding: 5px;
background-color: white;
}
#printList p
{
border: 1px solid #666666;
}
#imageContainer
{
border: 2px solid #666666;
float: left;
background-color: white;
}
#capsule
{
border: 1px solid black;
padding: 1px 5px 1px 0;
}
HTML-koden för sidan som krånglar:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8"/>
<title>Planographic | <?php echo $height . "x" . $width; ?></title>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.8.0...."></script>
<script src="ext/js/jquery.js"></script>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-image-p..."></script>
<link type="text/css" rel="stylesheet" href="ext/css/style.css">
</head>
<body>
<div id="planowrapper">
<header>
<ul>
<li id="goBack">Back</li>
<li id="toggleHelp">Help</li>
<li id="nextBtn" onclick="nextPage();">Next</li>
</ul>
<p> Stall height: <?php echo $height; ?>, width: <?php echo $width; ?>, length: <?php echo $depth; ?></p>
</header>
<form method="post" id="next" action="postpage.php?<?php echo $fileNameTemp; ?>">
<input type="hidden" name="fileName" value="<?php echo $fileNameTemp; ?>" />
</form>
<div id="noCanvasText">
<p>Här ligger egentligen ett långt hjälpdokument, som bara tar upp onödig plats på forumet ;)</p>
</div>
<div id="list" style="display: none"></div>
<div id="debug"></div>
<br />
<?php listAllItems(); ?>
<div id="container"></div>
</div>
</body>
Stationär: Processor: Intel i5 3.2GHz, RAM: 4Gb, Grafikkort: ATI Radeon HD 5850, OS: Windows 7 Proffessional x64
Laptop: ASUS K53E, Processor: Intel i5 2450M, RAM: 4Gb, Grafik: Integrerad Intel GMA HD, OS: Win7 Home Premium x64 och Xubuntu 10
