• mwrmwr

    (@mwrmwr)


    Right column, top. Four small images, each with a link. In Firefox (28.0), only the bottom part of these images provide links. In IE, the entire images work fine as links.

    http://ca-bankruptcylaw.com

    On the Mozilla forum (for Firefox), they showed me now to look at the page with the Page Inspector to find an interfering element, and sure enough there is a rectangular element starting at the top of the menu bar and extending down to about 2/3 of the way through those small social media icons. It seems to be created by this code in header.php – <?php wp_list_pages(‘title_li=’); ?>

    Somehow it generates a rectangular element that extends too far down. I see no reason it should extend down past the bottom of the menu bar.

    Ideas?

    Fixed in 3.8?

Viewing 4 replies - 1 through 4 (of 4 total)
  • David Sword

    (@davidsword)

    The social media icons?

    if so: <a> by default is an display:INLINE; element. It’s to be a word linked usually/originally. The weird unassigned height you’re seeing is because the <a> link is rendering as a line of text with the LINE-HEIGHT: x, the image within is just overflowing outside of the line-height, and thus partially not a link.

    this is happening in Firefox because all browsers handle things like this differently (the wonderful world of fragmentation).

    Assign the set of <a>‘s via css display: inline-block; with a height: and width: (height and width of images), or display: block;float:left:margin-right:5px this will clear it up..

    (
    if it is the social icons: put a id onto the <p> holding them so you can select the problem links with css like <p id='social_icons'>, then in style.css add:

    #sidebar #social_icons a {
     display:inline-block;
     width:30px;
     height:30px;
    }

    [note modify a third party wordpress with overwrite when/if the original author updates the theme]
    )

    Thread Starter mwrmwr

    (@mwrmwr)

    Thanks, davidsword. I tried that but that interfering rectangular element was still there and kept the icons from operating as links at all, because the icons wound up higher in the sidebar.

    I may not understand everything you wrote, but please take a look at what I see.

    – Go to http://ca-bankruptcylaw.com

    – Open the Page Inspector. There are various ways to do that. On my Windows PC I press Ctrl-Shift-C.

    – Hover the mouse on the icons (top right of the sidebar) and observe the dashed rectangle that starts at the top of the menu bar and extends down into the icons. The part of the icons that are within that rectangle do not operate as links. While doing that, look at the Inspector below. I see

      highlighted. That’s now out of my pay grade …

    Thread Starter mwrmwr

    (@mwrmwr)

    As an experiment, I removed the <?php wp_list_pages(‘title_li=’); ?> in header.php.

    – The menu bar contents disappeared (of course).

    – The interfering rectangular element also disappeared and the social media icons worked fine as links.

    Therefore it seems to be wp_list_pages that is generating that “too deep” rectangular element.

    Thread Starter mwrmwr

    (@mwrmwr)

    I moved the image icons lower so that rectangular element wouldn’t interfere with the links, but I’d still like to make that rectangular element a more appropriate size.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Only bottom of small-image link works (in Firefox)’ is closed to new replies.