1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

CSS Problems with CSS in IE ok in firefox

Discussion in 'Web Development' started by navyfalcon, Nov 1, 2008.

  1. navyfalcon

    navyfalcon Well-Known Member Verified Member

    This web page has problems with CSS (too wide) in MSIE (Internet Exployer)
    5.5, 6.0, 7.0 & 8.0 - later versions work ok and Firefox works ok
    http://freetutorials.name/Reference1/Mechanical_Hydraulic.html
    I suspect the problem is "float"
    Do I have to make a separate css for IE ??
    Thank You for your time and information
    falcon

    The CSS is:

    * {
    margin:auto;
    }
    body {
    background-color: #FAEBD7;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    color: #000000;
    padding: 10px;
    }
    a:hover {
    color: purple;
    background-color: white;
    font-weight: bold;
    }

    #header {
    text-align: center;
    border: 1px solid darkblue;
    background: url(../Images/2R131.gif);
    background-repeat: no-repeat;
    5px 50% no-repeat;
    }

    #header b {
    display: block;
    min-height: 120px;
    background-image: url(../Images/3C331.gif);
    background-repeat: no-repeat;
    background-position: right center;
    margin: 0px;
    padding: 0 200px;
    font-weight: normal;
    }
    * html #header b {
    height: 200px;
    }
    #header h2 {
    color: #FF0000;
    font-size: 180%;
    margin-bottom: 10px;
    }

    #homelink {
    float: left;
    width: 64px;
    height: 20px;
    background-image: url(../Images/home.gif);
    background-repeat: no-repeat;
    margin-top: 7px;
    font-size: 1px;
    color: #428afc;
    }
    #articlelink {
    float: right;
    width: 64px;
    height: 20px;
    background-image: url(../Images/articles.gif);
    background-repeat: no-repeat;
    font-size: 1px;
    color: #3c8ffc;
    }
    h3 {
    text-align: center;
    color: #FF0000;
    line-height: 30px;
    font-size: 130%;
    }
    .col {
    float: left;
    width: 100%;
    border: 1px solid darkblue;
    margin-bottom: 5px;
    }
    .cl {
    float: left;
    width: 100%;
    border: 1px solid darkblue;
    margin-bottom: 5px;
    }
    .col a {
    margin-left: 5px;
    line-height: 1.5ex
    }
    .col dt {
    padding-top: 3px;
    }
    .col dd {
    padding: 2px 5px 2px 20px;
    }
    .col b {
    display: block;
    padding: 2px 5px 2px 20px;
    }

    .lecol a, .mdcol a, .rcol a { /* 3 columns 40-40-20 */
    margin-left: 5px;
    line-height: 1.5ex
    }
    .lecol b, .mdcol b, .rcol b { /* 3 columns 40-40-20 */
    display: block;
    padding: 2px 5px 2px 20px;
    }
    .lecol dt, .mdcol dt, .rcol dt { /* 3 columns 40-40-20 */
    padding-top: 3px;
    }
    .lecol dd, .mdcol dd, .rcol dd { /* 3 columns 40-40-20 */
    padding: 2px 5px 2px 20px;
    }

    clear{clear:both;height:30px;}
     
    navyfalcon, Nov 1, 2008
    #1
  2. navyfalcon

    navyfalcon Well-Known Member Verified Member

    This seems to have corrected some of the problem
    If you are using Internet Exployer, would you check and see if it looks OK
    I only have Firefox 2 and IE 6

    </script>
    <!--[if IE lt 9]> "means less than IE 9"
    .lecol width="39.0%"
    .mdcol width="39.0%"
    .rcol width="19.0%"
    <![endif]-->
    </head>
    <body>

    but still have problems with IE 4 & IE 8

    any suggestions would be appreciated
    The width is too wide for IE because of the way it displays the CSS

    Thank you for your time and information
    falcon
     
    navyfalcon, Nov 1, 2008
    #2