SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    border-right-style not displayed in IE

    Despite the well-documented FAQ I still can not solve the following problem (probably due to my insufficient CSS knowledge).

    The problem is mainly that the border-right-style is not displayed in IE(7), but it is displayed correctly in FF.

    From what I understand from the forums this is caused by the haslayout property. I tried to fix it by putting
    /* mac hide \*/
    * html #elementname {height:1%}
    /* end hide*/
    into my style.css. However, this didn't solve the problem. Hopefully you can solve my very newbie question.

    My HTML:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    
    <head>
    <link rel='stylesheet' href='style.css' type='text/css' />
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
    <title>My test</title>
    </head>
    
    <body>
    <table class='table_main'>
    	<tr>
    		<td style="width: 50%;">
    		<table class='table_inner'>
    			<tr><td>
          <div class='cap_border'><div class='main_caption'><div class='bevel'>
            <img src="images/even1.gif" class='icon' alt='' />
            My caption
          </div></div></div>
          </td></tr>
    			<tr><td class='tbox'>
    				<b>My contents</b><br />
    				+ Content subject 1<br />
    				+ Content subject 2
          </td></tr>
        </table>
        </td>
        </tr>
    </table>
    </body>
    </html>
    My style.css
    Code:
    .main_caption, .left_caption, .right_caption {
      vertical-align: top;
    	white-space: nowrap;
    	padding: 3px 5px;
    	border-top: #e9efff 1px solid;
    	border-bottom: 1px solid #878787;
    	background-repeat: no-repeat;
    	background-position: left;
    }
    
    .main_caption {
    	background-image: url(images/s_main_cap.png);
    	background-color: #e1e4e8;
    }
    
    .left_caption, .right_caption {
    	background-image: url(images/s_left_cap.png);
    	background-color: #d2d5d9;
    }
    
    .bevel {
    	background-image: url(images/s_left_bevel.png);
    	background-repeat: no-repeat;
    	background-position: right;
    }
    
    .table_main {
      border-style: none;
      width: 100%;
    }
    
    /* mac hide \*/
    * html #elementname {height:1%}
    /* end hide*/
    
    .table_inner {
      border-collapse: collapse;
      border-right-style: solid;
      border-left-style: solid;
      border-bottom-style: solid;
      border-width: thin;
      border-color: grey;
      width: 100%;
    	min-height: 0; /* For IE haslayout bug fix only */
    }
    
    .icon {
      border: none;
      height: 20px;
      float: left;
      margin-right: 5px;
    }
    
    .tbox {
      vertical-align: top;
      border-right-style: solid;
      border-left-style: solid;
      border-bottom-style: solid;
      border-width: thin;
      border-color: grey;
    	background-color: #fff;
    	padding-left: 10px;
    	padding-top: 10px;
    	height: 150px;
    	min-height: 0; /* For IE haslayout bug fix only */
    }
    
    
    /* Extra Classes */
    body, td, .indent, .defaulttext, .caption, .captiontext, .bodytable, .mediumtext,
    .forumheader, .forumheader2, .forumheader3, .forumheader4, .forumheader5, .fcaption, .finfobar {
    	font: bold 15px verdana, tahoma, arial, sans-serif;
    	color: #000;
    }
    
    .smalltext, .smallblacktext, .tbox, .button, .button:hover, .nextprev, .helpbox {
    	font: normal 12px verdana, tahoma, arial, sans-serif;
    	color: #000;
    }
    Thank you in advance for giving feedback!

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

    For a start there is no color keyword called grey so its not surprising that its not displayed It should be gray.

    Secondly the keyword "thin" means different things in different browsers. In Firefox "thin" equals 1px but in IE "thin" equals 2px. Both are correct as the specs don't specify what the width should be for the keywords only that they are consistent between sizes.

    For this reason never use keywords for border-widths and just use the exact px measurement that you want.

    Lastly you don't have an element in your page called #elementname so the hack is of no use whatsoever It was obviously meant that you should substitute your element name in that hack.

    However * html only applies to IE6 and under anyway so it would still be of no use even if you used the right element name. You never want to give IE7 a height:1&#37; anyway because it will limit the element to 1% and no more. The hack was meant for ie6 and under only.

    For IE7 you can use min-height:0 on the element which has the effect of causing "haslayout" to be true (on elements where min-height can be applied).

    You do not need to use a "layout" hack when the element already has a dimension as dimensions will already put the element into "haslayout" mode. Read the section on "haslayout" in the ultimate reference for more information.

    Hope that helps


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
  •