...

View Full Version : Browsers display CSS differently. Need some help



gsharpp
08-11-2011, 07:58 AM
Hey guys!

I've been trying to edit a layout that was previously designed vertically and change it into a more horizontal oriented layout. I've been having some problems getting this new layout to display properly in different browsers. It seems to work fine in FF and IE8 but it is having issues with IE9 and especially Chrome. I've attached some screenshots. I've been trying to figure this out but I'm having no luck. I'm pretty sure i've got some errors in my code.

1st pic Chrome
2nd pic FF
3rd pic IE8 (noticed how the buttons are displayed differently from firefox)

Here is the code for that particular page. Hope it helps


/*
DocumentEdit Page
*/
.clear
{
overflow:hidden;
width: 100px;
}


#divTagData
{
margin-top:1cm;
float:right;
padding: 10px 10px 10px 10px;
text-align:left;
margin-right:75px;
}

#tblbuttons
{
float:right;
margin-left:auto;
margin-right:55px;
margin-top:10px;
width:400px;
}

#divtable
{
float: right;
width:400px;
}

#btpadding
{
padding: 0px
}

#tblTagWrapper
{
float:right;
margin-left:auto;
margin-right:auto;
text-align:right;
}

#tblTagData
{
float:right;
margin-left:auto;
margin-right:auto;
text-align:center;
}

#txtInstructions
{
float:right;
clear:right;
margin-left:auto;
margin-right:55px;
margin-top:10px;
width:400px;
height:100px;
}

#txtInstructions.blank
{
font-style:italic;
color: Black;
}

#divOrderInformation
{
margin-top:1cm;
text-align:center;
}

#tblOfferings
{
margin-left:auto;
margin-right:55px;
margin-bottom:10px;
float:right;
border-collapse:collapse;
width: 400px;
}

#tblOfferings th
{
font-family: Arial;
font-size:8.5pt;
font-weight: bold;
background:#f8a837 url(images/buttonBack.gif) repeat-x scroll 0% 0%;
border:solid 1px silver;
padding:2px;
}

#tblOfferings td
{
font-family: Arial;
font-size: 8.5pt;
border:solid 1px silver;
padding:2px;
}

#tblOfferings tr
{
cursor:pointer;
/* background:#add8e6 url(images/trBack.gif) repeat-x scroll 0% 0%; */
background:#f8a837 url(images/trSelectedBack.gif) repeat-x scroll 0% 0%;
}

#tblOfferings tr.selected
{
cursor:pointer;
/* background:#f8a837 url(images/trSelectedBack.gif) repeat-x scroll 0% 0%; */
background:#7da5e0 url(images/trBack.gif) repeat-x scroll 0% 0%;
}

#divPaymentOptions
{
float:right;
}

#divProof
{
float:left;
padding: 20px 0px 0px 60px;
}

IMG.proof
{
margin:5px;
border:solid 1px black;
height:236px;
width:425px;
}

.space
{
height:10px;


this is the HTML code to this page



<!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>
<title>Document Preview</title>
<script type="text/javascript" src="../js/documentedit.js?dt=20100624"></script>

</head>
<body>
<div id="divContent">
<div id="divBorder">
<div id="divHeader">
</div>
<div id="divMenuBar">
</div>
<div id="divFrameContent">
<span id="lblHead" class="label"></span>
<div id="divProof" class="label" style="text-align: center;">
</div>
<div id="divTagData" style="display: none;">
<table id="tblTagWrapper" cellpadding="0" cellspacing="0">
<tr>
<td>
<table id="tblTagData">
<tbody id="tblbTagData">
</tbody>
</table>
</td>
</tr>
<tr>
<td style="text-align: right; padding-right: 4px;">
<input type="button" class="button" id="btnSaveTagData" onclick="btnSave_onClick();" />
<input type="button" class="button" id="btnCancelTagData" onclick="btnCancelTagData_onClick();" />
</td>
</tr>
</table>
</div>
<div id="divOrderInformation">
<p>
<span id="lblInstructions" class="label"></span>
</p>
<table id="tblOfferings">
<tbody id="tblbOfferings">
</tbody>
</table>
<div id="divtable">
<table id="tblbuttons" cellpadding="0" cellspacing="0">
<tr>
<td style="text-align: right; padding-right: 4px;">
<input type="button" class="button" id="btnEdit" onclick="btnEdit_onClick();" />
<input type="button" class="button" id="btnApp" onclick="btnTest_onClick();" />
<div id="divPaymentOptions">
<input type="button" class="button" id="btnOrder" onclick="btnOrder_onClick();" />
</div>
</td>
</tr>
</table>
</div>
<p>
<span id="lblDocNotFound" class="label error" style="display: none;"></span>
</p>
<span id="CostCentreSpan" class="label">
Cost Centre: <input type="text" id="txtCostCenter" class="blank" /><br /><br />
</span>
<textarea id="txtInstructions" class="blank" onblur="txtInstructions_onBlur();" onfocus="txtInstructions_onFocus();"></textarea><br />
</div>
<span id="lblNoOffering" class="label error" style="display: none;"></span>
</div>
<div id="divFooter">
</div>
</div>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum