The PokéCommunity Forums

The PokéCommunity Forums (https://www.pokecommunity.com/index.php)
-   Off-Topic (https://www.pokecommunity.com/forumdisplay.php?f=23)
-   -   Browser Issues (https://www.pokecommunity.com/showthread.php?t=236923)

Comic Tragedy November 17th, 2010 12:24 PM

Browser Issues
 
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:
  • 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
}


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>

donavannj November 17th, 2010 1:30 PM

You're coding it wrong. You should adhere to the W3C standards when you code a page.

Check it yourself against the W3C online Validator. And also check it against their CSS Validator.

I encountered several errors when I ran both your webpage and your code through those validators. You're best chance at getting it to work properly is to make it up to the standards of W3C.

Comic Tragedy November 17th, 2010 1:32 PM

Ha! Ok, thanks so much. Can you tell I'm new to all this? XD
I'll definitely re-write it well this time.

aRedMoon November 18th, 2010 3:39 PM

Will note that when using a fully CSS based layout, you should expect that it will not show up correctly in all browsers.

And I'm not sure on this, but I'm pretty sure you shouldn't be using that font - Walkway Black - because it's not a default font. It just shows a default font if you don't have it installed.


All times are GMT -8. The time now is 5:45 PM.


Like our Facebook Page Follow us on Twitter © 2002 - 2018 The PokéCommunity™, pokecommunity.com.
Pokémon characters and images belong to The Pokémon Company International and Nintendo. This website is in no way affiliated with or endorsed by Nintendo, Creatures, GAMEFREAK, The Pokémon Company or The Pokémon Company International. We just love Pokémon.
All forum styles, their images (unless noted otherwise) and site designs are © 2002 - 2016 The PokéCommunity / PokéCommunity.com.
PokéCommunity™ is a trademark of The PokéCommunity. All rights reserved. Sponsor advertisements do not imply our endorsement of that product or service. User generated content remains the property of its creator.

Acknowledgements
Use of PokéCommunity Assets
vB Optimise by DragonByte Technologies Ltd © 2023.