How to adapt a popup function to icon areas?

[Paulie_D]

To be honest, I don’t think chaining classes (as mentioned in your last post) is going to be of much help because…

I’m just not getting how to adapt anything to what I want to accomplish. I’m still too new at all of this to comprehend it all.

All you should have needed to do was remove:

ul.socialicons li a {
text-indent: -999em; <--remove this 
}

and add this

ul.socialicons li a:hover span {
font-size: 16px; <-- or some other number
}

unless there is something of which I am unaware.

[Anonymous]

Greetings Paulie_D,

I got it to work and applied it to the Skype icon to try it out. I think I did it correctly (it works on my side) but would appreciate you checking it out here. A couple of questions/issues. I notice that the text in the popup for the Skype icon is shifted to the left. I can compensate for this by increasing the left margin to 10px, but I don’t understand why it isn’t behaving as the flickr one does since they both have the same values.

Also, I’m running IE8 and see square corners in the popup instead of rounded ones. I understand that IE8 doesn’t support CSS rounded corners but was wondering if you have a way of checking it on newer IE releases. By the way, the text in the Skype icon is left shifted in IE8 as well.

I’m having trouble with the design aspect because what I see in Dreamweaver isn’t what it looks like in a browser. This adds to confusion while designing. Here is a screen grab of what I am seeing in DW.

Thank You and Best Regards.

[Anonymous]

Paulie_D,

I fixed the alignment problem by changing this

}
ul.contacticons { 
    font-size: 0;
    margin: 0 auto 25px;
}

To this

}
ul.contacticons { 
    font-size: 0;        
    margin: 0 auto 25px;
    float: left;
    text-align: center;

}

I still need answers to the IE8 and DW issues though.

Thank you.

[Author]

Posts