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 8 of 8
  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    20
    Thanks
    4
    Thanked 0 Times in 0 Posts

    My CSS Boxes not working in I.E - Why???

    Hey Guys,

    i am using some CSS boxes with a dashed border on a site of mine, they come out perfectly in firefox, but in i.e they are all over the place, different sizes, dont line up etc.

    This is the site: http://hylux.com.au/links.html

    Can anybody tell me what im doing wrong, here is the css controling those boxes:

    Code:
    }
    .links1 {background:#F2F9FF;
        border:1px dashed #777777;
        color: #777777;
        font-size: 11px;
        height: 125px;
        width: 345px;
        font-family: Arial, Helvetica, sans-serif;
    }
    Kind Regards
    Andy MacDonald
    cheap web hosting | web design | logo design

  • #2
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    Try adding this:
    Code:
    * .links1
    {
    padding: 15px; /* Depends on how much you need */
    margin: 15px; /* Depends on how much you need */
    }
    Last edited by BarrMan; 10-08-2007 at 05:32 PM.

  • Users who have thanked BarrMan for this post:

    swiftmed (10-08-2007)

  • #3
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    Quote Originally Posted by swiftmed View Post
    Can anybody tell me what im doing wrong, here is the css controling those boxes:
    IE incorrectly expands boxes with a set height/width if their content grows too large to hold it. That doesn't happen in FF, which is why the boxes stay the same size.

    If you want the boxes to stay the same size in IE you need to make the height large enough to accommodate all of your links.

  • Users who have thanked vtjustinb for this post:

    swiftmed (10-08-2007)

  • #4
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    Or add this to your code:
    Code:
    * .links1
    {
    overflow: hidden;
    }
    I don't think this would happen if your have this value in IE.

  • Users who have thanked BarrMan for this post:

    swiftmed (10-08-2007)

  • #5
    New Coder
    Join Date
    May 2006
    Posts
    20
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hey Guys,

    I tried all of your suggestions and only one which worked was this one:

    Code:
    overflow: hidden;
    So thank yuou to all of you, especially BarrMan - ive thanked each of you
    Kind Regards
    Andy MacDonald
    cheap web hosting | web design | logo design

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    FYI you may not have had this problem if you had used a complete doctype in the first place. This is incorrect
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    It should be
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    or
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    with the latter one being the better doctype to use.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    swiftmed (10-08-2007)

  • #7
    New Coder
    Join Date
    May 2006
    Posts
    20
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    FYI you may not have had this problem if you had used a complete doctype in the first place. This is incorrect
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    It should be
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    or
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    with the latter one being the better doctype to use.
    Hey,

    Thanks for that info. i wasnt aware i had the docutype wrong so thanks for pointing it out. ive left thanks for you
    Kind Regards
    Andy MacDonald
    cheap web hosting | web design | logo design

  • #8
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    FYI you may not have had this problem if you had used a complete doctype in the first place. This is incorrect
    with the latter one being the better doctype to use.
    That's a great catch. Without those doctypes IE6 will render pages in quirks mode, which causes a lot of CSS spec rendering problems (mainly emulating IE5's incorrect box model).

    Always use a valid doctype to make sure you're not forcing browsers into quirks modes.


  •  

    Posting Permissions

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