I am having alot of trouble putting my problem into words, and it would be much appreciated if someone could perhaps 'sum it up better'. Anyways, I'm styling a form to gather information, as it is targeted at a mobile device, I want the fields to stretch to 100%, filling the screen. Using a text area, this works fine on all mobile OS's, however, by using a standard , the layout on the iPhone is broken, note this does not occur on Android. I believed it was a bug with Safari, but it works in desktop Safari, so maybe something to do with iOS rendering?
Standard expected behaviour.
iOS behaviour
Note:
A live preview of the site can be found at http://www.draganmarjanovic.com
However, this is only present on a resolution of <720px.
The same CSS code is used for both the input and the text area. - Cheers
The padding on the textarea and the input are different by default (user-agent stylesheet) and you haven't given a reset value for them. Try setting padding:0; on both of them, it should work.
Why did it work when you tried box-sizing:border-box; as #MLeFevre told you, you ask? Because what this property does is make the padding count as width and not as an addition of it (which is the normal browser behaviour we've had till CSS3). It does the same with border width too. So, it didn't matter the default padding wasn't zero because the width would be 100% no matter what padding you set.
Related
http://staging.isaidicanshout.com/millersrest/
Hello, in the WIP example above, when sizing down below 1024, this site should switch to a single column view, by hiding two of the table-cells and resizing the width of the page. However, in Chrome it hides the cells, but leaves the remaining cell at its original width. Reloading the page at the new size gives the correct appearance. Any idea why this would not update correctly in Chrome?
Safari seems to work fine. Firefox is an entirely other story, but I will look into that separately.
Thanks!
In your CSS you have a position:relative; for #leftcol and #rightcol. When you have a media screen for 1024px, make sure you remove this attribute and then it will work as a one column display. See in the picture below how it is working, but most importantly that position:relative is unchecked
First off, this is not the zoom issue that I've seen in other questions. Also, I'm testing this using an iPhone 4, running iOS 6. In working on a mobile project, I discovered an issue with the viewport tag and mobile safari. I distilled everything into code as basic as I could get it. I have there parameters set:
width=device-width
height=device-height
initial-scale=1.0
maximum-scale=1.0
user-scalable=no
It all works fine, until you rotate the screen. Nothing gets resized, and a black bar appears on the right side to fill in the gap (see screenshots). If I remove height=device-height completely, the problem goes away. However, I do need to use this parameter. Otherwise, I will have to ask a different question.
After rotating back to portrait mode, that black bar remains, and I can scroll left and right. This is a very strange issue. Removing width=device-width does something else unexpected. I have the code here if you would like to try it: http://toastd.net/viewport.html
Here are some screenshots:
Here it is working fine in portrait mode:
When rotated to landscape mode
Then rotated back into portrait mode
The meta tag will help define rules for the viewport but you still need to apply visual styling to address the change in orientation. Give these CSS values a try:
body { width: 100%; height: 100%; }
If you'd like a good resource to help continue your project, PhoneGap has a starter app on GitHub that you can fork.
PhoneGap Start
I believe this is a bug on Safari, but I figured out a way to work around it. It has to do with certain elements and their styles. By process of elimination, I narrowed it down to a few "offending" HTML elements. Deleting width: 100%; from some elements and CSS styles, as well as other static widths like width: 120px; would start to get reduce problem. I say "start to reduce", because the margin on the right became smaller, but didn't go away completely. I then started playing with other CSS attributes like margin and padding. After getting rid of some left and right padding from some elements, the problem finally went away. But this wasn't really acceptable, as those styles were there for a reason.
The solution was to wrap everything in a container element, size that appropriately, and set overflow: hidden; in CSS. Setting overflow: hidden; to the body or html tags would work too, but that did funky things with vertical scrolling in Mobile Safari. In my case, there was already such a container element, so all I had to do was add the overflow property to it.
Like I said, I think this is a bug in Safari. When you rotate from Landscape to Portrait, everything should be resized back to fit portrait mode. Visually, everything does look like it was resized properly. However, Safari must have thought something wasn't resized properly, so it displayed the page wider than it really was. This works just fine in Chrome on an Android device. I also added different background colors and borders to highlight which element might be causing the page to stretch beyond the width of the device screen. Visually, there was no apparent culprit.
If you're thinking it might be a width: 100% plus padding issue, I had the same thought. But then deleting either the width or the margin/padding alone should have fixed the issue, which it did not. Not a single element was sitting beyond the edge of the screen. There was nothing but empty space there.
I can't get my some of my buttons or inputs to look the same across browsers. The vertical positioning of text is usually the problem. I've tried multiple browsers, Firefox (16) simply ignores my line-height in OSX and looks different still in Windows.
There's usually a difference of 1px, sometimes more. This is especially a problem when you switch to an iPad or another mobile device, it always looks different somehow.
Here's my CSS...
margin : 0px;
padding : 0px;
font-size : 15px;
//height : 15px; // Tried this too with unsatisfying results
line-height : 1;
vertical-align : top;
I took the screenshots without using the height-property
edit:
so I've looked around for more information and found some questions with a similar problem.
No one solved it though...
-> 1 pixel line height difference between Firefox and Chrome
-> line-height 2px lower in firefox vs webkit
edit2:
furthermore if I make a jsfiddle I still get the problem, it's a little different since it's not in the same context as on the site I'm working on but it's still a line-height/text issue:
see here: http://jsfiddle.net/XQ7VD/3/
This is Chrome (left) and Firefox (right) on OSX
edit3:
Here's a screenshot with the line-height set to 18px (from this jfiddle: http://jsfiddle.net/BJ8eR)
I've just seen that the jsfiddle buttons and hover-boxes have the same issue! xD
Ok I'm done screenshooting now...
--
If anyone does know a trick, please get in touch. thx!
Text rendering is different in all browsers on various platforms - font antialiasing is absolutely different. So it is hard to get pixel-perfect results. From my experience, styling input/buttons elements for a large set of browsers is a major PITA. Especially mobile Webkit is unpredictable in certain cases.
If your CSS is not an excerpt, you may want to add display:inline-block;.
I'm making a page to scale down to fairly small browser sizes, including on desktops. I've got it down for pretty much every browser but firefox; it just doesn't make the content smaller the same way as other browsers.
Say I have a simple page like this:
<body>
<div style="width:auto; max-width:500px; margin:20px;background-color:black;"> Some filler text </div>
</body>
If you try that in any browser but firefox, when you resize the window to smaller than 540px, the div gets smaller, as you would expect. But in firefox, it does no such thing. At least not in 8.0. It resizes the div a tiny amount and then lets it extend off the window, without even leaving a scrollbar.
Is there any way around this behavior?
EDIT: I've reproduced this is on older versions of firefox as well, but I found something odd. When I said it resizes the div a tiny amount, here's what happens: the body of the page stays at 367px width. Two different versions of firefox, two versions of windows, the same number.
The issue you're running into is that in Firefox depending on the exact themes or extensions in use as you resize the browser window the browser content area may not resize (because, for example, the various buttons on the widest toolbar impose a minimum width on that content area due to the way the user interface is laid out).
This is why you see the body not changing size: the CSS viewport itself is not changing size. If your page had a vertical scrollbar, you'd see that scrollbar disappear off the right edge of the window, just like parts of the browser UI itself disappear.
You can work around this with enough toolbar customization (e.g. remove everything from the toolbars) if you just need this for testing. On the other hand if you just need this for testing you can probably jut load the site in an iframe which you then size however you want...
Wanted to say something about your comment regarding "width: auto" vs "width: 100%" but I can't comment yet...
You can set "width: 100%" and make it account for padding and borders by also setting "box-sizing: border-box" - you'll need to use the vendor prefixes I believe -moz- and -webkit-. Not sure if it will solve you problem, but it's good to know - maybe try it out and see what happens.
It works in IE and Safari but breaks in Chrome. You can view the page here http://www.archemarks.com.
It only breaks at a middle zoom point so you have to zoom in and zoom out and at this middle point the table breaks.
This made me think it was something minor that as the browser re-drew the page..the changing pixels available caused it to make something bigger than normal...or smaller and broke the layout.
Chrome has development tools which should make all of the CSS and HTML available.
I tried fiddling witht the size of the text in put box and the containing column and row..but this did not help as I was only guessing.
Any non-guessing advice.
I can repost the code but it might be easier to just view the site using Chrome Development Tools
It's the width of your .t2_c1 rule. At only 100px, it isn't wide enough for the Email Again text. this is undoubtedly because of the font size conversion being just slightly off as the browser compensates for the zoom. Changing the .t2_c1 rule width to 110px and then the .t2_c2 width to 250px fixes this issue.