Forum Moderators: not2easy

Message Too Old, No Replies

css and div frame

         

kkfgef

5:42 am on Oct 19, 2009 (gmt 0)

10+ Year Member



hi£¡
I recently encountered a problem£¡
Here is the html <snip>
Effect Picture <snip>
thanks£¬goodluck everyday£¡
the html
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<title>css+div=Frame</title>
<style type="text/css">
* {
margin:0;
padding:0;
list-style:none;
}
html {
height:100%;
overflow:hidden;
}
body {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
_height:100%;
_position:relative;
font-size:32px;
}
P {
height:800px
}
.fleft {
float:left
}
.&#8301;LeftDiv, .RightDiv {
overflow:hidden;
}
.&#8301;LeftDiv div, .&#8301;LeftDiv {
width:200px
}
.&#8301;LeftDiv {
position:absolute;
left:0px;
top:0px;
bottom:0px;
}
.&#8301;LeftTop {
height:150px;
}
.&#8301;LeftCenter {
position:absolute;
top:150px;
bottom:200px;
overflow:auto;
}
.&#8301;LeftBottom {
height:200px;
position:absolute;
bottom:0px;
}
.RightDiv {
position:absolute;
left:200px;
top:0px;
bottom:0px;
right:0px;
}
.RightDiv div {
width:100%
}
.RightTop {
height:50px
}
.RightCenter {
position:absolute;
top:50px;
bottom:80px;
overflow:auto;
}
.RightBottom {
height:80px;
position:absolute;
bottom:0px;
}
.&#8301;LeftTop, .&#8301;LeftBottom {
background:#FECACC;
}
.RightCenter {
background:#990068;
}
.&#8301;LeftCenter, .RightTop, .RightBottom {
background:#8001FF;
}
.&#8301;LeftDiv, .RightDiv, .&#8301;LeftCenter, .RightCenter {
*height:100%;
}
</style>
</head>
<body>
<div class="&#8301;LeftDiv fleft">
<div class="&#8301;LeftTop">width:200px
height:150px</div>
<div class="&#8301;LeftCenter">width:200px
height:100%
{Adaptive Height}<br>
<p>&nbsp</p>
in the ie6~,~,help me please!</div>
<div class="&#8301;LeftBottom">width:200px
height:100px</div>
</div>
<div class="RightDiv fleft">
<div class="RightTop">width:100% {Adaptive Width} height:50px</div>
<div class="RightCenter">width:100%{Adaptive Width}
height:100%{Adaptive Height}
<p>&nbsp</p>
in the ie6~,~</div>
<div class="RightBottom">width:100% {Adaptive Width} height:80px</div>
</div>
</body>
</html>
¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª
Effect Picture£¡

[edited by: swa66 at 6:38 am (utc) on Oct. 19, 2009]
[edit reason] No links please. See ToS and Forum Charter. [/edit]

swa66

6:51 am on Oct 19, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



That "&#8301;" is that in your actual CSS ?
I'm pretty sure it should not be there.

To make sure you don't have any funny characters in your source, do validate your html and CSS.

Assuming that just to be a cut&paste problem, what's your problem with the source code you posted and in what browser(s) if not in all ?

kkfgef

7:34 am on Oct 19, 2009 (gmt 0)

10+ Year Member



sorry,!
html url : <snip>
html:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<title>css+div=Frame</title>
<style type="text/css">
* {
margin:0;
padding:0;
list-style:none;
}
html {
height:100%;
overflow:hidden;
}
body {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
_height:100%;
_position:relative;
font-size:32px;
}
P {
height:800px
}
.fleft {
float:left
}
.&#8301;LeftDiv, .RightDiv {
overflow:hidden;
}
.&#8301;LeftDiv div, .&#8301;LeftDiv {
width:200px
}
.&#8301;LeftDiv {
position:absolute;
left:0px;
top:0px;
bottom:0px;
}
.&#8301;LeftTop {
height:150px;
}
.&#8301;LeftCenter {
position:absolute;
top:150px;
bottom:200px;
overflow:auto;
}
.&#8301;LeftBottom {
height:200px;
position:absolute;
bottom:0px;
}
.RightDiv {
position:absolute;
left:200px;
top:0px;
bottom:0px;
right:0px;
}
.RightDiv div {
width:100%
}
.RightTop {
height:50px
}
.RightCenter {
position:absolute;
top:50px;
bottom:80px;
overflow:auto;
}
.RightBottom {
height:80px;
position:absolute;
bottom:0px;
}
.&#8301;LeftTop, .&#8301;LeftBottom {
background:#FECACC;
}
.RightCenter {
background:#990068;
}
.&#8301;LeftCenter, .RightTop, .RightBottom {
background:#8001FF;
}
.&#8301;LeftDiv, .RightDiv, .&#8301;LeftCenter, .RightCenter {
*height:100%;
}
</style>
</head>
<body>
<div class="&#8301;LeftDiv fleft">
<div class="&#8301;LeftTop">width:200px
height:150px</div>
<div class="&#8301;LeftCenter">width:200px
height:100%
{Adaptive Height}<br>

<p>&nbsp</p>
in the ie6~,~,help me please!</div>
<div class="&#8301;LeftBottom">width:200px
height:100px</div>
</div>
<div class="RightDiv fleft">
<div class="RightTop">width:100% {Adaptive Width} height:50px</div>
<div class="RightCenter">width:100%{Adaptive Width}
height:100%{Adaptive Height}
<p>&nbsp</p>
in the ie6~,~</div>

<div class="RightBottom">width:100% {Adaptive Width} height:80px</div>
</div>
</body>
</html>

[edited by: swa66 at 11:43 pm (utc) on Oct. 19, 2009]
[edit reason] No links please. See ToS and Forum Charter [/edit]

kkfgef

7:43 am on Oct 19, 2009 (gmt 0)

10+ Year Member



I use FireFox¡¢Opera¡¢Netscape¡¢Safari¡¢Chrome¡¢ie8 test¡£
Ie6£¬7, but not passed

Jonesy

9:28 pm on Oct 19, 2009 (gmt 0)

10+ Year Member Top Contributors Of The Month



I suggest you run your page through the W3C validator.
You just might find that you have - oh - perhaps - something like
XHMTL: 7 errors, and 2 warnings.
CSS: 4 errors, and 1 warning.

(Not that I would ever visit a URL before the moderator(s) <snip> the disallowed reference...)