Strange link styling in IE!

ben.dixon

Hi,

I'm using links for navigation on a test page, so each link will go to
a question in the test e.g. Question 1, Question 2 etc.

For each link i am using an Outer Border, Middle border and Inner
border, each with their own color depending on the status of the
question (e.g. Read, Answered, Viewed etc.) so that the user can
distinguish between questions they've answered and one they haven't
answered.

I have styled them using css but the links text color for a question
number which has been answered or is currently being viewed go grey
(should be #0063A5) with a white drop shadow (as if the microsoft
DropShadow filter is being applied to it!)

All of the links should be #0063A5, the other links are coloured
correctly! If i view them in Firefox or Netscape they do style
correctly but in IE I keep getting the grey drop shadow text.

The spans that wrap the question numbers are also styled so they
appear as layers but I have taken the code out from a generated page
and the associated styles, now they dont seem to be styled correctly.
I am only concerned with the color of the link!!!!

Many Thanks,

Ben

Feb 6 '07 #1

Subscribe Reply

2113

ben.dixon

Here's the HTML for the problem:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="css/example.css">

</head>
<body>
<div class="questionNavigation">

<a href="TestPage.jsp" id='QNo1' tabIndex="8" onClick='return
redirectToQuestion(1)' class="QAnswered">1</a>

<a href="TestPage.jsp" id='QNo2' tabIndex="9" onClick='return
redirectToQuestion(2)' class="QRead">2</a>

<a href="TestPage.jsp" id='QThis'
tabIndex="10" disabled onClick='return false;'
class="QReadAnswered">3</a>

<a href="TestPage.jsp" id='QThis' tabIndex="11" disabled
onClick='return false;' class="QRead">4</a>

<a href="TestPage.jsp" id='QNo5' tabIndex="12"
onClick='return redirectToQuestion(5)' class="QNotRead">5</a>

</div>
</body>
</html>

Here's the CSS for the problem:

..questionNavigation{position:absolute;top:64px;ma rgin-left:10px;}
..QAnswered{font-weight:bold;color:#0063A5;text-decoration:none !
important}
..QRead, a.QRead:visited, a.QRead:hover,
a.QRead:active, .QReadAnswered, a.QReadAnswered:link, a.QRead:visited,
a.QReadAnswered:hover, a.QReadAnswered:active{font-
weight:bold;color:#0063A5 !important;text-decoration:none !important}
..QNotRead{font-weight:bold;color:#0063A5;text-decoration:none !
important}

/* Not currently being viewed / Has been viewed / Answered */
..OuterQAnswered{background-color:transparent;width:30px;height:
35px;text-align:center}
..MiddleQAnswered{position:relative;top:3px;backgr ound-
color:#669788;width:24px;height:25px;text-align:center}
..InnerQAnswered{position:relative;top:3px;backgro und-
color:#669788;width:18px;height:18px;text-align:center}

/* Not currently being viewed / Has been viewed / Not Answered */
..OuterQRead{background-color:#FFFFFF;width:30px;height:35px;text-
align:center}
..MiddleQRead{position:relative;top:3px;background-color:#669788;width:
24px;height:25px;text-align:center}
..InnerQRead{position:relative;top:3px;background-color:#FFFFFF;width:
18px;height:18px;text-align:center}

/* Currently being viewed / Has been viewed / Answered */
..OuterQReadAnswered #MiddleQThis, .OuterQReadAnswered
#InnerQThis, .OuterQReadAnswered #QThis{position:relative;top:
0px;background-color:#005239;width:30px;height:35px;text-
align:center;}
..MiddleQReadAnswered #InnerQThis, .MiddleQReadAnswered
#QThis{position:relative;top:3px;background-color:#669788;width:
24px;height:25px;text-align:center}
..InnerQReadAnswered #QThis{position:relative;top:3px;background-
color:#669788;width:18px;height:18px;text-align:center}

/* Currently being viewed / Has been viewed / Not Answered */
..OuterQRead #MiddleQThis, .OuterQRead #InnerQThis, .OuterQRead
#QThis{position:relative;top:0px;background-color:#005239;width:
30px;height:35px;text-align:center;}
..MiddleQRead #InnerQThis, .MiddleQRead #QThis{position:relative;top:
3px;background-color:#669788;width:24px;height:25px;text-align:center}
..InnerQRead #QThis{position:relative;top:3px;background-
color:#FFFFFF;width:18px;height:18px;text-align:center}

