Viewing 25 posts - 1 through 25 (of 25 total)
  • Author
    Posts
  • #22390

    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

    #115617

    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

    #115618

    Devin,

    This seems to be the same problem I am having still: http://www.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.

    #115619

    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?

    #115620

    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

    #115621

    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.

    #115622

    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

    #115623

    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/

    #115624

    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

    #115625

    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.

    #115626

    Hey Nick,

    Dude seems to be addressing the same problem here: http://www.kriesi.at/support/topic/images-and-text-jumps-when-moused-over

    Should I try that fix?

    #115627

    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

    #115628

    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.

    #115629

    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

    #115630

    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?

    #115631

    Hey,

    You can probably fix the alignment using this

    .size-full .image-overlay-inside {
    left: 160px;
    }

    Regards,

    Ismael

    #115632

    Ismael, do you mean to add your code to what Nick has already specified or just use your code alone?

    #115633

    Hi,

    Add the code.

    Regards,

    Ismael

    #115634

    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?

    #115635

    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

    #115636

    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?

    #115637

    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.

    #115638

    Hi johnball,

    Please download Enfold 1.5. Like jaypopsu said, it might fix the issue.

    Regards,

    Ismael

    #115639

    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.

    http://dure.ballmedia.com

    #115640

    Hi,

    Please send your login details to sighlence13[@]hotmail[dot]com.

    Include the word “Kriesi” on the subject. Add the link of this thread on your email.

    Regards,

    Ismael

Viewing 25 posts - 1 through 25 (of 25 total)

The topic ‘Problem when hover on image alignement with Firefox and Opera Mac’ is closed to new replies.