SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    need help making css compatible with ie7

    Hello,

    I'm trying to make the following code sample by Paul O'B to work in IE7 B3. I found this code in an old thread posted here back in 2004.
    I've already removed the xml prolog hack as well as the ie css filter as per the instructions found here: http://msdn.microsoft.com/library/de...css_compat.asp, but this does not fix the problem. I prefer not to leave out the doctype as this will break FF.

    Any idea how to proceed? Thanks.

    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- force quirks mode in ie with the xml prologue-->
    <style type="text/css">
    html,body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow: auto;
    }
    body {
    font-family: Verdana; 
    font-size: 13px;
    color: #24284B;
    }
    /* ---------- table ---------- */
    table { 
    width: 100%;
    height: 100%;
    border: 0px;
    padding: 0px;
    border-spacing: 0px;
    font-family: Verdana;
    font-size: 13px;
    }
    td {
    padding: 0px;
    border-spacing: 0px;
    margin: 0px;
    }
    #top {
    height: 76px;
    width: 100%;
    background-color: #CCCCCC;
    }
    #content {
    height: 100%;
    width: 100%;
    }
    #bottom {
    padding-left: 4px;
    height: 68px;
    width: 100%;
    background-color: #CCCCCC;
    }
    /* ---------- divs ---------- */
    #contentRight {/* for good browsers*/
    position:absolute;
    top:76px;
    bottom:68px;
    width: 100%;
    overflow: auto;
    }
    * html #contentRight {/* for ie only*/
    position: relative;
    top:0;
    height: 100%;
    }
    </style>
    </head>
    <body>
    <table cellspacing="0">
    <tr> 
    	<td id="top"> some content here </td>
    </tr>
    <tr> 
    	<td id="content"> <div id="contentRight"> 
    		<p>lots of content </p>
    		<p>a</p>
    		<p>a</p>
    		<p>&nbsp;</p>
    		<p>a</p>
    		<p>a</p>
    		<p>&nbsp;</p>
    		<p>a</p>
    		<p>a</p>
    		<p>a</p>
    		<p>&nbsp;</p>
    		<p>a</p>
    		<p>a</p>
    		<p>a</p>
    		<p>a</p>
    		<p>a</p>
    		<p>a</p>
    		<p>a</p>
    		<p>&nbsp;</p>
    		<p>a</p>
    		<p>a</p>
    		<p>&nbsp;</p>
    		<p>a</p>
    		<p>&nbsp;</p>
    		<p>a</p>
    		<p>a</p>
    		<p>a</p>
    		<p>&nbsp;</p>
    		<p>a</p>
    		<p>a</p>
    		<p>a</p>
    		<p>a here! </p>
    	 </div></td>
    </tr>
    <tr> 
    	<td id="bottom"> some bottom content </td>
    </tr>
    </table>
    </body>
    </html>

  2. #2
    Carpe Diem = Fish of the Day fisherboy's Avatar
    Join Date
    Dec 2005
    Location
    New Zealand
    Posts
    488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can I ask why you're using a Transitional DTD rather than Strict?
    fisherboy
    Web Site Design

  3. #3
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove the xml declaration <?xml version="1.0" encoding="iso-8859-1"?>
    Only modern browsers handle this properly while IE goes into quirks mode.

  4. #4
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by drhowarddrfine
    Remove the xml declaration <?xml version="1.0" encoding="iso-8859-1"?>
    Only modern browsers handle this properly while IE goes into quirks mode.
    The XML hack doesn't work in Internet Explorer 7. Microsoft have fixed a number of CSS bugs including the xml hack and the * html filter hack. I could leave out the doctype but then this design nolonger works in Firefox.

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    IE 6 needs the xml decleration to get it in quirksmode
    It works fine in FF NS Moz OP so stay of the working css

    IE7 handels height's and width's slightly off, so needs aditonal css

    PS Please donít thrust what Mediocre Software has to say about hacks, they even canít get their own pages about IE 7 rendering in IE 6

    this works in my IE 7 beta 2

    PHP Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!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" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- force quirks mode in ie with the xml prologue-->
    <style type="text/css">

    html,body {
    height:100%;
    }

    * {margin: 0;
    padding: 0;}

    body {
    font-family: Verdana,sans-serif; 
    font-size: 13px;
    color: #24284B;
    overflow:hidden;
    }
    /* ---------- table ---------- */
    table{ 
    width:100%;
    height:100%;
    border:0px;
    border-spacing: 0px;
    font-family: Verdana,sans-serif;
    font-size: 13px;
    }
    td{border-spacing:0px;}

    #top{
    height:76px;
    background:#CCCCCC;
    }
    head+body #content{
    height:100%;
    }


    #bottom{
    height:68px;
    background:#CCCCCC;
    }


    /* ---------- divs ---------- */
    #contentRight{/* for good browsers*/
    position:absolute;
    top:76px;
    bottom:68px;
    width: 100%;
    overflow:auto;
    }
    * html #contentRight{/* for ie only*/
    position:relative;
    top:0;
    height:100%;
    }

    p{padding:2px 5px 1px 5px;}
    </style>
    <!--[if IE]>
    <style type="text/css">
    *+html{height:99%;}
    *+html #bottom{position:relative;
    left:0;
    top:-144px;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <table cellspacing="0">
    <tr> 
    <td id="top"><p>some content here</p></td>
    </tr>
    <tr> 
    <td id="content">
    <div id="contentRight"> 
            <p>lots of content </p>
            <p>a</p>
            <p>a</p>
            <p>&nbsp;</p>
            <p>a</p>
            <p>a</p>
            <p>&nbsp;</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>&nbsp;</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>&nbsp;</p>
            <p>a</p>
            <p>a</p>
            <p>&nbsp;</p>
            <p>a</p>
            <p>&nbsp;</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>&nbsp;</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a here! </p>
    </div>
    </td>
    </tr>
    <tr>
    <td id="bottom"><p>some bottom content</p></td>
    </tr>
    </table>
    </body>
    </html>

  6. #6
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    This does work fine in ie7 beta3 too. Thanks all4nerds!

  7. #7
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi nerds4all,

    Mind if I ask you another question? I'm trying to display a small border around the contentRight div, so I added the line

    border: solid 7px #999999;

    to the #contentRight style. This does display the top, left and bottom border as expected. However, in IE, the right border appears to be moved outside the table. In FF, the scrollbar is not completely visible.

    Hoping for a solution, thanks....

  8. #8
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Sorry my own class names, lean and mean
    HTML Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!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">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    
    	*{padding:0;margin:0;}
    
    	body{overflow:hidden;background:#f2fcff url(images/bgd_slice.jpg) repeat-x 0 77px;}
    	* html body{margin:77px 0 41px 0;}
    	
    	.he,.fo{position:absolute;left:0;width:100%;}
    	.he{top:0;height:70px;background:#ccffcc url(images/header.gif) center repeat-x;}
    	.fo{bottom:0;height:34px;background:#ffffcc url(images/footer.gif) center repeat-x;}
    	* html .he{height:77px;}
    	* html .fo{height:41px;}
    
    	.wra{overflow:auto;border: solid 7px #999999;}
    	* html .wra{height:100%;width:100%;}
    	head+body .wra{
    	position:fixed;
    	top:70px;
    	left:0;
    	right:0;
    	bottom:34px;
    	}
    	.wra p{padding:2px;}
    
    	</style>
    	<!--[if IE]> 
    	<style type="text/css"> 
    	*+html{overflow:auto;}
    	</style> 
    	<![endif]--> 
    </head>
    <body>
    
    <div class="he">&nbsp;</div>
    
    
    <div class="wra">
    
    
    <p>content to go in here start</p>
    <!--  -->
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    <p>content to go in here</p>
    
    <p>wrap to go in here end</p>
    
    
    </div>
    
    <div class="fo">&nbsp;</div>
    
    </body>
    </html>

  9. #9
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's great stuff nerds4all. Thanks again.

    I'm a webapp/software dev myself. I usually don't do UI's, but for this project I have to. While I'm quite familiair with CSS, I have never had to things other than setting fonts and colors and I have never had to deal with cross browser support before.

    Is there any reading material for experienced web developers you can recommend?

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Is there any reading material for experienced web developers you can recommend
    The sticky threads and faq have a lot of information and links in then and are worth a visit


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
  •