CSS issue causing white space at the top of the page on Safari Mobile (iOS)
When viewing my mobile version of the website, there is a horizontal white stripe approximately 15px high on top of each of my pages. Here's the relevant CSS and HTML markup:
body {
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
width: 100%;
}
#container {
width: 100%;
background-color: #FFF;
}
#navigation {
display: block;
width: 100%;
height: auto;
padding: 0px;
background-color: #009245;
}
#content {
display: block;
width: 100%;
max-width: 100%;
padding: 0px;
}
<!DOCTYPE html>
<html lang="en">
<body>
<div id="container">
<div id="navigation" class="navigationtext">
<h2><a href="">domain</a><br> the home page of First Last</h2>
<p><a href="/about/">About</a></p>
<p><a href="/blog/">Blog</a></p>
<p><a href="/contact/">Contact</a></p>
<div class="copyright">Copyright</div>
</div>
<div id="content">
<p>Content/text goes here.</p>
</div>
</div>
</body>
</html>
I've tried many combinations of CSS properties (most notably "margin" and "padding"), and spent a lot of time searching the web. Nothing seems to work.
Please let me know if you need anything. I will be checking this thread regularly today.
source to share
Just assign h2
margin:0
. and in body
margin:0
and padding:0
. Because by default the tag h2
has margin
tag validation h2
.
.navigationtext h2 {
margin: 0px;
}
body {
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
width: 100%;
padding: 0;
margin: 0;
}
body {
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
width: 100%;
padding: 0; /*Added*/
margin: 0; /*Added*/
}
.navigationtext h2 {
margin: 0px; /*Added css for h2 tag*/
}
#container {
width: 100%;
background-color: #FFF;
}
#navigation {
display: block;
width: 100%;
height: auto;
padding: 0px;
background-color: #009245;
}
#content {
display: block;
width: 100%;
max-width: 100%;
padding: 0px;
}
<div id="container">
<div id="navigation" class="navigationtext">
<h2><a href="">domain</a><br> the home page of First Last</h2>
<p><a href="/about/">About</a></p>
<p><a href="/blog/">Blog</a></p>
<p><a href="/contact/">Contact</a></p>
<div class="copyright">Copyright</div>
</div>
<div id="content">
<p>Content/text goes here.</p>
</div>
</div>
source to share
This is caused by the default values for body
and h2
.
All you need is margin-top: 0;
for these two elements.
body {
margin-top: 0; /* Remove top margin from body */
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
width: 100%;
}
.navigationtext h2 {
margin: 0px;
}
#container {
width: 100%;
background-color: #FFF;
}
#navigation {
display: block;
width: 100%;
height: auto;
padding: 0px;
background-color: #009245;
}
h2 {
margin-top: 0; /* Remove top margin from h2 */
}
#content {
display: block;
width: 100%;
max-width: 100%;
padding: 0px;
}
<div id="container">
<div id="navigation" class="navigationtext">
<h2><a href="">domain</a><br> the home page of First Last</h2>
<p><a href="/about/">About</a></p>
<p><a href="/blog/">Blog</a></p>
<p><a href="/contact/">Contact</a></p>
<div class="copyright">Copyright</div>
</div>
<div id="content">
<p>Content/text goes here.</p>
</div>
</div>
source to share