function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
hramanihramani 

VF page doubt

I have a vf page which is displayin in mozilla differently and in google chrome differently
what should be the reason?

I need it to look same in all browsers

 

below is my code

 

 

 

<apex:page sidebar="false" standardcontroller="Business_Unit__c" extensions="shelfnodiplay1" action="{!testit1}">
<apex:form >


<apex:outputPanel id="panel">



<html lang="en">
<head>
<meta charset="utf-8" />

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>

<div id="tabs" style="background-color:#196C96;" >
<ul>
<li><a href="#tabs-1" style="background-color:#B7E2F0;"><b>SHELF INFO</b></a></li>
<li><a href="#tabs-2" style="background-color:#B7E2F0;"><b>SHELF RESERVATION INFO</b></a></li>

</ul>
<div id="tabs-1" style="background-color:#B7E2F0;">
<body style="background-color:#196C96;"/>
<div align="center" width="550px">
<b>
<apex:outputText value="{!message}" rendered="{!flag}"/>
</b>

</div>

<br/><br/><br/>
<apex:outputText escape="false" value="{!firsttab}"></apex:outputText>

</div>
<div id="tabs-2" style="background-color:#B7E2F0;">
<body style="background-color:#196C96;"/>
<apex:outputText escape="false" value="{!secondtab}"></apex:outputText>
</div>

</div>



</body>
</html>


</apex:outputPanel>
</apex:form>
</apex:page>

 

 

Pls help. its very urgent

Ashish_SFDCAshish_SFDC

Hi Hari, 

 

What is the difference that you are seeing, can you upload pics so that we can understand better. 

 

Regards,

Ashish

Shiva Ramesh @ xcdhrShiva Ramesh @ xcdhr

Hi hramani

 

Dont use pixel(px) anywhere for width attribute. Use percentage(%) then it will dispaly as same in all browser

hramanihramani
Im using the same code i pasted but u cna see that the display result is different in both browsers. I want both the browsers to display same (the one in mozilla is the desired one).



The information contained in this electronic message and any attachments to this message are intended for the exclusive use of the addressee(s) and may contain proprietary, confidential or privileged information. If you are not the intended recipient, you should not disseminate, distribute or copy this e-mail. Please notify the sender immediately and destroy all copies of this message and any attachments.

WARNING: Computer viruses can be transmitted via email. The recipient should check this email and any attachments for the presence of viruses. The company accepts no liability for any damage caused by any virus transmitted by this email.

www.wipro.com
hramanihramani

i changed it from <div align="center" width="550px">  to <div align="center" width="550%"> but still i'm getting different displays in different browser.

Shiva Ramesh @ xcdhrShiva Ramesh @ xcdhr

can you attach screen shot

Ashish_SFDCAshish_SFDC

Hi Hira, 

 

 

Try this, 

widthStringThe width of the entire pageBlockTable, expressed either as a relative percentage to the total amount of available horizontal space (for example, width="80%"), or as the number of pixels (for example, width="800px").

 

 

To fix this, you will need to uniformly apply the css (dataStyle="text-align:left; width: 30%; max-width: 30%;") to all pageBlockSectionItems. Instead of applying the css to each tag, I suggest you include the following style.

 

<style type="text/css">
  .detailList {
      table-layout: fixed;
  }
  .labelCol {
      text-align: left !important;
      width: 30% !important;
      max-width: 30% !important;
  }
</style>

 

 

 

http://salesforce.stackexchange.com/questions/7377/css-isnt-being-applied-uniformly-across-browsers

 

 

Regards,

Ashish