Unable to style button

[qim]

Hi

I’m blushing as I write this…

In this page http://pintotours.net/Americas/DomRepublic/test.php I am trying to style the buttons in the central column as the ones in the sidebars. but am getting confused with the way to style double classes in the css

<a class="popup look-inside" href="ParaPalma.html">Read more  - Map  -  <span>Hotel website</span></a>

I tried to use the code from another page that is not the same and the result after tweaking around is that this code needs a thorough clean-up

.popup {

width:130px;
padding-top:5px;
 padding-bottom:5px;
margin-right:auto;
margin-left:auto;
border:2px solid brown;
border-radius:4px;
background-color:#fefcfb;
 background-position:0 -40px;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color:black;
text-align:center;
text-decoration:none;

}

.popup:hover {
background-position: 0 0;
color:brown;
background-color:#FFFCEE;
font-weight:600;
}

Content #box4 .popup:hover {
background-position: -28px 0;

}

Content #box4 .look-inside {
width:250px;
margin:5px 0 20px 45px;
border:2px solid brown;
border-radius:4px;
background-color:#fefcfb;
background-position:0 -28px;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#000;
text-align:center;
text-decoration:none;
}
.look-inside {
float:left;
margin:-10px 0 20px -28px;
padding-top:5px;
padding-bottom:6px;
}

.look-inside span{
font-weight:600;
}
.popup:hover.look-inside:hover{
color:brown;
background-color:#FFFCEE;
font-weight:600;
}

Help…

[yathrakaaran]

@quim, when you say

@qim

I am trying to style the buttons in the central column as the ones in the sidebars. but am getting confused with the way to style double classes in the css

What exactly are you trying to do? Can you explain further please? Thank you…

[RyanReese]

To style multiple classed elements, do the following:

<span class="one two">Test</span>

.one.two:hover {
  /*concentate the classes before applying the hover state*/
}

[qim]

Hi Ryan

That’s one of the things that i did but did not work. It’s still there

.popup.look-inside:hover{
color:brown;
background-color:#FFFCEE;
     font-weight:600;
}

[qim]

Hi

Well, I managed to get it to work. I separated .pop from .look-inside but to be honest can’t quite understand how it works.

Some look-inside code has Content #box4 in front, some doesn’t and some only work with one , the other with another…

If you could throw some light on how I can clean it up, I would be grateful.

This is the current crazy css

 .popup {
   
    width:130px;
   
    border:2px solid brown;
    border-radius:4px;
    background-color:#fefcfb;
     background-position:0 -40px;
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color:black;
    text-align:center;
    text-decoration:none;
     float:left;
    margin:-10px 0 20px -28px;
    padding-top:5px;
    padding-bottom:6px;
}


 .popup:hover {
    background-position: 0 0;
    color:brown;
       background-color:#FFFCEE;
     font-weight:600;
 }

 
 #content #box4 .popup:hover  {
    background-position: -28px 0;
   
 }
 
#content #box4 .look-inside { 
    width:250px;
    margin:5px 0 20px 45px;
    border:2px solid brown;
    border-radius:4px;
     background-color:#fefcfb;
     background-position:0 -28px;
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#000;
    text-align:center;
    text-decoration:none;
 }
.look-inside {
    float:left;
    margin:-10px 0 20px -28px;
    padding-top:5px;
    padding-bottom:6px;
    }


.look-inside span{
font-weight:600;
}
#content #box4 .look-inside:hover{
color:brown;
background-color:#FFFCEE;
     font-weight:600;
}