By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,648 Members | 1,199 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,648 IT Pros & Developers. It's quick & easy.

Strange link styling in IE!

P: n/a
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
Share this Question
Share on Google+
4 Replies


P: n/a
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">

<span class="OuterQAnswered"><span class="MiddleQAnswered"
id='MiddleQNo1'><span class="InnerQAnswered" id='InnerQNo1'><span
id="Q1"><a href="TestPage.jsp" id='QNo1' tabIndex="8" onClick='return
redirectToQuestion(1)' class="QAnswered">1</a></span></span></span></
span>

<span class="OuterQRead"><span class="MiddleQRead"
id='MiddleQNo2'><span class="InnerQRead" id='InnerQNo2'><span
id="Q2"><a href="TestPage.jsp" id='QNo2' tabIndex="9" onClick='return
redirectToQuestion(2)' class="QRead">2</a></span></span></span></span>

<span class="OuterQReadAnswered"><span class="MiddleQReadAnswered"
id='MiddleQThis'><span class="InnerQReadAnswered"
id='InnerQThis'><span id="Q3"><a href="TestPage.jsp" id='QThis'
tabIndex="10" disabled onClick='return false;'
class="QReadAnswered">3</a></span></span></span></span>

<span class="OuterQRead"><span class="MiddleQRead"
id='MiddleQThis'><span class="InnerQRead" id='InnerQThis'><span
id="Q4"><a href="TestPage.jsp" id='QThis' tabIndex="11" disabled
onClick='return false;' class="QRead">4</a></span></span></span></
span>

<span class="OuterQNotRead"><span class="MiddleQNotRead"
id='MiddleQNo5'><span class="InnerQNotRead" id='InnerQNo5'><span
id="Q5"><a href="TestPage.jsp" id='QNo5' tabIndex="12"
onClick='return redirectToQuestion(5)' class="QNotRead">5</a></span></
span></span></span>

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

P: n/a
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

P: n/a
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

P: n/a
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

This discussion thread is closed

Replies have been disabled for this discussion.