[solved] Sporatic element repositioning in IE7

View unanswered posts | View active topics

Board index » Programming » Javascript

All times are UTC - 5 hours

Moderator: General Moderators

Page 1 of 1

[ 11 posts ]

Print view

Previous topic | Next topic

Author

Message

pickle

Post subject: [solved] Sporatic element repositioning in IE7

Posted: Thu Sep 27, 2007 4:28 pm

Briney Mod

Joined: Mon Jan 19, 2004 7:11 pm
Posts: 6444
Location: 53.01N x 112.48W

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>

_________________
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.

Last edited by pickle on Fri Sep 28, 2007 12:19 pm, edited 1 time in total.

Top

JAB Creations

Post subject:

Posted: Thu Sep 27, 2007 4:48 pm

DevNet Resident

Joined: Thu Jan 13, 2005 7:44 pm
Posts: 2341
Location: Sarasota Florida

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>

Top

pickle

Post subject:

Posted: Thu Sep 27, 2007 4:57 pm

Briney Mod

Joined: Mon Jan 19, 2004 7:11 pm
Posts: 6444
Location: 53.01N x 112.48W

JAB Creations wrote:

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

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.

_________________
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.

Top

matthijs

Post subject:

Posted: Fri Sep 28, 2007 1:49 am

DevNet Master

Joined: Thu Oct 06, 2005 3:57 pm
Posts: 3360

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)

Top

pickle

Post subject:

Posted: Fri Sep 28, 2007 10:24 am

Briney Mod

Joined: Mon Jan 19, 2004 7:11 pm
Posts: 6444
Location: 53.01N x 112.48W

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.

_________________
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.

Top

matthijs

Post subject:

Posted: Fri Sep 28, 2007 10:46 am

DevNet Master

Joined: Thu Oct 06, 2005 3:57 pm
Posts: 3360

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)

Top

pickle

Post subject:

Posted: Fri Sep 28, 2007 10:52 am

Briney Mod

Joined: Mon Jan 19, 2004 7:11 pm
Posts: 6444
Location: 53.01N x 112.48W

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

_________________
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.

Top

matthijs

Post subject:

Posted: Fri Sep 28, 2007 12:02 pm

DevNet Master

Joined: Thu Oct 06, 2005 3:57 pm
Posts: 3360

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.

Top

pickle

Post subject:

Posted: Fri Sep 28, 2007 12:19 pm

Briney Mod

Joined: Mon Jan 19, 2004 7:11 pm
Posts: 6444
Location: 53.01N x 112.48W

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.

_________________
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.

Top

matthijs

Post subject:

Posted: Fri Sep 28, 2007 12:52 pm

DevNet Master

Joined: Thu Oct 06, 2005 3:57 pm
Posts: 3360

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.

Top

pickle

Post subject:

Posted: Fri Sep 28, 2007 12:54 pm

Briney Mod

Joined: Mon Jan 19, 2004 7:11 pm
Posts: 6444
Location: 53.01N x 112.48W

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

_________________
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.

Top

Page 1 of 1

[ 11 posts ]

Board index » Programming » Javascript

All times are UTC - 5 hours

Who is online

Users browsing this forum: No registered users and 5 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to: