Re: [css-d] Pure CSS popup

[Christine Ce]

Sorry guys, resending this, I hit the send button by accident before I had
finished.

On 6/20/06, Christine Ce <[EMAIL PROTECTED]> wrote:
>
> On 5/21/06, Christine Ce <[EMAIL PROTECTED]> wrote:
>
> I have this page that needs to look exactly like that:
> http://www.wuongean.com/
> I want the span in div#kanji to be displayed when hovering over  the image
> kanji_small.jpg, and I am trying to achieve this with a  pure css popup.
>
>
> On 5/23/06, Christine Ce <[EMAIL PROTECTED]> wrote:
>
> Well I have had a go at this again and got my popup to work in Firefox
> 
> But it's not working in IE!  So my next question is:  is it possible to
> make it work in IE?  If yes, how?
>
>
> Hello again list!
>
> I thought I'd let you know, in case it's useful to someone,  that I have
> managed to make my popup work in both Firefox and IE6 win without a script.,
> see here:
>
>
> http://www.wuongean.com/beta/
>
>
> It should also work in IE Mac, and I would be really grateful if someone
> could check whether that is the case.
>
> It probably does not in IE5 win, but if  someone could check anyhow that
> would be just grand.
>
> The trick to make it work in IE6 is to have either the background color or
> the font color change between the a:link and the a:hover state.  For IE Mac
> I used a hack, the inline high pass filter (
> http://www.tantek.com/CSS/Examples/inlinehpf.html).
>
> Here is the html:
>

 



some text
   more text
   yet more text
   




and here is the layout css:

#kanji a {
display: inline;
text-decoration: none;
border: none;
background-color: #fff;
}

#kanji a:hover {
display: inline;
text-decoration: none;
border: none;
background-color: transparent;
}

#kanji a span {
display: none;
visibility: hidden;
background-color: transparent;
width: 130px;

}

#kanji a:hover span {
visibility: visible !important;
}

/* for IE5Mac it is important to have position and size
declaration in #kanji a span#popup rather than in #popup
a:hover span#popup but for IE5 it's the opposite so use
hack to make sure IE5win does not see next rule */

i{content:"\"/*"}/**/

#kanji a span {
z-index: 1;
display: block;
position: absolute;
top: 0;
right: 0;
background-color: #fff;
}

All this is based on an article on http://www.tjkdesign.com/

Please let me know if there are any problems with this method.

Thanks in advance for any advice/help/comments.

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

Re: [css-d] Pure CSS popup

[Christine Ce]

On 5/21/06, Christine Ce <[EMAIL PROTECTED]> wrote:

I have this page that needs to look exactly like that:
http://www.wuongean.com/
I want the span in div#kanji to be displayed when hovering over  the image
kanji_small.jpg, and I am trying to achieve this with a  pure css popup.


On 5/23/06, Christine Ce <[EMAIL PROTECTED]> wrote:

Well I have had a go at this again and got my popup to work in Firefox

But it's not working in IE!  So my next question is:  is it possible to make
it work in IE?  If yes, how?


Hello again list!

I thought I'd let you know, in case it's useful to someone,  that I have
managed to make my popup work in both Firefox and IE6 win without a script.,
see here:

http://www.wuongean.com/beta/


It should also work in IE Mac, and I would be really grateful if someone
could check whether that is the case.

It probably does not in IE5 win, but never mind...

The trick to make it work in IE6 is to have either the background color or
the font color change between the a:link and the a:hover state.  For IE Mac
I used a hack.

Here is the html:



  
  wuon gean ho
  artist-printmaker
  18 sandford avenue
  london n22 5eh
  tel +44 7711 391 544
  [EMAIL PROTECTED]

   

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

Re: [css-d] Pure CSS popup

[Christine Ce]

On 5/23/06, Ian Young <[EMAIL PROTECTED]> wrote:
>
>
>
> Links still wrong.


aargh... Ok will post the CSS here then.  So that's the CSS for the popup:

#kanji a, kanji a:link, kanji a:visited {
display: inline;
text-decoration: none;
border: none;
background-color: white;
}

#kanji a:hover, kanji a:active {
display: inline;
text-decoration: none;
border: none;
}

#kanji a span {
display: none;
}

#kanji a:hover span {
display:block;
position: absolute;
top: 0;
right: 0;

}

However, I guess you haven't included the script that enables IE to use the
> drop down.
> See http://www.mywebstuff.com/02_css/css_07.html and look at
> alistapart.com
> etc for great examples.


Ah no you're right, I haven't included a script.  Thanks for that, I guess
that's what I need!

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

Re: [css-d] Pure CSS popup

[Ian Young]

> Hello again list,
>
> >
> And I realise I gave the wrong link for the css *again*, they are in fact
> here:
> http://wuongean.com/popup/wr_typo.css
> http://wuongean.com/popup/wr_layout.css
>
>Christine

