Page 1 of 1
[SOLVED] Chrome, Opera & Safari leave 1px of space
Posted: Sat Nov 06, 2010 5:11 am
by frankmanl
I'm building a new design but encounter a problem.
Chrome, Opera & Safari leave 1px of space to the left side of #right.
Firefox and Internet Explorer 8 are alright.
How can I get rid of this space?
I tried setting margins in several combinations, but nothing worked.
Frank
Re: Chrome, Opera & Safari leave 1px of space
Posted: Sat Nov 06, 2010 6:35 am
by Wishbone
http://css-tricks.com/percentage-bugs-in-webkit/
On my screen, #container is 804px. When I add up the widths of #left, #middle and #right, I get 803px, leaving the 1px gap. It's due to Webkit-based browsers rounding up or down when doing percentages. Of course you cant create a 1/2 pixel on screen, but the other browsers seem to understand your intent and add or subtract a pixel so that there is no gap.
I don't see a solution for this anywhere. Is there a CSS Doctor in the house?
Re: Chrome, Opera & Safari leave 1px of space
Posted: Sat Nov 06, 2010 8:46 am
by Dr.CSS
Most sites aren't built with those types of colors in each block where they will touch each other so close, you will find most have some kind of white space, and it helps for these kinds of situations...
You may find if you want to do this with the colors in the background you will have to do a different size on the outer most container to pick up or remove that 1px...
Re: Chrome, Opera & Safari leave 1px of space
Posted: Sat Nov 06, 2010 10:56 am
by frankmanl
Oh, I'm most definitly not going to use those colors.
In fact the whole content will have a white background, but I'd like to make it perfect. If that's not possible, than I'll accept that one pixel.
Re: [SOLVED] Chrome, Opera & Safari leave 1px of space
Posted: Sat Nov 06, 2010 12:56 pm
by spcherub
@frankmani - I was able to lay this out a little differently (same end result, different div hierarchy) that did not trigger the Webkit bug. (I used static heights to do a quick mockup)
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<__html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Blank</title>
<link rel="stylesheet" type="text/css" href="URL" />
<style type="text/css">
.clear {clear:both;}
#container {width:80%;background-color:#4e5869;margin:0 auto;}
#sub_container1 {float:left;width:78%;}
#right {float:left;width:22%;background-color:#93a5c4;height:300px;}
#header {background-color:#6f7d94;}
#header h1 {padding:0;margin:0;}
#menu {width:25%;float:left;background-color:#8090ab;height:300px;}
#miniinfo {width:25%;float:left;background-color:#93a5c4;height:400px;}
#middle {width:50%;float:left;background-color:#0000ff;height:600px;}
#footer {height:50px;background-color:#ff3333;}
</style>
</head>
</__body>
<div id="container">
<div id="sub_container1">
<div id="header">
<h1>Header</h1>
</div>
<div id="menu"></div>
<div id="miniinfo"></div>
<div id="middle"></div>
<div class="clear"></div>
</div>
<div id="right">
</div>
<div class="clear"></div>
<div id="footer"></div>
</div>
<__body>
</__html>
Re: [SOLVED] Chrome, Opera & Safari leave 1px of space
Posted: Sat Nov 06, 2010 1:01 pm
by uniqu3
spcherub wrote:
@frankmani - I was able to lay this out a little differently (same end result, different div hierarchy) that did not trigger the Webkit bug. (I used static heights to do a quick mockup)
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<__html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Blank</title>
<link rel="stylesheet" type="text/css" href="URL" />
<style type="text/css">
.clear {clear:both;}
#container {width:80%;background-color:#4e5869;margin:0 auto;}
#sub_container1 {float:left;width:78%;}
#right {float:left;width:22%;background-color:#93a5c4;height:300px;}
#header {background-color:#6f7d94;}
#header h1 {padding:0;margin:0;}
#menu {width:25%;float:left;background-color:#8090ab;height:300px;}
#miniinfo {width:25%;float:left;background-color:#93a5c4;height:400px;}
#middle {width:50%;float:left;background-color:#0000ff;height:600px;}
#footer {height:50px;background-color:#ff3333;}
</style>
</head>
</__body>
<div id="container">
<div id="sub_container1">
<div id="header">
<h1>Header</h1>
</div>
<div id="menu"></div>
<div id="miniinfo"></div>
<div id="middle"></div>
<div class="clear"></div>
</div>
<div id="right">
</div>
<div class="clear"></div>
<div id="footer"></div>
</div>
<__body>
</__html>
@spcherub actually i was fooling around with this to, used same structure as you, but if you take a closer look you will see small 1px gap between #middle and #right and also between #right and #container.
Gap between #middle and #right can be fixed with margin-right:-1px; in #sub-container1 but you will still have a gap between #right and #container.
Re: [SOLVED] Chrome, Opera & Safari leave 1px of space
Posted: Sat Nov 06, 2010 6:25 pm
by Dr.CSS