I have run in to a problem that effects specifically Safari on iOS.
I am building a page which has a fixed position header that is the width of the viewport. The content of the page is a series of images (variable in number) which should scroll to the right. The header should remain in place when the user scrolls.
On iOS Safari, the fixed header, is slightly larger than the viewport, and also scrolls at a different speed than the rest of the content.
I've cut the code down to the following, and still cannot work out how to solve this problem - the following code works perfectly in all other browsers that I have tested. (I am targeting IE8+)
I've hosted the example of this problem here.
Thanks for any advice and help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style>
html {
font-size: 10px;
height:100%;
white-space: nowrap;
}
body {
height:100%;
padding:0;
margin:0;
}
#dgs2 {
height:75%;
display:inline-block;
}
img{
height: 100%;
}
#pad{
height:6em;
padding-bottom:1px;
}
#header{
position:fixed;
width:100%;
height:6em;
border-bottom:1px solid;
}
.menuRight{
float:right;
}
</style>
</head>
<body>
<div id="header">
<div class="menuRight"><h2>Menu</h2></div>
<h1>Testing scroll on iPhone</h1>
</div>
<div id="pad"></div>
<div id="dgs2">
<img src='img/red.png'/><img src='img/blue.png'/><img src='img/red.png'/><img src='img/blue.png'/><img src='img/red.png'/><img src='img/blue.png'/><img src='img/red.png'/><img src='img/blue.png'/>
</div>
</body>
</html>
I know this question is a year old at this point, but the issue still exists in iOS and I had the EXACT same issue with fixed elements drifting, and it was driving me nuts. The answer is pretty simple: Just wrap the div #bgs2 (or whatever element has "white-space:nowrap" on it) with div.wrapper (the class is unimportant obviously), and set the overflow to auto:
.wrapper {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
I also added webkit-overflow-scrolling, which helps with avoiding repaints.
Someone in the future is bound to find this bizarre issue, so hopefully it helps.
If your happy using jQuery, then you could use something like:
$(window).ready(function() {
var bodyWidth = $(window).width();
$("#header").width(bodyWidth).css('width', bodyWidth);
});
I included both the attribute width and the css width, just to be sure it works in all browsers. Also if you change your meta tag to:
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
That should also help.
Update 1
Sorry, I didn't read the CSS styles properly for the header. The styles for the header should be as follows:
#header{
position:fixed;
top: 0; // Set these positioning attributes
left: 0; // to hold the header in the top left.
width:100%;
height:6em;
border-bottom:1px solid;
}
Update 2
Again, another CSS update. I notice you have code like follows:
html {
font-size: 10px;
height:100%;
white-space: nowrap;
}
body {
height:100%;
padding:0;
margin:0;
}
#dgs2 {
height:75%;
display:inline-block;
}
You need to change it to read like the following:
html {
font-size: 10px;
height:100%;
}
body {
height:100%;
padding:0;
margin:0;
}
#dgs2 {
height:75%;
display:inline-block;
white-space: nowrap;
}
If you move the white-space: nowrap; to the #dsg2 div instead of assigning it to the html then this should be your final fix. Also, add the following to the jQuery code to accompany what you have already:
$(window).resize(function() {
var bodyWidth = $(window).width();
$("#header").width(bodyWidth).css('width', bodyWidth);
});
Related
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<!-- META -->
<title>Nina Rakovec</title>
<meta name="description" content="Profesionalna igralka" />
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
<div class="image"></div>
<div class="eng"></div>
<div class="slo"></div>
</body>
</html>
CSS:
body {
background: url("ninabg.jpg") left top no-repeat;
background-size: 100% auto;
}
div.image {
overflow: hidden;
content:url("logo2fix.png");
position:absolute;
right:1%;
bottom:3%;
height:40%;
width:35%;
}
div.slo {
content:url("slo.png");
position:absolute;
width:5%;
bottom:10%;
right:21%;
}
div.eng {
content:url("eng.png");
position:absolute;
width:5%;
right:12%;
bottom:10%
}
This is the code and it is showing properly in Chrome, but not in Internet Explorer or Firefox. What am I doing wrong? The only thing that's showing is the background, the 3 div tags are not showing up and I have no idea why.
Thanks in advance, I need this fixed and I'm clueless.
In HTML 4.01, it is not valid markup to have a <div> element inside an <a>. According to the spec, <a> tags can only contain inline elements. <div>'s are block level elements. Note that it is up to each browser on how they handle such situations. While Chrome may fix the content or render it in the method you desire, it's entirely possible Firefox and IE would view it as completely invalid and fail to render some or all of the markup (or strip the div tags out and leave the content intact).
See this question for further reference: Is putting a div inside an anchor ever correct?.
Reference: HTML 4.01 Specification
You shouldn't use the `content' property to display images like that. It's intended for use with pseudo-elements.
If those divs need bg images use the background-image property.
div.image {
overflow: hidden;
background-image::url("logo2fix.png");
position:absolute;
right:1%;
bottom:3%;
height:40%;
width:35%;
}
div.slo {
background-image::url("slo.png");
position:absolute;
width:5%;
bottom:10%;
right:21%;
}
div.eng {
background-image:url("eng.png");
position:absolute;
width:5%;
right:12%;
bottom:10%
}
Hello expert i am trying to build a welcome page like facebook. I want a header with different color with fixed width with browser just like facebook welcome page. I have created a div id with 100 width. But the width is not fitting with the browser. it showing in the body. Please tell me how to do this. I am absolutely new in all of this.
Index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="welcome.css"/>
<title>Welcome To The Thinkers</title>
</head>
<body>
<div class="header"><h1>Welcome To Thinkers</h1></div>
</body>
</html>
CSS
body{
background-color:yellow;
width:100%;
}
p{
font-size:23px;
color:#930
}
.header{width:100%;
height:72px;
background-color:green;
}
If I understand you correctly I think your problem is with default margin/padding on certain elements.
If you add
body, h1
{
margin:0;
padding:0;
}
It should sort that out.
Demo
Try this code:
//these code is for fixed header
.header{
position: fixed;
top: 0;
left:0;
width: 100%;
background-color: #0683c9;
}
Let me preface this question with the warning that I'm a self-taught (amateur) web developer (and not a very good one). I've been trying for a long time to find an effective way of centering web pages using AP Divs. I've tried setting "margin: 0 auto;" and I've tried setting "margin-left: auto;". Both work for that one div. But I then have to use that as a wrapper to design within, so when I put more divs inside that, they don't center.
I may be completely approaching this wrong; if so, please correct me. Code (not working) for a basic version of what I want to do is below. If you run that code, if I were to place, say, an image in apDiv1, it would scale to the page size fine; but the text in apDiv2 does not.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Page</title>
<style type="text/css">
#apDiv1 {
margin: 0 auto;
width:600px;
}
#apDiv2 {
position:absolute;
width:50px;
height:24px;
z-index:1;
left: 47px;
top: 29px;
}
</style>
</head>
<body>
<div id="apDiv1">
<div id="apDiv2">Hello</div>
</div>
</body>
</html>
I can center a div inside another div just fine using margin-left:auto; and margin-right:auto;:
Working example: http://jsfiddle.net/xjKhT/
In my own opinion, it is not good to use appdivs(coz it depends on how you positioned it on the design). You can do it(centering stuffs) on your own, check this:
Centering(Simple Sample)
<style>
#header {
margin:auto;
width:600px;
background:#000;
padding:5px;
}
#title {
width:50px;
margin:auto;
background:#CCC;
padding:5px;
}
</style>
<div id="header">
<div id="title">Hello World</div>
</div>
Custom AppDivs adds extra styles which is not really necessary:)
Updated example
Ok after some guessing and poking I think you mean that you want to absolutely position the elements inside the center-aligned wrapper.
position: absolute will be absolute to the page UNLESS the parent has position: relative.
#apDiv1 {
margin: 0 auto;
width:600px;
position:relative;
}
I'm not so good at CSS design, but I'm just working on a content display layout for a website.
I basically wanna make a thin line by putting an image inside a container div. and set all dimension properties as below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style>
#thinLineWrap{
width: 510px;
height: 3px;
background-color: #000000;
}
#thinLineWrap img{
width: 170px;
height: 3px;
background-color: #000000;
margin-top: 0px;
float:left
}
</style>
</head>
<body>
<div id="thinLineWrap">
<img src="images/thin_line.gif" border="0">
</div>
</body>
</html>
But when viewing the output in Chrome inspect, the output result couldn't seem to have the specified sizes as expected, as illustrated in the snapshot below.
You might also notice that my image width and height became 171px and 4px respectively, unlike what it was set in the stylesheet section.
Any possible mistake I might have done? Why did the image element become 1 pixel bigger than it should be?
any advice would be very appreciated.
EDIT:
A copy of the original problematic thin line image is here. Not sure if there could be anything wrong with the image itself.
https://lh5.googleusercontent.com/-kDRsR493dZU/UMOXRBbty9I/AAAAAAAAAh8/g58GnqQZ3pk/s128/thin_line.gif
You defined an Img within the #thinlinewrap to have the properties.
div#thinLineWrap{
border:0px;
}
#thinlineWrap img{
height:3px;
}
Might be the code you are looking for.
i found it out.you'r img inherited it's border from another style ,try overriding it like this :
#thinLineWrap img{
border:none;
width: 170px;
height: 3px;
background-color: #000000;
margin-top: 0px;
float:left
}
I realise this question has been asked many times but i am going crazy trying to figure it out.
I am quite new to html and want to built a static header (940px x 30px) containing our logo, navbar, and a few social networking icons.
What i'm struggling to do is make the header fit the entire page, it leaves part of my background on show on the left, top and right sides which is frustrating.
below is the code i have used.
HTML Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>TWChome</title>
</head>
<body>
<div id="header">
<div id="headercontents">
Hello
</div>
</div>
</body>
</html>
CSS Code
#charset "utf-8";
/* CSS Document */
body {
background-image:url(../images/bg.jpg);
}
div#header {
display:block;
width:auto;
height:auto;
background-image:url(../images/bar.jpg);
}
div#headercontents {
width:50%;
}
Try this:
body{margin:0;padding:0}
it is actualy not that hard:
#header {
width: 940px;
height: 30px;
margin: 0 auto;
}
First you set the dimensions you say you want it to have, and then you center it. Nothing more to it. Also I have no idea why you are setting the #header-contents to a width of 50%...
update for header with background image:
#header {
height: 30px;
background: url(../images/bar.jpg) no-repeat center center; /* for a single image with height of approx 30px */
background: url(../images/bar.jpg) repeat; /* alternative for a tile you want to repeat */
}
#headercontents {
width: 940px;
margin: 0 auto;
}
and indeed always apply some reset css as stated by others.