Forum Moderators: not2easy
I am using the small business website template provided by Microsoft (that was my first mistake).
The top navigation for this website appears perfectly in Internet Explorer (no surprises there being a MS template) but it also works in FireFox and Opera. However in Chrome and Safari the main navigation div and its contents are displayed incorrectly. I'll do my best to describe what I mean by incorrectly as I note the posting guidelines don't want me to request site reviews. The height of the div is to small meaning elements below it are slightly overlayed. Also the ASP.Net Menu Control is positioned significantly to far to the right.
The Doc Type is XHTML 1.0 Transitional
Here is what I believe to be the relevant HTML and CSS
<div id="nav-main">
<a href="#ctl00_Menu1_SkipLink">
<img height="0" width="0" style="border-width: 0px;" src="/WebResource.axd?d=EgrzGunOnXSdA79_F8WprA2&t=633435442062782030" alt="Skip Navigation Links"/>
</a>
<table id="ctl00_Menu1" class="menu-main ctl00_Menu1_2" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td id="ctl00_Menu1n0" title="Home Page" onkeyup="Menu_Key(event)" onmouseout="Menu_Unhover(this)" onmouseover="Menu_HoverStatic(this)">
</td>
<td style="width: 3px;"/>
<td id="ctl00_Menu1n1" title="Examples of our work" onkeyup="Menu_Key(event)" onmouseout="Menu_Unhover(this)" onmouseover="Menu_HoverStatic(this)">
</td>
<td style="width: 3px;"/>
<td id="ctl00_Menu1n2" title="Customers' Opinions" onkeyup="Menu_Key(event)" onmouseout="Menu_Unhover(this)" onmouseover="Menu_HoverStatic(this)">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td style="white-space: nowrap;">
<a class="ctl00_Menu1_1" href="/Testimonials.aspx">Testimonials</a>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 3px;"/>
<td id="ctl00_Menu1n3" title="A basic price guide" onkeyup="Menu_Key(event)" onmouseout="Menu_Unhover(this)" onmouseover="Menu_HoverStatic(this)">
</td>
<td style="width: 3px;"/>
<td id="ctl00_Menu1n4" title="Contact Information" onkeyup="Menu_Key(event)" onmouseout="Menu_Unhover(this)" onmouseover="Menu_HoverStatic(this)">
</td>
<td style="width: 3px;"/>
<td id="ctl00_Menu1n5" title="News about the business" onkeyup="Menu_Key(event)" onmouseout="Menu_Unhover(this)" onmouseover="Menu_HoverStatic(this)">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td style="white-space: nowrap;">
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 3px;"/>
<td id="ctl00_Menu1n6" title="Business Overview" onkeyup="Menu_Key(event)" onmouseout="Menu_Unhover(this)" onmouseover="Menu_HoverStatic(this)">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td style="white-space: nowrap;">
<a class="ctl00_Menu1_1" href="/About.aspx">About</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<a id="ctl00_Menu1_SkipLink"/>
<div>
</div>
</div>
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
MAIN NAV
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#nav-main
{
/*---VCSL---*/
/*background:#608fc8 url(../../images/bg-nav.png) no-repeat;*/
background:#608fc8 url(../../images/x-nav-bg12.png) no-repeat;
/*---------*/
margin-left:auto;
margin-right:auto;
width:740px;
padding:.8em 0 1em 20px;
position:relative;
font-weight:bold;
}
#nav-main div
{
/*---VCSL---*/
/*background:#4b6cb5 url(../../images/bg-nav-side.png) top right no-repeat;*/
background:#4b6cb5 url(../../images/x-nav-side5.png) top right no-repeat;
/*----------*/
width:25%;
_width:25.5%;
position:absolute;
top:0;
right:0;
padding:.8em 0 1em 0;
}
#nav-main ul {
margin:0;
padding:0 20% 0 0;
}
#nav-main li {
display:inline;
list-style:none;
padding:0 1em 0 0;
background:none;
}
#nav-main a:link,
#nav-main a:visited {
/* --- VCSL --- */
color:#FFFFFF;
/* color:#FFCC66; #FFFF66 #000080 #0099FF #000000 #CCCCCC #333333*/
/* ------------ */
text-decoration:none;
}
#nav-main a:hover {
color:#D4E7F8;
text-decoration:underline;
}
#nav-main a:active {
color:#FFFFFF;
}
#nav-main li.current a:link,
#nav-main li.current a:visited {
text-decoration:underline;
}
#nav-main li.current a:hover {
color:#D4E7F8;
text-decoration:underline;
}
#nav-main li.current a:active {
color:#FFFFFF;
}
/* ACTIVE PAGES */
#nav-main a.StaticSelectedStyle:link,
#nav-main a.StaticSelectedStyle:visited {
/* --- VCSL --- */
/*color:#000080;*/
color:#D4E7F8;
/* ------------ */
text-decoration:underline;
}
Thank you to anyone who reads this.
I'll be cheeky and give you the link anyway as not being a CSS/HTML expert it's kind of difficult to describe. I don't really see what's wrong with the HTML/CSS, it seems to be different browser interpretations of CSS properties used.
Many thanks
[edited by: swa66 at 5:06 pm (utc) on June 19, 2009]
[edit reason] No URLs please see ToS and Forum charter [/edit]
A couple quick pointers to help you get started:
1) Are you using a full doctype [w3.org]?
2) Does your markup validate [validator.w3.org]?
3) What about your CSS [jigsaw.w3.org]?
Yes I'm using a full Doc Type
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
No the markup and CSS does not validate (see results below). To make it validate will require significant site restructuring. If possible can you describe which validation error (if any) is likely to cause this problem?
=====================================================
MARKUP VALIDATION
=====================================================
Notes and Potential Issues
The following notes and warnings highlight missing or conflicting information which caused the validator to perform some guesswork prior to validation. If the guess or fallback is incorrect, it could make validation results entirely incoherent. It is highly recommended to check these potential issues, and, if necessary, fix them and re-validate the document.
1.
Warning Character Encoding mismatch!
The character encoding specified in the HTTP header (utf-8) is different from the value in the <meta> element (iso-8859-1). I will use the value from the HTTP header (utf-8) for this validation.
↑ Top
Validation Output: 10 Errors
1. Error Line 7, Column 31: document type does not allow element "script" here; assuming missing "body" start-tag
<script type="text/javascript">
✉
2. Error Line 15, Column 6: document type does not allow element "body" here
<body>
✉
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).
3. Error Line 154, Column 61: document type does not allow element "div" here; assuming missing "li" start-tag
… <div id="ctl00_ContentPlaceHolder1_AllNewsPanel">
✉
4. Error Line 159, Column 50: Attribute "bordercolor" is not a valid attribute
…spacing="0" rules="all" bordercolor="White" border="0" id="ctl00_ContentPlace
✉
You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).
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.
5. Error Line 164, Column 40: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag
<li><a id="ctl00_ContentPlaceHolder1_GridVie
✉
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
6. Error Line 168, Column 40: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag
<li><a id="ctl00_ContentPlaceHolder1_GridVie
✉
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
7. Error Line 172, Column 40: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag
<li><a id="ctl00_ContentPlaceHolder1_GridVie
✉
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
8. Error Line 176, Column 40: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag
<li><a id="ctl00_ContentPlaceHolder1_GridVie
✉
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
9. Error Line 183, Column 17: end tag for "li" omitted, but OMITTAG NO was specified
</ul>
✉
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
10. Info Line 154, Column 12: start tag was here
<div id="ctl00_ContentPlaceHolder1_AllNewsPanel">
11. Error Line 252, Column 7: end tag for "body" omitted, but OMITTAG NO was specified
</html>
✉
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
12. Info Line 7: start tag was here
><script type="text/javascript">
========================================================
CSS VALIDATION
========================================================
Sorry! We found the following errors (3)
URI : example.css
139 hr Property _margin doesn't exist : 10px 0
372 #nav-main div Property _width doesn't exist : 25.5%
700 #footer div Property _width doesn't exist : 25.5%
Warnings (30)
URI : example.css
63 #content-side2-three-column In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected
67 #content-side1-three-column In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected
135 hr Same color for background-color and color
285 Same colors for color and background-color in two contexts #content-container-two-column and #logo
285 Same colors for color and background-color in two contexts body and #logo
293 Same colors for color and background-color in two contexts body and #logo a
293 Same colors for color and background-color in two contexts #content-container-two-column and #logo a
317 Same colors for color and background-color in two contexts #content-container-two-column and #top-information-phone
317 Same colors for color and background-color in two contexts body and #top-information-phone
394 Same colors for color and background-color in two contexts #content-container-two-column and #nav-main a:link
394 Same colors for color and background-color in two contexts body and #nav-main a:visited
394 Same colors for color and background-color in two contexts #content-container-two-column and #nav-main a:visited
394 Same colors for color and background-color in two contexts body and #nav-main a:link
406 Same colors for color and background-color in two contexts #content-container-two-column and #nav-main a:active
406 Same colors for color and background-color in two contexts body and #nav-main a:active
420 Same colors for color and background-color in two contexts #content-container-two-column and #nav-main li.current a:active
420 Same colors for color and background-color in two contexts body and #nav-main li.current a:active
470 Same colors for color and background-color in two contexts body and #feature-area-home
470 Same colors for color and background-color in two contexts #content-container-two-column and #feature-area-home
512 Same colors for color and background-color in two contexts body and #pagetitle a:visited
512 Same colors for color and background-color in two contexts body and #pagetitle a:link
512 Same colors for color and background-color in two contexts #content-container-two-column and #pagetitle a:visited
512 Same colors for color and background-color in two contexts #content-container-two-column and #pagetitle a:link
662 .photo-float-left In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected
709 Same colors for color and background-color in two contexts body and #footer a:visited
709 Same colors for color and background-color in two contexts #content-container-two-column and #footer a:link
709 Same colors for color and background-color in two contexts body and #footer a:link
709 Same colors for color and background-color in two contexts #content-container-two-column and #footer a:visited
719 Same colors for color and background-color in two contexts #content-container-two-column and #footer a:active
719 Same colors for color and background-color in two contexts body and #footer a:active
[edited by: SuzyUK at 6:58 pm (utc) on June 19, 2009]
[edit reason] examplified [/edit]
The CSS validation is good enough. The only three validation errors for your stylesheet are intentional, and should be left as-is.
