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.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    May 2008
    Location
    Doncaster, England
    Posts
    34
    Thanks
    2
    Thanked 2 Times in 2 Posts

    Question error when viewing in firefox, button not working but does in IE7

    Hey guys n girls I've come across a little problem with a part of my xhtml code which only fails when viewed with Firefox and runs perfect in IE7. What it is, is that I have a vertical scroll bar with a button at the top and a button at the bottom which are top button = go back to index page and bottom button = go back to the top of this page, only the bottom button to go back to the top won't work in Firefox has anyone got a fix for me please ?

    Here is my code (home.html) :-
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!--Made with Dreamweaver 8 with a little input from myself, http://www.url.co.uk - created on 29/03/08
    This page has been fully validated as XHTML 1.0 Strict at validator.w3.org -->
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        
    <title>title bar text here</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    
    </head>
    <body>
    
    <div id="outer">
    <div id="inner">
                
    <div class="bgtext">background text here</div>
                
    <div id="close"><a href="index.html" title="close and return to menu">X</a></div>
    <div id="top"><a href="#top" title="back to top">^</a></div>    
                
    <div id="urltext"><a href="index.html" class="navigurl" title="click to return to the index page">index &raquo; </a>home <a href="#" class="navigurl" title="click to go to the fav sites page">fav sites &raquo; </a> <a href="#" class="navigurl" title="click to download my mixes">my mixes &raquo; </a></div>
                           
    <div id="content">
    <a name="top"></a>
    <div class="titleblock">title goes here</div>
    
        some text here.
        <p />
                                                          
    <div class="titleblock">title goes here</div>
                               
        some text here.
        <p />
                                    
    <div class="titleblock">title goes here</div>
    
        some text here.
        <p /></div>
                
    </div>
    </div>
            
    </body></html>
    Here is my CSS incase you need it
    Code:
    body {background:#000;
          margin:0;
          scrollbar-3dlight-color:#222;
          scrollbar-arrow-color:#FFF;
          scrollbar-base-color:#000;
          scrollbar-darkshadow-color:#222;
          scrollbar-face-color:#000;
          scrollbar-highlight-color:#000;
          scrollbar-shadow-color:#000}
          
    #outer                         
        {position: absolute;
         top: 50&#37;;
         left: 0px;
         width: 100%;
         height: 1px;}
    
    #inner    
        {margin-left: -250px;
         position: absolute;
         top: -150px;
         left: 50%;
         width: 700px;
         height: 300px}
         
         
    
    .bgtext                     
            {font-size: 100px;
             position:absolute;
             top:50px;
             left:-110px;
             right:-80px}
    
    .bgtext, .footertext 
            {color:#222;
             font-family:verdana, helvetica, sans serif;}
             
    .footertext {font-size:12px;
                 position:bottom;
                 top:320px;
                 text-align:center;
                 width:500px;}
    
    
    
    div#text1, div#text2, div#text3, div#text4, div#text5, div#text6, div#text7
             {
        color:#222222;
        font-family:verdana, helvetica, sans serif;
        position:absolute;
        height: 48px;
        width: 249px;
    }
    
    div#text1 {font-size:60px;
            top:-37px;
            left:-30px;}
            
    div#text2 {font-size:60px;
            top:105px;
            left:43px;}
            
    div#text3 {font-size:35px;
            top:69px;
            left:502px;}
            
    div#text4 {font-size:50px;
            top:239px;
            left:80px;}
            
    div#text5 {font-size:39px;
            top:185px;
            left:254px;}
            
    div#text6 {font-size:45px;
            top:36px;
            left:255px;}
            
    div#text7 {font-size:28px;
            top:252px;
            left:437px;}
            
    
    
    
    
     div#text1 a:hover span {top: -3px; 
                            left: 0px; 
                            width: auto}
    
     div#text2 a:hover span {top: -10px; 
                            left: 0px; 
                            width: auto}
                            
     div#text3 a:hover span {top: -4px; 
                            left: 0px; 
                            width: auto}
    
     div#text4 a:hover span {top: -6px; 
                            left: 0px; 
                            width: auto}
            
     div#text5 a:hover span {top: -6px; 
                            left: 0px; 
                            width: auto}
                            
     div#text6 a:hover span {top: -4px; 
                            left: 0px; 
                            width: auto}
                            
     div#text7 a:hover span {top: -4px; 
                            left: 0px; 
                            width: auto}
                                       
    div#inner a:hover, div#inner2 a:hover
                      {background: none;
                       cursor:crosshair;}
    
    div#inner a span {display: none;}
    
    div#inner a:visited span {display:none;}
    
    div#inner a {text-decoration: none;
                 color:white;}
    
    div#inner a:hover span {display: block;
                            position:relative;
                            background:none;
                            font-size:14px}
                            
    div#inner a:link, div#inner a:visited {text-decoration:none;}
    
    div#inner a:hover {text-decoration:none}
    
    
    
    div#content {position:absolute;
                 top:-50px;
                 left:-70px;
                 width:635px;
                 height: 433px;
                 overflow: auto;
                 font-family: verdana, helvetica, sans serif;
                 font-size: 13px;
                 color:white;
                 text-align:justify;
                 margin:3px;}
    
    div#inner div#content a:hover {text-decoration:underline;}
                 
    
    
    div#close, div#top 
              {width:17px;
               height:17px;
               background:none;
               text-align:center;
               font-family:verdana, helvetica, sans serif;
               font-weight:bold;
               font-size:12px;
               border: 1px solid #222}
       
    div#top {position:relative;
               left:573px;
               top:319px}
    
    div#close {position:relative;
               left:573px;
               top:-47px;}
               
    div#inner div#close a:link, div#inner div#top a:link {color:#fff; cursor:default;}
    div#inner div#close a:visited, div#inner div#top a:visited {color:#fff; cursor:default;}
    div#inner div#close a:hover, div#inner div#top a:hover {color:#fff; cursor:default;}
    
    
    
    div#urltext {font-family:verdana, helvetica, sans serif;
                 font-size:30px;
                 position:absolute;
                 top:-87px;
                 left:-69px} 
    
    
    
    div#urltext, div#inner div#content a:link, div#inner div#content a:visited, div#inner a:hover, div#inner a:hover span
                    {color:#ff7c11}
                 
    div#content div#titlebar {border: 1px solid #222222;
                    background: #000;
                    font-weight: normal;
                    color:  #ff7c11;}
                    
    div#content {margin-left:0;
                padding-right:8px;}
                 
                 
                 
    .titleblock {font-family:verdana, helvetica, sans serif;
                    font-size:12px;
                    color:#ff7c11;
                    font-weight:normal;
                    margin-right:6px;
                    margin-top:10px;
                    margin-bottom:10px;
                    margin-left:2px;
                    border:1px solid #222;
                    padding:4px}
                    
    .titleblock span {color:#ff7c11}
    
    #urltext a:link {color:#444}
    #urltext a:visited {color:#444}
    #urltext a:hover {color:#444}
    #urltext a:active {color:#444}
    I trust someone here can help me and thank you in advance
    Last edited by w4vy; 05-24-2008 at 08:29 AM. Reason: Ceaned up some errors shown by W3C CSS Validator, Now have 7 not 16

  • #2
    New Coder
    Join Date
    May 2008
    Posts
    21
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Three things I noticed in your code.
    One thing is that the ^ is at/near the top of the page and needs to be moved to the bottom.
    Another thing is that there is no text within the <a href="#top"> and the </a>.
    <div class="bgtext"><a name="top">b</a>ackground text here</div> is an easy way to fix that. (Or put it somewhere else in the top line of text, or in your H1 if you have one on your page.)
    The last thing is that, the anchor will not work while it sits within <div id="top"> </div>.

    I copied your code and made these changes, and it works in firefox after making those changes. It also still works in IE7. I checked it in both browsers.
    Last edited by vtwopoint0; 05-24-2008 at 08:32 AM. Reason: typo

  • #3
    New Coder
    Join Date
    May 2008
    Location
    Doncaster, England
    Posts
    34
    Thanks
    2
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by vtwopoint0 View Post
    Three things I noticed in your code.
    One thing is that the ^ is at/near the top of the page and needs to be moved to the bottom.
    Another thing is that there is no text within the <a href="#top"> and the </a>.
    <div class="bgtext"><a name="top">b</a>ackground text here</div> is an easy way to fix that. (Or put it somewhere else in the top line of text, or in your H1 if you have one on your page.)
    The last thing is that, the anchor will not work while it sits within <div id="top"> </div>.

    I copied your code and made these changes, and it works in firefox after making those changes. It also still works in IE7. I checked it in both browsers.
    Ok thanks i'll get right onto your fixer but while i do that can you take another look for me and see why
    Code:
    body {background:#000;
          margin:0;
          scrollbar-3dlight-color:#222;
          scrollbar-arrow-color:#FFF;
          scrollbar-base-color:#000;
          scrollbar-darkshadow-color:#222;
          scrollbar-face-color:#000;
          scrollbar-highlight-color:#000;
          scrollbar-shadow-color:#000}
    gives me errors @ W3C and notice when viewed in IE7 the scroll bar is black but in FF it is the blue'ish I intended? if you don't mind that is thanks

  • #4
    New Coder
    Join Date
    May 2008
    Location
    Doncaster, England
    Posts
    34
    Thanks
    2
    Thanked 2 Times in 2 Posts
    ok I failed to understand and implement your fixer can you post the code you edited for me plz ?

  • #5
    New Coder
    Join Date
    May 2008
    Location
    Doncaster, England
    Posts
    34
    Thanks
    2
    Thanked 2 Times in 2 Posts

    Question Update

    Question 1)
    Code:
    body {background:#000;
          margin:0;
    
    scrollbar-3dlight-color:#222;
    scrollbar-arrow-color:#FFF; scrollbar-base-color:#000; scrollbar-darkshadow-color:#222; scrollbar-face-color:#000; scrollbar-highlight-color:#000; scrollbar-shadow-color:#000}
    Those 7 underlined are stopping my css being validated at W3C and I don't know why I have tried looking on google and the like but I'm kinda hoping someone here will know what to do and wouldn't mind helping me validate it.

    Question 2)
    If you go back to my first post I am still stuck as to getting the "back to Top" button (anchor) to work in Firefox. (vtwopoint0) tried showing me his fix for it but I don't understand what he means mainly becasue of the typos but also in my code where it says "bgtext" that is to make my URL appear in the background of the web page behind the actual content and not to make "click to go back to Top" appear when the mouse is hovering over the "Back to Top" button, I tried working with what he said but the bgtext URL moved into the foreground aswell as moved up and down with the scroll bar which it shouldn't do. Anyway if you copy my code and name each accordingly "home.html" "stylesheet.css" and also the code I am posting here "Index.html" you will have a better idea as to what I am trying to achieve. Thanks for looking and I hope together we can crack this
    Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!--Made with Dreamweaver 8 with a little input from myself, http://www.URL.co.uk - created on 29/03/08
    This page has been fully validated as XHTML 1.0 Transitional at validator.w3.org -->
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>www.URL.co.uk</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    <div class="footertext" id="outer">
    <div id="inner">
    <div class="bgtext">www.URL.co.uk</div>
    <div id="text1"><a href="home.html">Home<span>welcome, click to enter.</span></a></div>
    <div id="text2"><a href="#">Forum<span>coming soon</span></a></div>
    <div id="text3"><a href="#">Chat Room<span>coming soon</span></a></div>
    <div id="text4"><a href="#">My Mixes<span>coming soon</span></a></div>
    <div id="text5"><a href="#">Fav Sites<span>coming soon</span></a></div>
    <div id="text6"><a href="#">Arcade<span>coming soon</span></a></div>
    <div id="text7"><a href="mailto:me@emal.co.uk">Contact Me<span>click to send me an email</span></a></div>
    </div>
    </div>
    </body>
    </html>
    Thank you in advance

    David.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    That CSS isn't valid CSS. It never has been. It was created by Microsoft to get scrollbar colors. It won't validate.

    As to your problem you have this
    Code:
    <div id="top"></div>    
                
    <div id="urltext"><a href="index.html" class="navigurl" title="click to return to the index page">index &raquo; </a>home <a href="#" class="navigurl" title="click to go to the fav sites page">fav sites &raquo; </a> <a href="#" class="navigurl" title="click to download my mixes">my mixes &raquo; </a></div>
                           
    <div id="content">
    <a name="top"></a>
    You have a div with id="top" and an anchor with name="top". You can't have both. You need to get rid of one of them.

    So make it look like this instead
    Code:
    <a id="top" name="top"></a>    
                
    <div id="urltext"><a href="index.html" class="navigurl" title="click to return to the index page">index &raquo; </a>home <a href="#" class="navigurl" title="click to go to the fav sites page">fav sites &raquo; </a> <a href="#" class="navigurl" title="click to download my mixes">my mixes &raquo; </a></div>
                           
    <div id="content">
    Then your link should work if there is enough scrollbar.
    Last edited by _Aerospace_Eng_; 05-25-2008 at 03:16 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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