Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 39
  1. #1
    New Coder
    Join Date
    Feb 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    please HELP. My code works in ie but not firefox

    It works fine on ie, but has some serious freaking issues on firefox. I really need some help so I can get this up and running on the main page.

    Thanks guys!


    Here is the .css
    Code:
    BODY {FONT-SIZE: 100%; COLOR: #f0f0f0; FONT-FAMILY: Trebuchet MS, Verdana, Geneva, Arial, sans-serif; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px; PADDING-TOP: 0px; background: url('images/mainpagebgdark.jpg');}
    
    INPUT {FONT-SIZE: 100%; COLOR: #666; FONT-FAMILY: Trebuchet MS, Verdana, Geneva, Arial, sans-serif}
    
    SELECT {FONT-SIZE: 100%; COLOR: #666; FONT-FAMILY: Trebuchet MS, Verdana, Geneva, Arial, sans-serif}
    
    #page {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; WIDTH: 850px; PADDING-TOP: 0px; TEXT-ALIGN: left; z-index: -1; }
    
    #logo { PADDING-LEFT: 0px; PADDING-TOP: 0px; z-index: 0; position: absolute; left: 10px; top: 10px; width: 222px; height: 43px; z-index:0;}
    
    #content { BORDER-RIGHT: #ccd7e0 1px solid; PADDING-RIGHT: 20px; BORDER-TOP: #ccd7e0 1px solid; PADDING-LEFT: 20px; BACKGROUND: #fff; PADDING-BOTTOM: 20px; MARGIN: 0px 8px; BORDER-LEFT: #ccd7e0 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #ccd7e0 1px solid; HEIGHT: 1em}
    
    IMG {border-width: 0px;}
    
    #google_ad_box {z-index: 0; background: black; position: absolute; left: 304px; top: 8px; width: 468px; height: 60px; }
    
    #buttonmenu {z-index:0; position: absolute; left: 5px; top: 85px; width: 145px; height: 290px; TEXT-ALIGN: center; }
    
    #button {z-index:1; background: url('images/button.gif'); position: relative; width: 142px; height:29px; margin-top: 0px; font-size: 100%;}
    
    #maincontent {padding-left: 45px; padding-right: 50px ; padding-bottom: 10px; padding-top: 0px;z-index: 1; position: relative; left: 0px; top: 0px; width:100%; font-size: 100%; background: url('images/scrollbg.gif'); text-align: left; color: #A52A2A; font-weight: 900;}
    
    #scrolltop {z-index: 1; position: relative; top: 0px; left: 0px;}
    
    #scrollbot {z-index: 1; position: relative; top:0px; left: 0px;}
    
    #scroll {z-index: 1; position: absolute; left: 190px; top: 100 px; width: 597px; font-size: 100%; text-align: center;}
    
    
    #google_box_2 {z-index: 1; position: absolute; left: 15px; top: 400px; width: 120px; height: 600px; font-size: 100%;}
    
    a { color: #8B0000;
    }
    
    a.button  {	color : white;
    	text-decoration : none;
    	font-weight : bolder;
          line-height : 29px ;
            font-family: Verdana;
            font-size: 100%}
    
    A.button:Hover  {
            color : #A52A2A;
    	font-style : italic;
    	font : bold;}
    
    font.firefox {font-size: 60%; font-family: Arial; font: bold; text-decorate: none; color: #292929; }
    
    p {text-indent: 10pt;}

    And here is the index

    Code:
    <html>
    <head>
    	<title>RuneEscape.Net</title>
    
    	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
    	<link rel="stylesheet" href="re.css" type="text/css" media="all" />
    
    
    
    <script>
    
    
    function buttonupdate(buttonname) {
       if(buttonname=='Xemos') {
       str='<center><h1>Xemos</h1></center><p>RuneEscape.Net is the proud home of Xemos, which is an ongoing and promising project by one of our Founders, Owl. This client will take the RS world by storm... </p><p>...as soon as we get it finished, that is!</p><p>Owl has been hard at work on this, but we can use your help. Go download the Alpha version and try to find bugs and errors. Make suggestions, too!</p><p>You can download the alpha version from our forums.<p><p align="right">~Sincerely<br>The Founders<br></p>';
       document.getElementById('maincontent').innerHTML=str;
       }
       if(buttonname=='Guides') {
       str='<center><h1>Guides</h1></center><br /><p>Our members have been doing an incredible job of guide writing, though we still need a lot more. We will upload the ones we have very soon. Stay tuned for Quest Guides, City Guides, Skill Guides, and Guild Guides.</p><p align="right">~Sincerely<br>The Founders<br></p>';
       document.getElementById('maincontent').innerHTML=str;
       }
       if(buttonname=='REPaper') {
       str='<center><h1>RuneEscape.Net Paper</h1></center><br /><p>Our members have asked for an official paper, and we are doing what we can to make it happen.  Articles are being written and a staff is being formed. If you would like to be a part of this new venture, let us know in the forums.</p><p align="right">~Sincerely<br>The Founders<br></p>';
       document.getElementById('maincontent').innerHTML=str;
       }
       else if(buttonname=='History') {
       str='<center><h1>History</h1></center><br /><p>On this page, you should be reading about the History of RuneEscape. However, it is two hours after midnight as I write this, and I am feeling a bit tired. I will try to get the history up soon.</p><p>Stay tuned...</p><p align="right">~Sincerely<br>The Founders<br></p>';
       document.getElementById('maincontent').innerHTML=str;
       }
       else if(buttonname=='Ebay'){
       str='<center><h1>Contributions</h1></center><br /><p>Many of our users have inquired about how to contribute money to the developement and betterment of RuneEscape.Net.  As of this moment in time, Keyser520 has spent almost $400 on the site, for the hosting server and for the purchase of vbulletin. He is trying to recover some of this expense with the google ads that you see on our pages.</p><p>Those of you that have inquired about how to contribute to this site can do so through <A HREF="https://www.paypal.com/us/mrb/pal=VW8EYR4B6BXR6">Paypal</a>.</p><p>Send your contributions to the paypal account:</p> <center>keyser520@gmail.com</center><br /><p align="right">~Sincerely<br>The Founders<br></p><center><!-- Begin PayPal Logo --><A HREF="https://www.paypal.com/us/mrb/pal=VW8EYR4B6BXR6" target="_blank"><IMG  SRC="http://images.paypal.com/en_US/i/bnr/paypal_mrb_banner.gif" BORDER="0" ALT="Sign up for PayPal and start accepting credit card payments instantly."></A><!-- End PayPal Logo --></center>';
       document.getElementById('maincontent').innerHTML=str;
       }
      else if(buttonname=='REClans'){
      str='<center><h1>RuneEscape Hosted Clans</h1></center><br /><p>RuneEscape.Net is proud to offer hosting to active Runescape clans. We provide you with your own domain at <i>yourclanname</i>.runeescape.net, and we only ask two things in exchange. <ul><li>You allow us to put an ad box on your page</li><li>Your clan page links back to RuneEscape.Net</li></ul></p><p>If you want to join the ranks of the RuneEscape hosted clans, you need to<ul><li>send a private message to Keyser520 on our forums</li><li>have a clan with at least 20 <i>active</i> members</li><li>have a clan with potential and that has survived for at least 2 months</li><li>send your coded pages to keyser520@runeescape.net</li></ul></p><center><h3>Hosted Clans</h3><table border="1" bgcolor="#A3A3A3"><tr><td>Gods of Glory</td><td><a href=http://godsofglory.runeescape.net>godsofglory.runeescape.net</a></td></tr></table></center><p align="right">~Sincerely<br>The Founders<br></p>';
      document.getElementById('maincontent').innerHTML=str;
      }
    
    }
    
    </script>
    
    </head>
    
    <body>
    
    <div id="page"><img src="images/Graniteslab.gif">
    </div>
    <div id="logo"><a href="http://www.runeescape.net"><img src="images/logo.gif"></a>
    </div>
    <div id="google_ad_box">
    <script type="text/javascript"><!--
    google_ad_client = "pub-8436755030314590";
    google_ad_width = 468;
    google_ad_height = 60;
    google_ad_format = "468x60_as";
    google_ad_type = "text_image";
    google_ad_channel ="";
    google_color_border = "333333";
    google_color_bg = "mainpagebgdark.gif";
    google_color_link = "FFFFFF";
    google_color_url = "999999";
    google_color_text = "CCCCCC";
    //--></script>
    <script type="text/javascript"
      src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    <!-- google ad here -->
    </div>
    <div id="buttonmenu">
      <div id="button"><a class="button" href="#" onClick="buttonupdate('Xemos')">Xemos</a></div>
      <div id="button"><a class="button" href="http://www.runeescape.net/forums" target="_blank">Forums</a></div>
      <div id="button"><a class="button" href="http://www.runeescape.net/theaddiction" target="blank">Addiction</a></div>
      <div id="button"><a class="button" href="#" onClick="buttonupdate('Guides')">Guides</a></div>
      <div id="button"><a class="button" href="#" onClick="buttonupdate('REPaper')">RE Paper</a></div>
      <div id="button"><a class="button" href="#" onClick="buttonupdate('REClans')">Clans</a></div>
      <div id="button"><a class="button" href="#" onClick="buttonupdate('History')">History</a></div>
      <div id="button"><a class="button" href="#" onClick="buttonupdate('Ebay')">Contribute</a></div>
        <!-- google firefox toolbar --><font class="firefox">best viewed with</font>
           <script type="text/javascript"><!--
           google_ad_client = "pub-8436755030314590";
           google_ad_width = 110;
           google_ad_height = 32;
           google_ad_format = "110x32_as_rimg";
           google_cpa_choice = "CAAQ_-KZzgEaCHfyBUS9wT0_KOP143Q";
           //--></script>
          <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
          </script>
      <!-- end google firefox toolbar -->
      </div>
    </div>
    <div id="google_box_2">
    <!-- google ad here -->
    <script type="text/javascript"><!--
    google_ad_client = "pub-8436755030314590";
    google_ad_width = 120;
    google_ad_height = 600;
    google_ad_format = "120x600_as";
    google_ad_type = "text_image";
    google_ad_channel ="";
    google_color_border = "333333";
    google_color_bg = "000000";
    google_color_link = "FFFFFF";
    google_color_url = "999999";
    google_color_text = "CCCCCC";
    //--></script>
    <script type="text/javascript"
      src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    </div>
    
    <div id='scroll'>
    <div id='scrolltop'><img src="images/scrolltop.gif"></div>
    <div id="maincontent">
     <center><h1>Welcome to RuneEscape.Net!</h1></center>
    
    <p>Whether or not you came here with a purpose or merely got lost on your way to the game, we're glad you're here!</p>
    <p> You have arrived at a fansite for Runescape--a site that's seeing new developements and additions almost everyday! We opened our doors in January 2006 and are looking to be one of the best and biggest runescape tip sites out there...
    <p> Make sure to check out the links to the left and see what we have to offer. Check back often for more developments. And make yourself at home on our forums!</p>
    
    <p>And remember, always...</p>
     <center><h2>Make your Escape at RuneEscape.net!</h2></center>
    
    
     <p align="right">~Sincerely<br>
     The Founders<br></p>
    
     </div>
    <div id='scrollbot'><img src="images/scrollbot.gif"></div>
    
    </div>
    </body >
    </html>
    all images can be found at www.runeescape.net/images

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Actually it's most definately Firefox displaying it how you've written it, and IE displaying it how you want it to look.

    There's no Doctype for starters, placing IE into quirks mode.

    Do you have a link to the page?

  • #3
    New Coder
    Join Date
    Feb 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sure.

    http://www.runeescape.net/test


    The css and index have changed slightly from what I posted but you can see them here

    http://www.runeescape.net/re.css
    http://www.runeescape.net/index.html

  • #4
    New Coder
    Join Date
    Feb 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried making a simple example to figure things out, but I'm still having issues.

    I just dont' understand why it's interpretting things differently in firefox vs ie. What is the correct way to get this dang thing to work?

    the .html is
    Code:
    <html>
    <head>
    	<title>RuneEscape.Net</title>
    
    	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
    	<link rel="stylesheet" href="test.css" type="text/css" media="all" />
    
    </head>
    <body>freakin
    <div id="page">
    <div id="content">content</div>
    <div id="left">left
    <div id="menu">menu</div>
    <div id="ad">ad</div>
    </div>
    <div id="right">right
    <div id="scrolltop">scroll top</div>
    <div id="maincontent">middle scroll</div>
    <div id="scrollbot">scroll bot</div>
    </div>
    </div>
    </body>
    </html>
    and the .css is
    Code:
    BODY {
    	FONT-SIZE: 76%;
            COLOR: #666;
            FONT-FAMILY: Trebuchet MS, Verdana, Geneva, Arial, sans-serif;
            PADDING-RIGHT: 25px;
            PADDING-LEFT: 25px;
            PADDING-BOTTOM: 0px;
            MARGIN: 28px 0px;
            PADDING-TOP: 0px;
            TEXT-ALIGN: center
    }
    #page {
    	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND:#8A8A8A; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 850px; PADDING-TOP: 9px; TEXT-ALIGN: left
    }
    #topbar {
    	BORDER-RIGHT: #ccd7e0 1px solid; PADDING-RIGHT: 20px; BORDER-TOP: #ccd7e0 1px solid; PADDING-LEFT: 20px; BACKGROUND: #802A2A; PADDING-BOTTOM: 20px; MARGIN: 0px 8px; BORDER-LEFT: #ccd7e0 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #ccd7e0 1px solid; HEIGHT: 10em
    }
    }
    #left {
    	FLOAT: left; MARGIN: 20px 0px; WIDTH: 460px; POSITION: relative; BACKGROUND: #9C661F;
    }
    #right {
    	FLOAT: right; MARGIN: 20px 0px; WIDTH: 300px; POSITION: relative; BACKGROUND: #93DB70;
    }
    
    #menu {      FLOAT: top;  POSITION: relative; HEIGHT: 400px; BACKGROUND: white;
    }
    
    #ad {       POSITION: relative; FLOAT: bottom; HEIGHT: 200px; BACKGROUND: black;
    }
    
    #scrolltop {       FLOAT: top; POSITION: relative; HEIGHT: 100px; BACKGROUND: white;
    }
    #maincontent {       POSITION: relative; top:0px; left: 0px; HEIGHT: 100px; BACKGROUND: black;
    }
    #scrollbot {       FLOAT: bottom; POSITION: relative; HEIGHT: 100px; BACKGROUND: white;
    }
    Last edited by Keyser520; 02-09-2006 at 06:19 AM.

  • #5
    Regular Coder
    Join Date
    Jan 2006
    Posts
    164
    Thanks
    0
    Thanked 0 Times in 0 Posts
    FF is a lot more compliant than IE.

    So may I recommend that you get it to work in FF first and then get it to work in IE.
    Visit me ¦CSS Magic¦

  • #6
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    As mentioned above, first thing you should do is add in a doctype before the <html> of your page. This will put IE into 'standards' mode. Then see what happens (chances are it will mess up what it looks like in IE).

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

  • #7
    New Coder
    Join Date
    Feb 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Adding the standards mode to it did make it screw up...

    But does anyone have any idea how to fix it?

    It now lines the scroll div box up with the bottom of the button menu box... and it no longer pays attention to the padding commands..or doesn' see to.

    Help :-(


    I thought I understood this stuff, but now I'm just getting frustrated.

  • #8
    Regular Coder
    Join Date
    Feb 2006
    Location
    The Netherlands
    Posts
    106
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mark87
    As mentioned above, first thing you should do is add in a doctype before the <html> of your page. This will put IE into 'standards' mode. Then see what happens (chances are it will mess up what it looks like in IE).

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    This doctype obviously is the wrong choice seeing the use of <font>, <center> and whatnot. In this case I think you need the transitional one:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/loose.dtd">


    How about changing the float for #menu to left?
    Yeah that.

  • #9
    New Coder
    Join Date
    Feb 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well I redesigned the whole thing from scratch, using the strict standards, and reveiwing the changes each step made in firefox and in ie.

    The result is here http://www.runeescape.net .


    If you have any suggestions for improvements, let me know.

  • #10
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Well, no, you did not design to 'strict' standards. You used loose. You should have used html4 strict. The second problem is you designed your site using IE first. IE is a buggy, old non-compliant browser. FF is a modern, up to date, standards-compliant browser. If you want to use modern techniques, you must design to standards and not to bugs, ie, IE. Just changing the doctype is not going to make your code work automatically.

    Also, you use the xhtml ending tag '/>' with a html doctype. Remove the slash.
    You have 70 html validation errors and a number of CSS errors. Validate your code, fix it, then come back.

  • #11
    Regular Coder
    Join Date
    Feb 2006
    Location
    The Netherlands
    Posts
    106
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by drhowarddrfine
    Well, no, you did not design to 'strict' standards. You used loose. You should have used html4 strict. The second problem is you designed your site using IE first. IE is a buggy, old non-compliant browser. FF is a modern, up to date, standards-compliant browser. If you want to use modern techniques, you must design to standards and not to bugs, ie, IE. Just changing the doctype is not going to make your code work automatically.

    Also, you use the xhtml ending tag '/>' with a html doctype. Remove the slash.
    You have 70 html validation errors and a number of CSS errors. Validate your code, fix it, then come back.
    Yeah, Fx notes 149 warnings, which are basically just errors. But as you did close the tags with the slash and use lowercase letters, I recommend switching to XHTML 1.0 Strict.

    Also, it's a nice effect that you visit a link by hovering it, but it's not handy. Most people aren't used to it, and if you're about half on a page and you hover a link then you'd have to scroll back to were you were, assuming you know what happened. Also, this increases page load time, if you'd only load page when they're actually visited it would be much better, in my opinion. So nice work, but overdone, though I can imagine you not wanting to remove it because you worked on it.

    Also, the second "f" in Firefox isn't spelled with a capital letter . Just my two cents.
    Yeah that.

  • #12
    New Coder
    Join Date
    Feb 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    drhoward, could you go into more details on how to do what you've suggested? I basically knew nothing about how to make any of this work until about 3 days ago--so I've taught myself all of the stuff you see on that page. I *thought* that I had designed it according to "strict" standards, but, apparently, I was quite wrong. Any help you could offer as to WHAT it is that I did wrong would be much appreciated.


    So you are saying that you should never use the /> but only > ? How do you check for errors and "validate"?

    I designed it by looking at both ie and ff after every change and seeing what worked in both. I guess that's the wrong approach?


    Vin0rz, are you saying to remove the "onmouseover" bit?

  • #13
    Regular Coder
    Join Date
    Feb 2006
    Location
    The Netherlands
    Posts
    106
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Keyser520
    drhoward, could you go into more details on how to do what you've suggested? I basically knew nothing about how to make any of this work until about 3 days ago--so I've taught myself all of the stuff you see on that page. I *thought* that I had designed it according to "strict" standards, but, apparently, I was quite wrong. Any help you could offer as to WHAT it is that I did wrong would be much appreciated.


    So you are saying that you should never use the /> but only > ? How do you check for errors and "validate"?

    I designed it by looking at both ie and ff after every change and seeing what worked in both. I guess that's the wrong approach?


    Vin0rz, are you saying to remove the "onmouseover" bit?
    I have no knowledge of Javascript, all I'm saying is that I don't think hovering links is better than clicking them.

    As for the validator, http://validator.w3.org/
    Yeah that.

  • #14
    New Coder
    Join Date
    Feb 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Vin0rz
    I have no knowledge of Javascript, all I'm saying is that I don't think hovering links is better than clicking them.

    As for the validator, http://validator.w3.org/
    For the validation http://validator.w3.org/check?uri=ht...runeescape.net


    Ok, I can't figure out what causes all of these "end tag for element which is not open" errors

    I presume that I need to change my id="button" to class="button" ?

    I don't understand error 97 and 98.

    99 i need help on as well.

    What does it mean by "center" is undefined in error 102?


    You said that I should use xhtml rather than html? What does this entail changing? I tried validating with xhtml strict 1.0 but got lots of errors (150) that i don't quite understand. http://validator.w3.org/check?uri=ht...TML+1.0+Strict


    Also, how can i validate the style sheet?

    Thanks!

  • #15
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    CSS Validator You are right to check both browsers but IE is the buggy one so make it work in Firefox first so you know the code is correct. Then you can adjust for IE. More after I look at it.


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •