css troubleshooting browser versions

[Guest]

hey all,
i have snippet of code which represents a left-side navigation menu
decorated by a stylesheet all in asp.net 1.1

it works correctly in ie6, but incorrectly in ie7 and firefox. i have a
video link below of the problem (video won't work in ie7 sorry, not sure why)
Anyway, the code is below also. Please take a moment to see the video the
rest of this is just for reference only.

http://www25.brinkster.com/rodchar/medtest.htm



....

CSS StyleSheet:
body
{
}
..td-home-vertmenu
{
width: 141px;
}
..td-home-vertmenu a:link, .td-home-vertmenu a:visited, .td-home-vertmenu
a:active, .td-custom-home-vertmenu a:link, .td-custom-home-vertmenu
a:visited, .td-custom-home-vertmenu a:active
{
margin-top: 2px;
padding-right: 2px;
margin-bottom: 3px;
padding-left: 2px;
font-weight: bold;
font-size: x-small;
background-attachment: fixed;
background-image: url(Images/VertMenuBackground.jpg);
width: 141px;
color: white;
background-repeat: no-repeat;
font-family: Arial;
height: 23px;
text-decoration: none;
}
..td-home-vertmenu a:hover, .td-custom-home-vertmenu a:hover
{
margin-top: 2px;
padding-right: 2px;
padding-left: 2px;
font-weight: bold;
font-size: x-small;
background-attachment: fixed;
background-image: url(Images/VertMenuHoverBackground.jpg);
margin-bottom: 3px;
width: 141px;
color: #4b0082;
background-repeat: no-repeat;
font-family: Arial;
height: 23px;
text-decoration: none;
}

Html code:

<table>
<tr>
<TD class="td-home-vertmenu" vAlign="top">
<span id="HomeVerticalMenuControl1"><a
href="/www.test.edu/Administration/">Administration</a>
<a href="/www.test.edu/Admissions/">Admissions</a> <a
href="/www.test.edu/Early+Admission/">
Early Admission</a> <a href="/www.test.edu/Campus+Life/">Campus
Life</a> <a href="/www.test.edu/test+Athletics/">
test Athletics</a> <A title="Blackboard Link"
href="http://blackboard.test.edu/" target="_blank">
Blackboard</A><A title="test Net Link"
href="http://jenwebnew.test.edu/ics/?" target="_blank">test
Net</A><A title="Title III Link"
href="/www.test.edu/TitleIII.htm">Title III</A><A title="Alumni Link"
href="/www.test.edu/Alumni.htm">Alumni</A><A title="Bookstore Link"
href="/www.test.edu/Bookstore.htm">Bookstore</A><BR>
<A title="Current Students Link"
href="http://jenwebnew.test.edu/exweb/" target="_blank">
Current Students</A><BR>
<BR>
<BR>
</span>
</TD>
</tr>
</table>

 

[Mark Rae]

it works correctly in ie6, but incorrectly in ie7 and firefox.

In almost all cases where the above statement is true, the reason is because
the markup is not standards compliant...

Your CSS looks OK, but your HTML doesn't - what DOCTYPE and
XHTLM-conformance level are you using...?

 

[Guest]

hey all,
i have snippet of code which represents a left-side navigation menu
decorated by a stylesheet all in asp.net 1.1

it works correctly in ie6, but incorrectly in ie7 and firefox.

I have actually never seen any code where that is actually true. Firefox
and IE7 mainly follows the standard, while IE 6 has some serious
rendering bugs.

The truth is that the page is rendered correctly in IE7 and Firefox, and
incorrectly in IE 6. You have built the page to rely on some of the
rendering bugs in IE 6, that's why it only looks as you indend in that
version of that browser.

.td-home-vertmenu a:link, .td-home-vertmenu a:visited, .td-home-vertmenu
a:active, .td-custom-home-vertmenu a:link, .td-custom-home-vertmenu
a:visited, .td-custom-home-vertmenu a:active
{
margin-top: 2px;
padding-right: 2px;
margin-bottom: 3px;
padding-left: 2px;
font-weight: bold;
font-size: x-small;
background-attachment: fixed;
background-image: url(Images/VertMenuBackground.jpg);
width: 141px;
color: white;
background-repeat: no-repeat;
font-family: Arial;
height: 23px;
text-decoration: none;
}

An anchor tag is an inline element. According to the standard, width and
height does not apply to inline elements. IE 6 handles this incorrectly,
and applies the width and height to the element.

Add display:block; to turn the anchor tags into block elements.

 

[Guest]

Here's the rest of the html below, by the way, were you able to view the
video? just wondering i've tried this a few times and never asked for
feedback? wondering if it's helping.

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false"
Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
<LINK href="StyleSheet2.css" type="text/css" rel="stylesheet">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">

 

[Mark Rae]

Here's the rest of the html below, by the way, were you able to view the
video?
Yes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>

There's your problem...

1) Change the second and third lines to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

