Solved

iphone, css, margin & block model

Posted on 2010-09-14
2
889 Views
Last Modified: 2012-05-10
See the attached picture for view of the issue. This view shows the iphone layout with width: 300px.

Of note, and what I'm trying to shrink is what appears to be a 'margin' on the left & top that is not (fully) wanted. If I set the width: 292px, then a corresponding border appears on the right side, now making the page look finished. I do want the 2px gray border around the page, and for the <div> to be centered in the viewport.  292px, looks good, but has too much left margin.

Since the viewport is 320px, I'd like for the <div> block to be 300px wide, with 2px border, 5px padding, which totals 314px and stil leaves room for 3px margin on each side (if centered).

What can I do to shrink the apparent margin (un-called for) on the top and left?
<style type="text/css">
h1 {
	font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif;
	line-height: 1.0;
	text-align: left;
	padding-bottom: 10px;
}
a:link, a:visited {
	text-decoration: none;
	color: blue;
}
#page_size {
	font: Verdana, Geneva, Arial, Helvetica, sans-serif;
	border: 2px solid #A9A9A9;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	border-spacing: 0;
	width: 300px;
	padding: 5px;
	min-height: 390px;
}
omitted for space
</style>
</head>
<body>
<div id="page_size">
<h1>Reserve List<span style="padding-left: 110px; font-weight: normal;"><a class="button" href="members.php" >Home</a></span></h1>

and so on.

Open in new window

Screen-shot-2010-09-14-at-10.09..png
0
Comment
Question by:dolan2go
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 17

Accepted Solution

by:
mreuring earned 500 total points
ID: 33672929
Seem to me no different from any other website, just make sure html and body have no margin/padding...
html, body {
margin: 0;
padding: 0;
}

Open in new window

0
 
LVL 1

Author Closing Comment

by:dolan2go
ID: 33673079
Ouch. I guess that's why you are a Sage.

Thank you for the quick reply.
David
0

Featured Post

[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Are you having trouble connecting or getting your iPhone / Samsung device(s) to sync with Microsoft Exchange Server?   What have you tried?   What haven't you tried?
Email is way too noisy, prone to hiding the important stuff, and really becoming unreliable for critical/timely communications. There are better ways to communicate.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

724 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question