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
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
<a title="HOLIDAY IDEAS" class="dropdown-toggle" id="homeDropdown" href="/post-wow-en_GB/holiday-ideas/holiday-ideas.page" data-toggle="" data-hover="dropdown">
The text of this link is overlapping the image on left.
<a title="Explore all Holiday Types" class="dropdown-link" href="/post-wow-en_GB/holiday-ideas/explore-all-holiday-types.page">
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 ?
Last edited by manishrathi; 06-30-2014 at 10:51 AM.
"data-hover" and "data-toggle" are attributes used by JQuery or Bootstrap or some other JS framework that runs your dropdowns.
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.
Without seeing the page and its code it's all guesswork right now.
<!--[if lt IE 9]>
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)