 |  |  |  |  |  |  |  |
Cross browser CSS
Please support our Site Layout and Usability advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
 |
•
•
Join Date: Feb 2005
Posts: 1,181
Reputation: 
Solved Threads: 67
Hi all,
I'm trying to create a three column CSS based HTML template.
Here's the XHTML: TriCol_Liq.htm
and here's the CSS: TriCol_Liq.css
The centre div should be liquid and expand/contract to fill the space between the right and left div depending on the size of the users browser window. It displays perfectly in Firefox, but IE stuffs some padding in between the centre div and the right div element. Does anyone know how I can tweek my CSS to make IE play along?
I'm trying to create a three column CSS based HTML template.
Here's the XHTML: TriCol_Liq.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Tripple Column Layout Liquid</title> <link rel="stylesheet" type="text/css" href="TriCol_liq.css" /> </head> <body> <!--START PAGE CONTAINER --> <div class="container"> <!--START HEADER --> <div class="header"> HEADER </div> <!--END HEADER --> <!--START LEFT COLUMN --> <div class="left"> LEFT </div> <!--END LEFT COLUMN --> <!--START CENTER COLUMN--> <div class="center"> <div class="center_content"> CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER </div> </div> <!--START PENTER COLUMN --> <!--START RIGHT COLUMN --> <div class="right"> RIGHT </div> <!--END RIGHT COLUMN --> <!--END PAGE CONTAINER --> </div> </body> </html>
and here's the CSS: TriCol_Liq.css
body{
margin: 0px 0px 0px 0px;
background-color: #ffcc66 ;
}
div.container{
width: 100%;
}
div.header{
position: absolute;
width: 100%;
height: 100px;
top: 0px;
left: 0px;
background-color: #ffcc66;
}
div.left{
position: absolute;
width: 160px;
height: 400px;
top:100px;
left: 0px;
background-color: #ffff33;
}
div.center{
position: absolute;
height: 400px;
top: 100px;
left: 160px;
right: 160px;
background-color: #ffff66;
}
div.center_content{
padding: 25px 25px 25px 25px;
}
div.right{
position: absolute;
width: 160px;
height: 400px;
top: 100px;
right: 0px;
background-color: #ffff99;
}The centre div should be liquid and expand/contract to fill the space between the right and left div depending on the size of the users browser window. It displays perfectly in Firefox, but IE stuffs some padding in between the centre div and the right div element. Does anyone know how I can tweek my CSS to make IE play along?
on div.center change the absolute positioning to be margins
div.center{
height: 400px;
margin-top: 100px;
margin-left: 160px;
margin-right: 160px;
background-color: #ffff66;
}
That should work.
IE doesn't support positioning from opposite sides.
div.center{
height: 400px;
margin-top: 100px;
margin-left: 160px;
margin-right: 160px;
background-color: #ffff66;
}
That should work.
IE doesn't support positioning from opposite sides.
emdevelopments - accessible web design | HiJackThis
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
•
•
Join Date: Feb 2005
Posts: 1,181
Reputation:
Solved Threads: 67
•
•
•
•
Originally Posted by DaveSW
on div.center change the absolute positioning to be margins
div.center{
height: 400px;
margin-top: 100px;
margin-left: 160px;
margin-right: 160px;
background-color: #ffff66;
}
That should work.
IE doesn't support positioning from opposite sides.
No problem, but in that case you might get a box model problem in moz/IE - check it out, if it appears as different heights let me know and I'll tell you how to fix it.
emdevelopments - accessible web design | HiJackThis
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
•
•
Join Date: Feb 2005
Posts: 1,181
Reputation:
Solved Threads: 67
•
•
•
•
Originally Posted by DaveSW
No problem, but in that case you might get a box model problem in moz/IE - check it out, if it appears as different heights let me know and I'll tell you how to fix it.
yeah what's happening is that IE subtracts margins and padding from the width, wheras the official box model (as used by Mozilla) adds them.
So what you need to do is nest two divs, i.e.
<div><div>
then apply your margin-top to the top one, and your height to the second one.
That then avoids the box model totally.
There are numerous hacks for getting IE to read one value and Moz the other, but there's no guarantee on their effectiveness with future browsers.
So what you need to do is nest two divs, i.e.
<div><div>
then apply your margin-top to the top one, and your height to the second one.
That then avoids the box model totally.
There are numerous hacks for getting IE to read one value and Moz the other, but there's no guarantee on their effectiveness with future browsers.
emdevelopments - accessible web design | HiJackThis
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
|
Similar Threads
- Tutorial: Create a cross-browser compatible, single-level, drop-down menu (Site Layout and Usability)
- Help wih CSS (HTML and CSS)
- Style properties are ignored by Mozilla browser... (ASP.NET)
Other Threads in the Site Layout and Usability Forum
- Previous Thread: Mobile Phone Messaging
- Next Thread: Recommendations for Web Site creation
| Thread Tools | Search this Thread |
Latest Site Layout and Usability Posts
- Today's Posts
- Unanswered Threads
Related Forum Features
Tag cloud for Site Layout and Usability
& blog blogging computer content customer design development dreamweaver duplicate email evaluation filesharing firefox flash gilbane google html itunes javascript kazaa layout music napster peertopeer photoshop remote remoteserver satellitenavigation satnav server services site tables template tips tomtom url wave web website websitedesignreview web_development web_sites wordpress
