Button and screen resizing/iphone issues

Jenny Dithe · 09-15-2011, 07:35 PM

Hi,

I have buttons all over my web page and they display fine on a full screen laptop or even a notepad. My problem occurs both on the iphone and when I reduce the size of my screen/browser.

If I have as an example:

Code:

<div class="float" width="50%">
<input type="button" value="Round the Ragged Rock the Ragged Rascal Ran" />
</div>

<div class="float" width="50%">
<input type="button" value="Peter Piper" />
</div>

So the idea is these two divs float beside each other each with a button in both with relatively long content (but not always). Or the second div has something like a map in it, width set as a percentage - I have this problem a lot so there are many examples.

Now in full screen the layout works fine both divs take up the correct 50% of the screen. But if I reduce the screen size so that "Round the Ragged Rock the Ragged Rascal Ran" is actually longer than 50% of the screen, or this is viewed on the iphone then the div takes its width as the length of the button and pushes whatever is in the second div (the one on the right) aside completely messing up the layout.

I have tried doing things like:

Code:

button{
width:80%;
font-size:80%;
}

But that doesn't make a difference.

Is there a solution to this? What I think I want is the button and font-size to decrease in proportion to the screen size.

Or do I need to create a div instead of a button which I can add something like the onclick function to?

I'm happy to provide my code if required, but stripped it down to just a button and I still ended up with the same problem, so I think it is to do with the button input type itself - I would love to be corrected on this.

Jpeg™ · 09-16-2011, 05:39 PM

I can't replicate this,the code below looks as it should on an iphone 4 running ios 4.3.2 and the latest Firefox and Safari when resized.

PHP Code:


			
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width" />

    <style type="text/css">

        div {

            float: left;

            width: 50%;

            background: #eee;

            outline: 1px solid #000;

        }

    </style>

</head>

<body>

    <div><input type="button" value="Round the Ragged Rock the Ragged Rascal Ran" /></div>

    <div><input type="button" value="Short" /></div>

</body>

</html>

Jenny Dithe · 09-20-2011, 10:15 AM

If anyone is having the same problem I changed font-size to font-size:smaller, it helps but it isn't a fix.