PHP Developers Network

by **pickle** » Thu Sep 27, 2007 4:28 pm

Hi all,

I'm doing a simple 6 div layout for a new app I'm building. It's got 3 divs along the top, and 3 divs for the main body. Everything validates fine & looks perfectly fine in FF. Most of the time it looks fine in IE7 as well. However, at certain particular resolutions a few of the divs, #header-right and #body-right in particular, get shoved around. I'm thinking it has to do with the float properties or perhaps a width problem (though, when I set the widths of the divs to < 100%, the problem persists).

Is this an IE7 bug or a user error? Any help/insight is appreciated.

The CSS & XHTML are posted below, and you can see an example page at https://webapp.augustana.ca/av/test.html

Syntax: [ Download ] [ Hide ]

html,body{ 

  padding:0;

  margin:0;

  height:100%;

}

#header-left{ 

  height:137px;

  float:left;

  width:10%;

  background-image:url(/av/images/left_header_loop.jpg);

  background-position:right;

  text-align:right;

}

#header-centre{ 

  height:137px;

  float:left;

  width:80%;

  background-image:url(/av/images/header_bg.jpg);

}

#header-right{ 

  height:137px;

  float:left;

  width:10%;

  background-image:url(/av/images/right_header_loop.jpg);

  background-position:left;

  text-align:left;

}

#body-left{ 

  height:285px;

  background-color:#fff;

  width:10%;

  float:left;

  background-image:url(/av/images/left_body_shadow.jpg);

  background-position:top right;

  background-repeat:no-repeat;

}

#body-centre{ 

  background-color:#fff;

  width:80%;

  float:left;

}

#content{ 

  padding:10px;

}

#body-right{ 

  height:285px;

  background-color:#fff;

  width:10%;

  float:left;

  background-image:url(/av/images/right_body_shadow.jpg);

  background-position:top left;

  background-repeat:no-repeat;

}

Syntax: [ Download ] [ Hide ]

<?xml version="1.0" encoding="utf-8"?>

<!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="en" lang="en">

  <head>

    <title>

      CSS test

    </title>

    <style type = "text/css">

        /* This is where the above CSS is placed */

    </style>

  </head>

  <body>

    <div id = "header-left">

      <img src = "/av/images/left_header_shadow.jpg" alt = "Left shadow"/>

    </div>

    <div id = "header-centre">

    </div>

    <div id = "header-right">

      <img src = "/av/images/right_header_shadow.jpg" alt = "Right shadow"/>

    </div>

    <div id = "body-left">

    </div>

    <div id = "body-centre">

      <div id = "content">

        This is the body

      </div>

    </div>

    <div id = "body-right">

    </div>

  </body>

</html>

by **JAB Creations** » Thu Sep 27, 2007 4:48 pm

A couple notes, first it would help to have background colors for reference. I don't have any clue what I'm looking at visually. Secondly why didn't you just stick the CSS inside of the XHTML to begin with? :roll:

I see what you're saying. I've changed my screen's resolution and I'm resizing IE7's window to various sizes and it's very inconsistent.

This is a legit bug and while your general formating is a little bit messy your CSS1 approach was fundamentally valid. Use conditional comments to adjust for the IE specific bug. Adjust the conditional comments to fix the layout issue according to the versions of IE that are afflicted.

Read more here...
http://msdn2.microsoft.com/en-us/library/ms537512.aspx

Syntax: [ Download ] [ Hide ]

<?xml version="1.0" encoding="utf-8"?>

<!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="en" lang="en">

<head>

<title>CSS test</title>

<style type="text/css">

* {

 border: 0px;

 padding: 0px;

 margin: 0px;

}

html,body {

 padding: 0;

 overflow: hidden;

 margin: 0;

}

#header_left {

 background: #f0f;

 float:left;

 width: 10%;

}

#header_centre {

background: #ff0;

 float:left;

 width: 80%;

}

#header_right {

background: #0ff;

 float:left;

 width:10%;

}

</style>

<!--[if IE]>

<style type="text/css">

#header_centre {

 width: 79.9%;

}

</style>

<![endif]-->

</head>

<body>

<div id="header_left">left</div>

<div id="header_centre">center</div>

<div id="header_right">right</div>

</body>

</html>

by **pickle** » Thu Sep 27, 2007 4:57 pm

JAB Creations wrote:why didn't you just stick the CSS inside of the XHTML to begin with?

Because inline CSS this extensive is ugly as sin & hard as hell to debug.

I instituted your change & that seems to have fixed the problem. Odd that when I set the width to 75%, it still had the problem, but not when I set it to 79.9%. Then again, when do bugs make sense?

