Small validation problem (vs. I'm learning xhtml/javascript/css)

KevySaysBeNice · Feb 22, 2007

Cliffs:

1. I'm trying to make sure my webpage validates with validator.w3.org
2. Currently my images are like this

Code:

<a href="login.html"><img border="0" src="login.png" alt="Login" /></a>

3. However, border="0" does not follow xhtml (strict) standards, but I am having a hell of a time getting the "buttons" to display without a border any other way
4. I've tried setting outline-type:none, border-width:0px all in the style sections, but still no luck

5. I'm an idiot?
6. If you want to see the full code, see below

Thanks!

So, if any of you saw the mess I created (with a LOT of help from dreamweaver) a few days ago, it looked something like this:

Code:

<title>Shoeless Photo Assignments</title><style type="text/css">
<!--
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
}
body {
	background-color: #000000;
}
#Layer1 {
	position:absolute;
	width:264px;
	height:136px;
	z-index:1;
	left: 160px;
	top: 267px;
}
#Layer2 {
	position:absolute;
	width:290px;
	height:152px;
	z-index:2;
	left: 160px;
	top: 475px;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<body onLoad="MM_preloadImages('pageElements/loginMouseOver.png','pageElements/visitorMouseOver.png','pageElements/loginMainPage/loginMouseOver.png','pageElements/loginMainPage/visitorMouseOver.png')" tracingsrc="tempImages/login.jpg" tracingopacity="100">
<div id="Layer1"><a href="loginEntry.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Login','','pageElements/loginMouseOver.png',1)"></a><a href="loginEntry.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Login','','pageElements/loginMainPage/loginMouseOver.png',1)"><img src="pageElements/loginMainPage/login.png" alt="Registered Users Login" name="Login" width="266" height="140" border="0"></a></div>
<img src="pageElements/banner.png" alt="banner" width="800" height="130" longdesc="banner">
<div id="Layer2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Visitor','','pageElements/visitorMouseOver.png',1)"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Visitor','','pageElements/loginMainPage/visitorMouseOver.png',1)"><img src="pageElements/loginMainPage/visitor.png" alt="Visitors" name="Visitor" width="301" height="151" border="0"></a></div>

And while it looked ok, it was really messy for my liking, hard to read, etc. So, I took some time today to start teaching myself xhtml and css and javascript, and now I've got this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
<script type="text/javascript" src="imageSwap.js"></script>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Login - Shoeless Photo Assignments</title>

<style type="text/css">

	body
		{
		background-color:black;
		margin:0 auto;
		width:800px;
		border:0px;
		}
	
	#login
		{
		position:relative;
		left:250px;
		top:70px;
		border:0px;
	
		}
		
	#visitor
		{
		position:relative;
		left:250px;
		top:100px;
		border:0px;
		}
	

</style>
</head>

<body>

<div>
<img src="banner.png" alt="**Shoeless Photo Assignments**" />
</div>

<div id="mouseovers">
<div id="login">
<a href="login.html"><img border="0" src="login.png" alt="Login" /></a>
</div>


<div id="visitor">
<a href="visitor.html"><img border="0" src="visitor.png" alt="Visitor" /></a>
</div>
</div>


</body>
</html>

Sgraffite · Feb 22, 2007

Add this line to your css:

Code:

A IMG {border:none; }

calebb · Feb 22, 2007

Or... if you don't have a css defined:

<img src="/boutellcomlogo.png" style="border-style: none"/>

KevySaysBeNice · Feb 23, 2007

Thank you!!

Follow up (and yet unrelated) question:

is there anyway to make a submit button an image?

Or, at least, make the submit button very large and invisible, to overlay it ontop of another image?

So far I have this:

Code:

	<form method="post" action="login.php">
		<div>
		<input type="text" name="username" size="44" id="usernametextbox" />
		<input type="password" name="password" size="44" id="passwordtextbox" />
		<input type="submit" value="Submit" hidden=true; name="login" id="submitbutton" />
		</div>
	</form>
	
	<div id="mouseovers">
		<div id="submit">
		<a href="login.html"><img style="border-style: none" src="loginElements/submit.png" alt="Login" /></a>
		</div>
	</div>

but I want the mouseovers image to actually act as an <input type="submit"..... but you can't specify an image for <input type="submit".....

I suppose I could probably ghetto rig something, but I'm trying to learn how to do things somewhat "rightish"... Any help?

edit: OK, so I sort of take back my original question. It's pretty easy to make the submit button an image using style sheets, but I'm using a javascript to use as a rollover action. It would be nice if I could somehow give a normal image a "submit" action or something of the sort? Or, I suppose I can just write another javascript bit to deal with this special case

- It woudl be good practice I suppose!

Xenarchy · Feb 23, 2007

Sgraffite said:
Add this line to your css:

Code:

A IMG {border:none; }

Please do not use capital letters in your html tags IE

Code:

<IMG SRC="" HEIGHT="" WIDTH="" ALT="" />

as with XHTML these should all be lowercase.

Generally accepted way of doing ids and class names is using camel case.

thisIsACamelCaseString

bofkentucky · Feb 23, 2007

use the <button> tag

Code:

<button
  type="submit"
  style="color: inherit; background: inherit; border: none; height: $height; width: $width; ">
  <img
    src="$imgUrl"
    alt="$imageAltText" />
</button>

Sgraffite · Feb 24, 2007

Xenarchy said:
Please do not use capital letters in your html tags IE

Code:

<IMG SRC="" HEIGHT="" WIDTH="" ALT="" />

as with XHTML these should all be lowercase.

Generally accepted way of doing ids and class names is using camel case.

thisIsACamelCaseString

Doh, I didn't know that, I have a lot of changes to make now

Small validation problem (vs. I'm learning xhtml/javascript/css)

KevySaysBeNice

[H]ard|Gawd

Sgraffite

Supreme [H]ardness

calebb

[H]F Junkie

KevySaysBeNice

[H]ard|Gawd

Xenarchy

Limp Gawd

bofkentucky

n00b

Sgraffite

Supreme [H]ardness