XHTML cross browser compatibility

Ok, so I've just made one of my website XHTML compatible. All is fine and good! Except for one thing! The menubar now only works in IE. I'll show you the code I've written :

Code:

<img src="menubar.jpg" width="750" border="0" usemap="#Map" align="middle" alt="Menubar" />
 ...
<map id="Map">
  <area shape="rect" coords="100,25,154,47" href="index.php" alt="Home Page" />
  <area shape="rect" coords="156,26,212,45" href="gigs.php" alt="Gigs" />
  <area shape="rect" coords="214,26,281,43" href="press.php" alt="Press" />
  <area shape="rect" coords="286,25,339,43" href="bios.php" alt="Bios" />
  <area shape="rect" coords="342,25,394,43" href="pics.php" alt="Pictures" />
  <area shape="rect" coords="399,26,463,44" href="media.php" alt="Meida" />
  <area shape="rect" coords="462,26,565,42" href="book.php" alt="Guestbook" />
  <area shape="rect" coords="575,26,663,45" href="contact.php" alt="Contact Us" />
</map>

Now, it used to work when the map had the NAME "Map" but now I've changed it to id="map" to comply with standards, It doesnt work in Mozilla any more, rendering the whole site useless in IE!

 

put both name and id in there and it should work.

 

Blah, forget it, all you need to do is put in id="Map" AND name="Map". Its just that name is depreciated, but older browsers don't understand id for some reason.

 

look up

 

Haha, didnt see you there, you're right that solved the problem, heh

 

Ok, lets try another one!

I have a guestbook on this website. There is a nice iframe thing with DesignMode on, so people can see their post as they write it. However, not everyone supports iframes in designmode (in fact, i think its just IE). So how would I go about making an element that will behave just like an iframe would in IE?
Don't understand? have some code!

Code:

<input type=button value="Bold Text" onClick="source.focus();source.document.execCommand('Bold')" />
<input type=button value="Underline Text" onClick="source.focus();source.document.execCommand('Underline')" />

There you have one of the formatting buttons, and what it does in the iframe (called source). Speaking of which:

Code:

<iframe name="source" id="source" width="300" height="200" frameborder="0" onload="source.document.designMode = 'On';" src="blank.htm"></iframe>

Now have some functions to go with :

Code:

<script type="text/javascript">
<!--
function ipop(url) {
window.open(url,'','width=350,height=400,scrollbars=no');
}

function isend(ipic) {
if (ipic.src) {
source.document.body.innerHTML += "<img src='" + ipic.src + "' alt='smiley' />";
}
}


function weblink() {
url = prompt("Enter the address of the website you want to link to","")
txt = prompt("Enter the title to of the website you want to link to","")
if (url != "null" && url != "" && txt != "null" && txt != "") {
source.document.body.innerHTML += "<a href='" + url + "'>" + txt + "</a>";
}
}

function udsource() {
document.entry.content.value = source.document.body.innerHTML;
}

document.onkeypress = udsource
document.onmousedown = udsource
-->
</script>

Thats all the code I'm willing to publish. Can you see how it works now? How would I go about making it compatible with other browsers? because at the moment in mozilla it just refreshes endlessly when its loaded for some reason? strange indeed.

 

not sure man. I've had similar problems with the iframe and other browsers pathetic support for it.

 

Mmm.. I know this site uses iframes in the reply box if they are supported.. but as far as i can tell they use a php script to determine whether its supported and have it in your user profile. This is just a guestbook, nothing fancy here. I could just swap it to be a textarea and have it input code (like :smilie21: ) when you click the buttons, but it wouldn't be nearly as funky!