Wordpress Contact page question

[jcdesigns]

I built a Wordpress website and found that users with IE8 cannot view the field descriptions on the contact page. How can I correct this? Is there code I can add to the contact.php file to correct this?

Here is the link.
http://www.pinnacleevaluations.com/contact-us-2/

Also, I noticed that the menu is a pull down on some desktop computers and display across the top on others as I want on others. Is there a way to ensure the menu display across the top for all desktops? Thanks

jcdesigns

Posts: 0
Joined: Thu Jul 11, 2013 12:04 pm

[jscheuer1]

Best I can tell, IE 9 and less do not support the use of the placeholder attribute for text inputs and textareas. For them you would need to establish the placeholder's value as the value or as the defaultValue for the input and setup some javascript (with or without jQuery) code to have it disappear on focus if it is the value of the field, and reappear on blur if the field is empty. Before the placeholder attribute, that's how all forms were managed if this type of action was desired, ex for the setup on that page:

jQuery(function($){
	var ie = /MSIE (\d+)/.exec(navigator.userAgent);
	if(!ie || ie > 9){return;}
	$('input:text[placeholder], textarea[placeholder]').each(function(i, el){
		el.value = el.getAttribute('placeholder');
	}).focus(function(){
		if($.trim(this.value) === $.trim(this.getAttribute('placeholder'))){
			this.value = '';
		}
	}).blur(function(){
		if($.trim(this.value) === ''){
			this.value = this.getAttribute('placeholder');
		}
	});
});

An alternative would be simply to use labels for those browsers, example:

<!--[if IE]><label for="author">Name (required): </label><![endif]--><input type="text" placeholder="Name (required)" name="contact_name" id="author" value="" size="22" tabindex="1" aria-required="true" class="input-name">

Since IE conditional HTML comments are not supported in IE 10 or any other non-IE browser, a label like this will only appear in IE 9 and less.

Whichever you choose:

The browser cache may need to be cleared and/or the page refreshed to see changes.

As for your other issue, when I have more time I will look into it.

I got some more time and the decision by the browser as to which menu to display depends upon the width of the window. If there's enough room (or nearly enough room) to show the text menu without line breaks, it does. Otherwise you get the drop down select version to save space.

I think this is a good feature, especially for mobile/touch devices. Even for desktops it's good because the text nav, if shown at those narrower window widths would be a little jumbled up on itself. It can be overridden though if you really want to. It depends upon media queries in the css to detect window width, assisted by javascript for browsers that don't do that. To override it, change in pinnacleevaluations.com/wp-content/themes/icompany/styles/style.css around line #741 (add the highlighted):

.selectnav {
display: none !important;
}

And in styles on the page itself, around line #395 - though this might be in an include so harder to find:

#main-menu {
font-family: Lato, Helvetica, arial, verdana;
font-weight: 300;
font-size: 18px;
color: #006633;
display: block !important;
}

For that second modification, if it's hard to find, you can just add the style to any existing stylesheet:

#main-menu {
display: block !important;
}