SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. Jul 13, 2006, 13:51 #1
    FoxMan
    FoxMan is offline
    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. Jul 13, 2006, 15:51 #2
    fisherboy
    fisherboy is offline
    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. Jul 13, 2006, 20:18 #3
    drhowarddrfine
    drhowarddrfine is offline
    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. Jul 13, 2006, 22:16 #4
    FoxMan
    FoxMan is offline
    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. Jul 13, 2006, 23:01 #5
    all4nerds
    all4nerds is offline
    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. Jul 13, 2006, 23:07 #6
    FoxMan
    FoxMan is offline
    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. Jul 18, 2006, 10:22 #7
    FoxMan
    FoxMan is offline
    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. Jul 18, 2006, 11:09 #8
    all4nerds
    all4nerds is offline
    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. Jul 18, 2006, 23:32 #9
    FoxMan
    FoxMan is offline
    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. Jul 19, 2006, 02:17 #10
    Paul O'B
    Paul O'B is offline
    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
    The Sitepoint Forums move to Discourse is coming soon, help us, help you!
    www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
    Ultimate CSS Reference

« Previous Thread | Next Thread »

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
  •  

Forum Rules