css troubleshooting browser versions

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

rodchar - 12 Jun 2007 19:34 GMT

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>

Reply to this Message

Mark Rae - 12 Jun 2007 20:18 GMT

> 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...?

Signature

http://www.markrae.net

Reply to this Message

rodchar - 12 Jun 2007 21:23 GMT

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">

> > it works correctly in ie6, but incorrectly in ie7 and firefox.
>
[quoted text clipped - 3 lines]
> Your CSS looks OK, but your HTML doesn't - what DOCTYPE and
> XHTLM-conformance level are you using...?

Reply to this Message

Mark Rae - 12 Jun 2007 21:53 GMT

> 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

Signature

http://www.markrae.net

Reply to this Message

rodchar - 12 Jun 2007 22:07 GMT

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

> > Here's the rest of the html below, by the way, were you able to view the
> > video?
[quoted text clipped - 12 lines]
>
> 2) Fix all the non-compliant markup

Reply to this Message

rodchar - 13 Jun 2007 05:12 GMT

<!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?

> > Here's the rest of the html below, by the way, were you able to view the
> > video?
[quoted text clipped - 12 lines]
>
> 2) Fix all the non-compliant markup

Reply to this Message

Mark Rae - 13 Jun 2007 07:44 GMT

> <!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...

>> 2) Fix all the non-compliant markup
> 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"

Signature

http://www.markrae.net

Reply to this Message

rodchar - 13 Jun 2007 14:11 GMT

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>

Reply to this Message

rodchar - 13 Jun 2007 16:40 GMT

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.

> Alright,
> I moved the project from vsnet2003 to vsnet2005 and i'm xhtml compliant but
[quoted text clipped - 46 lines]
> </body>
> </html>

Reply to this Message

Mark Rae - 13 Jun 2007 16:44 GMT

> 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?sourceid=navclient&hl=en-GB&ie=UTF-8&rlz=1T4GGIH_
en-GBGB220GB220&q=background%2dattachment%3a+fixed

Signature

http://www.markrae.net

Reply to this Message

Göran Andersson - 12 Jun 2007 21:21 GMT

> 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
[quoted text clipped - 15 lines]
> 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.

Signature

Göran Andersson
_____
http://www.guffa.com

Reply to this Message

Mark Rae - 12 Jun 2007 22:37 GMT

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

Agreed.

Signature

http://www.markrae.net

Reply to this Message

css troubleshooting browser versions

Free Magazines