Solved

iphone, css, margin & block model

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
iPhone backup extractor 3 41
Any idea why my scrolling images are not showing?? 8 31
Centering a nested div 16 56
iPhone v Android phone 7 25
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

930 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now