Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

iphone, css, margin & block model

Posted on 2010-09-14
2
Medium Priority
?
892 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 2000 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

How to take pictures with depth using iOS 10
A brief look into what is, how to use, and how to make GIFs
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

885 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