Payment Option Tabs

0
I am having a little problem....When my clients click the pay now. On the right side where the payment options are, the tabs are there but no text or logo, just blank tabs.

http://primearthouse.com/client-menu/login
USER: DEMO
PASSWORD: DEMOUSER

Here is the current CSS:

/* tabs */
dl.tabs {
float: left;
margin: 10px 0 -1px 0;
z-index: 50;
}

dl.tabs dt {
float: left;
padding: 4px 10px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
margin-left: 3px;
background: #f0f0f0;
color: #666;
}

dl.tabs dt.open {
background: #F9F9F9;
border-bottom: 1px solid #F9F9F9;
z-index: 100;
color: #000;
}

div.current {
clear: both;
border: 1px solid #ccc;
padding: 10px 10px;
}

div.current dd {
padding: 0;
margin: 0;
}


.table tbody tr.success td {
background-color: #dff0d8 !important;
}
.table tbody tr.success:hover td, .table tbody tr.success.paymenthover td {
background-color: #d0e9c6 !important;
}

.table tbody tr.warning td {
background-color: #fcf8e3 !important;
}
.table tbody tr.warning:hover td, .table tbody tr.warning.paymenthover td {
background-color: #faf2cc !important;
}

.table tbody tr.error td {
background-color: #f2dede !important;
}
.table tbody tr.error:hover td, .table tbody tr.error.paymenthover td {
background-color: #ebcccc !important;
}

.table_scrolls{
overflow-x: scroll;
overflow-y: hidden;
}

.items_table_responsive{
width:100%;
}


