I know this question was asked before but suggested solutions are not working in my case.
I am using bootstrap and I am trying to change image url when link is active. Example:
HTML:
<a id="aClientInfo" href="#" class="list-group-item active text-center">
<img class="img-responsive imgClientInfo" src="../Images/Reports/Claims-Info-
Blue-New.png" />
<br />
Client Info
</a>
CSS:
#aClientInfo.active > .imgClientInfo
{
content:url("../Images/Reports/Claims-Info-Purple-New.png");
}
This solution is working perfectly on chrome browsers. But whenever I run it on IE or FireFox, the image won't change ... I have tried to implement before and after but then it won't work neither on chrome... I really can't understand how before and after can work here with active class... Any suggestions? I need a solution that could work also on safari as it is a responsive website. Thanks
Related
i am getting this
and i want output like
code here:
<div class="row col-sm-12 cms-img-fix cms-pdT25">
<a class="cms-pdB50" href="https://www.radise.com/" target="_blank">
<img class="img-fluid" src="/images/base-images/RADISE_logo#2x.png">
</a>
<a class="cms-pdB50" href="https://www.testpile.com" target="_blank">
<img class="img-fluid" src="/images/base-images/AFT_0001_LOGO_HOR_WEB.png">
</a>
<a class="cms-pdB50" href="http://smart-structures.com/" target="_self">
<img class="img-fluid" src="/images/base-images/Group 16.png">
</a>
</div>
i am getting designing issue in internet explorer 11 but in chrome designing it's perfect.
in Companies div i am getting problem in third image
please open below link
https://smart-structures-dev.azurewebsites.net/
in chrome and internet explorer 11 and then check Companies images you observe difrences in below image
<img class="img-fluid" src="/images/base-images/AFT_0001_LOGO_HOR_WEB.png">
can anyone help me for this problem
I tried to check your site with IE 11 browser. I check the source code and CSS.
I found that you are using flex. CSS flex has some issues with IE browser. It is not able to calculate the height and width properly in many scenarios.
I noticed that in your CSS code you are using max-height and max-width for that 2 images.
If you replace the max-width with width and replace the max-height with height the issue can be solved.
width: 100%;
height:100%;
Result in IE 11 after making above changes:
I haven't tested this on all versions of IE but I have a problem that when I go to this site: http://www.yourwhiteknight.com/manufactured/ and click on one of the image links in the navigation menu (Home, Manufacted Homes, or Real Estate) it just opens the image of the button in the same window. It doesn't do this in Chrome or Firefox (it goes to the link as it should). Has anyone seen this before or does anyone know a solution?
Here is the HTML:
<div class="textwidget">
<a href="http://yourwhiteknight.com/">
<img src="http://yourwhiteknight.com/wp-content/uploads/2012/10/home.button.png" class="icon">
</a>
<a href="http://yourwhiteknight.com/manufactured/">
<img width="233" height="38" src="http://yourwhiteknight.com/wp-content/uploads/2012/11/m.homes-tab.png" class="homes">
</a>
<a href="http://realestate.yourwhiteknight.com">
<img src="http://yourwhiteknight.com/wp-content/uploads/2012/11/real-estate-tab.png" class="real">
</a>
</div>
Thanks in advance for your help!
UPDATE:
I did just notice that when I inspect the element in IE it shows the code for an image as this:
<img width="233" height="38" class="homes" src="http://yourwhiteknight.com/wp-content/uploads/2012/11/m.homes-tab.png"></img>
I tried to add a slash at the end of the image code to no avail ()
Funny thing is that if you go to our other site that is a mirror of this one the buttons work: http://realestate.yourwhiteknight.com/ even though the code on the back end is the exact same.
Add target="_self" to the links and it works as a workaround. There is probably some JavaScript (maybe Google Analytics) interfering with the page.
This was being caused by a plugin called: Google Analytics Suite. I just deactivated it and it started working. Thanks everyone for pointing me in the right direction!
All day long I am trying to find the source of the following problem.
I am using this HTML:
<div class="sharebox">
<a class="shlink tooltipS" title="trumpa nuoroda į šį puslapį" href="http://www.klaustukai.lt/5"></a>
<a class="shprint tooltipS" title="spausdinti" href="javascript:window.print();"></a>
<a class="shfb tooltipS" title="dalintis Facebook" href="https://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.klaustukai.lt"></a>
<a class="shgp tooltipS" title="dalintis Google+" href="https://plus.google.com/share?url=http%3A%2F%2Fwww.klaustukai.lt"></a>
<a class="shtw tooltipS" title="dalintis Twitter" href="https://www.twitter.com/share?url=http%3A%2F%2Fwww.klaustukai.lt"></a>
</div>
with this CSS:
.shlink, .shprint, .shfb, .shgp, .shtw {
position:absolute;
display:inline-block;
background:url(http://www.klaustukai.lt/qa-theme/kt/elements.png) no-repeat 0 0;
border:0;
height:16px;
width:16px;
}
.shlink {background-position:-2px -250px;left:4px;top:5px;}
.shprint {background-position:-22px -250px;left:27px;top:5px;}
.shfb {background-position:-40px -250px;left:50px;top:5px;}
.shgp {background-position:-58px -250px;left:73px;top:5px;}
.shtw {background-position:-76px -250px;left:96px;top:5px;}
.shlinktxt {display:block;width:115px;margin-top:30px;}
.shlinktxt input {font-size:10px;color:#555;width:100%;}
where elements.png holds the graphics for the background. Nothing special, nothing fancy. And works for years in all browsers.
The weird thing: When I do a test in a separate test.html it works fine, even in Firefox 27.0.1. But having the exact same code in this forum: klaustukai.lt will not show the google plus button class .shgp.
This happenend after the last update of Firefox to version 27.0.1. Before it worked! This is why I think it might be a Firefox bug. In Chrome and Internet Explorer displaying the button works as expected:
Firefox 27.0.1
What I see from the Firefox developer tool Box Model is that the .shgp element has height:0 and width:0 - it also seems to have lost position, the indicator shows it now top left on the website.
I also tried to reposition the sharebox, I disabled javascript, same problem, it is always the .shgp anchor that fails.
When testing, I realized that if I save the HTML page locally and load it again in the browser, the button is displayed correctly. Even more confusing.
This is such a weird issue for me. Who knows what is causing this behaviour? And how can the .shgp anchor be displayed correctly?
Your help is very much appreciated.
Found the source of the problem!
The culprit has been the Addon Adblock Plus that is blocking the google plus anchor!
If you disable the addon the button appears.
Cannot believe... but now everything gets more clear. I installed Adblock Plus on Chrome and the button disappeared as well. Good to know that it is not a Firefox bug.
Good evening everyone, I have a serious issue with SWIPEBOX galleries and Google chrome mobile.
Now please let me state that I am a total beginner in jquery and javascript and don't know what I am doing.
I am trying to create 5 separate galleries on the same page. I followed the vague steps on the swipebox website and gave each class its own unique name
class="swipebox1", class="swipebox2", class="swipebox3" (kept it simple).
eg.
<div class="box">
<a href="example/assets/full/leap.jpg" class="swipebox1" title="Leap">
<img src="example/assets/leap_thumb.jpg" alt="leap"></a>
</div>
<div class="box">
<a href="example/assets/full/leap.jpg" class="swipebox2" title="Leap">
<img src="example/assets/leap_thumb.jpg" alt="leap"></a>
</div>
The problem is that Google Chrome mobile only allows touch/tap on the buttons (close, next, previous) in the first gallery.. The second and third galleries, you can only swipe (none of the buttons work)... So you cant close... :(
I have tested this on all other browsers and it works fine (webkit mobile, dolphin mobile, safari pc, safari mac, IE10 pc, Opera pc, Nightly pc)... I have not made any changes to the swipebox css or js files... (wouldn't know what to change anyway)
Also, my script is:
<script type="text/javascript">
jQuery(function($) {
$(".swipebox1").swipebox();
$(".swipebox2").swipebox();
$(".swipebox3").swipebox();
});
</script>
I hope this is right!!!
I also tried:
<script type="text/javascript">
jQuery(function($) {
$(".swipebox1, .swipebox2, .swipebox3").swipebox();
});
</script>
but that just added them together, which I didn't want...
I really need someone's help on this as I am almost finished with my responsive website and this is the only thing holding me back...
thanks in advance for any help you can provide.
Try to leave class as "swipebox", I mean like this:
class="swipebox"
everywhere for each of your 3 galleries.
To run Swipebox use "rel" attribute like this:
<div class="box">
<a rel="gallery-1" href="example/assets/full/leap.jpg" class="swipebox" title="Leap">
<img src="example/assets/leap_thumb.jpg" alt="leap"></a>
</div>
<div class="box">
<a rel="gallery-2" href="example/assets/full/leap.jpg" class="swipebox" title="Leap">
<img src="example/assets/leap_thumb.jpg" alt="leap"></a>
</div>
Let us know if that works!
I have a problem with this code:
<div class="box_c rounded">
<a class="box_int rounded" href="http://www.google.com">
<div class="careers">
<span class="ico_boton">
<img src="img/spacer.gif" width="28" alt="Spacer"/>
</span>
<h5>Text</h5>
<p>Text</p>
</div>
</a>
</div>
In IE9, Firefox and Chrome all the area is clickable, but in IE8 the img area appears as clickable and the url appears too, but the hyperlink don't do nothing. What Can I do? I tried with z-index but it don't do nothing.
Thanks for your help.
Have you tried validating your code in IE8's Developer Tools? If you're unfamiliar with the process, have a look at this quick tutorial on how to do it.
Also, are you using z-index in your CSS code by any chance? If so, have a look at this other question on StackOverflow and also this detailed article regarding this issue - they both refer to IE8 having a bug when handling z-index.