?
Solved

iphone, css, margin & block model

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Learn to move / copy / export exchange contacts to iPhone without using any software. Also see the issues in configuration of exchange with iPhone to migrate contacts.
A brief look into what is, how to use, and how to make GIFs
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

719 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