SitePoint Sponsor |
|
User Tag List
Results 1 to 10 of 10
-
Jul 13, 2006, 14:51 #1
- 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> </p> <p>a</p> <p>a</p> <p> </p> <p>a</p> <p>a</p> <p>a</p> <p> </p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p> </p> <p>a</p> <p>a</p> <p> </p> <p>a</p> <p> </p> <p>a</p> <p>a</p> <p>a</p> <p> </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>
-
Jul 13, 2006, 16:51 #2
- 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?
-
Jul 13, 2006, 21:18 #3
Remove the xml declaration <?xml version="1.0" encoding="iso-8859-1"?>
Only modern browsers handle this properly while IE goes into quirks mode.
-
Jul 13, 2006, 23:16 #4
- Join Date
- Jul 2006
- Posts
- 9
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by drhowarddrfine
-
Jul 14, 2006, 00:01 #5
- 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> </p>
<p>a</p>
<p>a</p>
<p> </p>
<p>a</p>
<p>a</p>
<p>a</p>
<p> </p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p> </p>
<p>a</p>
<p>a</p>
<p> </p>
<p>a</p>
<p> </p>
<p>a</p>
<p>a</p>
<p>a</p>
<p> </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>
-
Jul 14, 2006, 00:07 #6
- Join Date
- Jul 2006
- Posts
- 9
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
This does work fine in ie7 beta3 too. Thanks all4nerds!
-
Jul 18, 2006, 11:22 #7
- 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....
-
Jul 18, 2006, 12:09 #8
- 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"> </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"> </div> </body> </html>
-
Jul 19, 2006, 00:32 #9
- 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?
-
Jul 19, 2006, 03:17 #10
- 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
Bookmarks