iPad/CSS help

Forum Moderators: not2easy

Message Too Old, No Replies

iPad/CSS help

Issues with absolute 0% Right

wpcs_phil

10:04 pm on Jan 6, 2012 (gmt 0)

Hello all,

Don't have an iPad and don't really need one (as I never seem to leave the house...lol), but am having some problems with a client and layout that I can't get to work right.

The vertical tabs stuck to the right side of the window are absolutely positioned with right 0% (on top of a 100% width cycling image and a layered/clickable logo on the left).

The designer I'm working with tells me though that on her iPad that the tabs aren't sticking to the right side. Seems maybe it just happens when she rotates it from portrait to landscape or vice versa, maybe the viewport isn't recalculated?

Haven't been too concerned with iPad before now as it seemed to just work, but can't crack this one with all that's going on with it.

Any body know what might be causing this or how to fix? Maybe something to do with viewport meta tag?

Any help would be most appreciated!

Philip

[edited by: alt131 at 10:24 pm (utc) on Jan 6, 2012]
[edit reason] Thread Tidy [/edit]

lucy24

10:19 pm on Jan 6, 2012 (gmt 0)

Before you delve in too deeply: Does the iPad behave differently from vanilla Safari? Make sure you're addressing the right problem before you start tearing your hair out. When I rotate my iPad, the whole page simply gets wider physically.

Incidentally, I never go anywhere either, but my father sort-of insisted on giving me an iPad. I take it to bed with me so if I need to look up a word in the middle of the night,* it's right there.

* Doesn't everyone lie awake nights trying to remember the inuktitut for "remember" when you're certain you looked it up just a few days ago?

wpcs_phil

11:25 pm on Jan 6, 2012 (gmt 0)

Thanks Lucy, wouldn't be the first time I made a mistake like that, but not this time! Works fine in Safari (and all other browsers mac/pc). Admin said I couldn't post a link to the site either, so stripped the code way down and starting to get to root of problem, though still don't know solution. Here is the code...



<!DOCTYPE html>
<head>
<html dir="ltr" lang="en-US" >
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
</head>

<style type="text/css">
#side-nav {
position: absolute;
right:0%;
width:33px;
}
</style>

<body>

<div id="side-nav">
 <img src="work.png">
 <img src="team.png">
 <img src="awards.png">
 <img src="clients.png">
 <img src="contact.png">
</div>

</body>
</html>

...and what the designer says she sees now...

"Ok what happens is I open it horizontally and it looks fine. perfect. I turn it vertical and it enlarges outsize of the picture plane - like 2x the original size. And then I have to scroll right to see it at all. I turn it back horizontal and it does not pop back, we're left with the big size."

Thanks so much for any help!

Philip

[edited by: alt131 at 11:33 am (utc) on Jan 10, 2012]
[edit reason] Thread Tidy [/edit]

lucy24

2:28 am on Jan 7, 2012 (gmt 0)

:: cough, cough ::

<!DOCTYPE html>
<head>
<html dir="ltr" lang="en-US" >
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />

May not affect the problem at all, but let's not take chances. Feed the file through w3c's html and css validators.

rocknbil

3:15 pm on Jan 7, 2012 (gmt 0)

^ ^ Oddly enough, the />'s don't seem to kick errors in the validator for HTML5 like you think they'd should. :-)

As a recent owner of an iPad (most awesome boss in the world bought one for everyone in the company,) I've been breaking hard and fast on mobile development. Definitely not an expert by any means, but have learned a couple things.

Absolute positioning and reliance on fixed pixel elements are always going to lead to problems in mobile apps, but the whole superimposed description demands it. Try this:

- Create a 100% width div, absolutely positioned, with the z-index top
- Put your "tabs" inside this div and float them right.
What that would do is force the top-floating container to always be 100% instead of having a raw absolute element as part of the layout.

#floater {
width: 100%;
position: absolute;
z-index:1000;
}
#side-nav {
width:33px;
float: right;
}

