<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40"><head><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii"><meta name=Generator content="Microsoft Word 14 (filtered medium)"><!--[if !mso]><style>v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style><![endif]--><style><!--
/* Font Definitions */
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
p.MsoAcetate, li.MsoAcetate, div.MsoAcetate
{mso-style-priority:99;
mso-style-link:"Sprechblasentext Zchn";
margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph
{mso-style-priority:34;
margin-top:0cm;
margin-right:0cm;
margin-bottom:0cm;
margin-left:36.0pt;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
span.SprechblasentextZchn
{mso-style-name:"Sprechblasentext Zchn";
mso-style-priority:99;
mso-style-link:Sprechblasentext;
font-family:"Tahoma","sans-serif";}
p.msochpdefault, li.msochpdefault, div.msochpdefault
{mso-style-name:msochpdefault;
mso-margin-top-alt:auto;
margin-right:0cm;
mso-margin-bottom-alt:auto;
margin-left:0cm;
font-size:12.0pt;
font-family:"Calibri","sans-serif";}
p.BalloonText, li.BalloonText, div.BalloonText
{mso-style-name:"Balloon Text";
mso-style-link:"Balloon Text Char";
margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
span.BalloonTextChar
{mso-style-name:"Balloon Text Char";
mso-style-priority:99;
mso-style-link:"Balloon Text";
font-family:"Tahoma","sans-serif";}
span.e-mailformatvorlage17
{mso-style-name:e-mailformatvorlage17;
font-family:"Calibri","sans-serif";
color:windowtext;}
span.E-MailFormatvorlage24
{mso-style-type:personal;
font-family:"Calibri","sans-serif";
color:#1F497D;}
span.E-MailFormatvorlage25
{mso-style-type:personal;
font-family:"Calibri","sans-serif";
color:#1F497D;}
span.cssselector
{mso-style-name:cssselector;}
span.csspropname
{mso-style-name:csspropname;}
span.csscolon
{mso-style-name:csscolon;}
span.csspropvalue
{mso-style-name:csspropvalue;}
span.csssemi
{mso-style-name:csssemi;}
span.nodelabelbox
{mso-style-name:nodelabelbox;}
span.nodetag
{mso-style-name:nodetag;}
span.nodebracket
{mso-style-name:nodebracket;}
span.nodeattr
{mso-style-name:nodeattr;}
span.nodename
{mso-style-name:nodename;}
span.nodevalue
{mso-style-name:nodevalue;}
span.nodecloselabelbox
{mso-style-name:nodecloselabelbox;}
span.E-MailFormatvorlage38
{mso-style-type:personal;
font-family:"Calibri","sans-serif";
color:#1F497D;}
span.E-MailFormatvorlage39
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@page WordSection1
{size:612.0pt 792.0pt;
margin:70.85pt 70.85pt 70.85pt 70.85pt;}
div.WordSection1
{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]--></head><body lang=DE-AT link=blue vlink=purple><div class=WordSection1><p class=MsoNormal><span style='color:#1F497D'>Hi Paul,<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>thanks for your answer!<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>Unfortunately I need the behaviour that shows the background image on focus (to highlight menu items when pressing the tab key to move the cursor). With your solution the tab functionality would be gone, wouldn’t it?<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>Best Regards,<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>Andreas <o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><div><div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0cm 0cm 0cm'><p class=MsoNormal><b><span lang=DE style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>Von:</span></b><span lang=DE style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'> opencms-dev-bounces@opencms.org [mailto:opencms-dev-bounces@opencms.org] <b>Im Auftrag von </b>Paul-Inge Flakstad<br><b>Gesendet:</b> Freitag, 15. Juni 2012 10:29<br><b>An:</b> The OpenCms mailing list<br><b>Betreff:</b> Re: [opencms-dev] OpenCMS Menu - Browser back button focus issue<o:p></o:p></span></p></div></div><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>Hi again Andreas,<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>This has very little to do with OpenCms, but what the hell :)<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>You’re seeing the background image because you told the browser to display it for links with focus:<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>.visual-nav a:hover img, .visual-nav a:focus img {<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'> display: block;<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>}<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>Upon clicking the back button, the browser will show the previous page in its last known state. In that state, the link that’s seemingly misbehaving *has focus*. Hence the background image is visible – as well as any other focus styles.<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>Try this for a fix:<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>.visual-nav a:hover img {<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'> display: block;<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>}<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>.visual-nav a:focus img {<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'> display: none;<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>}<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>HTH. :) As always, Google has plenty more info.<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>Cheers,<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>Paul<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'><o:p> </o:p></span></p><div><div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0cm 0cm 0cm'><p class=MsoNormal><b><span lang=EN-US style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span lang=EN-US style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'> <a href="mailto:opencms-dev-bounces@opencms.org">opencms-dev-bounces@opencms.org</a> <a href="mailto:[mailto:opencms-dev-bounces@opencms.org]">[mailto:opencms-dev-bounces@opencms.org]</a> <b>On Behalf Of </b>Feuerstein Andreas<br><b>Sent:</b> 14. juni 2012 09:06<br><b>To:</b> The OpenCms mailing list<br><b>Subject:</b> Re: [opencms-dev] OpenCMS Menu - Browser back button focus issue<o:p></o:p></span></p></div></div><p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>Hi Paul,<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>thanks for your reply. <o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>Your solution removes the outline, but doesn’t solve my problem. <o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>I use background images for active menu items, hovered menu items and focused menu items. When pressing the browser’s back button, the previous selected menu item still displays the background image. Maybe my css kann show you what I mean:<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>.visual-nav a img {<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'> display: none;<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>}<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>.visual-nav .active_menu img {<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'> display: block;<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'> height: 2.75em;<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'> width: 16.167em;<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>}<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>.visual-nav a:hover, .visual-nav a:focus {<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'> background: none repeat scroll 0 0 transparent;<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'> text-decoration: none;<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>}<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>.visual-nav a:hover img, .visual-nav a:focus img {<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'> display: block;<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>}<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>My menu entries (inactive & active) look like this:<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><li><o:p></o:p></span></p><p class=MsoNormal style='text-indent:35.4pt'><span style='color:#1F497D'><a href="/test/"><o:p></o:p></span></p><p class=MsoNormal style='margin-left:35.4pt;text-indent:35.4pt'><span style='color:#1F497D'><img alt="" src="<a href="http://my-domain.com/images/bg-active.gif">http://my-domain.com/images/bg-active.gif</a>"><o:p></o:p></span></p><p class=MsoNormal style='margin-left:35.4pt;text-indent:35.4pt'><span style='color:#1F497D'><span class="gradient">Menu entry</span><o:p></o:p></span></p><p class=MsoNormal style='text-indent:35.4pt'><span style='color:#1F497D'></a><o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'></li><o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><li><o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'> <span class=“menu_active“><o:p></o:p></span></p><p class=MsoNormal style='margin-left:35.4pt;text-indent:35.4pt'><span style='color:#1F497D'><a href="/test/"><o:p></o:p></span></p><p class=MsoNormal style='margin-left:70.8pt;text-indent:35.4pt'><span style='color:#1F497D'><img alt="" src="<a href="http://my-domain.com/images/bg-active.gif">http://my-domain.com/images/bg-active.gif</a>"><o:p></o:p></span></p><p class=MsoNormal style='margin-left:35.4pt;text-indent:35.4pt'><span style='color:#1F497D'></a><o:p></o:p></span></p><p class=MsoNormal style='text-indent:35.4pt'><span style='color:#1F497D'></span><o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'></li><o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='font-size:12.0pt;font-family:"Times New Roman","serif"'><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>Thanks for your help!<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><div><div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0cm 0cm 0cm'><p class=MsoNormal><b><span lang=DE style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>Von:</span></b><span lang=DE style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'> <a href="mailto:opencms-dev-bounces@opencms.org">opencms-dev-bounces@opencms.org</a> <a href="mailto:[mailto:opencms-dev-bounces@opencms.org]">[mailto:opencms-dev-bounces@opencms.org]</a> <b>Im Auftrag von </b>Paul-Inge Flakstad<br><b>Gesendet:</b> Mittwoch, 13. Juni 2012 16:30<br><b>An:</b> The OpenCms mailing list<br><b>Betreff:</b> Re: [opencms-dev] OpenCMS Menu - Browser back button focus issue<o:p></o:p></span></p></div></div><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>Hi Andreas,<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>Looks like the last clicked link’s “outline” style is still present after skipping back in the browser.<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>Try adjusting the CSS. (outline:none;)<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>Cheers,<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>Paul<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'><o:p> </o:p></span></p><div><div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0cm 0cm 0cm'><p class=MsoNormal><b><span lang=EN-US style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span lang=EN-US style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'> <a href="mailto:opencms-dev-bounces@opencms.org">opencms-dev-bounces@opencms.org</a> <a href="mailto:[mailto:opencms-dev-bounces@opencms.org]">[mailto:opencms-dev-bounces@opencms.org]</a> <b>On Behalf Of </b>Feuerstein Andreas<br><b>Sent:</b> 13. juni 2012 13:50<br><b>To:</b> The OpenCms mailing list<br><b>Subject:</b> Re: [opencms-dev] OpenCMS Menu - Browser back button focus issue<o:p></o:p></span></p></div></div><p class=MsoNormal><span lang=NO-BOK><o:p> </o:p></span></p><div id=idOWAReplyText37520><div><p class=MsoNormal><span style='font-size:10.0pt;font-family:"Arial","sans-serif";color:black'>Has nobody got an idea?</span><span style='font-size:12.0pt;font-family:"Times New Roman","serif"'><o:p></o:p></span></p></div></div><div><p class=MsoNormal><span style='font-size:12.0pt;font-family:"Times New Roman","serif"'><o:p> </o:p></span></p><div class=MsoNormal align=center style='text-align:center'><span style='font-size:12.0pt;font-family:"Times New Roman","serif"'><hr size=2 width="100%" align=center></span></div><p class=MsoNormal style='margin-bottom:12.0pt'><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>Von:</span></b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'> <a href="mailto:opencms-dev-bounces@opencms.org">opencms-dev-bounces@opencms.org</a> im Auftrag von Feuerstein Andreas<br><b>Gesendet:</b> Mi 16.05.2012 11:07<br><b>An:</b> <a href="mailto:opencms-dev@opencms.org">opencms-dev@opencms.org</a><br><b>Betreff:</b> [opencms-dev] OpenCMS Menu - Browser back button focus issue</span><span style='font-size:12.0pt;font-family:"Times New Roman","serif"'><o:p></o:p></span></p></div><div><p class=MsoNormal>Hi,<o:p></o:p></p><p class=MsoNormal> <o:p></o:p></p><p class=MsoNormal>I found an error on the focus settings.<o:p></o:p></p><p class=MsoNormal> <o:p></o:p></p><p class=MsoListParagraph style='text-indent:-18.0pt'>1.<span style='font-size:7.0pt;font-family:"Times New Roman","serif"'> </span>Select a menu entry<o:p></o:p></p><p class=MsoListParagraph style='text-indent:-18.0pt'>2.<span style='font-size:7.0pt;font-family:"Times New Roman","serif"'> </span>Select another menu entry<o:p></o:p></p><p class=MsoListParagraph style='text-indent:-18.0pt'>3.<span style='font-size:7.0pt;font-family:"Times New Roman","serif"'> </span>Press browser’s back button<o:p></o:p></p><p class=MsoNormal> <o:p></o:p></p><p class=MsoNormal>The focus remains on the previously selected menu entry. The expected behaviour would be that the focus is moved to the active menu entry.<o:p></o:p></p><p class=MsoNormal> <o:p></o:p></p><p class=MsoNormal>This can be reproduced here (you see the problem by using a submenu): <a href="http://demo.opencms.org/">http://demo.opencms.org/</a> in combination with Firefox & IE.<o:p></o:p></p><p class=MsoNormal> <o:p></o:p></p><p class=MsoNormal>Do you have a solution for this?<o:p></o:p></p><p class=MsoNormal> <o:p></o:p></p><p class=MsoNormal>Best regards,<o:p></o:p></p><p class=MsoNormal>Andreas<o:p></o:p></p></div></div></body></html>