I wrote two years ago a design: the goal was to fit in a 1024px screen, but have a bit of extra graphical content so that it doesn't appear to be too small on larger screens. The result is http://megaglest.org/, the website of an open source project.
Here's the HTML: I don't want to use an img tag since it will enable me to work on a responsive design where such images won't be loaded:
<div id='all'>
<div id="header">
<div id="header_left"></div>
</div>
</div>
Here's the corresponding CSS:
#all {
width: 1016px;
margin: 0 auto;
}
#header {
height: 313px;
background-color: #4dd;
}
#header_left {
float: left;
width: 140px;
margin-left: -140px;
height: 379px;
/* works fine */
/* background: #dd4; */
/* there's a one pixel offet */
background:
url("http://megaglest.org/uploads/megaglest2011/header/left.jpg")
no-repeat;
}
Only on Google Chrome (22.0.1229.94 on Linux), and only at certain window sizes (when only part of #header_left is visible), I get an offset one pixel between the image and the blue header. It's possible to see using this jsFiddle when the "result pane" is very wide: http://jsfiddle.net/hTbJA/
Here's a screenshot of the issue. What's weird is that the Google Chrome developer tools say in "metrics" that the div is 140px wide, but then when I use the "Elements" pane and hover #header_left, it says 141px! Could it be a browser bug?
Thanks.
The issue is being caused by the fact that you have your #header_left object and your #header_right object pushing out past the edges of the center line with negative margin - but the center piece having a horizontal margin set to auto.
What's happening is that when the body is an even number of pixels wide - auto makes the #header, which is 1016px wide, center with an even number of pixels on either side, due to the margin: 0 auto; (example: if body is 1200px wide, there are 184px available, so the browser allocates 92px on the left, and 92px on the right. Your #header_left, then, gets a margin-left: -140px; rule - which puts it 140px to the left of the left-edge of the #header, and it lines up pixel-perfect.
When the body is an odd number of pixels wide, however, say 1199px - and the margin: 0 auto; kicks in, a partial pixel is allocated (in this case yielding only 91.5px per side). Because an object can't be drawn in half a pixel - the browser rounds up for the actual location at which to start rendering #header - and the left-edge is calculated at 91.5px. When your margin then goes -140px on the #header_left element, you wind up on another odd pixel - but this time, the calculation rounds down. (The internal math is probably calculated by first rounding - then subtracting).
This gives you the appearance of 1 pixel off...
The fix - in your scenario - is to change your #header_left's margin-left CSS rule to -139px instead of 140px - and allow a slight overlap. I've tested it with your actual site - and it looks fine and blends nicely.
So - in answer to your question - no - this is not a bug, per-se - it just means that the developer tools and the elements pane calculate differently. One of them rounds up and one rounds down when dealing with partial pixels. Or perhaps one is measuring what is actually rendered effectively on the screen, and the other measures what the CSS rules are indicating.
Related
I have a page and I want to eliminate the scenario where it scrolls left to right. No matter what resolution I view it on, it leaves about 70px of white-space on the right. On the page http://bitfilmfund.com/ I have set
for the city image background part, I have already set the body to be:
#baner {
min-width: 100%;
float: left;
background: url(../images/city-backgound.jpg);
margin-top: 0px;
}
html {
margin: 0px;
min-height: 100%;
min-width: 100%;
}
body {
margin: 0px;
min-height: 100%;
min-width: 100%;
}
I also did a media query where I defined the CSS to resize the image based on a max-width of the viewport, such as:
#media (max-width: 1600px) {
#baner {width: 100%;
}
}
to get the city scape image to stretch the screen, and tried smaller sizes too for smaller res's, but it just does not work.
There is consistently a patch of white space at the right. Even if I set the CSS width's to be as high (high number for width, that is) as they can be until the screen is filled, I still have the left-right scroll. I want the images and background to resize to fill the screen and create no need for left-right scroll. Why don't this CSS works?
Quick Fix:
The first <div> with class='row' is causing the page to scroll horizontally; more specifically:
margin-left: -15px;
margin-right: -15px;
will cause this unwanted whitespace and horizontal scrollbar.
Additionally, the margin on the <body> should be set as:
margin: 0px;
in order to avoid some browsers (Chrome, for example) applying the 'default' margin that they like to apply.
Longer (surplus) fix:
Whilst the container elements on the page are re-sizing dynamically, a fair amount of the content is not. (Including the banner image as mentioned and the iframe containing the video.) The user's viewport size should be taken into consideration, in that when viewed from a smaller ~<1675px width the top navigation bar refuses to resize down and instead creates the horizontal scrolling issue. These problems can be fixed by using percentages rather than px, as I am sure you are well aware, (considering the usage of percentages on container elements).
Obviously, the screen size cannot resize down indefinitely - a limit has to be drawn somewhere. According to W3Schools, most browsers are now above the 1024x768px as a minimum, even Google doesn't resize down to this level however. It's up to you to choose where the minimum size lies for your website; but the more all-encompassing, the better.
Banner image:
This should be a fairly straightforward part, the following CSS properties should be of use to you, when added with the CSS that defines the image to be displayed:
background-size: 100%;
background: //your-image-location// no-repeat;
This will however, become stretched or compressed depending on the browser size, but is a good starting point for resolving the issue.
I've started to create a new homepage and I realized that my old methods of creating said webpage were outdated. While learning about positioning divs in css I stumbled upon a problem I really find hard to crack.
On my webpage I want to have a picture div next to a text div, I want this text div to be a minimum of 500px, but I don't want it to stretch unless the screen is wide enough to show both the picture and the text(I got this working). The problem I get is when I want to make the screen smaller, I want the text div to decrease in width until it hits 500px, if the user then shrinks the screen more the text should then, and only then overlap the picture.
Here is an example of something similar.
http://jsfiddle.net/mnSGZ/1/
The problem is when shrinking it, I don't want the horizontal scroll to appear until the black square is covering the whole gray squares width.
I understand that 'margin-left: 200px;' prevents exactly this but is there some sort of max-margin to make this work?
code from jsfiddle:
#container {
background-color: gray;
margin: 20px;
min-width: 700px;
height: 300px;
}
#nav {
background-color: black;
margin-left: 200px;
height: 50px;
}
Use CSS3 Media Queries to style elements based on screen resolution. This link may help you:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Isolated test case (view in IE 7 or IE 8/9 in IE 7 mode)
Viewing this page in IE 7 is causing my width value to be ignored. If you remove the padding value, the width is properly applied, but when you add in the padding, it causes the entire page to grow, and it treats the padding almost as margin. The larger the width of the page, the larger the blank area to the right of the element. I've been unable to find which bug this is, and, more importantly, how to fix it. Has anyone seen this and does anyone know a solution?
Things I've tried so far:
zoom fix
display: inline-block (recommended for double vertical padding issue)
It isn't line-height (it's a width issue...)
Screenshot of the issue:
This div should span the entire width of the page, and no more, but you'll notice the scrollbar here:
And the result of scrolling to the right:
This should not be there.
Examining the element in the browser tools shows the width to be incorrectly the full width of the page, instead of the full width minus the padding.
Disclaimer: I'll ignore the functional requirement and your comments on the other answers and just concentrate on the concrete problem.
This IE7 specific problem is caused by using an offset (e.g. top, right, bottom or left) on a relatively positioned element. If you offsets a relatively positioned element, then it will basically still retain the whole space of its original position. Note that this doesn't happen when offsetting absolutely positioned element.
Before the left offset is been applied, the relatively positioned element is due to its width and and the right padding completely out of the viewport and hence a horizontal scollbar will be generated. After the left offset is applied on the relatively positioned element, you're basically leaving a space of the same size as the offset on the other side of the offset, still outside the viewport.
A bit sane webbrowser will during redrawing however discover that there's nothing visible outside the viewport and hence hide the scrollbar again. IE7, however, isn't that smart enough and retains the scrollbar.
After all, using left offset was technically been the wrong solution. You should in first place have used margin-left instead of left. Unlike the offset, the margin doesn't leave an empty space on the original position, but really pushes the whole element to the desired position.
So, here's how your script is been fixed:
$('#el').css({
'width': document.body.scrollWidth - 200,
'padding-right': 200,
'margin-left': (-1 * (document.body.scrollWidth - 322) / 2) - 1
});
By the way, I wonder how that float: left; makes sense in this construct wherein you apparently want to simulate a 100% width. It'll probably be for other purposes not visible in the concrete example.
You can solve this without using javascript for calculating width, and no padding, instead use position: absolute. Here's an updated fiddle. It will work in any browser
#el {
background-color: #FFFF00;
min-height: 45px;
width: 100%;
position: absolute;
left:0;
right: 0;
top: 0;
}
http://jsfiddle.net/LRpHq/7/
I was having this problem with a skeleton.css implementation. Specifically, my #header was taking the width of body, which took the width of html. The remaining content had a set-width of 978px. So when the window was smaller than 978, the background of the header would only render to the width of the viewport. i.e. - if you started the render at 500 wide, that's all the wider #header would get. Dragging a wider width of the viewport had no problems, but right scroll cut the header to the size of initial viewport.
My fix: html,body { min-width:978px } /* your width may vary */
Since you seem to be fine with using Javascript, adjust your resize() function:
function resize () {
$('#el').css({'width':$(window).width(),'position':'absolute','left':'0px'});
}
Fixed the original post as it was off by miles.
edit:
Tested in a sandboxed IE7 and it works. (what can i say, i go out of my way to get something perfect, also am new around here so that bounty would really help to be very honest) to also note that it works natively in IE7, IE8 and IE9, FF3.6, Opera 10 and should work in Safari with no problem, Chrome didn't get mentioned as it's my default browser and it works, no doubt about it.
Here is the JS:
function resize () {
$('#el').trigger('resize').width('100%');
}
resize();
and the CSS:
#container {
width: 320px;
border: 1px solid #000000;
min-height: 500px;
margin: 0px auto;
}
#el {
background-color: #FFFF00;
min-height: 45px;
width: 100%;
position: absolute;
left: 0;
}
i found solution for similar problem here. see if it can helps you too.
I have two css columns for my website they fit inside a main container, with a width of 75% that is centered. I want the right container to be at least 300px wide but to expand if there is room in the browser (my advertisement is 300px wide) and the left one to fill the rest of the space plus some space between them. This is the CSS I have so far,
#body_container{
margin: 200px auto 0 auto;
width:75%;
}
#left_container{
float: left;
width: 63%;
padding:5px;
margin-right:15px;
}
#right_container{
float:left;
width: 32%;
padding:5px;
margin-right:15px;
}
It is kind of working, but on smaller browsers (mine is quite wide so I just noticed this when viewing it on a smaller monitor) the right column is pushed down below the left one :/ anyone have any ideas? thanks in advance. also if you need to see more source code it is at http://sunnahspace.com but here is a forewarning, it is not viewable in IE at all.
It's expected behavior - you're using fixed-size margins and paddings, which means that at a certain point, the total 50px of padding and margin from your two columns will be greater than the 5% of width that your columns don't take up, and will bump into each other. Unfortunately, there's not much that can be done besides specifying a min-width, or using CSS media queries.
I have a problem with my website and how it appears in some browsers:
http://www.karentiede.com
In Firefox 2.0 and many other browsers, the "content" column overflows to the left and appears on top of the decorative border, making some of the content unreadable.
One Q&A in here suggested that making all the pages HTML 4.01 Strict DOCTYPE might help make all browsers work the same, but that question was the reverse-worked in Firefox and didn't work in IE. Is there another/different fix I should try?
From the CSS:
.column2 {
float: right;
width: 80%;
}
From any of the pages that act up:
<body id="schedule_toc">
<div id="col1_schedule_toc">
<div class="column2">
When I check the site in http://www.browsershots.org, it looks bad on initial display in a lot of the browsers. I've had one or three (probably Firefox) readers tell me they couldn't see the text and I suspect they were probably more sophisticated users than I am a CSS-writer.
I took a look at the page and the problem only appears when you re-size the page.
The problem is your right div is 80% so when the screen becomes smaller and ratios change and that 80% then overlaps into your left background.
Take a look at http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/ to see how to set up a "static-fluid" layout.
The reason why this is happening, it seems, is because the image (floated left) isn't the height of the entire page. So, when the page isn't wide enough to accommodate both the image and the text next to each other, the text breaks to the next available whitespace.
Try floating both elements to the left, and apply a left-margin equal to the width of the "decorative" column to column2 as such:
.column1 { float: left; width: 125px; }
.column2 { float: left; margin-left: 125px; }
.clear { clear: both; }
You'll need a clearing div below both elements:
<div class="column1">...</div>
<div class="column2">...</div>
<div class="clear"></div>
The problem is definitely ratios, as pointed out by savageguy. If what you are wanting is a fixed-width left column with a variable width right (main) column then you could use this (not tested but should work):
#col1_schedule_toc {
width: 175px;
float: left;
}
.column2 {
float: right;
width: 100%;
}
EDIT: Incidentally, I noticed that (at least on the page I looked at) you also aren't closing the left column before you open the right, so technically the right column is inside the left, which will cause issues with my suggested fix. So you also need to move the closing div for col 1 so that it's above the opening div for col 2.
EDIT 2: Plus, as pointed out by Plan B, you'll also need a clearing div beneath both elements to prevent the parent (container) div from collapsing:
div.clear {
clear: both;
font-size: 1px;
line-height: 1px;
overflow: hidden;
}
In addition to savageguy's right-on-point advice, the image you have in the page (your picture, etc.) to the left is a fixed width. This is why, when the browser is re-sized, that 80% suddenly becomes too wide.
On column2, setting a left margin of the width of the image + the amount of separation you want (for example, 160 should work, but you can play with it), then making the width of the column2 100% (of the remaining width) should prevent your overlap.
[Edit: Plan B also offers a very robust solution.)