1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Css Problem With Explorer and Mozilla

Discussion in 'HTML & Website Design' started by McCoy, Feb 5, 2016.

  1. #1
    These css codes works only with chrome. There's problem with links on mozilla and explorer. How can i fix it?
    
    .button {
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        padding: 6px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        width: 300px;
        font-size: 14px;
        margin: 1px 1px;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
        cursor: pointer;
    }
    
    .button a{
    color:#FFFFFF;
    }
    
    
    .button1 {
        background-color: #27ae60;
        color: white;
        border: 2px solid #27ae60;
        a color:ffffff;
    }
    
    .button1:hover {
        background-color: #32ce74;
        color: white;
    }
    
    .button2 {
        background-color: #2980b9;
        color: white;
        border: 2px solid #2980b9;
    }
    
    .button2:hover {
        background-color: #3599db;
        color: white;
    }
    
    .button3 {
        background-color: #c0392b;
        color: white;
        border: 2px solid #c0392b;
    }
    
    .button3:hover {
        background-color: #e74c3c;
        color: white;
    }
    
    .button4 {
        background-color: #f39c12;
        color: white;
        border: 2px solid #f39c12;
    }
    
    .button4:hover {background-color: #f1c40f;}
    
    .button5 {
        background-color: #2c3e50;
        color: white;
        border: 2px solid #2c3e50;
    }
    
    .button5:hover {
        background-color: #34495e;
        color: white;
    }
    
    .button6 {
        background-color: #8e44ad;
        color: white;
        border: 2px solid #8e44ad;
    }
    
    .button6:hover {
        background-color: #9b59b6;
        color: white;
    }
    
    .button7 {
        background-color: #7f8c8d;
        color: white;
        border: 2px solid #7f8c8d;
    }
    
    .button7:hover {
        background-color: #95a5a6;
        color: white;
    }
    
    .button8 {
        background-color: #f75e10;
        color: white;
        border: 2px solid #f75e10;
    }
    
    .button8:hover {
        background-color: #FF8040;
        color: white;
    }
    
    .button9 {
        background-color: #16a085;
        color: white;
        border: 2px solid #16a085;
    }
    
    .button9:hover {
        background-color: #1bc7a5;
        color: white;
    }
    
    .button10 {
        background-color: #3b5998;
        color: white;
        border: 2px solid #3b5998;
        padding: 16px 32px;
        width: 320px;
    }
    
    .button11 {
        background-color: #dc4a38;
        color: white;
        border: 2px solid #dc4a38;
        padding: 16px 32px;
        width: 320px;
    }
    
    .button12 {
        background-color: #00aced;
        color: white;
        border: 2px solid #00aced;
        padding: 16px 32px;
        width: 320px;
    }
    
    .button13 {
        background-color: #e52b25;
        color: white;
        border: 2px solid #e52b25;
        padding: 16px 32px;
        width: 320px;
    }
    
    
    .onceki {
      display: inline-block;
      border-radius: 4px;
      background-color: #88b7d5;
      border: none;
      color: #FFFFFF;
      text-align: center;
      font-size: 14px;
      padding: 10px;
      width: 220px;
      transition: all 0.5s;
      cursor: pointer;
      margin: 5px;
    }
    
    .onceki span {
      cursor: pointer;
      display: inline-block;
      position: relative;
      transition: 0.5s;
    }
    
    .onceki span:after {
      content: '«';
      position: absolute;
      opacity: 0;
      top: 0;
      left: -20px;
      transition: 0.5s;
    }
    
    .onceki:hover span {
      padding-left: 25px;
    }
    
    .onceki:hover span:after {
      opacity: 1;
      left: 0;
    }
    
    .onceki a {text-decoration:none !important;color:#fff;}
    
    
    .sonraki {
      display: inline-block;
      border-radius: 4px;
      background-color: #88b7d5;
      border: none;
      color: #FFFFFF;
      text-align: center;
      font-size: 14px;
      padding: 10px;
      width: 220px;
      transition: all 0.5s;
      cursor: pointer;
      margin: 5px;
    }
    
    
    .sonraki span {
      cursor: pointer;
      display: inline-block;
      position: relative;
      transition: 0.5s;
    }
    
    .sonraki span:after {
      content: '»';
      position: absolute;
      opacity: 0;
      top: 0;
      right: -20px;
      transition: 0.5s;
    }
    
    .sonraki:hover span {
      padding-right: 25px;
    }
    
    .sonraki:hover span:after {
      opacity: 1;
      right: 0;
    }
    
    .sonraki a {text-decoration:none !important;color:#fff;}
    Code (markup):

     
    Last edited by a moderator: Feb 6, 2016
    McCoy, Feb 5, 2016 IP
  2. denis bayly

    denis bayly Well-Known Member

    Messages:
    104
    Likes Received:
    28
    Best Answers:
    6
    Trophy Points:
    105
    #2
    Hi there McCoy,

    The HTML to which your CSS applies would be extremely helpful.

    We certainly cannot assess your problem without it.


    coothead
     
    denis bayly, Feb 5, 2016 IP
    McCoy likes this.
  3. McCoy

    McCoy Well-Known Member

    Messages:
    683
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    130
    #3
    I solved the problem for firefox but problem still goes on with explorer. What can i do for explorer?
    Old one not working : <button class="button button2"><a href="domain.com/">link</a></button>
    New one working : <a href="domain.com/"><button class="button button2">link</button></a>
     
    McCoy, Feb 6, 2016 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    Why are you doing it so complicated? Just do a link, something like this:
    <a href="something" class="button button2">Link text goes here</a>
    There's no need using button in there anywhere.
    And what exactly isn't working?
     
    PoPSiCLe, Feb 6, 2016 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Yeah, I'm wondering why the blazes you're pissing on the markup with that button tag too... there's no reason for it. What are you doing to the stupid pointless BUTTON tag (that has ZERO business being used outside a form) that you couldn't apply to the anchor directly?

    Likewise I'm guessing since we're not seeing your REAL markup, but I suspect about half your CSS belongs on the trash heap. Same for MOST of your classes but again, I'd need to see the WHOLE markup not just a incomplete snippet to say for sure.

    Since generally speaking if you have a button tag and a anchor tag and classes on each, you're doing something wrong... like flat out failing to grasp how HTML or CSS even works.
     
    deathshadow, Feb 6, 2016 IP
  6. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #6
    Should the big G be a solid example of how html / css works? Here's a typical thing from their front page:

    
    <div style="display:inline-block;position:relative;height:200px;width:500px" id="hplogo"><a href="/search?site=&amp;q=Lunar+New+Year&amp;oi=ddle&amp;ct=lunar-new-year-2016-5134827118395392-hp&amp;hl=en&amp;sa=X&amp;ved=0ahUKEwit8Lr8nujKAhWSsh4KHapOABoQNggD"><img alt="Lunar New Year 2016" border="0" height="200" src="/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg" style="padding-top:1px" title="Lunar New Year 2016" width="500" onload="window.lol&&lol()"></a><div>
    
    Code (markup):
     
    qwikad.com, Feb 8, 2016 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    No.

    cheers,

    gary
     
    kk5st, Feb 8, 2016 IP
    qwikad.com likes this.
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    There's what should be, and then there's what is. Simply put right now Google has so many separate fingers stirring the pot and such a mish-mash of old code, they're coasting on two things alone -- reputation and content.

    I've said for a while now that a lot of their sites are costing them more to host, and that they're just blindly throwing more hardware at it as the answer; hence the server farms of cargo containers filled with SBC's, and their now having access to more bandwidth than Christmas.

    It's why DuckDuckGo was DAMNED close to taking them down until they too started crapping their own bed, and their results started to slip in quality. You want to take down someone like Google you're going to have to beat them on speed, usability and content. You don't manage all three, you're going to hit "also ran" status damned quick.

    But yeah, DIV for nothing, attributes like border that have no business on any site written after 1997, ignorant use of title on an img tag, static style in the markup... You'd think given the sheer number of times their home page gets resent to people they'd do anything and everything to reduce the pointless code bloat and leverage caching and pre-caching... but instead they send 175k of ineptly developed markup to deliver one image, a dozen anchors, two form elements; basically 8k of HTML's job. They've blown so much smoke up their own backside with the scripttardery that they've actually lost sight of half what let them kill off the competition (Altavista, Lycos, Jeeves, etc) back in the day, and keeps most of their competitors in permanent "also ran" status (Bing, Yahoo, DDG)

    BUT -- for all that they have something WAY more important; content of value. That can trump just about everything else. It's just the developer ineptitude shown on the front end over the past six to eight years is costing them more in hosting, particularly as they start to believe their own bullshit from things like their pageSpeed tool which has gone from a useful tool to a glorified advertisement for their "service" and to hock CDN's on people who don't need them.

    You'd almost think their main revenue stream was advertising... It's a laugh given their ridiculously deep pockets at this point that they could actually be showing more profit through less hosting costs; but that's just not a priority for them anymore.
     
    deathshadow, Feb 8, 2016 IP
  9. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #9
    I too thought DuckDuckGo was the future. Not anymore. They have their own chinks in their armor. If they did get big, eventually they would have been acquired by the big G anyway. It's a lose / lose situation for any new search engine out there.
     
    Last edited: Feb 8, 2016
    qwikad.com, Feb 8, 2016 IP