A side note, the res of the iPad is 768 X 1024, so when you rotate it you'd think it's now 1024 wide. It's not. It's still 768, automatically resized by the iPad. (Several resources out there where I've learned this.)

lucy24

11:14 pm on Jan 7, 2012 (gmt 0)

A side note, the res of the iPad is 768 X 1024, so when you rotate it you'd think it's now 1024 wide. It's not. It's still 768, automatically resized by the iPad. (Several resources out there where I've learned this.)

Yes, that's why I said "physically bigger". It's the iPad's version of zooming in when you want the whole page to be bigger, not just the bit you're currently reading.

The other day I looked at a weeny little graphic and realized it would not have fit on the earliest mac screen. Physically yes, but pixels (as a unit of html measurement) are no longer 1/72 inch. Not even on my monitor, which is set to be eyesight-friendly.

Matter of fact, the iPad's screen is just a smidgen bigger-- physically-- than those 512x384 Macs. I had to measure to convince myself. Weird.

Looking again at those numbers, something else jumps up and hits me in the face. D'oh.

wpcs_phil

1:25 am on Jan 10, 2012 (gmt 0)

Thanks for your help. Good idea Bill, but still no dice. Here is current. Someone suggested min/max scale too. (and validates, just mistake in boiling down)


<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

<title>Test</title>

<style type="text/css">
#side-nav-container {
position: absolute;
z-index:999999;
width:100%;
left:0%;
}
#side-nav {
width:33px; 
float:right;
}
</style>

</head>

<body>

<div id="side-nav-container">
 <div id="side-nav">
  <img src="work.png" alt="Work">
  <img src="team.png" alt="Team">
  <img src="awards.png" alt="Awards">
  <img src="clients.png" alt="Clients">
  <img src="contact.png" alt="Contact">
 </div>
</div>

</body>
</html>

[edited by: alt131 at 11:35 am (utc) on Jan 10, 2012]
[edit reason] Thread Tidy [/edit]

rocknbil

5:32 pm on Jan 10, 2012 (gmt 0)

Phil you were so close. :-) I don't have images and this worked fine. Note the change to the meta.

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=768, minimum-scale=1.0, maximum-scale=1.0">
<title>Test</title>
<style type="text/css">
#side-nav-container {
position: absolute;
z-index:999999;
/* must add up to 100% with padding */
width:90%;
padding: 15em 5%;
background:#c0c0c0; /* or image */
}
#side-nav {
width:33px;
float:right;
background:#fff;
border:1px solid #000;
}
/* ignore, these are 'cause I don't have images - also border is not needed */
#side-nav p {
margin:0;
padding:0;
width:33px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="side-nav-container">
<div id="side-nav">
<p>img</p>
<p>img</p>
<p>img</p>
<p>img</p>
<p>img</p>
</div>
</div>
</body>
</html>

wpcs_phil

3:37 am on Jan 11, 2012 (gmt 0)

Thanks so much for your help Bill. I might have to borrow someone's ipad to get this resolved. What we had above worked, but it breaks again as soon as I start incorporating it into the site. Got it boiled down again, formatted so you can copy/paste it in.

See what it's doing? Any ideas?

Maybe I'm missing something stupid, but it works fine in Safari/IE/FF/Chrome.

Sincerely appreciate your help!

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=768, minimum-scale=1.0, maximum-scale=1.0"> 

<title>Test</title>

<style type="text/css">
#side-nav-container {
position: absolute;
top:5px;
z-index:99999;
width:100%;
background:#c0c0c0;
}
#side-nav {
width:33px; 
float:right;
background:#fff;
border:1px solid #000; 
}
#top_row {
height:50px;
width:940px;
}
</style>

</head>

<body>

<div id="side-nav-container">
 <div id="side-nav">
 <p>img</p>
 <p>img</p>
 <p>img</p>
 <p>img</p>
 <p>img</p> 
 </div>
</div>

<div id="top_row"></div>

</body>
</html>

rocknbil

5:00 pm on Jan 11, 2012 (gmt 0)

The screen is 768, and your top_row is 940, so I *think* what's happening is ipad is scaling other elements down proportionately to fit it. You can see this adding a color to the background of top_row.

Also the absolutely positioned container is covering up top_row, you could get around that by adding this to the container:

margin-top:55px;

If you really need 940 for other devices instead of 100%, you can do

@media only screen and (max-device-width: 1024px) {
#top_row { width:100%; }
}

... which will override the static 940px on the ipad. Seemed to work ok.

iPad/CSS help

Issues with absolute 0% Right

wpcs_phil

lucy24

wpcs_phil

lucy24

rocknbil

lucy24

wpcs_phil

rocknbil

wpcs_phil

rocknbil

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week