Firefox 1.5 spoiling

@NEWTOONDec 05.2005

Hello,

I installed Firefox 1.5 and had the bad surprise to see that the~~[B]~~ “images growing” CSS effect [/B] (or trick) I installed on my website ~~[B]~~is not working properly with this browser anymore[/B] (~~[I]~~it was indeed working with the previous version[/I]). 😡

Actually, it is the frame thar is around that does not come back after mouse hovering.

A concerned page of my website : ~~[URL=http://www.imaginascience.com/accueil.php]~~http://www.imaginascience.com/accueil.php [/URL]

I use the following :

~~[B]~~1- For the FRAME : [/B]

[CODE] #flottantdroite0 { position: relative; float:right; display: block; margin: 2px 2px 2px 10px; padding: 2px 2px 2px 2px; width: auto; height: auto; border-right: 3px solid #336600; border-bottom: 3px solid #007e00; border-top: 3px solid #009933; border-left: 2px solid #00ff66; background:#b7e4a1 url(/baseimages/partiecentrale/degradephoto0.jpg) repeat-x top left; }

#flottantdroite0 p { position: relative; display:block; font-style:italic; font-size: 70%; margin: 0px 0px 0px 0px; padding: 0px; color: white; text-decoration:underline; text-align:center; } [/CODE]

~~[B]~~2- For the IMAGES : [/B]

[CODE] #zoom a { margin: 5px 5px 5px 5px; text-indent: -1000em; overflow: hidden; display: block; cursor: default; width: 100px; height:80px; background: url(atometraineeszoom.png) no-repeat top right; }

#zoom a:hover { width: 200px; height: 140px; background: url(atometraineeszoom.png) no-repeat top right; background-position: 0 -80px; cursor: default; } [/CODE]

~~[I]~~NOTE : it is a simplification of what I do. If you do not find there, may be the problem comes from all the particularities of my code. [/I]

I thank in advance whoever can help me on that matter.

to post a comment

CSS

14 Comments(s) _↴

@BrollachanDec 05.2005 — #There are some validation errors for the web page...

http://validator.w3.org/check?verbose=1&uri=http%3A//www.imaginascience.com/accueil.php

I think the validation also doesn't like...

 &lt;div id="crumbread"&gt;
 &lt;a href="accueil.php#haut" title=
 "Accueil"&gt;Accueil&lt;/a&gt;
 &lt;/div&gt;

...As the 'title=' and '"Accueil">' are split over two lines instead of just one.

@NEWTOONauthorDec 05.2005 — #Thanks for the tip ; I actually worked on that page recently and made some mistakes that prevents validating.

Yet, it has nothing to do with my concern. It is a CSS problem.

Thanks for helping me ! ?

The server is open again.

@FangDec 05.2005 — #The <p> element within #flottantdroite0 is expanding during the [I]hover[/I], which holds it's width after the [I]hover[/I].

Try:

#flottantdroite0 p { position: relative; 
 [COLOR=Green]display:inline; [/COLOR]
 .
 .

@NEWTOONauthorDec 05.2005 — #Fang,

You're the best !

I do not know why I did not test that. I am a bit rusted in CSS I guess.

@NEWTOONauthorDec 05.2005 — #Since you are very good in that matter and because you know the subject now, Fang, do you know a way for me to center the text (it does not want with text-align: center)

Thanks in advance !

PS : ideally, I would like it to stay in the center even when the image is big when hovering.

@FangDec 05.2005 — #Once it's [I]display:inline[/I] it won't center.

A partial solution, change:

 &lt;div id="zoom"&gt;
 &lt;a href="accueil.php#haut" title="Image : vue d'artiste du modèle planétaire pré-quantique ('saturnien') d'un atome "&gt;Image : vue d'artiste du modèle planétaire pré-quantique ("saturnien") d'un atome &lt;/a&gt; 
 &lt;/div&gt;&lt;!-- FIN  id "zoom" --&gt;

to (the div is not necessary anyway):

&lt;a id="zoom" href="accueil.php#haut" title="Image : vue d'artiste du modèle planétaire pré-quantique ('saturnien') d'un atome "&gt;Image : vue d'artiste du modèle planétaire pré-quantique ("saturnien") d'un atome &lt;/a&gt; 
 &lt;!-- FIN  id "zoom" --&gt;

change the css [I]#zoom a:hover[/I] and [I]#zoom a[/I] to [I]#zoom[/I] and [I]#zoom:hover[/I]

The css:

#zoom { 
 margin: 5px 5px 5px 5px; 
 text-indent: -1000em; 
 overflow: hidden; 
 display: block; 
 cursor: default; 
 width: 100px; 
 height:80px; 
 background: url(atometraineeszoom.png) no-repeat top right; 
 } 
 
 
 #zoom:hover+p {display:inline;}
 
 #zoom:hover { 
 width: 200px; 
 height: 140px; 
 background: url(atometraineeszoom.png) no-repeat top right; 
 background-position: 0 -80px; 
 cursor: default; 
 }

