1

There are some posts such as here that say you can set

display: inline-block

to the parent, but this did nothing useful for me. The dimensions were then 0px by 0px.

Here is the HTML

<div id='si'>
  <p id='si_but' class='si_match blue_but radius_all small_white'>SignIn</p>
  <p id='si_cov' class='si_match opaque_but radius_all small_dark'>SignIn</p>
</div>

Here is the CSS

#si{
  display: inline-block;
  position: relative;
}
.si_match{
  position: absolute;
  line-height: 40px;
  padding:  0px 15px;  
  text-decoration:  none;
}
#si_but{
  cursor:  pointer;
}
Community
  • 1
  • 1
cade galt
  • 3,843
  • 8
  • 32
  • 48

1 Answers1

1

Your <p> elements are absolute positioned which takes them out of the normal document flow and therefore the parent element #si doesn't "see" them.

I would recommend removing the position: absolute; from .si_match and converting them from a <p> to a <button>.

hungerstar
  • 21,206
  • 6
  • 50
  • 59
  • It's more semantic. You're providing the user with an element that would be considered a button, so why not use a `
    – hungerstar Aug 21 '15 at 18:22
  • That would work. You can stretch the button out vertically with `line-height` and/or `padding`. Horizontally you can let the text do most of the sizing for you and add some `padding` if you'd like or you could set a `width` or `min-width` on it as well. At this point you have a lot of options at your disposal. – hungerstar Aug 21 '15 at 18:30
  • Not rocket science at all. I've modified the code to your site in my browser and can verify the suggestions I've made do work. **P.S.** What is with the dual buttons? – hungerstar Aug 21 '15 at 18:34
  • It's not the CSS. Not to be mean or rude but it sounds like a loose foundation of knowledge in HTML/CSS that seems to be the culprit. There are options to add/change the style of the button without having to duplicate the element. Have you tried using the pseudo selector `:active` or some JS and applying a class to the button while you wait on the server and then removing the class once you get your response? – hungerstar Aug 21 '15 at 19:05