-
Posts
-
Hi, I have a problem with image alignement and hover to show pop-up image.
Look : http://momofr.free.fr/flux/bug_on_hover_firefox.jpg
The CSS for image are : size-medium wp-image-244 alignright.
Work correctly on Mac (10.6.8) with Safari and Chrome… not with Firefox 20.0 and Opera 12.15
Regards
Jean
Hi Jean,
Can we see the issue live? The screenshot is a bit small and I’m not completely clear on what is happening on hover so seeing it live should help.
Regards,
Devin
Devin,
This seems to be the same problem I am having still: https://kriesi.at/support/topic/hover-over-image-breaks-word-wrap
I thought it was fixed because I only tested it in Chrome. Then my thread was closed. It is still happening in FF just as the OP shows in his image.
I have more information on this. It doesn’t seem to be an issue if the lightbox/hover link arrow is turned off. The question is, how do you turn it off until a fix is rendered?
Hi,
Please try adding this class to any **linked images** where this is taking place. Make sure to add it to the <a and not to <img tag (see below). If there is already a class in your image just add it next to the class already there. Though I can’t see the issue myself.
class="noLightbox"or if class already there add noLightbox behind it, so your link would look like this.
<a class="noLightbox someOtherClass" href="some-url.com">You can see what I see in this screencast. Not much.
https://docs.google.com/file/d/0B8hqGBMSfHtKRFZzX2IxNHMxQ2s/edit?usp=sharing
Thanks,
Nick
Thanks for doing the screencast Nick. But the reason nothing moves now is because I inserted the images without links which essentially turns off the lightbox which is the problem in FF.
Hi,
There are links there. I saw them in the source.
However on this page now http://polettofit.com/about/ , i see the issue.
(non working answer removed. see below)
Thanks,
Nick
Thanks Nick. It works great when the image is aligned left. But wreaks havoc when the image is centered or aligned right: http://polettofit.com/contact/
Hi,
This was definately a rough one. I came up with the css that fixes Firefox , but it unfortunately breaks Chrome. So please do this.
Open up header.php and change line 13 that looks like
<html <?php language_attributes(); ?> class="<?php echo " html_$style ".$responsive." ".$headerS;?> ">to look like
<html <?php language_attributes(); ?> class="<?php echo avia_get_browser('class', true) ." html_$style ".$responsive." ".$headerS;?> ">Save that file, and now add the following CSS to Quick CSS or your /css/custom.css file
.firefox #top p a, .opera #top p a {
display:inline !important;
position:inherit !important;
}Please let us know if this one does the trick.
Thanks,
Nick
Thank Nick. It fixed it for FF, but Chrome then became angry. If you check out this page and scroll down to the centered images…
The top 2 images I left as centered image links. When you hover over them, they break the centering and left justify (like they did previously in FF).
The next 2 images I put the links in paragraphs with: <p style=”text-align: center;”> That at least centers them in Chrome, but as it was with the centered images in FF, if you hover over them, the image moves down several pixels.
Hey Nick,
Dude seems to be addressing the same problem here: https://kriesi.at/support/topic/images-and-text-jumps-when-moused-over
Should I try that fix?
Hi,
I don’t see anger from Google, but love and respect, even an award and stock options, company jet … nah its hate alright…
You should take out my code and use Dude’s . Though I don’t see any problems with centered images http://polettofit.com/2013/free-fitness-coaching in chrome.
Thanks,
Nick
Thanks Nick, in his post he said his fix isn’t for my issue.
In your link there is only 1 centered image and if I roll over it in Chrome, the content below jumps down a few pixels. For a better example, go here: http://polettofit.com/2013/what-is-a-beachbody-coach/
Scroll down and you will see 4 centered images, 1 paragraph after the other. Those are the images I was referencing 2 posts ago.
Hi,
Add this to the bottom of your CSS please
#top .size-medium.aligncenter {
margin: 0 auto;
text-align: center;
}
#top .image-overlay .image-overlay-inside {
height: 225px;
width: 300px;
}
.size-medium img {
margin-top: 0px !important;
margin-bottom: 5px !important;
}Thanks,
Nick
Thanks Nick. It almost seems to be there on both FF and Chrome. The only issue is the hover arrow is not centered for larger images. I assume that is the result of the .image-overlay designation.
Any chance this issue will be fixed without all of the hacks in the next version?
Hey,
You can probably fix the alignment using this
.size-full .image-overlay-inside {
left: 160px;
}Regards,
Ismael
Ismael, do you mean to add your code to what Nick has already specified or just use your code alone?
The line 13 change to the Header.php and subsequent ‘Firefox, Opera inline’ code worked great in Firefox, however, Safari still has issues. The linked images don’t move anymore, however, the text still jumps down a few pixels.
Can you offer a fix?
Hi johnball,
I checked jaypopsu’s link (http://polettofit.com/contact/) on safari but I don’t see the text moving a few pixels down.
Can you give us a link to the page with the issue?
Regards,
Ismael
Hello Ismael,
Sorry, different site: http://dure.ballmedia.com
Problem shows on the homepage in Safari. The 3 linked logos directly under the slider. When mousing over the first time, the text jumps down a few pixels. The left and right logos also move ever-so-slightly as well. Looks like the background image moves down slightly too. Works fine in Firefox.
Any solutions?
I just uploaded the most recent version and stripped out all of the css changes in this thread and the original issue seems to be fixed in both FF and Chrome.
Hi johnball,
Please download Enfold 1.5. Like jaypopsu said, it might fix the issue.
Regards,
Ismael
Upgraded to 1.5.1. Had to add the code to Header.php to fix the issue in Firefox, but background image, logos and text jump down in Safari and Chrome.
Please advise.
- The topic ‘Problem when hover on image alignement with Firefox and Opera Mac’ is closed to new replies.