View Full Version : Nav. Menu + Popup "box" all-browser-age/version friendly?

Feb 24th, 2011, 06:52 PM
I dont want ANYONE to have problems accessing 1. my navigation bar made in a css menu builder or 2. the css popup boxes when you mouseover the "more" buttons on the main page.


thanks a lot.

Feb 24th, 2011, 07:55 PM
Hello mat420,
The first step would be making sure your code is valid. See the links about validation in my signature line.

The next step would be identifiying any browsers or users that are having troubles. Once, or if, you find anyone that can't navigate your site then you'll be able to ask a more specific question.

Feb 25th, 2011, 09:00 PM
i did attempt to vcalidate code and failed, ill have to try again.

with what i possibly plan to do wit hthis site, i cant be waiting just to 'hear' someone couldnt access my css menu, if thats what you mean though

i need to know how browser friendly these 2 options are.
for example no one, no matter what age browser or OS has problems seeing an html text box (i wouldnt think), might that person have trouble seeing my menu? and pop up bubbles?
i dont know how to identify any browsers having trouble without downloading them all.
browsershots doesnt give me the opportunity to mouseover the "more" buttons or my "services" drop down css menu.

ill start with the links in ur signature though.

Feb 25th, 2011, 09:02 PM
, i cant be waiting just to 'hear' someone couldnt access my css menu,

Testing is part of development. That should be your responsibility, not your end users.
It's up to you to verify your page works as intented in all your target browsers.

Feb 25th, 2011, 09:03 PM
tell me where to start then please? is that all i can do is verify the code works correctly and hope for the best?

thank you vm.

Feb 25th, 2011, 09:22 PM
You should start with valid code and CSS. That is your best chance at cross browser compatibility but it is by no means any guarantee.

After that, you will need to personally check in each browser yourself. You can address issues as they come up, correct them and re-check in all those browsers again.

Welcome to the wonderful world of web authoring!

Feb 26th, 2011, 08:56 PM
see im rtying to 'validate my markup'

Line 10, Column 16: there is no attribute "ROWS"
<frameset rows="100%,*" border="0">

but i dont see the word frameset in any of my code..i used notepad to check every html file

i even checked my php and css files and the term " frameset" is nowhere.
i dont udnerstand.

Feb 26th, 2011, 09:21 PM
validated some of my css.
afraid to touch all of this tough and risk breaking anything.
for example the webkit part of this...is working fine on all browsers but comes up as an error.

URI : http://s289686823.onlinehome.us/drpcrepair/89 .thumbnail span Parse Error text-decoration: none
118 .qmmc Property zoom doesn't exist : 1 1
144 #qm0 div, #qm0 ul Property -webkit-border-bottom-right-radius doesn't exist : 10px 10px 10px 10px
145 #qm0 div, #qm0 ul Property -khtml-border-radius-bottomright doesn't exist : 10px 10px
146 #qm0 div, #qm0 ul Property -moz-border-radius-bottomright doesn't exist : 10px 10px
147 #qm0 div, #qm0 ul Property border-bottom-right-radius doesn't exist in CSS level 2.1 but exists in : 10px 10px

Feb 27th, 2011, 06:19 PM
bumpppp please

Feb 27th, 2011, 06:47 PM
All that "doesn't exist" stuff is CSS3. In browsers that support CSS3 it will work, it'll just be ignored in browsers that don't support it.

You'll be fine leaving those entries in your CSS.

Feb 27th, 2011, 06:49 PM
The frameset is coming from the fact that you are URL cloaking - your domain name is drpcrepair.com but your page is actually located at http://s289686823.onlinehome.us/drpcrepair/. Further, the w3 validator can't parse your document at that address because it contains non-UTF-8 characters. The offending character is in your <title>:
<title>Dr. PC Repair � PC Repair | Web Design | PC Training & More</title>

Feb 28th, 2011, 08:56 PM
so i addressed those issues...
it says 193 errors...
id appreciate if anyone can tell me how important it is that i fix these or any of these? because wow..
thanks so much all


Feb 28th, 2011, 08:57 PM
its a lot of easy fixes but holy crap 193?

Feb 28th, 2011, 10:05 PM
Yes there are a lot of errors, but as you said most of them are very easy to fix. While it is not critical (from a browser standpoint) that these be fixed, it will help to find future errors.

Here, I will get you started:

Line 5, Column 61: character "&" is the first character of a delimiter but occurred as data

<title>Dr. PC Repair - PC Repair | Web Design | PC Training & More</title>

This message may appear in several cases:
* You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&amp;", which is always safe.
<title>Dr. PC Repair - PC Repair | Web Design | PC Training &amp; More</title>

