CSS: Rewriting element declarations

CSS: Rewriting element declarations

There is a common link declaration
a {
color: #993300;
text-decoration: none;
cursor: hand;
}
a:hover {
color:#993300;
text-decoration:underline;
}
a:visited {
color:#4c7095;
}
For some links I have to rewrite link declarations. For example, I have to change colors, font-weight, and  text-decoration for some link. It's not obvious task, and I spent 30-40 minutes on Internet looking for some ideas. One of the idea was to use on MouseOver and OnMouseOut events which does not work if link is visited.  I continued my search and found some excellent idea.  The idea was posted on stackoverflow.com by  the owner of the site rexmorgan.net Here is his suggestion:
"Inline styles only have rules; the selector is implicit to be the current element.
The selector is an expressive language that describes a set of criteria to match elements in an XML-like document.
However, you can get close, because a style set can technically go most anywhere:
<style>
#uniqueid:hover {do:something;}
</style>
<a id="uniqueid">hello</a>"

So, following his advice, I added unique id to my link:
<a href="../../../test.aspx" class="topLink" accesskey="0" id="js2" title="Go to Test page">Help</a>

And added some code in CSS:

.topLink 
{
    color: #ffffff;
    font-weight: bold;
    text-decoration: underline;
}

#js2:hover
{
    color: #ffffff;
    font-weight: bold;
    text-decoration: underline;
}


#js2:visited
{
    color: #ffffff;
    font-weight: bold;
    text-decoration: underline;
}


Now my link looks and behaves differently than all links on my website.

Javascript: single quote inside the string.

Working on my project, I had to construct a string inside with single quotes. It was a small challenge for me. I did not know how to keep single quotes inside the string. Researching the Internet I found the best way to keep single quotes inside the string. Here's an example:

var temp2 = 'onclick = "window.location=\'test.aspx\'; return false;"';

Back-slash in front of the quote keeps the quote inside of the string.  Browser will resolve this statements as
onclick = "window.location='test.aspx'; return false;" 

Problems with file editing in SharePoint

 Trying to check out and edit Word-document, my coworker got the error (see picture above). Of course, he asked me for help. It's not first time my coworkers receive the same message, and I decided to research the problem. Actually I found some good tips on Internet. One of them is on http://sharepointknowledgebase.blogspot.com . I think, we have a similar situation. The blogger offered some explanations, and I think, they are quite realistic. Here they are:

"The document could not be opened for editing. A Windows SharePoint Services compatible application could not be found to edit the document.

One of the user from my project reported that he was not able to edit as well as check out the office documents. When i tried to followed the same procedure (i.e. Edit,check-in, check-out) and strange thing was me also got the same error message. When i started my troubleshooting, I found out user created document library with multiple nested folders.

When we go to third or fourth level of the folder and try to edit any file with office application, we are getting an error – The document could not be opened for editing. A Windows SharePoint Services compatible application could not be found to edit the document. However if we try to edit the document uploaded on the root of the document library, we can edit it properly.

I tried reproduced the issue 2-3 times and found out one common thing and that is: You can not edit the office document once the URL path reaches characters limit 340. You can edit the documents only till URL path length is upto 339 characters. You can open the documents, you can upload documents but you can't edit them by right click on document and click on "edit in Microsoft Word". Even this behavior is same with non-office documents also like text documents.

Workaround:
-The only workaround possible is - open the file directly from the folder, modify and save it as a new file. Every time you need to save it as a new file. It wont allow to save in the existing file. Or, Move the file one level up and you will be able to do all the operations like edit,check-in and check-out too."

 

Free tools for section 508

Free tools for those, who design gov websites.
Constructing a new www.srtr.gov site, I found some very useful tools to satisfy all requirements of sections 508. After you wrote a code, please use these tools to check if your code satisfies section 508.
Here they're:
1. Fangs - the screen reader emulator
2. Exclusively helpful site with a lot of free tools Illinois Center for Information Technology and Web Accessibility
3. Powermapper section 508 Accessibility testing Tool
4. Tools on WebAim site

Panel

Panel

Today I used for first time a panel. I have to "hide and show" some parts of my master-page. Usually developers construct 2 different master pages. I decided to have one and implement the panels. Here's my code:

HTML-page with 2 panels (code segment)

<asp:Panel ID="PanelBreadCrumb" runat="server">
<div id="breadcrumbDiv" class="breadcrumb">
<asp:SiteMapPath ID="SiteMapPath1" runat="server" PathSeparator=" > " SiteMapProvider="Breadcrumb">
<CurrentNodeStyle Font-Bold="True" />
</asp:SiteMapPath>
</div>
</asp:Panel>