2) Fix all the non-compliant markup

 

[Guest]

thanks, i'll give it a shot and report back.

There's your problem...

1) Change the second and third lines to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

2) Fix all the non-compliant markup

 

[Mark Rae]

Firefox and IE7 mainly follows the standard, while IE 6 has some serious
rendering bugs.

Agreed.

 

[Guest]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
Here's my new syntax as you suggested but it did not work for me. would it
have anything to do with me developing in vsnet2003?

2) Fix all the non-compliant markup

what do you mean here? how would i know what is non-compliant?

 

[Mark Rae]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
Here's my new syntax as you suggested but it did not work for me. would it
have anything to do with me developing in vsnet2003?

Ah - I honestly can't remember, it's been so long since I used VS.NET
2003...

what do you mean here? how would i know what is non-compliant?

On the HTML Source Editing toolbar, set the Target Schema for Validation
dropdown to "XHTML 1.0 Transitional"

 

[Guest]

Alright,
I moved the project from vsnet2003 to vsnet2005 and i'm xhtml compliant but
still no go. So it's definitely not the stylesheet?



<%@ Page Language="c#" Inherits="WebApplication1.WebForm1"
CodeFile="WebForm1.aspx.cs" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>WebForm1</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1" />
<meta name="CODE_LANGUAGE" content="C#" />
<meta name="vs_defaultClientScript" content="JavaScript" />
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5" />
<link href="StyleSheet2.css" type="text/css" rel="stylesheet" />
</head>
<body>
<form id="Form1" method="post" runat="server">
<table>
<tr>
<td class="td-home-vertmenu" valign="top">
<a href="/www.test.edu/Administration/">Administration</a>
<a href="/www.test.edu/Admissions/">Admissions</a>
<a href="/www.test.edu/Early+Admission/">Early
Admission</a>
<a href="/www.test.edu/Campus+Life/">Campus Life</a>
<a href="/www.test.edu/test+Athletics/">Test
Athletics</a>
<a title="Blackboard Link"
href="http://blackboard.test.edu/" target="_blank">Blackboard</a>
<a title="test Net Link"
href="http://jenwebnew.test.edu/ics/?" target="_blank">test Net</a>
<a title="Title III Link"
href="/www.test.edu/TitleIII.htm">Title III</a>
<a title="Alumni Link"
href="/www.test.edu/Alumni.htm">Alumni</a>
<a title="Bookstore Link"
href="/www.test.edu/Bookstore.htm">Bookstore</a>
<a title="Current Students Link"
href="http://jenwebnew.test.edu/exweb/" target="_blank">Current Students</a>

</td>
</tr>
</table>
</form>
</body>
</html>

 

[Guest]

Hey everyone,
thanks for sticking around with me on this. I think I may have found the
problem. In the stylesheet I deleted 1 line of code:
background-attachment: fixed;

and after deleting that 1 line of code the links appeared for firefox and ie7.

thanks again for the great help.

 

[Mark Rae]

thanks for sticking around with me on this. I think I may have found the
problem. In the stylesheet I deleted 1 line of code:
background-attachment: fixed;

and after deleting that 1 line of code the links appeared for firefox and
ie7.

Interesting...
http://www.google.co.uk/search?sour...n-GBGB220GB220&q=background-attachment:+fixed