Major Page Issues

[ajhauser]

Hey guys,
I am finishing up a site for a client, and all has been going well to this point. I did layout testing out of the gate but have been finishing up this site in FireFox - once again... something happened along the way, and the page displays correctly in other browsers, but not IE8. I'll include a screenshot, but I'm at a loss. I have validated the CSS and the page itself - so I have a few "alt tag missing" and "No attribute border in STRICT DOCTYPE" and things like that that I'm going to try fixing... but I'm really stuck otherwise. Is this how this page loads on others versions of IE8 for you?

Screenshot:
http://www.brotherscountrysupply.com/brothers-errors.jpg

An example page that is broken:
http://brotherscountrysupply.com/store/testimonials.html

Any direction on this would be really appreciated. It looks like a CSS error or image is breaking the layout but I'm not sure. CRAP.

Thank you.

[Jim]

My guess is that the content is too wide for the area because IE has some default spacing/padding that adds a few pixels to the size of each element.
Looking at the divs for the center section you have.

Code: Select all

#ContentWrapper {    width: 936px;
#ContentLeft {        width: 240px;
#ContentRight {       width: 696px;
#ContentClear {       width: 936px;


Since the ContentLeft and ContentRight take up 936 px and ContentClear is 936 px and the width of the ContentWrapper which they are all in is only 936 px that doesn't leave any room for any padding that IE has as a default value.

Try adding a few more px to ContentWrapper or reducing the others by a few px and see if that fixes the issue.

Note: I use some bookmarklets from https://www.squarefree.com/bookmarklets that allow you to apply different features to the page so you can see how elements are layed out. In this case I used the topo bookmarklet which adds a border to all elements. That forced the layout to shift like the IE image shows. This indicates that there is just not enough space in what you have allowed for everything to fit.

[ajhauser]

God I hate IE... I didn't think this was an issue in 8 but maybe - I will do some testing. Thanks Jim.

[ajhauser]

Well, it looks like it's working now and the culprit was the comments above the DOCTYPE tag in the code. Unbelievable. Jim this was what I was going to test next - but I was skeptical because the CSS very specifically "zeroes out" most of the tags... so surprise padding isn't usually an issue anymore.

Thank you so much for helping me get to this conclusion. I did actually add some extra CSS tags to this so that could have helped.

[ajhauser]

Oh, and does a "#" symbol tell ShopSite to strip out a line of code? When I used this method you showed me earlier for my comments, they were gone on the actual page when I checked it out.

[Jim]

If the # symbol is the very first character on the line then ShopSite ignores the line entirely like it wasn't there at all. So the resulting html code will not have anything in that place.

If you need to include a # in some CSS when defining a style it must have a space before it and then it will keep the line of code.

[ajhauser]

Excellent - thank you again!