Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • October 9, 2013 at 5:03 pm #173118
    Jennifer

    I created an absolute position for the Register Here image so it can reside at the top-right corner of the webpage. However, while it works in Chrome and Safari, the image does not seem to appear in Firefox and IE. Do you know why this might be?

    Website: http://www.encoure.com/private

    /* =Register Here Code ————————— */
    .avia_image img {
    position: absolute;
    z-index: 9999;
    top: -760px !important;
    }

    Here is how I want it to display as seen in Chrome:
    Encoure Website

    October 10, 2013 at 5:02 am #173399
    Ismael

    Hi placewrightdesign!

    Add the css changes on the anchor tag enclosing the image. Give it a unique css selector or use this:

    .avia_image.avia-builder-el-6.el_after_av_section.avia-builder-el-first.avia-align-right {
position: relative;
z-index: 9999;
top: -749px;
}

    Regards,
    Ismael

    October 10, 2013 at 7:11 pm #173751
    Jennifer

    Thanks for the new code, Ismael.

    1. Now I’m having trouble with the leftover white space from the “Register Here” image div, as seen below. How would I get rid of that?
    Encoure_Homepage

    2. I would actually like the “Register Here” image to appear on every Header/Menu. Is there a better way to do this than to add the element on every page?

    3. Lastly, can you explain how to give an element a unique CSS selector? I understand how to do so for “Color Sections” since there is a field to insert a custom ID attribute, but not sure how to do it for individual elements.

    Thanks for all the support. I’m learning a lot.

    October 11, 2013 at 4:05 am #173943
    Ismael

    Hello!

    1.) Refer to the number 2.

    2.) Edit header.php, find this code:

    <div id='header_main' class='container_wrap container_wrap_logo'>

    Below, add the image:

    <img class="avia_image register-banner" src="http://www.encoure.com/private/wp-content/uploads/2013/04/reg_button_small.png" alt="" title="">

    Add this on your custom.css or Quick CSS:

    #header_main {
z-index: 999;
}

.avia_image.register-banner {
position: absolute;
right: 10%;
top: -50px;
}

    3.) You can add a unique selector for each Avia Elements. Edit functions.php, find this code:

    if(isset($avia_config['use_child_theme_functions_only'])) return;

    Below, add this code:

    add_theme_support('avia_template_builder_custom_css');

    Edit any avia elements like Text Block then scroll below. Add a unique css selector on “Custom Css Class” field.

    Cheers!
    Ismael

    October 14, 2013 at 1:21 am #174899
    Jennifer

    Thanks! Issue resolved.

    • This reply was modified 11 years, 2 months ago by Jennifer.
  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Image positioned absolutely not displaying on Firefox and IE’ is closed to new replies.