Okay, This is my first real attempt at CSS, Right now it is just plain no images. Just using it to position all the information on a page for dynamic data injection from PHP.
EDIT::: Question, Why doesn't CSS work in IE, but not in FF when it comes to positioning? Details below contain the code that is used, what and where.
Anyways first off Some images since the site I am working on is not hosted live on any servers except my private dev server. So all images are screen shots. Browsers used are FF 3.5, IE 8, IE 7, FF 3.0.12
 
The one on the left is what it should look like in all browsers, and the one on the right is how it looks in IE 7 & 8
I am using codeigniter to as php frame work, and It loads the loader page, since the final page will be larger than content space so it is in a frame to allow scroll bars so it loads correctly formatted. This is the code it loads
HTML Code:
<object id="embeddedhtml" type="text/html" xml:lang="en-us" data="http://10.0.0.4/dev/xTermDialysis/index.php/welcome/test_output2" width="100%" style="background-color:white;border:thin;" title="In Progress Session Viewer" height="600"></object>
When that code executes it calls the page with this code to display it (this is incomplete just a fraction of what will be on the page)
HTML Code:
<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="http://10.0.0.4/dev/xTermDialysis/form.css" rel="stylesheet" type="text/css" />
</head>
<body style="font-size:0.8em;">
<div id="dialysis">
<div id="patientinfo">
<!-- Patient Info -->
<div id="patientinfo" class="Col1">
Patient Name {name}<br />
Date : {timestamp}
</div>
<div id="patientinfo" class="Col2">
Flow Sheet ID # {session_id}<br />
Bar Code # {true_patient_id}
</div>
<div id="patientinfo" class="Col3">
Nephrologist {nephro}<br />
Reviewed By RN {nurse}
</div>
</div>
<br />
<!-- Pretretment Info -->
<div id="PretreatmentInfo_Left">
<div id="PretreatmentInfo_Left" class="Header">Pretreatment Vitals</div>
<div id="PretreatmentInfo_Left" class="Col1">
Sitting BP<br />
Standing BP<br />
Temp<br />
Previous Post Weight<br />
Todays Weight<br />
Dry Weight <br />
Fluid To Remove<br /><br />
</div>
<!-- Colume for BP and Temp -->
<div id="PretreatmentInfo_Left" class="bloodpress">
000/000<br />
000/000<br />
{temp}<br />
</div>
<!-- Colume for Pulse and Weights -->
<div id="PretreatmentInfo_Left" class="Col2">
Pulse 0<br />
Pulse 0<br />
<br />
{ppw}<br />
{tw}<br />
{dw}<br />
{ftr}<br /><br />
</div>
<div id="PretreatmentInfo_Left" class="Header">Labs</div>
<div id="PretreatmentInfo_Left" class="LabsCol1">
SST<br />
Green<br />
Lavender<br />
</div>
<div id="PretreatmentInfo_Left" class="LabsCol2">
Dark Blue<br />
Light Blue<br />
Other<br />
</div>
<div id="PretreatmentInfo_Left" class="LabsCol3">
0<br />0<br />0<br />
</div>
<div id="PretreatmentInfo_Left" class="LabsCol4">
0<br />0<br />0<br />
</div>
<div id="PretreatmentInfo_Left" class="Header">Dialysate / Product Water</div>
<div id="PretreatmentInfo_Left" class="DialysateCol">
Dialysate<br />
Culture<br />
LAL<br />
</div>
<div id="PretreatmentInfo_Left" class="ProductCol">
Product <br />
Culture<br />
LAL<br />
</div>
<div id="PretreatmentInfo_Center">
<div id="PretreatmentInfo_Center" class="Header">Pretreament Data Collections</div>
</div>
</div>
</div>
</body>
</html>
And since doing tables with this layout is very complicated I opted for trying CSS, and this is the css file that is associated with the above page
Code:
/* The following 5 items are use through out the site. Files are ref'd correctly
.TableHeader{
background-color:silver;
text-align:center;
}
.CellCenter{
text-align:center;
}
.TblCenter{
margin-left:auto;
margin-right:auto;
border-style: solid;
border-width: 1px;
}
.TblCenterNoBorder{
margin-left:auto;
margin-right:auto;
}
.TxtCenter{
margin-left:auto;
margin-right:auto;
}
/* Begin Dialysis CSS */
#dialysis{
display:block;
margin-left:auto;
margin-right:auto;
min-width:900px;
position:relative;
}
#content{
}
/* Patient Info Block */
#patientinfo{
display:block;
}
#patientinfo.Col1{
width:150px;
}
#patientinfo.Col2{
display:block;
width:235px;
margin-left:185px;
margin-top:-31px;
}
#patientinfo.Col3{
display:block;
width:250px;
margin-left:405px;
margin-top:-31px;
}
/* Pretreatment Info Left (Vitals / Labs) */
#PretreatmentInfo_Left{
display:block;
width:200px;
border:thin;
border-color:black;
}
#PretreatmentInfo_Left.Header{
background-color:silver;
width:200px;
text-align:center;
}
#PretreatmentInfo_Left.Col1{
width:100px;
}
#PretreatmentInfo_Left.Col2{
width:100px;
margin-left:135px;
margin-top:-48px;
}
#PretreatmentInfo_Left.bloodpress{
width:50px;
margin-left:75px;
margin-top:-144px;
}
/* Labs for Left Pretreatment */
#PretreatmentInfo_Left.LabsCol1{
width:50px;
}
#PretreatmentInfo_Left.LabsCol2{
width:60px;
margin-left:90px;
margin-top:-48px;
}
#PretreatmentInfo_Left.LabsCol3{
width:20px;
margin-left:65px;
margin-top:-48px;
}
#PretreatmentInfo_Left.LabsCol4{
width:20px;
margin-left:160px;
margin-top:-48px;
}
#PretreatmentInfo_Left.DialysateCol{
width:50px;
}
#PretreatmentInfo_Left.ProductCol{
width:60px;
margin-left:90px;
margin-top:-48px;
}
#PretreatmentInfo_Center{
display:block;
width:400px;
margin-left:105px;
margin-top:-272px;
/*margin-bottom:225px;*/
}
#PretreatmentInfo_Center.Header{
background:silver;
text-align:center;
}
So how would I get it to display correctly in all "modern" browsers, I don't want to force end users to go and get firefox if they insist on using IE. Or am I just doomed to use tables?
Thanks in advanced Jon
__________________
AMW_Drizz
Dev Machine:: Apache 2.2.6 PHP 5.2.6 MySQL 5.1
Last edited by amw_drizz; 08-19-2009 at 08:07 PM..
Reason: Added simple question at top of post
|
