SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2004
    Location
    UK
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 & mozilla look great, IE5 is wrong

    Hi,

    This site looks fine in IE6 & mozilla, but in IE5 it is very wrong. But people still use this.

    The menus on the right hand side turn into long columns and should be little buttons.

    Any ideas for a fix

    http://www.restnewmedia.com/newsite/css/

    Thanks

    Nick

  2. #2
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Looking through your code, you have some divs with both width and border defined. Bad news for IE5 Win or PC. You need to use a tan hack to fix the broken box model of IE5 (it puts the broders inside the width you give, whereas other browsers put the borders outside).

    Find some example anywhere by googling, but you will find it here, for example:

    http://www.positioniseverything.net/...box-model.html

    At least, that may be the problem.





    Trevor

  3. #3
    SitePoint Enthusiast CFhirolla's Avatar
    Join Date
    Apr 2004
    Location
    USA
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i think it's hard to fix it to fits all browsers... i try to to correct on www.cityfinest.com but hadn't work so far, any suggestions?
    Powerful Scripts, Finest Zone, Recommended Hosting, Good Forums, iGraphic Designs
    10,000 hits unique sites (i will link exchange/pm me)We still have space for ads

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Nick,

    Trevor was right with the box model hacks but there were a few 100% heights that ie5 doesn't like either.

    IE5 is very quirky with horizontal lists but these changes should give a respectable look.
    Code:
    <style type="text/css">
    /* commented backslash hack v2 \*/ 
    html, body{height:100%;} 
    /* end hack */ 
    body {
     font-size:small;
     padding:0;
     margin:0;
     background-color:rgb(61,151,194);
     color: #000000;
    }
    #outer{
     height:100%;
     min-height:100%;
     margin-left:65px;
     margin-right:400px;
     background:#fff;
     margin-bottom:-25px;
     color: #000000;
    }
    html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
    #header{
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:72px;
     background:#fff url(http://www.restnewmedia.com/newsite/...ges/top_bg.gif) no-repeat;
     background-position:center right;
     overflow:hidden;
     color: #fff;
     font:normal 0.2em arial;
    }
    #left {
     position:relative;/*ie needs this to show float */
     width:64px;
     float:left;
     margin-left:-64px;/*must be 1px less than width otherwise won't push footer down */
     padding-top:72px;/*needed to make room for header*/
     z-index:100;
    }
    #left p {padding-left:3px;padding-right:2px}
    #right p {padding-left:3px;padding-right:2px}
    #right {
     position:relative;/*ie needs this to show float */
     width:400px;
     float:right;
     margin-right:-400px;/*must be 1px less than width otherwise won't push footer down */
     padding-top:72px;/*needed to make room for header*/
    }
    ul#menuNav {
     display:inline;
     list-style:none;
     margin:0px;
     padding:0px;
     background-color:rgb(149,149,149);
     font:normal 1em verdana,sans-serif; !important
    }
    ul#menuNav li {
     display:inline;
     list-style-type:none;
     width:79px;
     line-height:25px;
     float:left;
     background-color:rgb(149,149,149);
     border-right:solid 1px #fff;
     border-top:solid 1px #fff;
     border-bottom:solid 1px #fff;
     /*font:normal 1em verdana,sans-serif;*/
    }
    * html ul#menuNav li {
     width:80px;
     w\idth:79px;
     font-size:x-small; 
     f\ont:normal 1em verdana,sans-serif; 
     height:1%;
    	position:relative;
     p\osition:static;
     left:3px;
     le\ft:0;
    }
    ul#menuNav li#active {
     display:inline;
     list-style-type:none;
     /*font:normal 1em verdana,sans-serif;*/
     width:80px;
     line-height:25px;
     float:left;
     background-color:rgb(239,154,49);
     color:#fff;
     text-align:center;
     border-right:solid 1px #fff;
     border-top:solid 1px #fff;
     border-bottom:solid 1px #fff;/**/
    }
    * html ul#menuNav li#active {
     width:80px;
     w\idth:79px;
     height:1%;
    }
    ul#menuNav li a {
     float:left;
     display:block;
     width:100%;
     line-height:25px;
     text-decoration:none;
     color:#fff;
     /*font-weight:normal;
     font:normal 1em verdana,sans-serif;*/
     text-align:center;
    }
    ul#menuNav li a:hover {
     background-color:rgb(239,154,49);
     height:25px;
    }
    ul#subMenuNav {
     display:inline;
     list-style:none;
     margin:0px;
     padding:0px;
     background-color:rgb(149,149,149);
     font:normal 0.9em verdana,sans-serif;
    }
    ul#subMenuNav li {
     display:inline;
     list-style-type:none;
     width:132px;
     height:25px;
     line-height:25px;
     float:left;
     background-color:rgb(194,194,194);
     border-right:solid 1px #fff;
     border-bottom:solid 1px #fff;
    }
    * html ul#subMenuNav li {
     width:133px;
     height:26px;
     w\idth:133px;
     he\ight:26px;
    }
    ul#subMenuNav li#subActive {
     display:inline;
     list-style-type:none;
    /* font:normal 0.9em verdana,sans-serif;*/
     width:132px;
     height:100%;
     line-height:25px;
     color:#fff;
     text-align:center; 
     float:left;
     background-color:rgb(239,154,49);
     border-right:solid 1px #fff;
     border-bottom:solid 1px #fff;
    }
    * html ul#subMenuNav li#subActive {
     width:133px;
     height:26px;
     w\idth:133px;
     he\ight:26px;
    }
    ul#subMenuNav li a {
     float:right;
     display:block;
     padding:0 5px;
     height:100%;
     line-height:25px;
     text-decoration:none;
     width:122px;
     color:#fff;
     /*font:normal 0.9em verdana,sans-serif;*/
     text-align:center;
    }
    * html ul#subMenuNav li a {
      width:132px;
      w\idth:122px;
    }
    ul#subMenuNav li a:hover {
     background-color:rgb(239,154,49);
     height:25px;
    }
    /**/
    #footer {
     width:100%;
     clear:both;
     height:22px;
     border-top:1px solid #fff;
     background-color: rgb(39, 60, 130);
     color: #000000;
     text-align:center;
     position:relative;
     padding-top:5px;
    }
    * html #footer {/*only ie gets this style*/
     \height:28px;/* for ie5 */
     he\ight:22px;/* for ie6 */
    }
    #clearheader{height:72px;}/*needed to make room for header*/
    #clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
    div,p  {margin-top:0}/*clear top margin for mozilla*/
    * html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */
    #centrecontent {position:relative;z-index:1}
    /* css stuff below is just for presentation and not needed for the demo */
    p#topCenterText {
     font:bold 1.7em Arial, sans-serif;
     color:#fff;
     padding-top:110px;
     padding-bottom:5px;
     text-align:center;
     word-spacing:2.5em;
    }
    #rightTitle {
     font: normal 1.5em "Trebuchet MS", Arial, sans-serif;
     color:#fff;
     padding-top:0px;
     margin-left:40px;
     margin-right:40px;
    }
    #right p.rightBodyText {/*margin-top:20px; */
     font: normal 1.8em "Trebuchet MS", Arial, sans-serif ;
     color:#fff;
     letter-spacing:0em;
     text-align:center;
     margin-left:40px;
     margin-right:40px;
     margin-top:55px;
     /*line-height:20px;*/
     height:100%;
     
    }
    .rightBodyText a {
     color:rgb(39, 60, 130);
    }
    .rightBodyText a:hover {
     text-decoration:none;
    }
    #centrecontent p {
     font: normal 1em "Trebuchet MS", Arial, sans-serif ;
     color:#2f4f4f;
     letter-spacing:0em;
     text-align:justify;
     padding:5px 20px;
    }
    p#mainContent a {
     font: normal 1em "Trebuchet MS", Arial, sans-serif;
     color:rgb(39, 60, 130);
     text-decoration:underline;
     display:inline;
    }
    p#mainContent a:hover {
     text-decoration:none;
    }
    p#centreStrapline {
     padding-top:15px;
     font:normal 1.5em "Trebuchet MS", arial,sans-serif;
     color:rgb(239,154,49);
    }
    p#mainContent {margin:0px 25px;}
    #left span {
     display:none; 
    } 
    #left a:hover {
     color: #666666;
     background: #FFFFCC;
     text-decoration: none;
    }
    #left a:hover span {
     display:block;
     position:absolute;
     left:130px;
     width:150px;
     z-index:20;
     background:#fff;
    }
    @media all and (min-width: 0px){
      #left a:hover span {
     top:150px;
      }
    }
    #footer p {
     display:inline;
     font:normal 0.8em arial,sans-serif;
     color:#fff;
     text-align:center;
    }
    #footer a {
     /*font:normal 0.8em arial,sans-serif;
     display:inline;*/
     color:#fff;
     text-decoration:underline;
    }
    #footer a:hover {
     text-decoration:none; 
    }
    #topLeft { height:155px;background-color:rgb(39, 60, 130); margin:0;border-bottom:solid 1px #fff;border-right:solid 1px #fff; }
    * html #topLeft {height:156px;he\ight:155px;}
    #middleLeft { height:25px;background-color:rgb(149,149,149); border:0; margin:0;border-bottom:solid 1px #fff;border-right:solid 1px #fff; }
    * html #middleLeft{height:26px;height:25px;}
    #topCenter { overflow:hidden; height:155px; background-color:rgb(61,151,194);border-bottom:solid 1px #fff;border-right:solid 1px #fff; }
    * html #topCenter {height:156px;he\ight:155px;}
    #middleCenter { height:25px; background-color:rgb(149,149,149);border-bottom:solid 1px #fff;border-right:solid 1px #fff; }
    * html #middleCenter{height:26px;height:25px;}
    p#topCenterText {color:#fff;font:bold 1.5em Arial, sans-serif;text-align:center;word-spacing:2.5em; margin-top:100px;}
    
    /*right clients include*/
    p.rightClientsTitle {
     color:rgb(39, 60, 130);
     font:normal 1.4em "Trebuchet MS",arial,sans-serif;
     margin-left:40px;
     margin-right:40px;
     margin-top:15px;
    }
    p.rightClients {
     color:#fff;
     font:normal 1.1em "Trebuchet MS",arial,sans-serif;
     margin-left:40px;
     margin-right:40px;
    }
    p.rightClientsTestimony {
     color:#fff;
     font:normal 0.9em "Trebuchet MS",arial,sans-serif;
    /* font-style:italic;*/
     margin-left:40px;
     margin-right:40px;
    }
    p.rightClients a {
     font-weight:normal;
     color:rgb(39, 60, 130);
     line-height:1.2em;
    }
    p.rightClients a:hover {
     text-decoration:none;
    }
    img.featuresImage {
     padding-right:5px;
    }
    /* FORM STYLES */
    textarea {
     font: normal 1em Verdana, Arial, Helvetica, sans-serif; 
    }
    form {
     /*width:500px;*/
    }
    form p {
     
     /*height:20px;
     margin:0 25px;width:500px;clear:both;*/
    }
    form p input, {
     margin-left:0px;
     /*float:left; */
    }
    p li {
     color:red;
    }
    /*							*/
    ul#form li {
     font: normal 1em "Trebuchet MS", Arial, sans-serif ;
     color:#2f4f4f;
     text-align:justify;
     list-style-position : inside;
     margin-left:20px;
    }
    #right img {
     float:right; 
     width:400px; 
     height:155px; 
     margin:0; 
     border:0 none;
    }
    * html #right img { 
     margin-right:-3px;
     ma\rgin-right:0;
    }
    </style>
    I also took the inline style out of here:
    Code:
     <div id="right"><img src="http://www.restnewmedia.com/newsite/css/images/home.jpg" alt="loughborough web design home - all photos &copy; restnewMedia" />
    Assuming I haven't messed up other browsers ie5 should look much better although there is a slight gap between the right and centre. However it looks much better and I didn't have to time to keep hacking my way thorugh this

    Paul

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    i think it's hard to fix it to fits all browsers... i try to to correct on www.cityfinest.com but hadn't work so far, any suggestions?
    It's not that hard to code for different browsers you just have to check every step of the way in the browsers you want to support.

    It is very hard to hack your way through the finished product and then try to make it work cross-browser as the whole basis of the design may be built on browser flaws.

    You will need to be a bit more specific in what browser you want us to check your design it and what the problem is. Just ask for a couple of specific things rather than asking for it to be fixed for all browsers.

    Post with a specific question (in your own thread) and then you'll get much more help

    Paul


Bookmarks

Posting Permissions

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