When I add more buttons to the div, I have Allow blocked content with IE on page load.
It makes any first button appear differently on mouse-over.
All buttons don’t want to release a clicked state till another, or a blank spot, is clicked.
I’ve noticed that if I move the attributes from .tips span to .tips button:hover span, it eliminates IE’s Allow blocked content prompt but I can’t get it to all function correctly together, sorry, I tried my best.
The buttons below is my actual use, I’m sorry, perhaps I should have started with it.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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”>
.tips {
position:relative;
float:left;
}
.tips button:hover {
color: #7E2217;
background: #FFFFCC;
}
.tips span {
position:absolute;
display:none;
left: 10px;
top:-15em;
white-space:nowrap;
padding: 10px;
z-index: 1;
color: #0000CC;
background: black;
font: 12px Verdana, Arial, Helvetica, sans-serif;
text-align: left;
border: 1px solid #666666;
text-decoration: none;
}
.tips button:hover span {
display: block;
}
</style>
</head>
<body>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<div class=“tips”>
<button onClick=“location.href = ‘http://lastborns.tripod.com/tree/aqwg01.htm’”>The leaves</button>
<button onClick=“location.href = ‘http://lastborns.tripod.com/tree/index2.htm’”>Surnames</button>
<button onClick=“location.href = ‘http://lastborns.tripod.com/tree/findex1.htm’”>Names</button>
<button >Updates<span><font color=white>
Please copy and paste the entire line you want updated into an e-mail to me,<br>
then use</font> <font color=red><b>red font</b></font> <font color=white>to make any changes you wish (see example
below).<br><br>
<b>Mr ? ?</b>-RIN:989 was born</font> <sup><font color=blue><u><b>1</b></u></font></sup> <font color=white>about
<font color=white><i>please remember that surnames are birth names only and are in all CAPS.</i><br><br>
Thanks so very much, this will greatly ease the search for and editing of many.<br>
If the person you saw is without a face, send it and I’ll gladly crop and add it.</font></span></button>
<button onClick=“location.href = ‘http://lastborns.tripod.com/comments/index.html’”>Comments</button>
<button onClick=“location.href = ‘http://www.e-guestbooks.com/sign/Lastborns’”>Contact</button>
<button onClick=“location.href = ‘skype:?chat&blob=3qS9OMhxIw9PHGbhLld5VGaIRR3N8-Je6odRuKtqY4A-fcpGegc0ym-wKsEx’”>Skype</button>
<button onClick=“location.href = ‘http://lastborns.tripod.com/3F54D38EA9E57355C4CED52A1B933F9A827AD4AE.zip’”>Public key</button>
<button onClick=“location.href = ‘http://lastborns.surf.to’”>Lastborns</button>
</div>
</body>
</html>
IE always does that locally when javascript is required on the page (your onClick events). It wont happen when online.
2. It makes any first button appear differently on mouse-over.
The first button seems to automatically get focus unless they are in a form element as all form controls should be. Surround the buttons with a form and it should be ok.
3. All buttons don't want to release a clicked state till another, or a blank spot, is clicked.
That seems correct and wouldn’t you expect the button to retain its focus until the focus is moved somewhere else. That’s what form controls do.
I’m not sure why you are using button elements anyway and not links as you are just linking to other pages. It doesn’t seem to be a form at all. You can style the links to be similar to buttons and use the normal href attribute rather than requiring javascript for this all to function.
In your pop up don’t use font tags as that has no business being in there. Just add a class to the span and style it as required.
Unfortunately I am away for 10 days now so someone else will need to jump in here now.
Cool, I made it live and the prompt to allow blocked content is gone.
I tried the form tag but that seems to remove the links.
The appearance of any first button in IE, selected or not, on mouse-over, can it be written so the left and top borders disappear like all others?
I don’t mind the auto and retained focus but would prefer it not be if possible.
It’s not a form but in trying to style the links/popup without the button tag where IE doesn’t destroy it is difficult. In my last attempt, I had to temporarily remove the doctype: Our Family Tree
Each button tag should have its own form tag if they are all to link to separate places. Button tags not enclosed in form tags are not valid HTML (the validator doesn’t detect it though because you need a block level element in between as well).
I’d like the button ‘Updates’ to be just a hover with no click action so I tried removing action=“#stay” method=“get” in the form but it didn’t work, can that be done?
I can’t figure out how to add that class to the span like Paul mentioned so as to not use font tags in the popup, can you help me with that too, thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="http://lastborns.tripod.com/pics/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
.button {
position:relative;
float:left;
}
.button button:hover {
background:transparent;
}
.tips {
position:relative;
float:left;
}
.tips button:hover {
background:transparent;
}
.tips span {
position:absolute;
display:none;
left: -150px;
top:-15em;
white-space:nowrap;
padding: 10px;
z-index: 1;
color: #0000CC;
background: black;
font: 12px Verdana, Arial, Helvetica, sans-serif;
text-align: left;
border: 1px solid #666666;
text-decoration: none;
}
.tips button:hover span {
display: block;
}
</style>
</head>
<body background="http://lastborns.tripod.com/pics/treeBG.jpg">
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<form class="button" action="http://lastborns.tripod.com/tree/aqwg01.htm" method="get"><button>The leaves</button></form>
<form class="button" action="http://lastborns.tripod.com/tree/index2.htm" method="get"><button>Surnames</button></form>
<form class="button" action="http://lastborns.tripod.com/tree/findex1.htm" method="get"><button>Names</button></form>
<form class="tips" action="#stay" method="get"><button>Updates<span><font color=white>
Please copy and paste the entire line you want updated into an e-mail to me,<br>
then use</font> <font color=red><b>red font</b></font> <font color=white>to make any changes you wish (see example
below).<br><br>
<b>Mr ? ?</b>-RIN:989 was born</font> <sup><font color=blue><u><b>1</b></u></font></sup> <font color=white>about
1930. <b>Mr</b> married</font> <font color=blue><sup><u>2</u></sup></font> <font color=white>(MRIN:7) <b>Miss ?
</b>...</font><br>
<b><font color=red><b>Donald DUCK</b></font></b><font color=white>-RIN:989 was born</font> <sup><font
color=blue><u><b>1</b></u></font></sup> <font color=red><b>Jun 9 1934</b></font><font color=white>. <b>Mr</b>
married</font> <font color=blue><sup><u>2</u></sup></font><font color=white>(MRIN:7)</font> <font
color=red><b>Dais...</b></font><br>
<font color=white><i>please remember that surnames are birth names only and are in all CAPS.</i><br><br>
Thanks so very much, this will greatly ease the search for and editing of many.<br>
If the person you saw is without a face, send it and I'll gladly crop and add it.</font></span></button></form>
<form class="button" action="http://lastborns.tripod.com/comments/index.html" method="get"><button>Comments</button></form>
<form class="button" action="http://www.e-guestbooks.com/sign/Lastborns" method="get"><button>Contact</button></form>
<form class="button" action="skype:?chat&blob=3qS9OMhxIw9PHGbhLld5VGaIRR3N8-Je6odRuKtqY4A-fcpGegc0ym-wKsEx" method="get"><button>Skype</button></form>
<form class="button" action="http://lastborns.tripod.com/3F54D38EA9E57355C4CED52A1B933F9A827AD4AE.zip" method="get"><button>Public key</button></form>
<form class="button" action="http://lastborns.surf.to" method="get"><button>Lastborns</button></form>
</body>
</html>
<form class="tips" action="" method="get">
<div>
<button>Updates<span [B]class="pop"[/B]> <span class="p1">Please copy and paste the entire line you want updated into an e-mail to me,<br />
then use</span> <span class="p2"><b>red font</b></span> <span class="p1">to make any changes you wish (see example
below).<br />
<br />
<b>Mr ? ?</b>-RIN:989 was born</span> <sup><span class="p3"><u><b>1</b></u></span></sup> <span class="p1">about
1930. <b>Mr</b> married</span> <span class="p3"><sup><u>2</u></sup></span> <span class="p1">(MRIN:7) <b>Miss ? </b>...</span><br />
<b><span class="p2"><b>Donald DUCK</b></span></b><span class="p1">-RIN:989 was born</span> <sup><span class="p3"><u><b>1</b></u></span></sup> <span class="p2"><b>Jun 9 1934</b></span><span class="p1">. <b>Mr</b> married</span> <span class="p3"><sup><u>2</u></sup></span><span class="p1">(MRIN:7)</span> <span class="p2"><b>Dais...</b></span><br />
<span class="p1"><i>please remember that surnames are birth names only and are in all CAPS.</i><br />
<br />
Thanks so very much, this will greatly ease the search for and editing of many.<br />
If the person you saw is without a face, send it and I'll gladly crop and add it.</span></span></button>
</div>
</form>
The parent span was giving a class so that all spans weren’t affected by the css. The font tags were then changed to spans and then given classes to change the colour.
