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

K

KevySaysBeNice

[H]ard|Gawd
Joined
Dec 7, 2001
Messages
1,452
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>
 
Or... if you don't have a css defined:

<img src="/boutellcomlogo.png" style="border-style: none"/>
 
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!
 
Sgraffite said:
Add this line to your css:
Code: 
A IMG {border:none; }



Click to expand...




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
 
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>
 
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
Click to expand...

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

 
You must log in or register to reply here.
Back
Top