Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS I need help with Functional CSS Tabs

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #39953
    Nesha
    Member

    Hi guys I have a little problem with [CSS Tabs](https://css-tricks.com/functional-css-tabs-revisited/ “CSS Tabs”) on my web site.

    Tabs are well displayed in all browsers, but the problem occurs when you open a Web site on the iPad. Tabs can not be clicked to show related text in the divs under the tabs.

    Any help would be grateful, so i can solve this issue. Tnx

    #110573
    Nesha
    Member

    Thank you Jamy for your reply. I found solution [here](http://www.sunsean.com/idTabs/ “Itabs”).

    [Site](http://www.tasteofcyprus.net/menus.html “site”)

    tnx

    #110585
    GMB
    Participant

    It’s probably too late but are you aware of Chris’ own Organic Tabs? I think it’s a great solution and have used it a couple of times, most recently here.

    #110592
    Kitty Giraudel
    Participant

    To make your pure CSS tabs functional on iPad, add onclick="" to each label.
    Yes, an empty onclick attribute. See this for reference: http://codepen.io/ryanseddon/pen/AExbc.

    It’s a commun bug on iOS, but this little trick should fix it.

    The other CSS solution to fix it is to put radio inputs on top of labels, with the same size as labels and opacity 0. This way, you don’t click on labels, but directly on invisible inputs.

    Or you could use a JavaScript solution for an optimal cross-browsering.

    #110555
    Nesha
    Member

    Thank you guys, I was in a hurry to finish this menu. But next time for my new project i will use this great examples.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.