FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

This is irritating me...

   Frihost Forum Index -> Webmaster and Internet -> Design Tips
 


{name here}
When I go to my site using internet explorer, the "main menu" text at the top of the screen loads properly. When I go to my site via Firefox, my title is pixels below the layer. How come? Is this my HTML's problem or is it firefox's problem?

This is the code for my web page in case it is its fault.
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>OS Advocacy</title>
<style type="text/css">
<!--
body,td,th {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #FFFFFF;
}
body {
   background-color: #000000;
}
a {
   font-size: 12px;
   color: #CCCCCC;
}
a:link {
   text-decoration: none;
}
a:visited {
   text-decoration: none;
   color: #CCCCCC;
}
a:hover {
   text-decoration: none;
   color: #FF0000;
}
a:active {
   text-decoration: none;
   color: #0000FF;
}
-->
</style>
<link href="standard.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#Layer1 {
   position:absolute;
   width:200px;
   height:115px;
   z-index:1;
   left: 9;
   top: 9;
}
#Layer2 {
   position:absolute;
   width:471px;
   height:153px;
   z-index:2;
   left: 480px;
   top: 9px;
}
#Layer3 {
   position:absolute;
   width:454px;
   height:23px;
   z-index:3;
   left: 490px;
   top: 18px;
}
#Layer4 {
   position:absolute;
   width:207px;
   height:21px;
   z-index:4;
   left: 490px;
   top: 46px;
}
#Layer5 {
   position:absolute;
   width:207px;
   height:21px;
   z-index:5;
   left: 736px;
   top: 46px;
}
#Layer6 {
   position:absolute;
   width:207px;
   height:21px;
   z-index:6;
   left: 490px;
   top: 73px;
}
#Layer7 {
   position:absolute;
   width:207px;
   height:21px;
   z-index:7;
   left: 736px;
   top: 73px;
}
#Layer8 {
   position:absolute;
   width:207px;
   height:21px;
   z-index:8;
   left: 490px;
   top: 100px;
}
#Layer9 {
   position:absolute;
   width:207px;
   height:21px;
   z-index:9;
   left: 736px;
   top: 100px;
}
#Layer10 {
   position:absolute;
   width:207px;
   height:21px;
   z-index:10;
   left: 490px;
   top: 127px;
}
#Layer11 {
   position:absolute;
   width:207px;
   height:21px;
   z-index:11;
   left: 736px;
   top: 127px;
}
#Layer12 {
   position:absolute;
   width:943px;
   height:22px;
   z-index:12;
   left: 9px;
   top: 170px;
}
.style5 {
   font-size: 16px;
   font-style: italic;
   font-variant: small-caps;
   color: #FF0000;
   font-weight: bold;
}
#Layer13 {
   position:absolute;
   width:943px;
   height:840px;
   z-index:13;
   left: 9px;
   top: 197px;
   background-color: #111111;
}
#Layer14 {
   position:absolute;
   width:943px;
   height:27px;
   z-index:14;
   left: 9px;
   top: 1040px;
}
-->
</style>
</head>

<body>
<div id="Layer1"><a href="http://osadvocacy.frih.net/"><img src="logo.png" alt="OS Advocacy" width="462" height="153" border="0" /></a></div>
<div class="style4" id="Layer2"></div>
<div class="style2" id="Layer3">

  <div align="center">
    <p><strong>main menu </strong></p>
  </div>
</div>
<div class="style3" id="Layer4">
  <div align="center"><a href="index.shtml">Home</a></div>
</div>
<div class="style3" id="Layer5">
  <div align="center"><a href="reasons.shtml">Reasons</a></div>

</div>
<div class="style3" id="Layer6">
  <div align="center"><a href="cgi-bin/forums/YaBB.pl" target="_blank">Forums</a></div>
</div>
<div class="style3" id="Layer7">
  <div align="center"><a href="articles.shtml">Articles</a></div>
</div>
<div class="style3" id="Layer8">
  <div align="center"><a href="contact.shtml">About/Contact Us </a></div>
</div>
<div class="style3" id="Layer9">

  <div align="center"><a href="links.shtml">Links</a></div>
</div>
<div class="style3" id="Layer10">
  <div align="center"><a href="archive.shtml" target="_blank">News Archive </a></div>
</div>
<div class="style3" id="Layer11">
  <div align="center"><a href="scl.shtml">System Comparision List </a></div>
</div>
<div class="style4" id="Layer12">
  <div align="center" class="style5">Site News </div>

</div>
<div id="Layer13">
<a name="newsitemEEuFEVEZluovqzLlIu"></a><hr />
<font size=3>Thursday, March 23 2006</font><br />
<font size=2><b>Site look changed</b></font></i></font><br>
<p>As you can see, I have changed the look of the site. I've got some errors I need to work out though, such as the main menu text.</p>
</div>
<div id="Layer14">
  <div align="center">Copyright&copy;2006 Operating System Advocacy. This site's news system is powered by <a href="http://en.wikipedia.org/wiki/Coranto" target="_blank">Coranto</a>. </div>

</div>
</body>
</html>

And here is the CSS for the title:
Code:
.
.style2 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 16px;
   font-style: normal;
   font-weight: normal;
   font-variant: small-caps;
   text-transform: capitalize;
   color: #FF0000;
   background-color: #666666;
}
SamiTheBerber
I want to ask one thing, why do you need so many layers???

There is just problem in IE, because if browser obeys CSS, then it would be behind, because your "Main menu" -text is on #layer3 and it has z-index:3; and after that is higher layers which make them seen higher. To fix the problem, just change z-index hinger number, for example 6, which is higer than on layer 4 and 5.
devroom
build it in some other way with less layers and put them for the loading-speed in a css file
Nyizsa
{name here} wrote:
...or is it firefox's problem?

Actually it is IE's problem. You made your HTML according to IE's box model, which doesn't follow the web standards. If you want to find out more, try this link: http://www.w3.org/TR/REC-CSS2/box.html, or search for it.
{name here}
Found the problem: The <p> tag was misaligning it... Thanks for your design tips, though.
SamiTheBerber
You have some errors in <font>, <font sixe=2> should be <font size="2"> of even better in pixels or in percentage. About the error you find in W3C Validator. You should fix them, because it can make misrendering in some browsers.
{name here}
That's part of news. I can't do anything about the font tags it's ingrained into coranto.
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.