Thanks for the help.

by **matthijs** » Fri Sep 28, 2007 1:49 am

It's just a rounding error which will - at some screen sizes - lead to a total width of >100%. And therefore messing up the floats. I'm sure IE6 has that problem as well sometimes.

For a layout like this I would most often use a slightly different approach. As you most often want some whitespace between the columns anyway, you might as well use widths not adding up to 100%. What I mean:

Syntax: [ Download ] [ Hide ]

.col1 { width:8%; float:left;margin-right:2%; }

.col2 { width:76%; float:left;margin-right:2%; }

.col3 { width:8%; float:left; margin:0; }

Or something like that. No need for hacks or conditional comments anymore.

More in general: many layout problems in IE have to do with pixel-precise fitting layouts. Making sure you have a bit of "margin" prevents a lot of trouble. Will save you a lot of debugging time. Often, you don't need any hacks or conditional feeded stylesheets anymore when you code like this. (often using background images for column divisions for example to make it look like a tight-fitting layout)

by **pickle** » Fri Sep 28, 2007 10:24 am

Thanks for the input ~matthijs. I remember now a bug involving a rounding error. Normally I have some whitespace on the edges so I don't run into this problem. This design, however, goes right to the edge. Take a look at the preview link I posted (though I can't guarantee it'll be working when you do - I'm continuing to work on the design).

Thanks again.

by **matthijs** » Fri Sep 28, 2007 10:46 am

Looking at your current preview (looking nice) you could also use one big image for the complete top background. Or 2 because you have a liquid layout. then place those 2 images in 2 wrappers. The first one could be the body, the second a div#wrapper. Say the first image is the left side, and is given to the body. the second is the right side and is given to the #wrapper.

Syntax: [ Download ] [ Hide ]

body {

background:url(bigleftside.gif) 0 10% no-repeat;

}

#wrapper {

background:url(bigrightside.gif) 0 90% no-repeat;

}

#content { 

margin ..

padding ..

}

Now you:
- have a bit cleaner html (only one "semantic" div)
- a bit more flexibility
- slightly faster loading times (less images)

by **pickle** » Fri Sep 28, 2007 10:52 am

I'm not quite sure I understand exactly what you mean.

by **matthijs** » Fri Sep 28, 2007 12:02 pm

What I mean is: as it is now you have your layout divided in 6 pieces:
headerleft, headercenter, headerright
contentleft, -centre, -right
Instead of those six you use 2 pieces, overlapping.

Syntax: [ Download ] [ Hide ]

<body>

<div id="wrapper">

<div id="content"><p>bla</p></div>

</div>

</body>

Ok, now you set the left side background image om the body. that's the complete left side (now headerleft and contentleft). You set this image at 10% of the left side.

Syntax: [ Download ] [ Hide ]

body {

background:url(bgbody.gif) 10% 0 no-repeat;

}

Then you set a second background image on the wrapper div. Remember, this wrapper div is also 100% wide (by default).

Syntax: [ Download ] [ Hide ]

#wrapper {

background:url(bgwrapper.gif) 90% 0 no-repeat;

}

The image from the wrapper is set on the right 10% of the window, overlapping the one from the body.

There are more ways to skin this cat, but the main thing is that you can play a bit with what background-images you use. That way you don't have to insert superfluous divs (which you insert only for the design). And you can reduce the amount of images needed. Which improves the loading time of your site. And which can prevent complicated coding.

Maybe another example can carify it some more: http://www.sportklimtraining.nl in which a repeating image is used for the container, a single image for the header (overlapping the container image), etc
Hope this makes it a bit more clear.

by **pickle** » Fri Sep 28, 2007 12:19 pm

Ah, now I get it. Your technique won't 100% replicate what I've currently got set up. Currently, #header-left & #header-right are set to 10%, and repeat-x. However, #body-left and #body-right don't repeat at all. So the only way I could use 1 image for that would be if I set the left & right sides to a static width, which would make it impossible (with my level of CSS knowledge) to make the centre section fill the rest of the screen.

A neat idea for sure. Since I've got this design working now though, I don't think I'll mess with it

Thanks.

by **matthijs** » Fri Sep 28, 2007 12:52 pm

It can work. Because you can set the background image at a % as well. So it doesn't have to be a static left or right side, they can be fluid as well.

by **pickle** » Fri Sep 28, 2007 12:54 pm

True, but part of the reason for 2 left divs is because the background image must have different repeating behaviour for each div.

PHP Developers Network

[solved] Sporatic element repositioning in IE7

[solved] Sporatic element repositioning in IE7

Who is online