Cross Browser Column Width Problem

Hi All,

I'm new here so I hope it isn't considered rude for me to start with a question.

I'm a PHP programmer by trade and I'm having a few problems with the CSS on a site I'm developing. It appears fine in IE7, but in IE6 and Firefox it has issues with the borders which I believe is being caused by the margins or padding on the content of the middle section.

I have had a good read around about cross browser stuff and I'm pretty confident I'm using the right doctype and not breaking anything through bad HTML, I just don't get all this browser hack, * html and putting slashes in places that gets talked about. Every time I have tried it I can't get it to have any effect at all!!

The site is http://www.epicurosl.com - if you view it in Firefox compared to IE7 then you will see the problem straight away, and in IE6 it is even worse with columns dropping completely out of place.

I have setup a test page with no content in the main section at http://www.epicurosl.com/test.php and you will be able to see that the borders appear fine there.

The style sheets are viewable at

http://www.epicurosl.com/styles/initial.css
http://www.epicurosl.com/styles/default.css
http://www.epicurosl.com/styles/main_template.css

I'd really appreciate any help anyone can offer and also if someone can point me in the direction of a resource that explains the whole cross browser thing with examples to see the problems in action that would be amazing.

Thanks in advance.

Hello Bradfields,
If you add this to your CSS:
#main_section_middle{
overflow:auto;
}
That clears your floats and allows #main_section_middle to enclose them. See this page about that clearing method (http://http://www.quirksmode.org/css/clearing.html).

Excavator :thumbsup: you are the man!!

Thanks a lot for the link as well, that'll help me get my head round the problem too.

Thank you, thank you, thank you :D

Hello again,

I've still got a couple of problems on this site if anyone is able to give me a hand.

If you check the homepage on Firefox and IE7 you will see that the right column is dropping below the rest of the content on the page in IE7. I assume this is some sort of margin problem?

Also, if you select "sales" from the dropdown list in the top corner and then hit search you will see that in IE7 there is an extra scroll bar in the middle section of the page which appeared after I applied the overflow: auto; fix suggested above.

Is there a way to completely disable the scrollbars on a div or do I need to add some form of browser hack to my style sheet.

The link to that quirksmode website was great but I'm having some difficulty finding anything else on that site. Am I just being dumb or is there not actually a page that explains the differences in margins between IE and Firefox?

Thanks in advance for any help.

Bradfields

Good morning Bradfields,
Have a look at a list of IE bugs here. (http://www.positioniseverything.net/explorer.html)
Might help.
If you check the homepage on Firefox and IE7 you will see that the right column is dropping below the rest of the content on the page in IE7. I assume this is some sort of margin problem?
Google box model. I didn't check the widths on everything but something probably needs to narrowed a bit?

Also, if you select "sales" from the dropdown list in the top corner and then hit search you will see that in IE7 there is an extra scroll bar in the middle section of the page which appeared after I applied the overflow: auto; fix suggested above.

Is there a way to completely disable the scrollbars on a div or do I need to add some form of browser hack to my style sheet.
It's adding scroll bars because something contained in there is too wide.

List of useful sites.

http://exitfegs.co.uk/Sources.html


Frank