IE website test

[Mal]

I know there are a lot of these types of threads, but I need someone with IE 6 or 7 to test out my website and help me figure out why it's not working correctly.

According to BrowserShots.org, it looks pretty bad up at the top, though the rest is pretty much fine. http://browsershots.org/screenshots/c90133d0c68c44b4b22c8b32cf2c9ebb/

I'm not 100% sure where the problem lies, but I haven't spent much time figuring out how to optimize my websites for IE, since I've never cared before. This one kinda needs to work properly.

jW

 

[angelwatt]

Looks like it's related to having the header and locs being absolutely positioned. When you use absolute positioning, it removes those elements from the flow of the page, which is why the menu is so far up. I'm a little surprised it shows up the way you want it in other browsers. Though, you'd think the top margin on the menu would correct for it, but guess not (at least for IE).

I'd probably suggest trying to use floats to get the same effect without using absolute positioning. You can also try using the top style property on menu rather than the top margin (e.g., top: 98px;).

 

[Mal]

Thanks, didn't know that was an issue. I've removed the absolute position on some of the elements in question, should reintroduce everything into the proper flow again. Anyone with IE able to take a look for me? I'm going to try browsershots again too, but any testing I can get is appreciated.

jW

BTW, one last thing to check, the menu appears to be double the proper height, which I think is related to the last item (I have it set to float so it will always be on the far right, is there a better way to do that?).

 

[angelwatt]

I checked the page with IE6 (using CrossOver) and the menu is below the header now so that looks good. As for the double height menu, that is tied to your styling of,

#menu ul li.last {
float: right;
clear: none;
}

You can actually get rid of this as it's not needed and is causing the menu to be taller as it drops that last menu item to a new line.

 

[Mal]

Ok, so all of that is working now in all browsers, but I've developed a new problem. I added a second column (sort of, it's only a box but I think of it like a column), and it shows up normally in Safari and IE, but Firefox is placing too far to the left, which shoves everything else down the page way too far.

http://www.connectingpt.com/

Again, any help is appreciated!

jW

 

[SrWebDeveloper]

I just wanted to note that because absolutely positioned content is outside the flow, as angelwatt noted, if you keep adding more content then:

1) Consider using absolute positioning for all content areas (usually div's) - this creates a static layout, a little more CSS involved, but -- the flow looks identical in every browser!

2) Check/Adjust float direction (left vs. right) and/or clear for the existing content areas based on the rules how block level vs. inline elements flow.

So this means since you just added a new column, you might need to adjust one of it's neighbors CSS float properly to account for the left/right flow change. In your case you might need a float:right in the neighboring column. I would get more specific, but your page looks good and I'm using FFox. Unless I missed something obvious, you fixed by now.

-jim