Links still wrong.
However, I guess you haven't included the script that enables IE to use the
drop down.
See http://www.mywebstuff.com/02_css/css_07.html and look at alistapart.com
etc for great examples.

Ian
--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.392 / Virus Database: 268.6.1/344 - Release Date: 19/05/2006

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

Re: [css-d] Pure CSS popup

[Christine Ce]

Hello again list,

Well I have had a go at this again and got my popup to work in Firefox, see
here: http://wuongean.com/popup/index2.htm. But it's not working in IE!

So my next question is:  is it possible to make it work in IE?  If yes, how?

And I realise I gave the wrong link for the css *again*, they are in fact
here:
http://wuongean.com/popup/wr_typo.css
http://wuongean.com/popup/wr_layout.css

Sorry about that!

Thanks in advance for your replies.

Christine


On 5/21/06, Christine Ce <[EMAIL PROTECTED]> wrote:
>
> Sorry wrong links it seems!
>
> So, what I want is here: http://www.wuongean.com and the css is here: 
> http://www.wuongean.com/wr_typo.css
> and http://www.wuongean.com/wr_layout.css
>
> What I've managed to do so far is here: 
> http://www.wuongean.com/popup/index2.htm
> and the css is here: http://www.wuongean.com/popup/wr_typo.css and 
> http://www.wuongean.com/popup/wr_layout.css
> .
>
> Sorry about that!
>
> Christine
>
>
> On 5/21/06, Christine Ce <[EMAIL PROTECTED]> wrote:
> >
> > Hello all,
> >
> > I have this page that needs to look exactly like that:
> > http://www.wuongean.com/
> > The CSS for this is here: http://www.wuongean.com/wg_layout.css and
> > http://www.wuongean.com/wg_typo.css
> >
> > I want the span in div#kanji to be displayed when hovering over the
> > image kanji_small.jpg, and I am trying to achieve this with a pure css
> > popup.
> >
> > So far I've got to this: 
> > http://www.wuongean.com/beta/popup/index2.htmwith 
> > the css for this here: http://www.wuongean.com/beta/popup/wg_layout.css
> > and 
> > http://www.wuongean.com/beta/popup
> >
> > Can I absolutely position the span? I'd like it to either cover the
> > kanji_small image, or to appear on top of the main content.  I don't want a
> > horizontal scroll bar.
> >
> > I've been looking at this for too long now and am stuck, I need a rest
> > :-)
> >
> > Any ideas or suggestions welcome!
> >
> > Thanks in advance
> >
> > Christine
> >
> >
> >
>
__
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/

Re: [css-d] Pure CSS popup

[Christine Ce]

Sorry wrong links it seems!

So, what I want is here: http://www.wuongean.com and the css is here:
http://www.wuongean.com/wr_typo.css and
http://www.wuongean.com/wr_layout.css 

What I've managed to do so far is here:
http://www.wuongean.com/popup/index2.htm and the css is here:
http://www.wuongean.com/popup/wr_typo.css and h
ttp://www.wuongean.com/popup/wr_layout.css.

Sorry about that!

Christine

On 5/21/06, Christine Ce <[EMAIL PROTECTED]> wrote:
>
> Hello all,
>
> I have this page that needs to look exactly like that:
> http://www.wuongean.com/
> The CSS for this is here: http://www.wuongean.com/wg_layout.css and
> http://www.wuongean.com/wg_typo.css
>
> I want the span in div#kanji to be displayed when hovering over the image
> kanji_small.jpg, and I am trying to achieve this with a pure css popup.
>
> So far I've got to this: 
> http://www.wuongean.com/beta/popup/index2.htmwith 
> the css for this here: http://www.wuongean.com/beta/popup/wg_layout.css
> and 
> http://www.wuongean.com/beta/popup
>
> Can I absolutely position the span? I'd like it to either cover the
> kanji_small image, or to appear on top of the main content.  I don't want a
> horizontal scroll bar.
>
> I've been looking at this for too long now and am stuck, I need a rest
> :-)
>
> Any ideas or suggestions welcome!
>
> Thanks in advance
>
> Christine
>
>
>
__
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/

[css-d] Pure CSS popup

[Christine Ce]

Hello all,

I have this page that needs to look exactly like that:
http://www.wuongean.com/
The CSS for this is here: http://www.wuongean.com/wg_layout.css and
http://www.wuongean.com/wg_typo.css

I want the span in div#kanji to be displayed when hovering over the image
kanji_small.jpg, and I am trying to achieve this with a pure css popup.

So far I've got to this:
http://www.wuongean.com/beta/popup/index2.htmwith
the css for this here:
http://www.wuongean.com/beta/popup/wg_layout.css and
http://www.wuongean.com/beta/popup

Can I absolutely position the span? I'd like it to either cover the
kanji_small image, or to appear on top of the main content.  I don't want a
horizontal scroll bar.

I've been looking at this for too long now and am stuck, I need a rest :-)

Any ideas or suggestions welcome!

Thanks in advance

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