IE vs FoxFire and Positioning

**drhowarddrfine** · Jan 21 '07, 07:01 PM

There is no IE vs Firefox; there is only what's wrong with IE.

The answers to 1 and 2 are 'it depends'. More in a moment.
3) When you use relative positioning, you have to remember that when you move the element, the 'hole' left behind is not filled and will remain open as if the original element is still occupied. In your #building div, you have top:-105px which is causing this.
4)This is one of the more difficult things to accomodate. The only way to do it is make your whole page fluid using ems and percentages.

**drhowarddrfine** · Jan 21 '07, 07:06 PM

1) Most of the time, the differences you will see in IE are bugs and quirks of that browser. Fortunately, most of those are well known and there are hacks to fix it. One of the best known sites for IEs problems is positionisevery thing.net. Just keep in mind that, if there are differences between a browser and IE, you can almost always assume the problem is in IE and not the other browser.

2) In many cases, you can just leave positioning alone and let it flow normally. If you don't like where it lands then you need positioning. Obvious answer but it looks like you are using relative positioning because you feel you are supposed to and not that you need to.

It's Firefox not FoxFire.

**wreed** · Jan 21 '07, 08:36 PM

Originally posted by drhowarddrfine

1) Most of the time, the differences you will see in IE are bugs and quirks of that browser. Fortunately, most of those are well known and there are hacks to fix it. One of the best known sites for IEs problems is positionisevery thing.net. Just keep in mind that, if there are differences between a browser and IE, you can almost always assume the problem is in IE and not the other browser.

2) In many cases, you can just leave positioning alone and let it flow normally. If you don't like where it lands then you need positioning. Obvious answer but it looks like you are using relative positioning because you feel you are supposed to and not that you need to.

It's Firefox not FoxFire.

Thank you so much for your answers! Sorry for being dyslexic!

Yes, I was using relative, or SOME position, because I thought I was supposed to. Do I understand correctly that generally I don't need to use "position= "? That would sure be a lot easier!

I'll check out positionisevery thing.net.

Thank you for your help! You guys are amazing!

**wreed** · Jan 21 '07, 08:50 PM

Originally posted by drhowarddrfine

There is no IE vs Firefox; there is only what's wrong with IE.

The answers to 1 and 2 are 'it depends'. More in a moment.
3) When you use relative positioning, you have to remember that when you move the element, the 'hole' left behind is not filled and will remain open as if the original element is still occupied. In your #building div, you have top:-105px which is causing this.
4)This is one of the more difficult things to accomodate. The only way to do it is make your whole page fluid using ems and percentages.

Thanks. I had tried using ems and percentages, but was running into spillover with window or text resizing. That got me trying all kinds of other position= and directional measurment combinations. Relative with px seemed to give me the closest result to what I wanted.

I'm a little confused about "position=" and directional positions. I thought that to use a directional position (left=, top=, etc.), that I HAVE to have a "position=" something. Is this right?

Thanks again.

**wreed** · Jan 21 '07, 10:45 PM

I'm working through your answers. My focus is on the first two images: logo and dock. When I remove "position:relat ive;" and the top and left measurements, both images are flush left against the body border, the logo is flush top, and the dock image is directly under the logo. Instead, I want the two images across from each other at the top with some white space around each. The only way I can find to make it work is using relative and minus top and positive left measurements to position the dock image higher and across the logo image. Is there a better way?
Thank you.

body {
top:0px;
border: 4px solid navy;
width: 915px;
color:white;
background: url("Images/bluepap.jpg");
}
#logo {
position:relati ve; /* relative to body */
left:2em;
top:1.5em;
color:white;
background: url(Images/LogoTruck293x83 .png);
height: 83px;
width: 293px;
border:1px black solid;
}
#dock {
position:relati ve; /* relative to logo */
left:25.5em;
top:-4.5em;
color:white;
background: url(Images/100_0145_441x14 4.png);
height: 144px;
width: 441px;
border: 1px solid black;
}

**drhowarddrfine** · Jan 22 '07, 12:11 AM

You are correct, positioning is not always needed and some pages don't use it at all. If you want one element to follow right behind another then you don't have to do anything special to it; just leave it alone. For example, two paragraphs one after the other. You don't need to add "position:relat ive" or anything else.

But, if you want something other than the normal flow, then "position:somet hing" is what you want but you also need to know about floats. Floats will 'float' an element left or right but it removes the element from the normal flow. That removal is an important point. If you need more information about that, I've got links.

I'll get to your code later.

**wreed** · Jan 22 '07, 01:54 AM

Originally posted by drhowarddrfine

You are correct, positioning is not always needed and some pages don't use it at all. If you want one element to follow right behind another then you don't have to do anything special to it; just leave it alone. For example, two paragraphs one after the other. You don't need to add "position:relat ive" or anything else.

But, if you want something other than the normal flow, then "position:somet hing" is what you want but you also need to know about floats. Floats will 'float' an element left or right but it removes the element from the normal flow. That removal is an important point. If you need more information about that, I've got links.

I'll get to your code later.

Thanks, I'd appreciate the links. I understand about removing elements from the flow - absolute does that too.

**wreed** · Jan 22 '07, 09:44 PM

Just to let you know, I found some really good float information, and changed my page to be pretty liquid using mostly floats and a few relatives. I *think* I have a decent handle on what's going on as long as I keep it simple.

I really appreciate your help and quick responses! Thank you very much.

**gyung** · Jan 22 '07, 10:21 PM

Most sites I come across recommend programming in Firefox first, then writing extra stylesheets if really needed for MSIE. You'll only have to change whatever causes the bugs in IE, for the newer sheet will overwrite only those that have changes.

IE vs FoxFire and Positioning

IE vs FoxFire and Positioning

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment