www.webdeveloper.com
Results 1 to 2 of 2

Thread: CSS Issue with a link in dropdown window

  1. #1
    Join Date
    Jun 2009
    Posts
    97

    CSS Issue with a link in dropdown window

    We have a header in tha page ansin that header, we have 4 options. When a user hovers mouse on any of options, a window pops up with links for that option
    Below is the HTML code for one of header links
    Code:
    <a title="HOLIDAY IDEAS" class="dropdown-toggle" id="homeDropdown" href="/post-wow-en_GB/holiday-ideas/holiday-ideas.page" data-toggle="" data-hover="dropdown">
    When a user hovers on this link, a drop down window appars with an image on left and links on right. user can select any of these links. One of the links is as follows
    Code:
    <a title="Explore all Holiday Types" class="dropdown-link" href="/post-wow-en_GB/holiday-ideas/explore-all-holiday-types.page">
    The text of this link is overlapping the image on left.
    This hapens for IE8. FireFos and Chrome, text appears fine and clear of image.
    Secondly, this happens for index page only. If, I click on the link and go to linked page, linked page also has header. When I hover over options of this header and check titles of drop down windows, here text does not overlap image.
    What kind of attribute is "data-hover" ? I have seen "hover" attribute, but not data-hover.
    How to debug this issue ?


    Thanks
    Last edited by manishrathi; 06-30-2014 at 10:51 AM.

  2. #2
    Join Date
    Oct 2013
    Posts
    486
    "data-hover" and "data-toggle" are attributes used by JQuery or Bootstrap or some other JS framework that runs your dropdowns.

    See: http://stackoverflow.com/questions/1...work-come-from

    It's possible that on your first page the script is getting run before the DOM is completely built. A possible solution is to put the script right before your closing </body> tag.

    It's also possible that adding the following between <head> and </head> will help IE8 deal with your page.

    Code:
    <!--[if lt IE 9]>
    	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    Without seeing the page and its code it's all guesswork right now.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles