Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Browsers display CSS differently. Need some help

    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

    Code:
    /*
    	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

    Code:
    <!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>
    Attached Thumbnails Attached Thumbnails Browsers display CSS differently. Need some help-chrome.jpg   Browsers display CSS differently. Need some help-ff.jpg   Browsers display CSS differently. Need some help-ie8.jpg  
    Last edited by gsharpp; 08-11-2011 at 08:33 AM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •