Very UNIQUE Firefox vs. IE8 problem!

Recently we made some adjustments for logo placement which also involved the need to resize some elements at the top of the page. Taking for granted that this was fairly basic stuff I figured that everything would look the same in IE8 as it does in Firefox ... particularily since everything else looked fine in both browsers last time that I checked.

Anyway, in Firefox the top of the homepage looks perfect, our logo lines up with the left edge of our page and our quotes line up with the right edge of the page. However, when I check it out with IE8 that particular section at the top of the page appears more to the right by apx. 200 px. or so which is causing our quotes to appear outside of our right edge of the page. To make matters even worse visually is the fact that we're making use of the page curl mod from Rayz which, although perfect in appearance with FF, causes our quotes to run right into the curl. Horrible ....

Sorry, I was in a hurry with this image. with FF, the letter "S" in th word Steinfein appears directly on the left edge of the page - which simultaneously causes the quotes to line up on the right side. The blue color with nothing in it, to the left and right, are supposed to be there. I'm not a php programmer and I obviously don't have Firebug installed with IE8 in my other operating system. Can someone help me out with this? Thanks.

It's difficult to help you if we don't know what you actually changed.

Well, I'm not exactly sure anymore since I got help from the forum to get this done. After awhile a lot of the posts and the work just tend to run together into a blur, sorry. I remember that I initially attempted to assign the same width in that very top section as for the rest of the page, this being 998 px. But when I did that there wasn't enough space between the quotes and the logo which made that whole thing look a bit ridiculous. So in order to compensate and create more free space I went ahead and added about 204 px. thereby increasing the overall width of that entire top section. However, then the logo itself appeared too far over to the right. No idea why. No problem though (or so I thought) because then I removed that very same 204 px. constraint from the element which contains the logo itself and presto, it all looked perfect.

I should mention that the logo was actually removed from the element where it originally resided and placed where it is now in order to be able fill the empty space that was there before ... through which the background was showing.

It wasn't until today when I checked everything in IE8 that I noticed how that entire top section was moved over to the right too far, probably by about 204 px. Problem is that when I work with IE8 I'm also working blind since I no longer have Firebug available to help me out.

Why not position those elements using position:absolute - then you can use left & top to put them where you like.

No need to mess about with padding / margins to try and get them to line up.

/DM

I think part of the problem may have to do with the fact that Deano (I think that's who it was) told me the logo would have to be removed from its current position in order to achieve what I want, which is in the screenshot below. like I said, it's perfect with FF. Initially our logo only contained the word SteinFein.org with very little blank space to the left or to the right. However, this gave us a "blank" rectangle with the background which we didn't like. I'm talking about the rectangle/element directly to the left of the logo and above the menu. So Deano (methinks) had me move the logo itself into that element at the left which I then had to widen in order to accommodate the entire logo width. But since the logo (the letters of it) now also appeared all the way to the left, I ended up having to widen that element even more ... followed by adding my own blank blue background to the logo ... which then gave the "appearance" of the logo lining itself up on the left edge. Again, this screenshot is what we want and this is perfect, but with IE8 the quotes end up completely within the page curl and the logo text begins roughly where the tab for Blogs is located. Since I'm not a php programmer I don't have much of an idea what I'm even looking at with Firebug when I look at the problem areas and since I'm a Linux user I have to log off one system and then into the other to use IE8 which is a real pain in the rear. Man, once you get used to Ubuntu Windows is just such a dog which of course makes booting into it very "undesireable" to say the least. HELP ...

Okay, maybe this will help some people who need to develop pages for IE8 while not having access to IE8 as a result of using an operating System other than Windows (such as Mac, Linux, Unix, VMS, various Linux flavors such as Ubuntu, Fedora, Red Hat, and so on).

Firefox, Google Chrome, and even IE7 show web pages pretty much identical. Only IE8 seems to be a bit of an odd-ball. Having done some research I found out that a lot of the newest browser technology/coding for tabs, some of the expanded browser features and so on actually came from Opera, and not Mozilla as I'd always thought. There's a lot of coordinating going on between them though. Testing with IE6 (can be made to work on Linux systems) is actually pretty silly since IE6 isn't capable of rendering most of today's flash stuff correctly. Flash is used everywhere these days.

Anyway, if you're a developer without IE8 it would be my suggestion that you install not only Firefox, but also Google Chrome and Opera on your system in order to test your pages. Bookmarks can be imported on both. Google Chrome is lightning fast and getting very very popular while rendering pages exactly like Firefox. Opera on the other hand is just about as fast as Google Chrome, but appears to render pages more like IE8. It's my belief that Opera is the solution when checking your pages for IE8 compatibility. Been working with different browsers for days to come to this conclusion.