[EMAIL PROTECTED] wrote:
>Hi,
>
>I am desperate. I have a simple school site launching in a week and can't
>find a fix! I have this issue ONLY in Internet Explorer.
>
>I have a left nav bar that is floated to the left. Each link in the nav bar is
>a list item. Within the lists item, the <a> link has ah a different color for
>the hover mode. My issue is this: This nav bar renders correctly on Opera and
>FireFox, but not on IE 6.0. On IE, the left nav flickers whenever the
>pointer hovers, a very nasty, jarring effect. What could be wrong?
>
>Here my URL for the web page: http://www.elcarmelo.paloaltopta.org/
>(production site)
>OR
>http://cpotochny.com/PTA/ (development site)
>
>And the style sheet: http://cpotochny.com/PTA/PTA.css (on the developlment
>site)
>
>I am copy/pasting the styles that pertain to the lef nav below, if that's
>easier:
>#navigation {
> padding: 0px;
> margin-top: 40px;
> margin-right: 0px;
> margin-bottom: 0px;
> width: 175px;
> float: left;
> position: relative;
>}
>
>#navigation ul {
> margin: 0px;
> list-style-type: none;
> padding: 0px;
>}
>
>#navigation li {
> border-bottom-width: 2px;
> border-bottom-style: solid;
> border-bottom-color: #FFFFFF;
> margin: 0px;
> padding: 0px;
>}
>
>#navigation a:link {
> font-weight: bold;
> color: #FFFFFF;
> text-decoration: none;
> display: block;
> padding: 9px 5px 9px 0.5em;
> margin-right: 1px;
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 0.9em;
> background-image: url(images/gradientW175.gif);
> background-repeat: repeat-y;
> border-left-width: 5px;
> border-left-style: solid;
> border-left-color: #666666;
> width: 175px;
>}
>#navigation a:visited {
> font-weight: bold;
> color: #FFFFFF;
> text-decoration: none;
> display: block;
> padding: 9px 5px 9px 0.5em;
> margin-right: 1px;
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 0.9em;
> background-image: url(images/gradientW175.gif);
> border-left-width: 5px;
> border-left-style: solid;
> border-left-color: #666666;
> background-repeat: repeat-y;
> width: 175px;
>}
>#navigation a:hover {
> font-size: 0.9em;
> display: block;
> color: #FFFFFF;
> background-image: url(images/gradient_hoverW175.gif);
> width: 175px;
>}
>#navigation a:active {
> font-weight: bold;
> color: #FFFFFF;
> text-decoration: none;
> display: block;
> padding: 9px 5px 9px 0.5em;
> margin-right: 1px;
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 0.9em;
> background-image: url(images/gradientW175.gif);
> background-repeat: repeat-y;
> width: 175px;
>}
>
>Christine
>
>
Hi Christine,
First I checked the html: the html-validator
<http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.elcarmelo.paloaltopta.org%2F>.
* Some errors, never good for IE (and others).
After repairing, the flashing IE was still there ... but also I noticed
uncommon behavior in FF: refreshing the page did hide some images! After
some more analysis I noticed there is a difference in the links to the
two urls where the page is.
In your own site, the calling of images from outside is forbidden, but
with different effects for IE and FF. - It is the "vDeck" machine on
your site, which causes this.
Compare: this testpage
<http://home.tiscali.nl/developerscorner/css-discuss/test-dragon.htm>
in FF and IE, trying in both browsers to refresh (refresh-button) and to
reload (Go-button). In FF: after a short flash of the middle image:
nothing! And: clicking on the link to the image in your site: for FF the
door is closed, but not for IE.
So: ??? - Anyway, the "vDeck" must be the dragon! ;-)
Back to the question. In a test page, I pointed all images to the
paloaltopta-site, but this didn't help.
Conclusion: indeed, it is IE himself ...
IE is not fast enough to change between the normal state (gradient)
background of a list item, and the background-img for the hover-state.
Solution is to apply two simplifications:
* The normal state of all li's is the same, so the gradient-img can
be used as a background for the whole <ul>; the white
border-bottom of the li's will divide the li's optical. In this
way, the fall back image is already there, and there is no chaning
of the <li> backgrounds needed to come there again.
* For the hover state there is no need of a separate hover
background image: is has a solid color, so can be replaced by
changing only tyhe background-color of a hovered <li>.
Is it true?
Testpage!
<http://home.tiscali.nl/developerscorner/css-discuss/test-carmelo-new.htm>
:-)
Succes with the deadline,
francky
btw:
Also in the header are some simplifications possible: no need for
floating, some text-align rules can do it. Then it will go better when
the font size is enlarged by a visitor. (See source code in the test page.)
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
