View Full Version : css left/right, top/bottom probs in IE

01-10-2010, 09:17 PM
I'm trying to create a div that simply expands with the window, horizontally and vertically. In FF, the following works fine...

In good ol' IE, somehow setting the left/right, and top/bot results in width=0,height=16.

I've tried every combo of "position" settings, margins, and other desparate attempts, and still can't get what I need in IE. I guess I could use an ugly resize hook func to force the div to whatever size, but, of course, would prefer not to do it that way.

Any help is most appreciated.

01-10-2010, 09:35 PM
Hello snoodle,
I think div.mydiv= is not going to work very well. Don't know if that was a mistake here or if your code actually has the = in it.
You will probably need a doctype for IE to do this. See the link about DocTypes in my sig below.

Give this a try and see if it works for you -
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div.mydiv {
top: 50px;
right: 10px;
bottom: 50px;
left: 100px;
background: #00f;
<div class="mydiv">
<!--end .mydiv--></div>

01-10-2010, 09:39 PM
yeah, unfortunately the "=" was just a type-o. I finally gave in (for now) and and am force feeding the coords upon a resize event. I know this isn't "cool" but sometimes seems to be the easiest way to deal with browser incompatibilities.

unless i'm still drunk from last night, setting left AND right or top AND bottom simply doesn't work in IE, and at the moment, the only way i can figure around the problem is to REset the coords after every window resize.

01-10-2010, 10:03 PM
Gotta love IE :rolleyes:

That bit I quoted in my first post works in FF3.5, IE8 and IE7. I don't have IE6 to test in.

I don't know what the final objective is but have a look at this demo (http://nopeople.com/CSS/background_image_resize/index.html) and see if this is what you're after.

01-10-2010, 10:33 PM
Thanks for your reply. In the page you sent, your img CSS is...

#background_image {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 1;

The question is... How would you code the CSS if you wanted, the right side of the image to always be 100 pixels from the right of the window (ie body)? (like I said, normal browsers have no problem with setting "left" and "right" while IE, well, you know.

You can view the layout at http://deborah-barr.com/newsite/.

01-10-2010, 11:08 PM
You can view the layout at http://deborah-barr.com/newsite/.
That's too much absolute positioning for me. I think I would have started with a completely different approach. Like this maybe - http://nopeople.com/CSS/another_3-column/index.html

As for that resizing background demo ... you might be able to do something with a different image. I don't know that you can put a margin or padding on that.

01-11-2010, 11:01 PM
[QUOTE=Excavator;908680]That's too much absolute positioning for me. I think I would have started with a completely different approach.QUOTE]

I did start with a completely different approach but needed to come up with a quickie solution, so went to all the absolute stuff. I don't like it either. The example you point out uses all fixed widths and heights. I'm trying to have the widths and heights change with the window (body).

As soon as I find out how to make this work I'll get rid of all the absolute stuff, though I don't think I can get rid of all of it, especially the centered image (resizing an image with the resizing of a window and maintaining it's proportions). If there is a way to CSS and avoid hard-coded-absolute-positioning javascript code to force the results, I'm all ears.

The other possibility I thought of was using a <table>. Assuming a table would do that job would the CSS police come after me for using table elements for my layout?

That all said... I do agree with you and all that absolute positioning is gonna bite me in the butt eventually, so... it's back to the CSS/IE-sucks drawing board for me...

01-26-2010, 06:02 PM
i also bumped in this IE6 problem, so in my sites i usually solve it by complementing its css-declarations with the proprietary value "expression([js-code])":

/* normal 'modern' browser css (Fx2+, IE7+, Safari3+, Opera9+...) */
top: 120px; bottom:0;
left: 210px; right:0;

/* special complement for IE6 (usually in another file) */
width:expression(document.body.offsetWidth - 210 + "px");
height:expression(document.body.offsetHeight - 120 + "px");

i don't know if it continually fires or if it runs just once, there are several issues mentioned around the web about these expressions, but i mostly exploit them just for such little problems...

ok, just to mention the complexity you could achieve with them, here a "little" BIG snippet (indented to better understand it) to force ie6 to correctly display an alpha-png image which is normally set as an inline css-background, with some extra hacks to avoid repeated evaluations of the code and to let the src uri still be part of the same domain (strip-off hte http://... part):

<!-- HTML
the "esagoni_home" part varies as with the requested sub-page,
the "1259617980" timestamp is to load the last updated version (CMS!) of the img
<div id="esagoni" style="background-image:url(cont/immagini/esagoni_home.png?1259617980)"></div>

/* CSS: */
/* note the , used to separate js statements (normal js uses ;) */
behavior: expression( <== open 1st (
(this.runtimeStyle.behavior="none") &&
(this.pngSet ? this.pngSet = true : <== open 2nd (
this.origBg = this.origBg ? this.origBg : V 4 statements
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../cont/" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none",
this.pngSet = true
) <== close 2nd )
); <== close 1st )
so, my devise is to avoid these expressions as much as possible, but if the client really want nearly perfect ie6 compatibility for his site... wish you luck!

01-26-2010, 06:48 PM
AWESOME! I had no idea there was a way to embed javascript in CSS (abeit, for IE only). Unfortunately my editor (Aptana) marks CSS lines with "expression()" as syntax errors, but that's ok. It works!


01-26-2010, 07:21 PM
In addition, you can quite easily get your box to center horizontally and change with the window size with css using auto margins.

#div {
width: ___;
margin-left: auto;
margin-right: auto;

Using this, you can also get it to move 100px away from the left or right side by changing "auto" to 100px. In this case you need to set a width though.

For centering vertically, css really doesn't make this easy. You can't use the same margin trick, for some unknown reason. I would suggest just giving it a margin-top of a couple hundred pixels until it looks relatively centered on your screen - screens vary more in width than height anyway :)