<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 12 (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:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@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:"Balloon Text Char";
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.BalloonTextChar
{mso-style-name:"Balloon Text Char";
mso-style-priority:99;
mso-style-link:"Balloon Text";
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.Sprechblasentext, li.Sprechblasentext, div.Sprechblasentext
{mso-style-name:Sprechblasentext;
mso-style-link:"Sprechblasentext Zchn";
margin:0cm;
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";}
span.e-mailformatvorlage17
{mso-style-name:e-mailformatvorlage17;
font-family:"Calibri","sans-serif";
color:windowtext;}
span.EmailStyle24
{mso-style-type:personal;
font-family:"Calibri","sans-serif";
color:#1F497D;}
span.EmailStyle25
{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.EmailStyle38
{mso-style-type:personal;
font-family:"Calibri","sans-serif";
color:#1F497D;}
span.EmailStyle39
{mso-style-type:personal;
font-family:"Calibri","sans-serif";
color:#1F497D;}
span.EmailStyle40
{mso-style-type:personal;
font-family:"Calibri","sans-serif";
color:#1F497D;}
span.EmailStyle41
{mso-style-type:personal;
font-family:"Calibri","sans-serif";
color:#1F497D;}
span.EmailStyle42
{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=NO-BOK link=blue vlink=purple><div class=WordSection1><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'>Sorry about the late answer, I’ve been away on vacation. First of all, OpenCms does not influence browser history, at least not to my knowledge.<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'>I can’t access http://demo.opencms.org, but if I remember correctly, the result is exactly what one would expect with the applied styles. And I wouldn’t fiddle around too much with normal browser interpretation of styles, but rather change the styles themselves. <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'>The “problem” seems to me to be the styling and the way that browsers interpret and display the styles – especially :focus and :active styles. When you compare OpenCms to these other CMSs, are you sure they use the same kind of applied styles? If not – which I would bet is the case – they are not directly comparable.<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'>Have you tried something like this HTML code to see how the styles are applied? (Can be helpful to understand the nature of the pseudo-classes as well.) There are differences from browser to browser, by the way. For example, the latest version of Chrome seems to behave the way you want.<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'>( Online version at <a href="http://byteforge.no/private/active-focus.html">http://byteforge.no/private/active-focus.html</a> )<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'><!DOCTYPE HTML><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'><html><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'><head><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'><title>a:focus and a:active - pseudo-classes for the anchor element</title><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'><meta charset="utf-8"><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'><link rel="canonical" href="http://byteforge.no/private/active-focus.html" /><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'><style type="text/css"><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>body { font:1em Verdana, Verdana, Geneva, sans-serif; }<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>/* Note that the order of the pseudo-class style declarations may affect the result */<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>a, <o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>a:link,<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>a:visited { color:blue; }<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>a:focus { color:green; }<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>a:active { color:red; }<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>a:hover { color:lightblue; }<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'></style><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'></head><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'><body><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'> <h1>CSS pseudo-classes for the anchor element</h1><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'> <ul><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'> <li><a href="http://www.google.com">Google</a></li><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'> <li><a href="http://www.yahoo.com">Yahoo</a></li><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'> <li><a href="http://www.flickr.com">Flickr</a></li><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'> <li><a href="http://www.facebook.com">Facebook</a></li><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'> <li><a href="http://www.twitter.com">Twitter</a></li><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'> <li><a href="http://www.pinterest.com">Pinterest</a></li><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'> </ul><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'> <h3>The applied styles</h3><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'> <ul><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'> <li><span style="color:blue;">a, a:link, a:visited</span></li><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'> <li><span style="color:lightblue;">a:hover</span></li><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'> <li><span style="color:green;">a:focus</span></li><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'> <li><span style="color:red;">a:active</span></li><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'> </ul><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'></body><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'></html><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'>I hope this helps you.<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"'> opencms-dev-bounces@opencms.org [mailto:opencms-dev-bounces@opencms.org] <b>On Behalf Of </b>Feuerstein Andreas<br><b>Sent:</b> 26. juni 2012 13:54<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><o:p> </o:p></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'>Hi Paul, hi all!<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'>I’m not allowed to change the style so I don’t really have a choice. I’m wondering why Typo3, Joomla and Drupal do not behave like OpenCMS in this case. I would assume OpenCMS does influence browser’s history in any way. <o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'>I think one possibility to achieve what I want would be to remove the focus from selected menu items. Is there any idea how I could programmatically do this? <o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'>Or does anyone know another solution for my problem?<br><br>Best regards,<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'>Andreas<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT 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 14: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><span lang=DE-AT><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>Hi Andreas,<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=EN-US style='color:#1F497D'>Yes, it would. <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'>As far as I know, if you want to style the focus, you should also accept that style being present when navigating using the browser history (unless you force page reloads on back-clicks, which isn’t very user-friendly).<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'>I think this behavior is consistent across browsers, probably for a good reason. I wouldn’t try to meddle too much with the browser’s CSS interpretation when it’s not doing anything wrong. (You could end up confusing and/or annoying the audience you’re actually targeting with this – i.e. users who tab – because your solution would differ from the norm.)<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’ll probably find plenty of stuff about this on the web – I doubt you’re the first to struggle with the issue. :)<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'>PS: Maybe the root of your problem is that you’re using styles that are too similar? I’d go for one style for “active” (e.g. the link pointing to the page currently displayed in the browser) – for example a background image – and a completely different one for focused links – for example only an outline.<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> 15. juni 2012 14:04<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><o:p> </o:p></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'>Hi Paul,<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'>thanks for your answer!<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=DE-AT 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 lang=DE-AT style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'>Best Regards,<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'>Andreas <o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT 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> 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><span lang=DE-AT><o:p> </o:p></span></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 lang=DE-AT style='color:#1F497D'>Hi Paul,<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'>thanks for your reply. <o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'>Your solution removes the outline, but doesn’t solve my problem. <o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=DE-AT 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 lang=DE-AT style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'>.visual-nav a img {<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'> display: none;<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'>}<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'>.visual-nav .active_menu img {<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'> display: block;<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'> height: 2.75em;<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'> width: 16.167em;<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'>}<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'>.visual-nav a:hover, .visual-nav a:focus {<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'> background: none repeat scroll 0 0 transparent;<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'> text-decoration: none;<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'>}<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'>.visual-nav a:hover img, .visual-nav a:focus img {<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'> display: block;<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'>}<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'>My menu entries (inactive & active) look like this:<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'><li><o:p></o:p></span></p><p class=MsoNormal style='text-indent:35.4pt'><span lang=DE-AT 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 lang=DE-AT 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 lang=DE-AT style='color:#1F497D'><span class="gradient">Menu entry</span><o:p></o:p></span></p><p class=MsoNormal style='text-indent:35.4pt'><span lang=DE-AT style='color:#1F497D'></a><o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'></li><o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'><li><o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT 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 lang=DE-AT 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 lang=DE-AT 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 lang=DE-AT style='color:#1F497D'></a><o:p></o:p></span></p><p class=MsoNormal style='text-indent:35.4pt'><span lang=DE-AT style='color:#1F497D'></span><o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'></li><o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=DE-AT style='font-size:12.0pt;font-family:"Times New Roman","serif"'><o:p> </o:p></span></p><p class=MsoNormal><span lang=DE-AT style='color:#1F497D'>Thanks for your help!<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT 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><span lang=DE-AT><o:p> </o:p></span></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><o:p> </o:p></p><div id=idOWAReplyText37520><div><p class=MsoNormal><span lang=DE-AT style='font-size:10.0pt;font-family:"Arial","sans-serif";color:black'>Has nobody got an idea?</span><span lang=DE-AT style='font-size:12.0pt;font-family:"Times New Roman","serif"'><o:p></o:p></span></p></div></div><div><p class=MsoNormal><span lang=DE-AT 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 lang=DE-AT 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 lang=DE-AT style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>Von:</span></b><span lang=DE-AT 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 lang=DE-AT style='font-size:12.0pt;font-family:"Times New Roman","serif"'><o:p></o:p></span></p></div><div><p class=MsoNormal><span lang=DE-AT>Hi,<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT> <o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT>I found an error on the focus settings.<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT> <o:p></o:p></span></p><p class=MsoListParagraph style='text-indent:-18.0pt'><span lang=DE-AT>1.</span><span lang=DE-AT style='font-size:7.0pt;font-family:"Times New Roman","serif"'> </span><span lang=DE-AT>Select a menu entry<o:p></o:p></span></p><p class=MsoListParagraph style='text-indent:-18.0pt'><span lang=DE-AT>2.</span><span lang=DE-AT style='font-size:7.0pt;font-family:"Times New Roman","serif"'> </span><span lang=DE-AT>Select another menu entry<o:p></o:p></span></p><p class=MsoListParagraph style='text-indent:-18.0pt'><span lang=DE-AT>3.</span><span lang=DE-AT style='font-size:7.0pt;font-family:"Times New Roman","serif"'> </span><span lang=DE-AT>Press browser’s back button<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT> <o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT>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></span></p><p class=MsoNormal><span lang=DE-AT> <o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT>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></span></p><p class=MsoNormal><span lang=DE-AT> <o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT>Do you have a solution for this?<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT> <o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT>Best regards,<o:p></o:p></span></p><p class=MsoNormal><span lang=DE-AT>Andreas<o:p></o:p></span></p></div></div></body></html>