Many of the errors are due to your using the XHTML doctype. XHTML requires lower-case tag and attribute names and self-closing "empty" tags. Additionally, you cannot use tags that do not appear in the XHTML DTD, including any proprietary or browser-specific tags. It may make less of a headache for you if you switched to the HTML 4.01 transitional doctype.

Line 6, Column 12: there is no attribute "NAME"


This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.

<meta name="robots" content="index, follow">Attribute values are not required to be lower-case, but this looks a bit nicer than:
<meta name="ROBOTS" content="INDEX, FOLLOW">

Line 113, Column 64: end tag for "link" omitted, but OMITTAG NO was specified

<link href="cssmenustyle.css" rel="stylesheet" type="text/css">

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

<link href="cssmenustyle.css" rel="stylesheet" type="text/css" />You'll need to do this for all those <br> tags as well.
<br />

Line 115, Column 25: required attribute "type" not specified

<script src="cssmenu.js"></script>

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

<script src="cssmenu.js" type="text/javascript"></script> Type is required for HTML 4.01 and XHTML. You can leave it out for HTML 5.

Line 382, Column 26: document type does not allow element "style" here

<style type="text/css">

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
Great, you remembered the type attribute. Too bad XHTML doesn't allow <style> outside of the <head>.

My recommendation is to fix a few errors and then re-run the validation. Fixing a few may clean up many of the reported errors.

If you need help with further errors, let us know.

Feb 28th, 2011, 10:09 PM
you're thebest
thanks a lot.

Feb 28th, 2011, 10:13 PM
html 4.01, to switch to that do i just replace
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

with the correct code?

Feb 28th, 2011, 10:20 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

i put that in..idk what the html xmlns is though, the new html 4.01 didnt have a code that looked like that...do i neeed that part of it?

Feb 28th, 2011, 10:24 PM
looks like u were right, i got rid of the xmlns
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

i kept that.
and im down to 110 errors already.
i wont run into any issues with my current code from switching mhtl versions will i?

Feb 28th, 2011, 10:45 PM
You have the correct doctype. Since HTML 4.01 is not an XML application (as XHTML is), it is not necessary to include the xmlns in the <html> tag.

As far as any errors you may receive resulting in the switch from XHTML to HTML 4.01, you will just have to consult the validator. If it throws an error you can't understand, just post it here and we'll try to help.

Feb 28th, 2011, 10:49 PM
Line 3, Column 68: NET-enabling start-tag requires SHORTTAG YES

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

The sequence <FOO /> can be interpreted in at least two different ways, depending on the DOCTYPE of the document. For HTML 4.01 Strict, the '/' terminates the tag <FOO (with an implied '>'). However, since many browsers don't interpret it this way, even in the presence of an HTML 4.01 Strict DOCTYPE, it is best to avoid it completely in pure HTML documents and reserve its use solely for those written in XHTML.
You will need to go back and remove the self-closing slash wherever it appears. This is one incompatibility between HTML 4.01 and XHTML. Removing these might clear up some of the remaining issues as well.

Feb 28th, 2011, 11:16 PM
tell me where to start then please? is that all i can do is verify the code works correctly and hope for the best?

thank you vm.
...aaaand....the problem is that even IF you do get validated it doesnt mean that IE is going to play ball anyway.

Ive got web pages that validate in strict that IE craps out on regardless.
At some point you just have to do what you need to do to get your page working in the major browsers and to hell with validation. It sucks but in some cases its just the fact since Microsoft has decided to be an age and a half behind the times.

I try to get as few errors as possible with a transitional validation. If my site renders properly in IE, FF and Opera its been a good day.
Your readers arent going to notice if youre validated or not. They ARE going to notice if IE is scrambling your page all to hell.

Mar 2nd, 2011, 06:24 AM
ok well now im kinda even hesitant to fix many errors...
is there like an error scan that like will only tell me like, the major problems?
the site works fine on firefox, firefox beta, the latest opera, w/e version of IE i have, latest version of chrome

i just, really want this to work on 90% of windows/mac machines

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

i assume i want to fix that importantly.

its ok to get rid of the "/"?
what if i jsut fix all of the warnings there, is that good enough?
not sure what to do, i didnt think of that. i dont want to fix errors and have those errors mess something up in one of the 4, 5 major browsers
i also dont want to fix something and check the webpage after each fix.

suggestions please?
thanks so much ppl i def appreciate it.

Mar 2nd, 2011, 06:41 AM
i mean tis working on every browser ive checked...is it best to fix as many errors as i can because it will only HELP it to continue working in THOSE browsers AND MORE? and if this is the case...110 errors is a lot, any good ideas on figuring out which ones are fixes that actually matter? ;/ you guys are great. thanks again! :thumbsup:

