- 1,396
- Posts
- 16
- Years
- The suburbs, and no I don't need to describe much
- Seen Dec 21, 2015
So I have been designing and coding this new website for a guild in World of Warcraft. However, different browsers have been a pain in the neck!
For instance, the website works perfectly, or at least how its intended to work, on safari and firefox. Chrome and IE on the other hand just does weird stuff when I load the site on em.
A few things that happens:
Help me? XD
http://www.andrewstest.110mb.com
Remember: Load the site in Safari, Firefox or Opera to see how it is supposed to look.
Here is the code if you dont use Firefox's Firebug or Chrome (Inspect Element):
CSS:
HTML(index):
For instance, the website works perfectly, or at least how its intended to work, on safari and firefox. Chrome and IE on the other hand just does weird stuff when I load the site on em.
A few things that happens:
- Every word linebreaks (the header of my site is three words, and is divided into 3 lines on IE and Chrome)
- Often times components and images wont even load on IE and Chrome.
- Basic alignments are off. As in, they are displayed completely different on IE and Chrome than on Safari, Opera and Firefox.
- Its just playin frustrating!
Help me? XD
http://www.andrewstest.110mb.com
Remember: Load the site in Safari, Firefox or Opera to see how it is supposed to look.
Here is the code if you dont use Firefox's Firebug or Chrome (Inspect Element):
CSS:
Spoiler:
body {
background: #000 url(images/bgrepeat.png) repeat;
}
whatevs {
width: 10000px;
height: 10000px;
}
#main {
background: url(images/toon.png) no-repeat scroll;
width: 407px;
height: 800px;
margin-top: 60px;
margin-left: 20px;
color: #000;
bottom: 100px;
position: static;
z-index: 3;
}
#main a:link {
color: #000;
text-decoration: none;
text-shadow: 0px 0px 3px #999;
position: absolute;
z-index: 5;
}
#main a:hover {
color: #000;
text-decoration: none;
text-shadow: 0px 0px 15px #999;
position: absolute;
z-index: 5;
padding-right:0.2em;
border-right:0.4em double #671f22;
}
#main a:visited {
color: #000;
text-decoration: none;
text-shadow: 0px 0px 3px #999;
position: absolute;
z-index: 5;
}
#blackspot {
width: 1174px;
height: 1010px;
position: absolute;
background: url(images/blackspot.png) no-repeat 0 -140px;
margin-left:-80px;
}
#spotlight {
width: 700px;
margin-left: -180px;
background: url(images/spotlight.png) no-repeat scroll 0 -50px;
height: 593px;
position: absolute;
z-index: 2;
left: 120px;
top: -11px;
}
#header {
color: #000;
text-transform: uppercase;
font: bold 50pt/50px "Walkway Black", Mshtakan, Playbill, "Poplar Std", Rockwell, "Rockwell Extra Bold";
margin-left: 245px;
background-position: 0;
margin-top: 0px;
}
#header-server {
color: #671f22;
text-transform: uppercase;
font: bold 20pt/15pt "Walkway Black";
margin-left: 800px;
position: absolute;
z-index: 10;
margin-top: 50px;
text-shadow: 0px 0px 15px black
}
#nav {
z-index: 3;
position: absolute;
left: 310px;
top: 120px;
text-transform: uppercase;
color: #000;
}
#nav a:link {
text-transform: uppercase;
color: #000;
text-decoration: none;
font: bold 25px "Walkway Black";
text-shadow: 0px 0px 3px #999;
}
#nav a:visited {
text-transform: uppercase;
color: #000;
text-decoration: none;
font: bold 25px "Walkway Black";
text-shadow: 0px 0px 3px #999;
}
#nav a:hover {
text-transform: uppercase;
color: #000;
text-decoration: none;
font: bold 25px "Walkway Black";
text-shadow: 0px 0px 15px #999;
padding-bottom:0.1em;
border-bottom:0.6em double #344966;
}
#nav ul{
list-style: none;
padding: 0;
margin: 0;
}
#nav li{
float: left;
margin-left: 20px;
}
.content{display:block}
.content {
display:block;
height: 552px;
overflow:hidden;
font-size:.01em;
background: #671f22;
width: 910px;
position: absolute;
z-index: 1;
margin-left: 300px;
margin-top: 120px;
box-shadow: 0px 0px 15px black;
-moz-box-shadow: 0px 0px 15px black;
-webkit-box-shadow: 0px 0px 15px black;
}
.content 1 {
display:block;
height: 552px;
overflow:hidden;
font-size:.01em;
background: #671f22;
width: 910px;
position: absolute;
z-index: 2;
margin-left: 300px;
margin-top: 120px;
box-shadow:insest 0px 0px 15px black;
-moz-box-shadow:inset 0px 0px 15px black;
-webkit-box-shadow:inset 0px 0px 15px black;
}
#intro {
background: url(images/armorybanner.png) no-repeat;
width: 960px;
height: 194px;
margin-top: 140px;
margin-left: 315px;
position: absolute;
z-index: 2;
}
#introtext {
color: black;
text-transform: uppercase;
font: bold 30pt/15pt "Walkway Black";
margin-left: 360px;
position: absolute;
z-index: 10;
margin-top: 300px;
text-shadow: 0px 0px 6px #999
}
background: #000 url(images/bgrepeat.png) repeat;
}
whatevs {
width: 10000px;
height: 10000px;
}
#main {
background: url(images/toon.png) no-repeat scroll;
width: 407px;
height: 800px;
margin-top: 60px;
margin-left: 20px;
color: #000;
bottom: 100px;
position: static;
z-index: 3;
}
#main a:link {
color: #000;
text-decoration: none;
text-shadow: 0px 0px 3px #999;
position: absolute;
z-index: 5;
}
#main a:hover {
color: #000;
text-decoration: none;
text-shadow: 0px 0px 15px #999;
position: absolute;
z-index: 5;
padding-right:0.2em;
border-right:0.4em double #671f22;
}
#main a:visited {
color: #000;
text-decoration: none;
text-shadow: 0px 0px 3px #999;
position: absolute;
z-index: 5;
}
#blackspot {
width: 1174px;
height: 1010px;
position: absolute;
background: url(images/blackspot.png) no-repeat 0 -140px;
margin-left:-80px;
}
#spotlight {
width: 700px;
margin-left: -180px;
background: url(images/spotlight.png) no-repeat scroll 0 -50px;
height: 593px;
position: absolute;
z-index: 2;
left: 120px;
top: -11px;
}
#header {
color: #000;
text-transform: uppercase;
font: bold 50pt/50px "Walkway Black", Mshtakan, Playbill, "Poplar Std", Rockwell, "Rockwell Extra Bold";
margin-left: 245px;
background-position: 0;
margin-top: 0px;
}
#header-server {
color: #671f22;
text-transform: uppercase;
font: bold 20pt/15pt "Walkway Black";
margin-left: 800px;
position: absolute;
z-index: 10;
margin-top: 50px;
text-shadow: 0px 0px 15px black
}
#nav {
z-index: 3;
position: absolute;
left: 310px;
top: 120px;
text-transform: uppercase;
color: #000;
}
#nav a:link {
text-transform: uppercase;
color: #000;
text-decoration: none;
font: bold 25px "Walkway Black";
text-shadow: 0px 0px 3px #999;
}
#nav a:visited {
text-transform: uppercase;
color: #000;
text-decoration: none;
font: bold 25px "Walkway Black";
text-shadow: 0px 0px 3px #999;
}
#nav a:hover {
text-transform: uppercase;
color: #000;
text-decoration: none;
font: bold 25px "Walkway Black";
text-shadow: 0px 0px 15px #999;
padding-bottom:0.1em;
border-bottom:0.6em double #344966;
}
#nav ul{
list-style: none;
padding: 0;
margin: 0;
}
#nav li{
float: left;
margin-left: 20px;
}
.content{display:block}
.content {
display:block;
height: 552px;
overflow:hidden;
font-size:.01em;
background: #671f22;
width: 910px;
position: absolute;
z-index: 1;
margin-left: 300px;
margin-top: 120px;
box-shadow: 0px 0px 15px black;
-moz-box-shadow: 0px 0px 15px black;
-webkit-box-shadow: 0px 0px 15px black;
}
.content 1 {
display:block;
height: 552px;
overflow:hidden;
font-size:.01em;
background: #671f22;
width: 910px;
position: absolute;
z-index: 2;
margin-left: 300px;
margin-top: 120px;
box-shadow:insest 0px 0px 15px black;
-moz-box-shadow:inset 0px 0px 15px black;
-webkit-box-shadow:inset 0px 0px 15px black;
}
#intro {
background: url(images/armorybanner.png) no-repeat;
width: 960px;
height: 194px;
margin-top: 140px;
margin-left: 315px;
position: absolute;
z-index: 2;
}
#introtext {
color: black;
text-transform: uppercase;
font: bold 30pt/15pt "Walkway Black";
margin-left: 360px;
position: absolute;
z-index: 10;
margin-top: 300px;
text-shadow: 0px 0px 6px #999
}
HTML(index):
Spoiler:
<html><head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Website</title>
</head><body>
<div id="whatevs">
<div>
<b class="content 1"></b>
<b class="content"></b></div>
<div id="intro"></div>
<div id="introtext">Oh Hey There!</div>
<div id="blackspot"
</div>
<div id="spotlight">
</div>
<div id="nav">
<ul>
<li><a href="#">Roster</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
<div id="main">
<div id="header-server">On Kael' Thas-US Horde</div id="header-server">
<div id="header">
<a href="index.html">Cartoon Cartoon Fridays</a>
</div id="header">
</div>
</body></html>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Website</title>
</head><body>
<div id="whatevs">
<div>
<b class="content 1"></b>
<b class="content"></b></div>
<div id="intro"></div>
<div id="introtext">Oh Hey There!</div>
<div id="blackspot"
</div>
<div id="spotlight">
</div>
<div id="nav">
<ul>
<li><a href="#">Roster</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
<div id="main">
<div id="header-server">On Kael' Thas-US Horde</div id="header-server">
<div id="header">
<a href="index.html">Cartoon Cartoon Fridays</a>
</div id="header">
</div>
</body></html>