Solved

iphone, css, margin & block model

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

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?
Set up iPhone and iPad email signatures to always send in high-quality HTML with this step-by step guide.
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…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

759 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

18 Experts available now in Live!

Get 1:1 Help Now