SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Having trouble with IE and background-position Element

    As the title suggests, I am having trouble with the css element background-position in IE. It works fine in Firefox but I need cross browser compatibility (and IE sucks :-D). Here is a link to the entire page. The CSS is in the page.

    http://www.jcouncil.com/test/sidebar.html

    The issue is in the bottom right corner curve. I am using CSS to place the curves into the corners of the table. The bottom corners are all in one image and I use the background-position property to show the correct side of the image for the respected corners. In IE it refuses to display the correct side of the image. It is working for the left side and I used the exact same technique for the top curves and it worked great. Here is the CSS code:

    Code:
    .sidebar-curves-bottom {
    	background-image:  url(images/sidebar-curves-bottom.gif);
    	background-color: #FFFFFF;
    	background-repeat: no-repeat;
    	overflow: hidden;
    }
    .sidebar-curves-bottom#left {
    	background-position: 0px 0px;
    }
    .sidebar-curves-bottom#right {
    	background-position:  -5px 0px;
    }
    Does anyone know what is going on and how to fix it? Thanks.

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

    I'd simplify it like this for ie.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    .sidebar-header{
    background-color: #003366;
    background-image: url(http://www.jcouncil.com/test/images/sidebar-header.gif);
    font-weight: bold;
    color: #FFFFFF;
    height: 20px;
    vertical-align: middle;
    }
    .sidebar-content {
    background-color: #EEEEEE;
    vertical-align: top;
    border-right:1px solid #003366;
    border-left:1px solid #003366;
    padding: 2px;
    }
    #sidebar-bottom {
    background-color: #EEEEEE;
    border-bottom:1px solid #003366;
    font-size: 1px;
    }
    .sidebar-curves-lbottom,
    .sidebar-curves-rbottom {
    background:#fff url(http://www.jcouncil.com/test/images/...ves-bottom.gif) no-repeat 0 0;
    overflow: hidden;
    height: 5px;
    }
    .sidebar-curves-ltop,
    .sidebar-curves-rtop{
    background:#fff url(http://www.jcouncil.com/test/images/...curves-top.gif) no-repeat 0 0;
    width:5px;
    overflow:hidden;
    }
    .sidebar-curves-rbottom,.sidebar-curves-rtop {background-position: -5px 0px;}
     
    </style>
    </head>
    <body>
    <!-- Begin sidebar_start() -->
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr> 
    	<td class="sidebar-curves-ltop"></td>
    	<td class="sidebar-header">Sidebar Heading 1</td>
    	<td class="sidebar-curves-rtop"></td>
    </tr>
    <tr> 
    	<td colspan="3" class="sidebar-content"> 
    	 <!-- End sidebar_start() -->
    	 Test 
    	 <!-- Begin sidebar_item() -->
    	</td>
    </tr>
    <tr> 
    	<td class="sidebar-header"></td>
    	<td colspan="2" class="sidebar-header">Sidebar Heading 2</td>
    </tr>
    <tr> 
    	<td colspan="3" class="sidebar-content"> 
    	 <!-- End sidebar_item() -->
    	 Test 
    	 <!-- Begin sidebar_end() -->
    	</td>
    </tr>
    <tr> 
    	<td class="sidebar-curves-lbottom"></td>
    	<td id="sidebar-bottom">&nbsp;</td>
    	<td class="sidebar-curves-rbottom"></td>
    </tr>
    </table>
    <!-- End sidebar_end() -->
    </body>
    </html>
    Its a lot less code and more obvious

    Or with your original code just change left and right to classes and concatanate the multiple classes as follows.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    .sidebar-curves-top {
     background-image:  url(http://www.jcouncil.com/test/images/...curves-top.gif);
     background-color: #FFFFFF;
     background-repeat: no-repeat;
     overflow: hidden;
    }
    .sidebar-curves-top.left {
     background-position: 0px 0px;
    }
    .sidebar-curves-top.right {
     background-position: -5px 0px;
    }
    .sidebar-header{
     background-color: #003366;
     background-image:  url(http://www.jcouncil.com/test/images/sidebar-header.gif);
     font-weight: bold;
     color: #FFFFFF;
     height: 20px;
     vertical-align: middle;
    }
    .sidebar-content {
     background-color: #EEEEEE;
     vertical-align: top;
     border-right-width: 1px;
     border-left-width: 1px;
     border-right-style: solid;
     border-left-style: solid;
     border-right-color: #003366;
     border-left-color: #003366;
     padding: 2px;
    }
    #sidebar-bottom {
     background-color: #EEEEEE;
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-bottom-color: #003366;
     font-size: 1px;
    }
    .sidebar-curves-bottom {
     background-image:  url(http://www.jcouncil.com/test/images/...ves-bottom.gif);
     background-color: #FFFFFF;
     background-repeat: no-repeat;
     overflow: hidden;
     height: 5px;
    }
    .sidebar-curves-bottom.left {
     background-position: 0px 0px;
    }
    .sidebar-curves-bottom.right {
     background-position:  -5px 0px;
    }
    -->
    </style>
    </head>
    <body>
    <!-- Begin sidebar_start() -->
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr> 
    	<td width="5" class="sidebar-curves-top left"></td>
    	<td class="sidebar-header">Sidebar Heading 1</td>
    	<td width="5" class="sidebar-curves-top right"></td>
      </tr>
      <tr> 
    	<td colspan="3" class="sidebar-content"> 
    	  <!-- End sidebar_start() -->
    	  Test 
    	  <!-- Begin sidebar_item() -->
    	</td>
      </tr>
      <tr> 
    	<td class="sidebar-header"></td>
    	<td colspan="2" class="sidebar-header">Sidebar Heading 2</td>
      </tr>
      <tr> 
    	<td colspan="3" class="sidebar-content"> 
    	  <!-- End sidebar_item() -->
    	  Test 
    	  <!-- Begin sidebar_end() -->
    	</td>
      </tr>
      <tr> 
    	<td class="sidebar-curves-bottom left"></td>
    	<td id="sidebar-bottom">&nbsp;</td>
    	<td class="sidebar-curves-bottom right" ></td>
      </tr>
    </table>
    <!-- End sidebar_end() -->
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help.


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
  •