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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS: List alignment goes funny in IE, please help

    Hi,

    Im using lots of CSS and Divs and trying to develop new pages for our company. I have a problem Ive just run into though:

    My page is here: http://www.oxoid.com/2005/beNhome.asp

    In Mozilla Firefox 1.0 the page looks fine [ it is still in the development stage remember ] However in Internet explorer 6 the list on the far left seems to be displayed in a staggering pattern going diagonal down to the left.

    how can i fix this? My CSS code for these sections is as follows:

    #prod_info_wrapper {
    margin:0;
    padding:0;

    }
    #prod_info_list {
    float:left;
    /*display:inline;*/
    /*left:0;*/
    background:#FFF;
    }

    /* CSS for the list div elements*/


    #prod_info_list ul {
    /* list-style-type:none;*/
    margin:0px 0px 2px 2px;
    padding:1px;
    border-left: 10px solid #F6CA26;
    /*display:block;*/
    list-style:none;
    }

    #prod_info_list li {
    padding:0;
    margin:0;

    }

    #prod_info_list h3 {
    background:#F6CA26;
    text-align:center;
    color:#FFF;
    font: 0.75em Arial, Helvetica, sans-serif;
    font-weight:bold;

    margin:2px;

    }
    /* CSS for the content div elements*/

    #prod_info_content h2 {
    margin:0;
    }




    beN

  • #2
    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
    what happens if you take away the padding or margin from this css?
    Code:
    #prod_info_list ul {
    /* list-style-type:none;*/
    margin:0px 0px 2px 2px;
    padding:1px;
    border-left: 10px solid #F6CA26;
    /*display:block;*/
    list-style:none;
    }

  • #3
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Removing those just messes up the layout by putting loads of space around elements in the lists.

    I need to be able to specify a margin and padding.

    The layout seems perfect in FireFox

    Any ideas?
    Last edited by beNcooKe; 03-17-2005 at 03:11 PM.

  • #4
    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
    try this
    Code:
    #prod_info_wrapper {
    margin:0;
    padding:0;
    
    }
    #prod_info_list {
    float:left;
    width:226px;
    /*display:inline;*/
    /*left:0;*/
    background:#FFF;
    }
    
    /* CSS for the list div elements*/
    
    
    #prod_info_list ul {
    /* list-style-type:none;*/
    width:211px;
    margin:0px 0px 2px 2px;
    /*display:block;*/
    list-style:none;
    }
    
    #prod_info_list li {
    padding:0;
    margin:0;
    }
    
    #prod_info_list h3 {
    background:#F6CA26;
    width:224px;
    text-align:center;
    color:#FFF;
    font: 0.75em Arial, Helvetica, sans-serif;
    font-weight:bold;
    margin:2px;
    }
    /* CSS for the content div elements*/
    
    #prod_info_content h2 {
    margin:0;
    }

  • #5
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cheers,

    Ive sorted it well now, thanks for your help,

    beN


  •  

    Posting Permissions

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