/* Not currently being viewed / Has not been viewed / Not Answered */
..OuterQNotRead{background-color:transparent;width:30px;height:
35px;text-align:center}
..MiddleQNotRead{position:relative;top:3px;border: #669788 solid
1;background-color:#FFFFFF;width:24px;height:24px;text-align:center}
..InnerQNotRead{position:relative;top:2px;backgrou nd-
color:#FFFFFF;width:18px;height:18px;text-align:center}

Many thanks,

Ben

Feb 6 '07 #2

John Hosking

be*******@calibrand.com wrote:

Hi,

Hi, yourself. Before we get started, you should know that c.i.w.a.s has
a bit of a reputation for being rough on newbies, so there's a chance
some pushy S.O.B. will flame-broil your posts here. But you probably
know that already, since you've been lurking in the NG for some time and
have looked through older posts, like we're all supposed to do.
Fortunately for you, a lot of regulars killfile posts from Google
groups, so maybe you won't get noticed right away.

But I've noticed you. Here what I hope will be helpful words for you.

I see you made two posts, one "answering" the other. It's customary when
replying to include some bit of the previous post, to provide context
for your answer. Not everybody will see both posts. But it's also
customary to provide an URL, and not to post huge chucks of code. I
doubt anyone with any sence will both to look at your problem very long,
(even if you weren't a Googlegrouper). I'm guessing you could have
posted the code to http://www.calibrand.com/test.htm and provided us the
URL.

I'm using links for navigation on a test page, so each link will go to
a question in the test e.g. Question 1, Question 2 etc.

....meaning, I think, that your "test page" isn't really a test page, but
only a list of links to the questions. I would think that going from Q1
to Q2 to Q3 in order would be the preferred way.

For each link i am using an Outer Border, Middle border and Inner
border,

No, you're not. And besides there isn't any such thing in CSS or HTML.

each with their own color depending on the status of the
question (e.g. Read, Answered, Viewed etc.) so that the user can
distinguish

If any human being on Earth can actually distinguish anything based on
your "coloring", they should be considered to have passed the test. Any
test. I've studied your code and looked at the rendering in two
browsers, and I still can't figure out the "system".

between questions they've answered and one they haven't
answered.

I have styled them using css but the links text color for a question
number which has been answered or is currently being viewed go grey
(should be #0063A5) with a white drop shadow (as if the microsoft
DropShadow filter is being applied to it!)

I see that on numbers 3 and 4 in IE6. For others' reference, #0063A5 is
a kind of teal color.

All of the links should be #0063A5, the other links are coloured
correctly! If i view them in Firefox or Netscape they do style
correctly but in IE I keep getting the grey drop shadow text.

The spans that wrap the question numbers are also styled so they
appear as layers but I have taken the code out from a generated page
and the associated styles, now they dont seem to be styled correctly.
I am only concerned with the color of the link!!!!

Beyond what I have to say below, I am confused about what this last
paragraph means. Do you mean you gave us some code which you grabbed
from elsewhere (where it maybe worked) and now it doesn't work? Or you
gave us something different from the actual problem code?

Speaking of problem code, yours is a good representation. I can't tell
what you even want to do. Each number (link to a question page) is
marked up as a link (with an ID and a Class) using JavaScript, inside a
span (with an ID) inside an "inner" span (w/ class and ID), inside a
"middle" span (w/ class and ID) all inside an "outer" span (w/ a class).
All inside a div.

Then you style the IDs, the classes, and combinations of both. You seem
to be using background-colors of overlapping or partially hidden spans
to provide the "borders" you mentioned. Why not use actual borders?

You re-use the same ID multiple times, which is not allowed on a page.

Your CCS has a rule for .QAnswered, which is either mis-typed or just
not used in the HTML. Correct or remove.

You specify a.QRead:visited twice in a CSS rule, when you probably mean
a.QReadAnswered:visited for one of them.

The one time you use an actual border is for .MiddleQNotRead, where you
have border:#669788 solid 1; You have omitted the required units.

The word "disabled" is just floating in your markup.

You have, at best, a maintainability problem here. If *you* can't
understand your code, nobody else will be able to. (And I think you
*can't* understand it, because you're have these problems. I suspect the
relative positioning, but I can't tell.)

My advice:
- Start over. (Sorry; I think it's the best plan.)
- If you have to use JavaScript, make sure you tell the visitor in
advance that it's required.
- Devise another system (one which is at least partially accessible
might be good) to communicate answered/non-answered.
- Use simple, logical, semantic markup. Try explaining your markup to
somebody else. See how long it takes to finish. If they just give up
instead of understanding, revise your system.
- Eliminate the typos.
- Validate your code.
- Validate the CSS.
- If you still have problems, post a minimal test case to the Web and
then ask here with an URL. Somebody will be glad to help you. Even
somebody with some sense. ;-)

See my re-formatted version of your code at
http://mypage.bluewin.ch/jlh/Calibrand.htm

Good luck.
--
John

Feb 6 '07 #3

Jukka K. Korpela

Scripsit John Hosking:

c.i.w.a.s
has a bit of a reputation for being rough on newbies,

Mostly just to clueless newbies who keep misbehaving after they have been
notified. However we _are_ rough on people who "help" newbies by giving
wrong information without understanding even the basics of CSS.

But it's
also customary to provide an URL, and not to post huge chucks of
code.

Well, at least if you want to get help.

>I'm using links for navigation on a test page, so each link will go
to a question in the test e.g. Question 1, Question 2 etc.

...meaning, I think, that your "test page" isn't really a test page,
but only a list of links to the questions.

It's indeed rather sketchy and odd, with lots of <spanmarkup that probably
isn't needed and pointless and confusing absolute positioning, for something
that is little more than a sequence of digits as elements.

The first step should be simplification of the markup and construction of a
realistic though simple test case. There is little point in playing with
styling of individual _digits_. They are not very distinguishable from each
other by color, for example, and digits or numbers aren't mnemonic.

If any human being on Earth can actually distinguish anything based on
your "coloring", they should be considered to have passed the test.

I really must agree.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Feb 6 '07 #4

Rik

Jukka K. Korpela <jk******@cs.tut.fiwrote:

The first step should be simplification of the markup and construction
of a realistic though simple test case. There is little point in playing
with styling of individual _digits_. They are not very distinguishable
from each other by color, for example, and digits or numbers aren't
mnemonic.

Check:
http://www.positioniseverything.net/...s/mys-bug.html
--
Rik Wasmus

Feb 6 '07 #5

Similar topics

2401

shouldn't [un]visited link colors be a browser issue?

by: Dan Jacobson | last post by:

What's Nielsen talking about in http://www.useit.com/alertbox/20040503.html http://www.useit.com/alertbox/20040510.html Can't a good browser keep track of visited vs. unvisited link colors? Is my...

HTML / CSS

1857

Help with A:link

by: Shel | last post by:

http://www.phillybikeclub.org/bcp_cent.html Please excuse, I can't get the links at the text "register online" and "registration form" to be blue. I even commented out the a:visited. They...

HTML / CSS

1399

Strange IE bug... Help, please.

by: Dave Anderson | last post by:

I've done a bunch of googling and searched all the references I've got without finding anything that seems relevant to this issue; I'd appreciate any useful pointers or constructive comments. ...

HTML / CSS

2630

Showing link for current page

by: Rhino | last post by:

Yesterday, I reworked the index on my site - http://sfl.london.on.ca - so that they used list markup and I'm quite pleased with them. However, I'm having a problem with one small aspect of the menu...

HTML / CSS

2957

Two Questions on Link REL/REV and dead-end hyperlinks.

by: Viken Karaguesian | last post by:

Hello all, I'm making a calendar section in a website. Each month is its own page and navigated by Previous / Next links. I have it working now with standard hyperlinks, but I want to learn how...

HTML / CSS

1125

help with strange problem

by: H | last post by:

I'm having a strange problem with viewing a site. I downloaded it and am seeing that although I can view text on the page in my browser, I don't see any of it in Dreamweaver. Has anyone run into...

HTML / CSS

4193

How do you turn off all styling within a div

by: Momomo | last post by:

Hi, I am having a problem with a control which is caused by a style on the page which I am not able to trace. If I use the control in a page without any styling it looks ok. Is there a way to...

HTML / CSS

2822

Remove Image Link Styling

by: mcfly1204 | last post by:

I have an image link, an image within an anchor tag, that I would like to remove the styling of. When I say styling, I mean the default blue box around the image. I have tried: text-decoration:...

HTML / CSS

3129

Styling link underlines

by: JD | last post by:

I've seen websites where the link underline is a different colour to the link text. I've also seen links with dotted underlines (see the hover effect on the 'Change' and 'All Microsoft Sites' links...

HTML / CSS

7027

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

6899

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

7019

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

6719

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

6847

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

4757

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

4463

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

1288

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp

555

php

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP