...

View Full Version : error when viewing in firefox, button not working but does in IE7



w4vy
05-24-2008, 04:49 AM
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 :confused: has anyone got a fix for me please ? :D

Here is my code (home.html) :-

<!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


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 :thumbsup:

vtwopoint0
05-24-2008, 07:32 AM
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. :)

w4vy
05-24-2008, 07:42 AM
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

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

w4vy
05-24-2008, 07:56 AM
ok I failed to understand and implement your fixer :( can you post the code you edited for me plz ?

w4vy
05-24-2008, 07:00 PM
Question 1)


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 :confused: 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 :D

<!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.

_Aerospace_Eng_
05-25-2008, 02:13 AM
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

<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

<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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum