/    Sign up×
Community /Pin to ProfileBookmark

CSS Issue with a link in dropdown window

Copy linkTweet thisAlerts:
Jun 30.2014

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”>[/code]

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”>[/code]

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

to post a comment
CSS

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@Kevin2Jun 30.2014 — "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/10481684/where-does-data-toggle-attribute-of-bootstrap-framework-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.

&lt;!--[if lt IE 9]&gt;
&lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
&lt;![endif]--&gt;

Without seeing the page and its code it's all guesswork right now.
×

Success!

Help @manishrathi spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.13,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,
)...