3 replies [Last post]
Paddy
Paddy's picture
Offline
newbie
Last seen: 8 years 25 weeks ago
Timezone: GMT+9
Joined: 2011-07-07
Posts: 2
Points: 5

Hi All

Many thanks for reading in advance!

I have a page with three columns in a fluid layout. To do it, I split the backgrounds from the content.
I created a div with only a white background which serves as the first "layer". Inside that div I placed another with just a green background and width 100% (The second "layer") and used "right: 74%" to move it to the left. I did the same with a third nested div to create the red sidebar.

Then 2 content divs are inside the red background div- each one has a background image, used to create the rounded corner effect. I used "left:" to move the content divs back to where they would have been if their parent divs had not been moved, using the exact opposite % values that were applied to move the parent divs.

The layout works great in Firefox, but in Chrome Opera and IE, at certain window sizes the content divs are mis-aligning by one pixel and so the corner images are out of place.

Does anyone know of a fix for this?

http://www.gevodp.com/general-information-homepage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>">
<head>
  <meta name="generator" content=
  "HTML Tidy for Linux/x86 (vers 11 February 2007), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>" />
  <style type="text/css">
 
body {
height:100%;
background:#CCC;
margin:0;
padding:0;
}
 
/* -------- content area (White- bottom "layer") ---------*/
 
#contentOuter {
float:left;
width:100%;
background:#FFF;
position:relative;
overflow:hidden;
padding:0;
}
 
#contentInner {
float:left;
position:relative;
left:78%;
width:65%;
overflow:hidden;
background:url(<a href="http://www.gevodp.com/templates/gevodp_gencontent/images/main_content_corner.jpg" rel="nofollow">http://www.gevodp.com/templates/gevodp_gencontent/images/main_content_corner.jpg</a>) no-repeat left top;
padding-top:20%;
}
 
/* -------- gap between columns (Green- second "layer") ---------*/
 
#columnGap {
background:#dde516 url(../images/column_gap.jpg) repeat-x left top;
float:left;
position:relative;
width:100%;
right:74%;
}
 
/* -------- left sidebar (Red- second "layer") ---------*/
 
#sideMenuOuter {
background:url(<a href="http://www.gevodp.com/templates/gevodp_gencontent/images/red_menu.jpg" rel="nofollow">http://www.gevodp.com/templates/gevodp_gencontent/images/red_menu.jpg</a>) repeat-x left top;
width:100%;
float:left;
position:relative;
right:2%;
padding:0;
}
 
#sideMenuInner {
background:url(<a href="http://www.gevodp.com/templates/gevodp_gencontent/images/red_menu_corner.jpg" rel="nofollow">http://www.gevodp.com/templates/gevodp_gencontent/images/red_menu_corner.jpg</a>) no-repeat right top;
width:24%;
float:left;
position:relative;
left:76%;
overflow:hidden;
padding-top:20%;
}
 
  </style>
 
  <title></title>
</head>
 
<body>
  <div id="contentOuter">
    <div id="columnGap">
      <div id="sideMenuOuter">
        <div id="sideMenuInner">
          Sidebar
        </div>
 
        <div id="contentInner">
          Main Content
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 1 week 3 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2042
Points: 2267

I think you need to do away

I think you need to do away with the relative positioning and rethink using percentages with your widths. Looks like it's trying to halve an odd number in some cases, depending on the screen width. The browser has to decide whether to round up or down and it's causing the 1px difference.

Paddy
Paddy's picture
Offline
newbie
Last seen: 8 years 25 weeks ago
Timezone: GMT+9
Joined: 2011-07-07
Posts: 2
Points: 5

Makes sense- I'll probably

Makes sense- I'll probably just do away with the rounded corners.
Thanks

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 1 week 3 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2042
Points: 2267

Paddy wrote: Makes sense-

Paddy wrote:

Makes sense- I'll probably just do away with the rounded corners.
Thanks

That may not be necessary but it may be easier. If you decide to go with the rounded corners there are many ways to go about it.