<asp:Panel ID="PanelRightSide" runat="server">
<td class="rightColumn2" valign="top">
<div style="padding: 10px;">
<ul class="ul_rightCol">
<li class="bullets">
<asp:HyperLink ID="Hyperlink2" runat="server" NavigateUrl="http://www.sample1.html"
Target="_blank" AccessKey="a">Sample1</asp:HyperLink></li>
<li class="bullets">
<asp:HyperLink ID="hypRates" runat="server" NavigateUrl="http://www.sample2.htm"
AccessKey="1" Target="_blank">Sample2</asp:HyperLink></li>
<li class="bullets">
<asp:HyperLink ID="hypChapter" runat="server" NavigateUrl="http://www.sample3.htm"
Target="_blank" AccessKey="2">Sample3</asp:HyperLink>
</li>
<li class="bullets">
<asp:HyperLink ID="hypData" runat="server" NavigateUrl="http://www.sample4.htm"
Target="_blank" AccessKey="3">Sample4</asp:HyperLink>
</li>
</ul>
</div>
</asp>


Code behind in VB.NET on Page Load: (code segment)

Dim PanelBC As Panel
PanelBC = CType(Master.FindControl("PanelBreadCrumb"), Panel)
PanelBC.Visible = False

Dim PanelRS As Panel
PanelRS = CType(Master.FindControl("PanelRightSide"), Panel)
PanelRS.Visible = True

This trick is a quite comfortable to use and reuse one master page for different layout through the same site. I hope to use the trick more and more.

Div Align With CSS

Creating a nice look for section 508-complaint site, I found I need some ideas how to place my div (s) on a page. Researching the topic I found an interesting posting about it:
"When playing with custom web designs, or off the shelf templates, the most common CSS work involves changing the margin, padding, color and background of HTML elements. I usually also usually align elements either to the left, right, or center using CSS.
To get started with code samples, to center a div in the middle of a container div you can use the following CSS:

.center {   margin-left: auto;   margin-right: auto; } 

If you want to align a div to the right and another div opposite to the first on the left you can use the following CSS classes.

.right {   float: right; } .left {    float: left; } 

I have found that when I used both div that float both to the right and left that you have to follow that with an empty div that clears, or resets, the float CSS property. If I don't clear the float property other elements such as a menu that is aligned to the right might not render correctly. Here is the CSS class to clear the float property, use it in a div the divs that have been aligned to the right, left, or both right and left.

.clear {   clear: both; }" 

The advice came from http://juixe.com/techknow/index.php/2007/01/14/div-align-with-css/

Accesskey and section 508

How different browsers handle the above accessKey letters for button and anchor elements

Browser	Operating System	Key Combination	Button Behavior	Anchor Behavior
Chrome 7.0.517.41	Linux	Alt + letter	Clicks the button (3)	Clicks the anchor (3)
Chrome 7.0.517.41	Mac OS X	Control + Option + letter	Clicks the button (3)	Clicks the anchor (3)
Chrome 7.0.517.41	Windows	Alt + letter	Clicks the button (3)	Clicks the anchor (3)
Firefox 1.5	Windows	Alt + letter	Clicks the button (1)	Unknown
Firefox 2	Linux	Alt + Shift + letter	Clicks the button (1)	Clicks the anchor
Firefox 2	Mac OS X	Control + letter	Clicks the button (1)	Clicks the anchor
Firefox 2	Windows	Alt + Shift + letter	Clicks the button (1)	Unknown
Firefox 3	Linux	Alt + Shift + letter	Clicks the button (1)	Clicks the anchor
Firefox 3	Mac OS X	Control + letter	Clicks the button (1)	Clicks the anchor
Firefox 3	Windows	Alt + Shift + letter	Clicks the button (1)	Clicks the anchor
Internet Explorer 6	Windows	Alt + letter	Sets focus on the button (2)	Unknown
Internet Explorer 7	Windows	Alt + letter	Sets focus on the button (2)	Sets focus on the anchor (2)
Internet Explorer 8	Windows	Alt + letter	Clicks the button (3)	Sets focus on the anchor (2)
Internet Explorer 9 (beta)	Windows	Alt + letter	Clicks the button (3)	Sets focus on the anchor (2)
Safari 3.1.2	Mac OS X	Control + Option + letter	Clicks the button (3)	Clicks the anchor (3)
Safari 3.1.2	Windows	Alt + letter	Clicks the button (3)	Clicks the anchor (3)
Safari 5.0.2	Mac OS X	Control + Option + letter	Clicks the button (3)	Clicks the anchor (3)
Safari 5.0.2	Windows	Alt + letter	Clicks the button (3)	Clicks the anchor (3)

•Red = Different behavior for buttons and anchors
•Comment 1 = To just set focus on the button/anchor, change your about:config setting for the “accessibility.accesskeycausesactivation” user preference.
•Comment 2 = Press Enter to click the button/anchor
•Comment 3 = There appears to be no built-in mechanism to just set focus on the button/anchor. The component handling the click event would be responsible for setting focus while handling the click.

The data comes from http://formattc.wordpress.com/2010/11/03/browsers-and-the-html-accesskey/ this table was really helpful to build my own system of accesskeys.