|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
#1
November 3rd, 2003, 01:36 PM
|
||||
|
||||
|
CSS Positioning Issue with IE
I've been hearing a lot about the benefits of CSS positioning over tables so I decided to give it a try myself.
Below is the code for a template page I whipped up in an attemt to have a two column layout centered directly in the screen. All is well except when I try to view the document using Internet Explorer. As you can see in this image, Internet Explorer renders an 8 to 10 pixel gap between the two columns. This image shows Mozilla Firebird rendering the page how I expected it to be displayed. To see this in action for yourself, go to http://www.p0w3r.com/test.htm. The CSS Code:
/* Tag Redefinitions */
body {
background-color: #E7E7E7;
}
/* Main Container DIVs */
#leftColumnParent {
position: absolute;
left: 0px;
top: 20px;
width: 50%;
text-align: right;
}
#rightColumnParent {
position: absolute;
left: 50%;
top: 20px;
width: 50%;
}
/* Content Container DIVs */
#rightRow1 {
position: absolute;
top: 0px;
left: 0px;
}
#rightRow2 {
position: absolute;
top: 166px;
left: 0px;
}
#rightRow3 {
position: absolute;
top: 333px;
left: 0px;
}
Code:
<div id="leftColumnParent"> <img src="images/splashLargeBlock.jpg" width="356" height="489" alt="Left Column Data" /> </div> <div id="rightColumnParent"> <div id="rightRow1"><img src="images/splashTopBlock.jpg" width="345" height="166" alt="Row One Data" /></div> <div id="rightRow2"><img src="images/splashMiddleBlock.jpg" width="345" height="167" alt="Row Two Data" /></div> <div id="rightRow3"><img src="images/splashBottomBlock.jpg" width="345" height="156" alt="Row Three Data" /></div> </div>
__________________
Sleep is highly overrated.
|
|
#2
November 3rd, 2003, 02:47 PM
|
||||
|
||||
|
it works fine on msie if you use:
#rightColumnParent { position: absolute; left: 49%; top: 20px; width: 50%; } relative values are tricky because different browsers interpret them in different ways? but how about using: Code:
/* Main Container DIVs */
#contain { position: absolute; width: 100%; height: 100%; }
#leftColumnParent {
position: relative;
right: 0px;
top: 10px;
width: 50%;
text-align: right;
}
#rightColumnParent {
position: absolute;
left: 50%;
top: 10px;
width: 50%;
}
/* Content Container DIVs */
#rightRow1 {
position: absolute;
top: 0px;
left: 0px;
}
#rightRow2 {
position: absolute;
top: 166px;
left: 0px;
}
#rightRow3 {
position: absolute;
top: 333px;
left: 0px;
}
-->
</style></head>
<body>
<div id="contain">
<div id="leftColumnParent">
<img src="images/splashLargeBlock.jpg" width="356" height="489" alt="Left Column Data" />
</div>
<div id="rightColumnParent">
<div id="rightRow1"><img src="images/splashTopBlock.jpg" width="345" height="166" alt="Row One Data" /></div>
<div id="rightRow2"><img src="images/splashMiddleBlock.jpg" width="345" height="167" alt="Row Two Data" /></div>
<div id="rightRow3"><img src="images/splashBottomBlock.jpg" width="345" height="156" alt="Row Three Data" /></div>
</div>
checked in msie and netscape and it worked. don't have mozilla installed though  Last edited by miseria : November 3rd, 2003 at 02:50 PM.
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > CSS Positioning Issue with IE |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
