PDA

View Full Version : Css buttons don't work in IE



masterofollies
Oct 10th, 2008, 09:46 PM
I am coding the following site in CSS/PHP

http://www.rodgame.org/downloads/bruce/index.php

I am using custom CSS buttons. When a IE user goes to it, it will not do anything when you click a button, but firefox users have no problem. What would be causing this?

Apostropartheid
Oct 10th, 2008, 11:47 PM
Which buttons would these be? The ones seemingly acting as navigation? Because IE's throwing a JavaScript error when I try and use those. The two in the content section are just images, so I assume this isn't what you're talking about.

twodayslate
Oct 10th, 2008, 11:56 PM
Check out CSSplay.co.uk for cool buttons and navigations.
http://www.google.com/search?hl=en&q=CSS+button&btnG=Google+Search&aq=f&oq=


<a href="URL" title="NAME"><img src="BUTTON_URL" alt="BUTTON_NAME" /></a>

masterofollies
Oct 11th, 2008, 12:33 AM
Yes I am talking about the ones on the left side. Here is the coding for them.


<style type="text/css">

input.groovybutton
{
font-size:14px;
font-family:Comic Sans MS,sans-serif;
font-weight:bold;
color:#FFFFFF;
width:140px;
background-color:#FF9912;
border-style:dotted;
}

</style>

<script language="javascript">

function goLite(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.color = "#000000";
window.document.forms[FRM].elements[BTN].style.backgroundColor = "#FFFFFF";
}

function goDim(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.color = "#FFFFFF";
window.document.forms[FRM].elements[BTN].style.backgroundColor = "#FF9912";
}

</script>

and then a button looks like this.


echo '<center><a href="index.php"><form name="groovyform">
<input
type="button"
name="groovybtn1"
class="groovybutton"
value="Welcome"
title="Welcome Page"
onMouseOver="goLite(this.form.name,this.name)"
onMouseOut="goDim(this.form.name,this.name)">
</form></a><br>';

twodayslate
Oct 11th, 2008, 12:48 AM
You do not need javascript for a navigation.
http://www.google.com/search?hl=en&q=css+navigation&btnG=Google+Search&aq=f&oq=
http://www.google.com/search?hl=en&safe=off&sa=X&oi=spell&resnum=0&ct=result&cd=1&q=css+vertical+navigation&spell=1

masterofollies
Oct 11th, 2008, 01:16 AM
But if I use a navigation it won't be the same style. I need to be left nav buttons without sublinks in that color and style.

twodayslate
Oct 11th, 2008, 01:33 AM
But if I use a navigation it won't be the same style. I need to be left nav buttons without sublinks in that color and style.

Then edit the code.
http://www.w3.org/Style/CSS/
http://www.w3schools.com/html/html_intro.asp

We are not going to do it for you. We point you in the right direction. Read those pages and sub pages and if you are still confused post again.

masterofollies
Oct 11th, 2008, 01:59 AM
I know how to edit, but deleting the buttons and using a whole different coding won't work.

Graft-Creative
Oct 11th, 2008, 02:05 AM
Why are you using forms for navigation? Most do just fine with a simple anchor tag?

Gary

masterofollies
Oct 11th, 2008, 04:21 AM
I don't know too much about CSS yet, so I will need to see that a anchor is and does. I just want my buttons to show up in both FF and IE. thats it

abduraooft
Oct 11th, 2008, 08:20 AM
Might be due to the invalid markup. You have to fix the errors first, before expecting cross browser support. See http://validator.w3.org/check?uri=http&#37;3A%2F%2Fwww.rodgame.org%2Fdownloads%2Fbruce%2Findex.php&charset=%28detect+automatically%29&doctype=Inline&group=0
Why do you need a form for each navigation link?

masterofollies
Oct 11th, 2008, 02:41 PM
I added a DTD validate to it but it doesn't help. I think since it can't be done, that I will do the old (Click here for IE users, and Click here for Firefox Users)

abduraooft
Oct 11th, 2008, 02:57 PM
I added a DTD validate to it but it doesn't help The errors are still there. I believe a form inside an anchor is invalid!

_Aerospace_Eng_
Oct 11th, 2008, 04:23 PM
Its not hard to make the buttons in to CSS. It was actually harder to do them in javascript. I suggest you start learning the proper methods of doing things. Your page is far from being valid coding wise. Simply adding a doctype does not validate things. You actually have 2 doctypes in your code. You should only have one. This is the CSS that you could use.

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
background:orange;
}
a.groovybutton {
font-size:14px;
font-family:Comic Sans MS, sans-serif;
font-weight:bold;
color:#FFF;
width:140px;
background:#FF9912;
border:2px dotted #FFF;
display:block;
text-align:center;
margin-bottom:4px;
text-decoration:none;
}
a.groovybutton:hover {
color:#000;
background:#FFF;
border-color:#000;
}
</style>
</head>
<body>
<a href="index.php" class="groovybutton" title="Welcome Page">Welcome</a> <a href="aboutus.php" class="groovybutton" title="About Us Page">About Us</a>
</body>
</html>