Responses (17)
  • Accepted Answer

    Tuesday, October 13 2015, 12:04 PM - #Permalink
    1
    there's some CSS messing up the layout.

    can you try setting:

    fieldset dt {

    float: left !important;
    display: inline !important;

    }
    The reply is currently minimized Show
  • Accepted Answer

    Wednesday, October 14 2015, 01:55 AM - #Permalink
    0
    Thanks for a quick response. Do I need to add that section or modify it in the current css?
    I added it to the "dl.tabs" and "dl.tabs dt". I didn't see a "fieldset dt". Thanks for all of the help!


    /* tabs */
    dl.tabs {
    float: left !important;
    display: inline !important;
    margin: 2px 0 -1px 0;
    z-index: 50;
    }

    dl.tabs dt {
    float: left !important;
    dispaly: inline !important
    padding: 4px 10px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    margin-left: 3px;
    background: #f0f0f0;
    color: #666;
    }

    dl.tabs dt.open {
    background: #F9F9F9;
    border-bottom: 1px solid #F9F9F9;
    z-index: 100;
    color: #000;
    }

    div.current {
    clear: both;
    border: 1px solid #ccc;
    padding: 10px 10px;
    }

    div.current dd {
    padding: 0;
    margin: 0;
    }


    .table tbody tr.success td {
    background-color: #dff0d8 !important;
    }
    .table tbody tr.success:hover td, .table tbody tr.success.paymenthover td {
    background-color: #d0e9c6 !important;
    }

    .table tbody tr.warning td {
    background-color: #fcf8e3 !important;
    }
    .table tbody tr.warning:hover td, .table tbody tr.warning.paymenthover td {
    background-color: #faf2cc !important;
    }

    .table tbody tr.error td {
    background-color: #f2dede !important;
    }
    .table tbody tr.error:hover td, .table tbody tr.error.paymenthover td {
    background-color: #ebcccc !important;
    }

    .table_scrolls{
    overflow-x: scroll;
    overflow-y: hidden;
    }

    .items_table_responsive{
    width:100%;
    }
    The reply is currently minimized Show
  • Accepted Answer

    Wednesday, October 14 2015, 12:01 PM - #Permalink
    0
    you can just add the code I wrote, that should be enough. you can directly paste it into the file.
    The reply is currently minimized Show
  • Accepted Answer

    Wednesday, October 14 2015, 03:32 PM - #Permalink
    0
    Ok, when I added the code to the "dl.tabs" and "dl.tabs dt" it now shows the titles of each tab, bearly.

    When I just add the code you sent, nothing really chages that I can see.
    Thank You so much for all of your help!
    Attachments:
    The reply is currently minimized Show
  • Accepted Answer

    Saturday, October 17 2015, 12:46 PM - #Permalink
    0
    looks like we're missing something... if you want please send me FTP access at support@ joomlathat.com and I'll try it myself..
    The reply is currently minimized Show
  • Accepted Answer

    Tuesday, October 20 2015, 02:42 PM - #Permalink
    0
    Email sent. Coming from josh@ primearthouse.com

    Thanks again!
    The reply is currently minimized Show
  • Accepted Answer

    Thursday, October 22 2015, 10:01 PM - #Permalink
    0
    Just wanted to check and see if you received my email? THanks!
    The reply is currently minimized Show
  • Accepted Answer

    Friday, October 23 2015, 12:06 PM - #Permalink
    0
    oh, sorry, I see it now. will check it.
    The reply is currently minimized Show
  • Accepted Answer

    JILK
    JILK
    Offline
    Wednesday, October 18 2017, 05:12 AM - #Permalink
    0
    Hi there,

    Was there a resolution to this? I'm having a similar issue with the text of the payment option buttons not showing.

    Thanks.
    Attachments:
    The reply is currently minimized Show
  • Accepted Answer

    Wednesday, October 18 2017, 01:21 PM - #Permalink
    0
    did you try adding the CSS code above?

    can you send me a link?
    The reply is currently minimized Show
  • Accepted Answer

    JILK
    JILK
    Offline
    Wednesday, October 18 2017, 01:25 PM - #Permalink
    0
    Hi Germinal, have sent you a link in a PM.

    I tried adding the above code but it made no difference. It used to work find but no longer does. Not sure why.
    The reply is currently minimized Show
  • Accepted Answer

    JILK
    JILK
    Offline
    Tuesday, October 24 2017, 03:18 AM - #Permalink
    0
    Solved - the issue was to do with the headings in the invoice manager payment buttons using the H3 tag from the site template which in my case are set for a large font size and padding. As soon as I removed the whole "fieldset dt" css from my site's template, the buttons now display properly. Any user having this problem should play with the settings in this css tag if it exists in the css of their Joomla template, or adjust the css of the H3 tag. :)
    The reply is currently minimized Show
  • Accepted Answer

    Tuesday, February 20 2018, 12:53 PM - #Permalink
    0
    I am having this problem again. :(
    I have looked through the css files, made changes to the H3 tags like JILK suggested and even deleted the "fieldset dt" and still no resolve.
    Attachments:
    The reply is currently minimized Show
  • Accepted Answer

    Wednesday, February 21 2018, 12:14 PM - #Permalink
    0
    I cant' access, it says my location (ES) has been blacklisted.
    The reply is currently minimized Show
  • Accepted Answer

    Wednesday, February 21 2018, 12:30 PM - #Permalink
    0
    I am so sorry. I added a firewall to my website and was testing out the configuration and forgot to turn it off. I have disabled it.
    The reply is currently minimized Show
  • Accepted Answer

    Wednesday, February 21 2018, 12:42 PM - #Permalink
    0
    in your template.css file you have a class:

    fieldset dt (line 73) which adds lots of paddings and margins and makes it all look really ugly. if you remove it it looks much better.
    The reply is currently minimized Show
  • Accepted Answer

    Wednesday, February 21 2018, 01:00 PM - #Permalink
    0
    Ok so here is what I changed it to:

    fieldset dt {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 12em;
    height: 2em;
    margin: 0;
    padding: 0;
    float: left !important;
    display: inline !important;
    clear: both;
    background: none;
    line-height: 2em;
    overflow: hidden;
    The reply is currently minimized Show
Your Reply