Collapsible text

HTML & CSS
1

I found a site that offered code for collapsible text and it seemed to work wonders until I realized that it only works on IE9

Could you have a look to see if I did something wrong, or if there is a work-around, please?

The very messy page is here http://pintotours.net/AAA/VVV.html

Thanks

PS

I just tried another computer and it works there on Chrome. But on mine it does not work on Chrome FF, or Opera…

Strange!

2

Very strange

The expanding link works on all browsers in my daughter’s computer , but only on ie9 on mine…

What could be the matter?

I would appreciate feeback regarding whether the expanding button works

Thanks

3

The expand-collapse link is covered by the absolute positioned country container from the middle part below. The AP need to refer to image container I think you had in mind, give it position relative and check the country x/y positions again. Try:

#img-container {
    position: relative;
}
4

Hi thanks for replying

but the image-container is already position:relative. Do you mean the img-contaoner ing{ ?

However, you may not have read my PS above. I had a look in anothe computer and all works fim
ne. I just wanted to know if it does /or not in yours and if it does if you have any idea why it should only work in IE9 in mne (although that’s porbably nothing to fo with html/csds,)

Thanks

5

I’m seeing the same issue @Erik_J is reporting. Not only is the link not working, but the layout is messed up, too.

1267×664 185 KB

In both Firefox and Chromium on Ubuntu Gnome.

6

Hi technobear

Thanks

I’ve been messing about with the code and that was just a momentay hiccup. The page looks reasonable, except for various issues…

I’ll keep my hand off for a few mins

It is here and the footer is in the right place. http://pintotours.net/AAA/VVV.html

What I am concerned with now is whether the expand button works on all browsers and if so why not on my computer…

1128×737 124 KB

7

OK, the “Read more” link still doesn’t function on either browser. I’m not sure what’s going on, but I’m pretty certain Erik is right and it’s to do with the positioning of those links. Their position on the page shifts depending on the height of the viewport. For example, I have a couple of extra toolbars at the top of the window in Firefox, and that’s enough to make the display different to Chromium.
Firefox:

Chromium:

If I disable my toolbars in Firefox, the positions move:

and if I open Firebug at the bottom of the page, the links all move up and the “Read more” link becomes available. It’s the only way I can access the “Read More”.

1271×592 265 KB

8

Hi

Thanks

The position of the map links is a different issue. I’ve also been working on that with z.index (but with tables I cannot use position), as the expanding text should HIDE, not push down the map and links. I’m stuck there too… what’s new?

My immediate problem is the Read More button. Are you saying that with your set-up it also does not work on any browser?

It’s strange because it works on my daughter’s Mini laptop but on mine only on IE9

9

Now, that’s too much for my tired braain! What’s going on, then? is it the code in the head that’s not good enough?

A MOMENT LATER

I deleted the globe and links, the div middle and now everything seems to be good.

So what I need now id some help from my friends into getting middle to go in and be hidden by the expanding text.

Hope I’m not asking too much as I am getting lost here…

Thanks

10

Yes, that’s what I’m saying. I’ve tested on two browsers and neither works. (I don’t have IE handy to test just now.)

I’m pretty certain the issue is to do with the positioning of those place links, but you removed the map from the page while I was still testing. As well as the “Read More” link not functioning, it’s not possible to select any text in the top part of the page, which again says something is overlying it.

11

Hi TechoBear

My apologies to you and to Eric. I’ve changed the position absolute to relative in the img-container img{ of #middle and things are starting to look good.

i am surprised that you still can’t get the Read More to work, It worked in my daughter’s and probably because it was a smaller screen, like you said. Now it works on mine also ion all browsers.

My nest problem is to solve the unavailaibility of z-index, which was the method t I used before the tables came along…now with tables I don’t know how to cover the map as the text expnds

The map links, I will sort out later.

12

Read More works fine since you removed the map. (My post above was written before you edited yours, so there’s a bit of confusion there. )

13

Hooray!!!

Can you help or suggest how to get round the fact that I don’t seem to be able to use z-indexes to cover the map as the text expands?

Thanks

14

but the image-container is already position:relative. Do you mean the img-contaoner ing{ ?

Yes I ment the div with ID “img-container” holding the AP map with the AP countries. It is not position relative. The ancestor the AP map now refers to seems to be the root element. It lies on top of the collapsed text, so the “read more” link is out of reach.
A way for you to check whether it does is to temporarely give the AP “countries” div a background color.

The expanding and collapsing of text works in its self. Checked with Firefox ESR 31.6 Linux version.

Oops, was away from keyboard too long I see. Posting anyway… lol.

15

Thanks Eric. You were right. I changed the position to relative and that problem is gone.

Now, the next is to get the map covered and not pushed down when the text expands.

thanks

16

Please, ignore latest request.

I’ve decided to leave things as they are, for the time being anyway.

many thanks and apologies

17

Looks like you got it sorted now. You’re welcome back anytime. :slight_smile:

18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.