15 replies [Last post]
mrdantownsend
Offline
newbie
east coast us
Last seen: 14 years 11 weeks ago
east coast us
Joined: 2006-11-04
Posts: 9
Points: 0

Hello, I have been having a problem with floating boxes in CSS and firefox

you see, I put a CSS tooltip feature that uses a floating block to show the data I want displayed, and it works very well in IE and Firefox on text, but I tried to use it on an image and this weird hing happened

when I set how far I want it from the top, in IE, it sets the distance from the top of the pic, but in FF< it sets the distance from the bottom of the pic

examples:

Firefox:

IE:

live example here: http://www.freewebs.com/mrdantownsend/photos.html

here's the CSS code I used for this:

/* pic Hover Box Starts Here */

a.pic               {position:relative;
                      z-index:24;
                      color:#669eff;
                      text-decoration:none;
                     }

a.pic:hover         {z-index:25;
                      color:#ffffff;
                      cursor:help;
                     }

a.pic span.pic     {display: none;
                     }

a.pic:hover span.pic {display:block;
                        position:absolute;
                        top:25px; 
                        left:10px; 
                        width:200px;
                        background-color:#29568f; 
                        color:#ffffff;
                        text-align:center;
                       }

thanks for any and all help

mrdantownsend
Offline
newbie
east coast us
Last seen: 14 years 11 weeks ago
east coast us
Joined: 2006-11-04
Posts: 9
Points: 0

it sets the distance from

it sets the distance from the bottom of the pic

examples:

Firefox:

IE:

live example here: http://www.freewebs.com/mrdantownsend/photos.html

here's the CSS code I used for this:

/* pic Hover Box Starts Here */

a.pic               {position:relative;
                      z-index:24;
                      color:#669eff;
                      text-decoration:none;
                     }

a.pic:hover         {z-index:25;
                      color:#ffffff;
                      cursor:help;
                     }

a.pic span.pic     {display: none;
                     }

a.pic:hover span.pic {display:block;
                        position:absolute;
                        top:25px; 
                        left:10px; 
                        width:200px;
                        background-color:#29568f; 
                        color:#ffffff;
                        text-align:center;
                       }

thanks for any and all help

mrdantownsend
Offline
newbie
east coast us
Last seen: 14 years 11 weeks ago
east coast us
Joined: 2006-11-04
Posts: 9
Points: 0

No one has any solutions for

No one has any solutions for this?

i'll do anything, I'll even use javascript if I have to!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 week 1 day ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Put up the page with

Put up the page with problems so we can see it, and provide a link. The link you gave in your first post has been loading on my Pc for a minute now with no results.

One thing I can say - 99.999% of the time if you think Ie is right and FF is wrong that's because IE is lying to you. Firefox is quite standards compliant and you should design your page using it as a page test, not IE, particularly if it is IE 6 and less.

But I can't say more without seeing your code, and that means giving us a link to the problem page that works.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

mrdantownsend
Offline
newbie
east coast us
Last seen: 14 years 11 weeks ago
east coast us
Joined: 2006-11-04
Posts: 9
Points: 0

sorry ed, but that link is

sorry ed, but that link is my actual website, and I do use ff standardly to test, so if you want to look at the source on my page, maybe you should refresh your browser or something

mrdantownsend
Offline
newbie
east coast us
Last seen: 14 years 11 weeks ago
east coast us
Joined: 2006-11-04
Posts: 9
Points: 0

oh yeah and to make the box

oh yeah and to make the box show, you have to hover over the first image, the one of the cinderblock

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Try making the a.pic

Try making the a.pic display:block float:left then FF has some dimension to fix the popup from , see how IE matches that position although it may need various help along the way such as display:inline and or width/height.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 week 1 day ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

> sorry ed, but that link is

> sorry ed, but that link is my actual website

Well this morning at least it is loading. You might want to consider using a more reliable web space provider.

The basic layout should be simple to do with CSS and semantic layout. Instead you seem to be using tables for layout and your code is not very semantic at all.

You have many many html errors on your page. CSS depends on valid html or xhtml to work. With all those errors it's amazing any browser can even come close to looking the way you want it.

You should be using a strict doctype, not a transitional one if this is a new page.

I tried to validate your CSS but the validator won't even try because of all your invalid xhtml.

I suggest you go back to the beginning and start with a clean slate. Your page as it is will be brittle and almost impossible to maintain.

Just my opinion, and I refer you to my tagline.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

mrdantownsend
Offline
newbie
east coast us
Last seen: 14 years 11 weeks ago
east coast us
Joined: 2006-11-04
Posts: 9
Points: 0

wow, thats one way to look

wow, thats one way to look at it I guess

I'll get to work on that then

mrdantownsend
Offline
newbie
east coast us
Last seen: 14 years 11 weeks ago
east coast us
Joined: 2006-11-04
Posts: 9
Points: 0

ok, so now my source is

ok, so now my source is accepted, but it cant find a character encoding, even though I did include one, so even thought its still OK, the problem is still there,

so ed, it still isnt working, so how could I solve this problem?

mrdantownsend
Offline
newbie
east coast us
Last seen: 14 years 11 weeks ago
east coast us
Joined: 2006-11-04
Posts: 9
Points: 0

UPDATE: IT WORkS!

some cool dude over at this forum gave me some advice that fixed the problem

thank you guys so much for your time and effort and for pretending to care Wink Smile

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 week 1 day ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

mrdantownsend wrote:ok, so

mrdantownsend wrote:
ok, so now my source is accepted, but it cant find a character encoding, even though I did include one, so even thought its still OK, the problem is still there,

so ed, it still isnt working, so how could I solve this problem?

Well, if your server isn't serving your file with a character encoding the traditional fix is with an appropriate tag. For example

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 week 1 day ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

mrdantownsend wrote:some

mrdantownsend wrote:
some cool dude over at this forum gave me some advice that fixed the problem

thank you guys so much for your time and effort and for pretending to care Wink Smile

If you persist in using multiple forums at once for the same question you'll probably find quite soon that everyone will stop answering you anyway. I'll leave it up to the forum admins to give you the lecture if they care to.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

mrdantownsend
Offline
newbie
east coast us
Last seen: 14 years 11 weeks ago
east coast us
Joined: 2006-11-04
Posts: 9
Points: 0

honestly, you're really no

honestly, you're really no help at all

Triumph (not verified)
Anonymous's picture
Guru

mrdantownsend

mrdantownsend wrote:
honestly, you're really no help at all

You should ask for a refund.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

How bloody typical of the

How bloody typical of the attitude that pervades forums nowadays,
incidentally if you look back at my earlier comment that you frigging well seemed to ignore, you might notice that it is the same advice as given on the other forum! hmm.

Do please explain why I wasted my time, I'm genuinely interested.

Posting the same question to multiple forums is considered bad netiqutte, it is wasteful of time and resources, you choose the most appropriate forum to post your question, then, if no satisfactory reply is received move on and try a second forum.

It's important to think of the communities involved and the fact that they are populated by people providing what skill and expertise that they may have for free, don't waste their time, which may be better served helping another if the solution has been arrived at (it looks as though you had a solution to the problem in advance of my post?)

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me