Hi!
I've got 2 div on my screen. One that cover the left side on the screen (50%) and the second one cover the right side (50%).
I want to put a div in front of these 2 div, center in my page. Work fine in Firefox but in IE6, i can't see the center div... maybe a z-index problem?
Any idea???
TOk now my layout is 100% working.
I've test my page in:
IE4, 5, 5.5, 6
Opera 7.23
Netscape 7.1
Mozilla 1.6
FireFox 0.8
The only problem is in IE 5: Instead to have a div that cover 50% of the page on left side and another div covering 50% of the page on the right side, i've got these 2 div cover each 25% of the 50% right side???
My center div is ok
Can someone know a fix to this or why IE5 do this... here's the code:
.css
html,body {
overflow : hidden;
margin: 0px;
padding: 0px;
height: 100%;
}
#sideL {
position: absolute;
width: 50%; height: 100%;
background-color: #EEEEEE;
}
#sideR {
float: right;
width: 50%; height: 100%;
background-color: #2A2E32;
}
#flash {
position: absolute;
left: 50%;
width: 800px; height: 400px;
margin-top: 100px;
margin-left: -341px;
background-color: #FFFFFF;
}
.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>turbulencemedia.com ::: 2004</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href=http://www.webdeveloper.com/forum/archive/index.php/"includes/style.css" />
</head>
<body>
<div id="sideL"></div>
<div id="sideR"></div>
<div id="flash">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://Download .macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="800" height="400" id="logo" align="">
<param name=movie value="test.swf"><param name=quality value=high><param name=bgcolor value=#FFFFFF><embed src=http://www.webdeveloper.com/forum/archive/index.php/"test.swf" quality=high bgcolor=#FFFFFF width="800" height="400" name="logo" swLiveConnect=true align=""
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>
</div>
</body>
</html>IE 5 does not support the floating of layers.
So:
div {
float : right;
margin-left : -40px;
width : 40px;
height : 30px;
}
can be seen with IE 6 and other popular browsers but IE 5 moves the layer off the screen.
IE 5 sees this as:
div {
margin-left : -40px;
width : 40px;
height : 30px;
}thank Bonner!
is there any solution to hack this for IE5?To be honest I just avoided using floating elements so I do not know to be honest.
I use relative and absolute positioning when I need to float elements.ohh ok..
so can i use position relative/absolute to set my div right and left??goooddd it work now
html,body {
overflow : hidden;
margin: 0px;
padding: 0px;
height: 100%;
}
#sideL {
position: absolute;
width: 50%; height: 100%;
background-color: #EEEEEE;
}
#sideR {
position: relative;
left: 50%;
width: 50%; height: 100%;
background-color: #2A2E32;
}
#flash {
position: absolute;
left: 50%;
top: 10%;
width: 800px; height: 400px;
margin-left: -341px;
background-color: #FFFFFF;
}/* floats to the right */
div {
position : absolute;
top : XXpx;
right : 0px
}
/* floats to the left */
div {
position : absolute;
top : XXpx;
left : 0px
}
Be careful with this though as you may need to include a hack to get all the browsers to position the layer in the same place.
Take a look at the hacks post I posted:
<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=30608Ok..">http://forums.webdeveloper.com/showthre ... =30608Ok..</a><!-- m -->. i've test it and work on all browser mentionned before.
Thank again
T
I've got 2 div on my screen. One that cover the left side on the screen (50%) and the second one cover the right side (50%).
I want to put a div in front of these 2 div, center in my page. Work fine in Firefox but in IE6, i can't see the center div... maybe a z-index problem?
Any idea???
TOk now my layout is 100% working.
I've test my page in:
IE4, 5, 5.5, 6
Opera 7.23
Netscape 7.1
Mozilla 1.6
FireFox 0.8
The only problem is in IE 5: Instead to have a div that cover 50% of the page on left side and another div covering 50% of the page on the right side, i've got these 2 div cover each 25% of the 50% right side???
My center div is ok
Can someone know a fix to this or why IE5 do this... here's the code:
.css
html,body {
overflow : hidden;
margin: 0px;
padding: 0px;
height: 100%;
}
#sideL {
position: absolute;
width: 50%; height: 100%;
background-color: #EEEEEE;
}
#sideR {
float: right;
width: 50%; height: 100%;
background-color: #2A2E32;
}
#flash {
position: absolute;
left: 50%;
width: 800px; height: 400px;
margin-top: 100px;
margin-left: -341px;
background-color: #FFFFFF;
}
.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>turbulencemedia.com ::: 2004</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href=http://www.webdeveloper.com/forum/archive/index.php/"includes/style.css" />
</head>
<body>
<div id="sideL"></div>
<div id="sideR"></div>
<div id="flash">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://Download .macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="800" height="400" id="logo" align="">
<param name=movie value="test.swf"><param name=quality value=high><param name=bgcolor value=#FFFFFF><embed src=http://www.webdeveloper.com/forum/archive/index.php/"test.swf" quality=high bgcolor=#FFFFFF width="800" height="400" name="logo" swLiveConnect=true align=""
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>
</div>
</body>
</html>IE 5 does not support the floating of layers.
So:
div {
float : right;
margin-left : -40px;
width : 40px;
height : 30px;
}
can be seen with IE 6 and other popular browsers but IE 5 moves the layer off the screen.
IE 5 sees this as:
div {
margin-left : -40px;
width : 40px;
height : 30px;
}thank Bonner!
is there any solution to hack this for IE5?To be honest I just avoided using floating elements so I do not know to be honest.
I use relative and absolute positioning when I need to float elements.ohh ok..
so can i use position relative/absolute to set my div right and left??goooddd it work now
html,body {
overflow : hidden;
margin: 0px;
padding: 0px;
height: 100%;
}
#sideL {
position: absolute;
width: 50%; height: 100%;
background-color: #EEEEEE;
}
#sideR {
position: relative;
left: 50%;
width: 50%; height: 100%;
background-color: #2A2E32;
}
#flash {
position: absolute;
left: 50%;
top: 10%;
width: 800px; height: 400px;
margin-left: -341px;
background-color: #FFFFFF;
}/* floats to the right */
div {
position : absolute;
top : XXpx;
right : 0px
}
/* floats to the left */
div {
position : absolute;
top : XXpx;
left : 0px
}
Be careful with this though as you may need to include a hack to get all the browsers to position the layer in the same place.
Take a look at the hacks post I posted:
<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=30608Ok..">http://forums.webdeveloper.com/showthre ... =30608Ok..</a><!-- m -->. i've test it and work on all browser mentionned before.
Thank again
T