SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Mexico City
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE Mac background positioning bug

    This is my first xhtml+css site, everything is working great in Mozilla, Safari, Firefox and Netscape 7, but like always IE is making some bad jokes.

    The problem with IE is the background for the menu and three boxes at the end of the page, the background it's not at the right position and looks really bad, I have tried several fixes but no one seems to work.

    Does anyone know any trick for this stuff?

    The code url is:
    http://homepage.mac.com/xtrujano/cosace/

    Screenshot url is:
    http://homepage.mac.com/xtrujano/cosace/screen.pdf

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

    You also had a few problem in ie6 and mozilla related to default margins and padding on elements.

    I also fixed the three pixel jog which ie applies to static content next to floats.

    This code looks the same in mozilla and ie6 and better than it was in ie6 mac.

    Code:
     body { 
     background: white url(bg.gif);
     margin: 0;
     }
     
    /* Elementos de la cabeza */
     
    div.logo {
      float: left;
      border: 0;
      padding:0;
      margin-top: 60px;
      }
    * html div.logo {margin-right:-3px}/*ie 3 pixel jog*/
      div.cabeza {
      margin-left: 224px;
      }
    * html div.cabeza {  margin-left: 221px;}/* ie 3 pixel jog*/
    
      /* Navegacion */
      
      div.menu {
      background: #960 url(bgmenu.gif)  no-repeat left top;
      margin-top: -35px;
      margin-left: 48px;
      height: 193px;
      width: 176px;
      }
     .tMenu{clear:both} 
      
      ul {
      list-style-image:  url(flecha.gif);
      margin:0 0 0 35px;
      padding:0;
       }
      
      div.tMenu ul li a {
      color: white;
      font: bold 12px Verdana, sans-serif;
      text-decoration: none;
      line-height: 36px;
      padding: 4px;
      }
      
      div.tMenu ul li a:hover {
      color: black;
      text-decoration: none;
      }
      
      /*  Contenido */
      
      div.contenido {
      width: 465px;
      margin-top: -161px;
      margin-left: 224px;
      }
      
      div.contenido h1 {
      font: bold 22px Times, Georgia, serif;
      color: #c00;
      padding-left: 24px
      }
      
      div.contenido p {
      font: 12px Verdana, sans-serif;
      color: black; 
      padding-left: 24px
      }
      
      div.imgmedio {
      margin-top: 14px;
      margin-left: 241px;
      }
      
      /* Cajas */
      
      div.contiene01 {
      margin-top: 16px;
      margin-left: 53px;
      }
      
      div.contiene02 {
      margin-top: -205px;
      margin-left: 374px;
      }
      
      div.caja {
      background:  url(bgcaja01.gif) no-repeat left top;
      width: 317px;
      height: 205px;
      }
      
      div.caja h1 {
      font: bold 22px Times, Georgia, serif;
      color: #c00;
      padding:18px 0 0 18px;
     margin:0;
      }
      
      /* Pie */
      
      div.pie {
      background: url(pie.gif) no-repeat left top;
      margin-top: 13px;
      margin-left: 53px;
      width: 638px;
      height: 45px;
      }
      
      div.pie p {
      font: bold 11px Verdana, sans-serif;
      color: black; 
      padding-left: 18px;
      padding-top: 18px;
      margin:0;
      }
    Hope that helps (reset your image paths as I changed them).

    Paul

  3. #3
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Mexico City
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, thanks a lot for the advice, it was really helpfull.

    Xico
    ---------------
    God is my DJ, and sometimes he is not that good.


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
  •