The adjacent selector prevents the <p> from expanding, but it won't be contered with [I]hover[/I]

@NEWTOONauthorDec 05.2005 — #I thank you for the quick reply.

I want to try the method but just before, there won't be a problem with IE if I change change the css #zoom a:hover and #zoom a to #zoom and #zoom:hover ?

(I read that IE only accepts a:hover)

@FangDec 05.2005 — #No problem, IE will understand it's an anchor.

@NEWTOONauthorDec 05.2005 — #I try in local but what makes the content of <p> center ?

I cannot achieve this.

@NEWTOONauthorDec 05.2005 — #I tried what is below and it works...on firefox, and Opera, [B]not IE[/B]

(I guess he doe not know "+p" ??)

[CODE]
 #zoom { 
 margin: 5px 5px 5px 5px; 
 text-indent: -1000em; 
 overflow: hidden; 
 display: block; 
 cursor: default; 
 width: 100px; 
 height:80px; 
 background: url(atometraineeszoom.png) no-repeat top right; 
 text-align:center;
 } 
 
 #zoom+p { 
 text-align:center;
 } 
 
 #zoom:hover+p {display:inline; text-align:center;}
 
 #zoom:hover { 
 width: 200px; 
 height: 140px; 
 background: url(atometraineeszoom.png) no-repeat top right; 
 background-position: 0 -80px; 
 cursor: default; 
 } 
 
 
 
 #flottantdroite0 { position: relative; 

 float:right;
 display: block; 
 margin: 2px 2px 2px 10px;
 padding: 2px 2px 2px 2px;
 width: auto;
 height: auto;
 border-right: 3px solid #336600;
 border-bottom: 3px solid #007e00;
 border-top: 3px solid #009933;
 border-left: 2px solid #00ff66;
 /*background-color:;*/
 background:#b7e4a1 url(/baseimages/partiecentrale/degradephoto0.jpg) repeat-x  top left; 
 text-align:center;
 }[/CODE]

@FangDec 05.2005 — #The problem is only visible in FF 1.5, IE should display as 'expected'

@NEWTOONauthorDec 05.2005 — #Yeah,

I just had removed flottandroite before and that was eventually necessary:

Now it works ! I am crying, sorry...

I can only say you are definitely my Master. You can sleep well tonight because you give a very strong hand to a poor lonesome website creator.

THANKS !

(I just have to revamp the whole pictures tor remove the divs but the site is not yet too big)

#flottantdroite0 p { position: relative;
color: white;

text-decoration:underline;

text-align:center;

font-size: 70%;

} [/QUOTE]

By the way, are you as stong in SEO as in CSS (no modesty please) ?

If positive, I will go tomorrow on the Search Engines thread and ask something about the fact that google only took one page of my shop (yet with GET variables) and not the others. I have an insight but is not sure.

Thanks again for caring.

What do you think, Fang ?

@FangDec 05.2005 — #SEO is about writing semantic, valid html

@NEWTOONauthorDec 06.2005 — #SEO is about writing semantic, valid html[/QUOTE]

I agree and I try to close as much as possible to that.

I know my site is in French but I did not only open a shop but add interesting content about Science that I write alone.

I try to make all pages validate strict (I have yet to better check when I add something but I lack time).

I have written a post on this forum for a specific problem with Google. Do you have something to tell about it ?

[URL=http://www.webdeveloper.com/forum/showthread.php?p=475114#post475114]http://www.webdeveloper.com/forum/showthread.php?p=475114#post475114[/URL]

Thanks in advance again.

?

Also in #CSS _↴

How to make all DIV elements use display:block problems with z-index in firefox CSS align

Success!

Help @NEWTOON spread the word by sharing this article on Twitter...

Tweet This

Firefox 1.5 spoiling

14 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Firefox 1.5 spoiling

14 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #CSS _↴