WebDeveloper.com - CSS DIV positioning: Firefox v. MSIE

WebDeveloper.com (http://www.webdeveloper.com/forum/index.php)

- CSS (http://www.webdeveloper.com/forum/forumdisplay.php?f=7)

- - CSS DIV positioning: Firefox v. MSIE (http://www.webdeveloper.com/forum/showthread.php?t=87155)

CSS DIV positioning: Firefox v. MSIE

I'm sure this topic has been discussed a million times by now...

Surely I can't be the only one who's noticed the HUGE difference when trying to layout a page using CSS.

My god... this is infuriating. I get everything laid out perfect in MSIE... then I look at it in Firefox and it's completely FUBARed.

WTF!!

Is it better to layout in FF and then make adjustments to make it look the same in MSIE or vice versa.

My biggets problem seems to be the <DIV> containers. I don't know if I'm doing it the hard way or long way or wrong way or what...

I have a page right now... I positioned only five <DIV>s. 4 have (left, right, logo, bottom) BG images. The other two are for positioning text only.

When I open it in MSIE... everything is right where it's supposed to be.
When I open it in FF... the bottom is at the top of the page.

OK.. I just looked in the CSS and figured out what was apparently being ignored in FF.

background-position: 218

I guess MSIE accepts this attribute and FF doesn't? Or is there some slightly different way to write it for FF to accept it?

I keep readin on W3 schools that "absolute" means where you set the positioning is where it's supposed to lay... but I have been having more problems with that than I know how to describe. I move one thing... it affects three other things. I assume it's some sort of parent-child relationship type issue that I haven't fully grasped.

When you open a <DIV> and fill it with a BG image, text, whatever... should you close it right before the body tage or at the end of the contents?

are u using z-index?

No... I realized what I was doing wrong. I was leaving the closing <DIV> tag off the end of the content and basically puting a big lump of ending <DIV> tags right before the closing <BODY> tag... Don't ask why the hell I was doing that. I just didn't know any better. It was basically a div inside a div inside a div inside a div inside a div inside a div inside a div... which needless to say was making positioning a real *****.

hmmm, learning in reverse ehh?

Quote:

Is it better to layout in FF and then make adjustments to make it look the same in MSIE

It's the only way to go. FF works with standards and is a modern browser. IE is old, buggy and non-compliant.

Quote:

I guess MSIE accepts this attribute and FF doesn't?

Possibly. It is a coding error on your part.

Never, ever design in IE. Always write for Firefox. Then adjust for IEs quirks and bugs. If it works in FF then most browsers will work, too, and IE can be fixed easier if need be.

Quote:

Originally Posted by decibel

hmmm, learning in reverse ehh?

I always seem to do it this way... but once I figure it out I've made all the stupid mistakes up front... so there's no room for error. ;)

Ok... on using the relative attribute

it isn't necessarily for nested <DIV>s, is it?

I just moved some stuff around in the HTML doc and one tg has a relative attribute. When I moved it it seems to have taken on a relative position to the DIV tag right above it in the HTML doc.

Is that right? The contents attribute (in terms of positioning) are relative to the <DIV> above it in the HTML?

when position:relative, any left, top, etc specifications you make to an element will be calculated starting from the place in the document layout the element would normally exist. (example: 10 lines down after an anchor and &nbsp )

I have not had to use this before, but from what ive read, this is how it works. get a second opinion.

Ok... here's what all of my questions are coming from

Here is the page I'm working on.

http://www.crestwoodonline.net/

The biggest PITA right now is this:
When I test the page I usually do a CTRL+Scroll wheel and blow up the text HUGE. This will show me if everything stays where it's supposed to and, in this case, if the overflow is working right.

I got the overflow to kick in when viewing in both browsers and I added an invisible image map (no actual image... it's almost like a transparent layer over top of the BG image over that <DIV> container (the copyright and validation buttons on the bottom). This seems to be where things started getting screwy AGAIN.

Now, when I blow up the text sizing... you should see the right image begin to shift downward as the text grows larger.

I also just noticed:
1.) when I resize my screen resolution to 800x600 (normally 1280x1024) that the "logo" image shifts way ou of place to the left.
I assume that's a relative positioning problem that should be easily fixed by setting it to absolute.
>>ETA: I just noticed it is set to absolute... but the positioning it set from the right. I guess when you lower the resoltion is shift things from right to left. So I just set the position from the left and it seems to have fixed it.<<
2.) The left side <DIV> BG image cuts off at the bottom in Firefox and about a 6px space occurs between the left and the bottom images in both browser. The size of the <DIV> is correct to the image size.

Damn those people still looking at sites with a 800x600 screen resolution. Damn them all to hell!!!

Seems to be working ok on a 1280 wide resolutions.. not sure what the deal is with the gap in the smaller resolutions.

Aside from that I think I worked out most of the bugs.