2

I am working on a web base app for my school with different versions of CSS for handheld, tablet and desktop. I am using media queries for this. The app is almost done and it works correctly on almost all browsers and android. The app looks awesome on Iphone/Ipad however buttons do not work making the app useless in these devices.

This is what I have:

//Source code

<div id="signinbutton" class="blue_button">Sign In</div>

//desktop.CSS

.blue_button {
    width: 130px;
    height: auto;
    padding: 8px;
    margin: 0% auto 20% auto;
    background-image:url(../../images/bluebar5.png);
    color: #FFF;
    text-align: center;
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 14pt;
    font-weight: bolder;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    cursor: default;
    }
.blue_button:hover {
    opacity: 0.7;
}

//Handheld.css (this overwrites css on desktop)

.blue_button {
    width: 260px;
    font-size: 18pt;
    background-image:url(../../images/bluebar6.png);
}

I tried applying the style to #signinbutton without success.

irm
  • 4,073
  • 6
  • 28
  • 32
  • 1
    When you say the buttons don't work, do you mean that nothing happens when they are touched/clicked? – DOK Mar 07 '13 at 20:03
  • What do you mean by the button "don't work"? Is that a typo in your source code are are the tags actually not correctly formed? It is really hard to tell you anything without seeing a full example, as who knows what other CSS styles could be interfering. – Mike Brant Mar 07 '13 at 20:03
  • 1
    Try – Michael Mar 07 '13 at 20:08
  • Correct! nothing happens when they are clicked. Here is the link: http://as.sjsu.edu/vaishak/swpIndex.jsp – irm Mar 07 '13 at 20:08
  • Ok, I'm trying – irm Mar 07 '13 at 20:14
  • WORKS :D !!! – irm Mar 07 '13 at 20:19
  • for iPad / iPhone buttons where you have custom css see this too : http://stackoverflow.com/questions/5449412/css-styling-for-input-buttons-on-ipad-iphone – Simon_Weaver Jun 03 '13 at 03:54

3 Answers3

7

You should use a <button> or <input type="button"> tag instead of a div. While the <div> button functionality may work in some browsers, it can be a bit of a hack compared to the traditional button tags

Brian Phillips
  • 4,302
  • 2
  • 25
  • 40
0

You can wrap your div around <a> like this. It's perfectly valid with html5 now.

<a href="#"><div id="signinbutton" class="blue_button">Sign In</div></a>

You just need to adjust Reference: https://css-tricks.com/snippets/jquery/make-entire-div-clickable/

Ravi
  • 191
  • 2
  • 6
-1

Try adding to the style of the div {cursor:pointer}.

Sender
  • 6,660
  • 12
  • 47
  • 66
Shimon Friedlich Mipo
  • 1
  • 1