Solved

iphone, css, margin & block model

Posted on 2010-09-14
2
886 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
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Let Bitmoji into your life. Now is the time to learn a new language of smartphone messaging with this brief introduction.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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 …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

808 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