I have reduced the code for a site template down to this very basic page. Even in this basic state a small amount of side scroll is apparent when viewing on a mobile browser. This is tested on Samsung, default browser and Chrome.
It's not so much an issue on this demo but on the full template this side scroll adds a strip of blank page to the right hand side where the scroll bar is (underneath the scroll bar).
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
*{
margin: 0px;
padding: 0px;
}
#header{
width:992px;
margin:0 auto;
background-color:#000000;
height:90px;
}
</style>
</head>
<body>
<div id="header">
</div>
</body>
</html>
I want to eliminate the side scroll and have the page fit the screen exactly. As the site is fixed width and centred the width and margin CSS rules must stay.
Try to use overflow:hidden on the element that has the scroll if you want to hide that extra space that appears on mobile devices.
Related
META: I asked this question over at Webmasters Stack Exchange, but they booted it, and told me to ask here. Apparently Webmasters only ever want to talk about SEO.
Original Post:
I am having a VERY strange issue with Chrome on the Mac.
I have this page: https://heartoflongislandna.org/cleantime/
It's a simple JS app that takes a date, calculates a time difference, then displays a bunch of mortised transparent PNG images that display awarded keytags. These overlap each other in two layouts:
Vertical, where one is laid over another in a vertical "chain," and
Horizontal, where they are placed side by side, but overlapping, like a spread out deck of cards.
What is happening, is that the layouts display (and print) fine in Safari and FF, but in Chrome, the print screws up. The screen display is fine, and looking at it with the device pane set to print also shows them fine.
There is also a small PNG image that is added to some of the images to close the ring at the top. That is added as a top, center background image.
The vertical layout is a bit better than the horizontal, in that the background transparency is honored, but the background image is lost (top keytag).
The horizontal layout is a mess. The background image is not displayed, and the background transparency is not honored.
I will add that examining this with Chrome's device view panel set to "Print" does not show a problem. It looks great. The print preview shows the issue, and opening the image in Preview also shows the problem, which is in the renderer.
*UPDATE 2: This is now available as a fiddle, here: http://jsbin.com/kakirinife/edit?html,output
The (Fiddle) HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS Issue Demo</title>
<style type="text/css">
/** This is the container for the keytag display. */
.NACC-Keytags {
margin-top: 122px;
display: table;
margin-left: auto;
margin-right: auto;
background-color: transparent;
}
/** This allows us to compensate for the automatic offset of the tags. */
.NACC-Keytag-Tabular {
margin-top: 82px;
padding-right: 50px;
text-align:left;
}
/** This describes a keytag image layout. */
.NACC-Keytag {
width: 100px;
max-width:100px;
overflow: visible;
margin-top:-122px;
display: block;
margin-left: auto;
margin-right:auto;
background-color: transparent;
}
/** If we are displaying a closed ring, then we add an image to the background. */
.NACC-Keytag.NACC-Keytag-Ringtop {
background-image: url('https://i.stack.imgur.com/QcEYN.png');
background-position: center top;
background-size: 100%;
background-repeat: no-repeat;
background-attachment: local;
}
/** We display inline-block, so we get a flow that will wrap. */
.NACC-Keytag-Tabular .NACC-Keytag {
display: inline-block;
margin-top:-82px;
margin-right:-50px;
}
</style>
</head>
<body>
<div class="NACC-Results">
<div class="NACC-Keytags NACC-Keytag-Tabular">
<img class="NACC-Keytag NACC-Keytag-Ringtop NACC-White-Tag" src="https://i.stack.imgur.com/AVIug.png">
<img class="NACC-Keytag NACC-Keytag-Ringtop" src="https://i.stack.imgur.com/j11kj.png">
</div>
</div>
<div class="NACC-Results">
<div class="NACC-Keytags">
<img class="NACC-Keytag NACC-Keytag-Ringtop NACC-White-Tag" src="https://i.stack.imgur.com/AVIug.png">
<img class="NACC-Keytag" src="https://i.stack.imgur.com/j11kj.png">
</div>
</div>
</body>
</html>
</body>
The Images:
UPDATE: I determined that this is likely a Chrome bug, and I reported it, but I am still looking for a CSS fix that I can apply. Chrome is a popular browser.
I will add images that show what happens.
First, this is the vertical format on the screen:
Next, here is the horizontal image on the screen:
Now, here are both of them as printed:
Just for posterity: Chrome has since fixed this bug.
I am beginner in HTML/CSS and I come to one issue that is strange to me. Can't remember that I had this problem when started to learn. Nevertheless, the problem is that I can't scroll when I resize my browser window. Her is the code:
<!DOCTYPE html>
<html>
<head>
<body>
<img id="pic" src="http://0.tqn.com/f/lg/a154.png"/>
<style>
#pic {
position: fixed;
left: 1060px;
top: 150px;
right: 300px;
bottom: 658px;
}
</style>
</body>
</head>
</html>
I put position of picture on left and right because that is the only way that I know to fix image on one specific position. I tried auto, but the picture moves when I resize browser.
Thank you for your time and effort
Ok, the issue I think you have is that when you position an element absolute, it removes it from the flow of the document.
So think of it as if the absolute element is removed from the body of the page.
The body of a page is always 100% width of the browser. Your image is being positioned outside of the browsers view port.
you have two options. either do not user absolute positioning and use a css layout to get it the image in the proper place.
or you can set the width of the browser to the width that you need it to be e.g. 1200px
the first option is better for modern days and doing more future facing sites.
I have created a responsive site with Twitter Bootstrap, however when I view the site in a screen resolution of 320x480 a horizontal scroll bar appears as the website seems to have an extra 20px-30px width. You can see this by scrolling too the right horizontally.
I have inspected the elements that form the page, however I can not work out what is causing this extra width - ideally I do not want any horizontal scrolling at the 320x480 resolution.
You can view the problem by changing the resolution to 320x480 in Google Chrome after inspecting an element.
Here is the site:
http://www.bestcastleintown.co.uk/wp/
It's the .jumbotron and .footer css rule margin-right: -20px; causing the problem.
Did you enabled the Bootstrap's responsive features?
http://twitter.github.com/bootstrap/scaffolding.html#responsive
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
Please note that bootstrap-responsive.css must be included and referenced on your website
Hope this helps.
You could try resetting lateral margins from -20px to 0 for header and footer tags
try this:
.footer{
width: 85%;
margin: 0 auto;
/* other css properties */
}
The picture you see bellow is a zoomed screenshot of a website. The line you see is about 1,000px wide. And if you zoom, the size of de website changes, except the size of the line. So the line is keeping his width and pushing the website out of proportion.
Is there a way I can style this line (it has a div around him) in a way it won't be pushing the content of my website?
So either way I'm looking for a way to make the width of my image variable (but I guess you can only do this using JS) or I look for a way to make this line immune to the zooming so it won't be pushing my website's content...
If their is anything unclear, please say so, I'll try again. I know it's not easy to get a hold on this specific case :)
To ignore the window just do a div#wrap with fixed width and position relative, now all childs will be relative of #wrap, then you can resize the window and all divs will be relative of #wrap, to center #wrap just set margin: 0 auto;
<style type="text/css" media="screen">
#wrap {
width: 960px;
position: relative; /* here is the magic */
/* overflow: hidden */ /* enable here if you ilke "crop" on width */
}
</style>
<div id="wrap">
<!-- YOUR CODE HERE -->
</div>
I have a slideshow built using the jbgallery script that I am trying to incorporate into a page on my site. The images in the slideshow have a width and height of 100%. I have a navigation bar at the bottom of the page with a height of 90 pixels.
My code is:
<style type="text/css">
body{ height:100%;
background-color:#444;
margin: 0;}
div.fullscreenslideshow{
display:block;
position:absolute;
top:0;
left:0;
padding-bottom:90px;
width:100%;
height:100%;
background-color:#000;
}
</style>
</head>
<body>
<div class="fullscreenslideshow">
<iframe src="slideshow.html" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>
</div>
</body>
While this looked to have the desired effect it is producing a scroll bar on the page (as the 90 pixel padding is stretching the page beyond the 100% height it has been set to).
Basically, how to I adjust the css to ensure I get the slideshow in the page with a 90 pixel space beneath it, and without cropping the image (by setting the height to 90% for example on the fullscreenslideshow div css) or producing an overflow?
Been playing around with this for hours now and think I have hit the wall hence the request for help! Out of interest, when I adjusted the padding-bottom to margin-bottom there was no effect on the page.
Thanks for any help in advance,
JD
Since your div is already position:absolute; you can simply set bottom:90px to cause the div to simulate a margin-bottom:
div.fullscreenslideshow{
bottom:90px;
}
Why don't you just add a negative margin to the bottom of the container that needs to shrink, so there's no need for javascript?
margin-top: -90px;
edit: I got something
First, add this to your div.fullscreenslideshow
margin-top: -90px
Now, go the page slideshow.html and add this:
margin-top: 90px
To:
div.jbg-loading
.jbgallery .jbg-wrap
.jbgs-wrapper (you will have to add this one to the css yourself, it doesn't exist yet
I got it to work on my computer (compared it to the other link, and it shows exactly the same).
If you can use JQuery you can use this code:
$("div.fullscreenslideshow").css(height: (parseInt($(window).height()) - 90));
run this after load your page complete. And have good time.