Mar 2nd, 2011, 05:54 PM
Line 7, Column 185: document type does not allow element "META" here
…ir, Computer Training, Remote / Online Computer Training, Web Design Services">

i dont know what this things problem is, it didnt like the / at the end, got rid of that and its still not happy

full code:
<meta name="description" content="Our Specialties: Computer Repair Services, Remote / Online Computer Repair, Computer Training, Remote / Online Computer Training, Web Design Services">

Mar 2nd, 2011, 06:11 PM
You have to decide if you are going to stick with HTML 4.01 or go back to XHTML.

If you stick with HTML 4.01 you must remove the ' /' at the end of empty tags. XHMTL requires them, HTML 4.01 does not.

The errors about not allowing elements here all relate back to the closing slash mentioned above. Remove those and the '... is not allowed here' messages should disappear.

Mar 3rd, 2011, 06:02 PM
ok ive been error fixing for hours now can you please help me with these?
also is there a good tool for finding, and preferably editing RIGHT FROM THERE to find missing start/end tags? i have a tonnnn of missing start and end tags and removing them manually would take forever.
thanks a milllllllllllllllllion.

E620 The 'bordercolor' attribute is not valid for this tag here:
E622 The 'width' attribute does not have a valid value: It must be an integer, or

an integer percentage:
E910 [WCAG v2 1.4.4 (AA)] Use relative, rather than absolute units:
problem-------->> <table border="0" bordercolor="#FFCC00" width="240em"

cellpadding="4" cellspacing="0">
it doesnt like "bordercolor" and the value for width, it didnt like 240px either.

E609 This tag or content is not allowed here. One of the following was expected:

<#pcdata> <a> <abbr>
<acronym> <address> <applet> <b> <basefont> <bdo> <big> <blockquote> <br>

<button> <center> <cite>
<code> <dfn> <dir> <div> <dl> <em> <fieldset> <font> <form> <h1> <h2> <h3>

<h4> <h5> <h6> <hr> <i>
<iframe> <img> <input> <isindex> <kbd> <label> <map> <menu> <noframes>

<noscript> <object> <ol> <p>
<pre> <q> <s> <samp> <script> <select> <small> <span> <strike> <strong> <sub>

<sup> <table> <textarea>
<tt> <u> <ul> <var>
problem---->> <style type="text/css">
it doesnt like "style"


357 E892 [WCAG v2 1.3.1 (A)] Use CSS for presentation effects, use <em> or <strong> for emphasis:
<font color=black>

is this one because maybe font color should be outside of the table? <table>? or migth other ones be because of this, or is inside fine?

Mar 3rd, 2011, 06:21 PM
any at least, semi easy way to solve most of these?

are there like maybe only 5 out of them all that are actually important? that maybe u could point out?

i dont know if i can manage anymore error fixing that doesnt even seem to be doing anything more than causing trouble for me.

maybe theres a um, version of html i can switch to that would accept all this crap? idk :/

thanks again

Mar 3rd, 2011, 10:12 PM
I don't know of any tool that will automatically fix validation errors. It will take time and an understanding of HTML.

I am unable to access that validator URL where I am. Is it the same as this one (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.drpcrepair.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0)? (Difference being validating doctorpcrepair.com vs. drpcrepair.com.)

A few notes:

table height and bordercolor are proprietary or non-standard attributes and won't validate ever (line 221)

doctype does not allow element X here - look for cases where elements are improperly nested - line 171 you are trying to use an <a> which is inside an <object> (allowed) which is inside an <a> - not allowed - cannot nest <a> tags. (You also have this elsewhere with <a> inside of <a>.)

font tag is deprecated (meaning please don't use it anymore, use CSS instead) - even so, it needs a </font> to close it.

end tag for element X which is not open - you have an extra </X> or improperly nested tag set <X><Y></X></Y>

<span> is an inline element like <em>, <strong> or <a> and cannot be used to wrap block-level elements like <div>, <p> or <table>

If you use Firefox browser, check out the HTML Validator (https://addons.mozilla.org/en-US/firefox/addon/html-validator/) add-on. You can get live validation results right in your web browser or view-source window without having to re-visit w3's validator. You can even validate local code (file:///) running in your browser.

If your page is working correctly in all the browsers you are concerned about it working in, there is no reason to spend an inordinate amount of time fixing the code so that it will validate. If, however, there is a case where your page is not working, validation is the first step - making sure your code is correct and not to blame. Since browsers can be quirky, any warning/error thrown by the validator might be responsible for an incorrect behavior.