Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2007
    Location
    Leicester
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Bradfields,
    If you add this to your CSS:
    Code:
    #main_section_middle{
    overflow:auto;
    }
    That clears your floats and allows #main_section_middle to enclose them. See this page about that clearing method.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Dec 2007
    Location
    Leicester
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Excavator 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

  • #4
    New to the CF scene
    Join Date
    Dec 2007
    Location
    Leicester
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Good morning Bradfields,
    Have a look at a list of IE bugs here.
    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.
    Last edited by Excavator; 01-04-2008 at 05:43 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    List of useful sites.

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


    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •