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
Demo29Demo29 

outputPanel not displaying styleClass formatting

Hi

 

I am trying to create a VF page with the look and feel of another website, but am running into problems when I use an outputPanel as a <div> tag. I have uploaded the css as a Static Resource and referenced it in <apex:stylesheet> tags, and if I use <div> tags the formatting is fine, but when I try an replace it with <apex:outputPanel layout="block"> tags to utilise the rerender ability, the formatting disappears:

 

e.g.. this will render perfectly:

<div id="content" class="cType0">
<h3><strong>Text</strong></h3>
</div>

but this will not have all the formatting it should:

 

<apex:outputPanel layout="block" id="content" styleClass="cType0">
<h3><strong>Text</strong></h3>
</apex:outputPanel>

 

 For the most part this is not a problem, as I can just use the <div> tags for the layout and then only use the outputPanels when sf data is involved. The real problem comes when I add a commandButton to rerender sections. This works fine in Firefox, but errors in IE (6), with the Error 'Access is Denied to http://www.website.com/', where the website is where the css came from.

 

My knowledge of css isn't all that great, so I don't know whether there is something I need to change in the css file, or the vf code, but it seems strange that the problem is centered around a commandButton which only sends data to salesforce and rerenders some sections.

 

Does anyone have any idea why this might be happening?

 

Thanks

 

 

Message Edited by Demo29 on 08-19-2009 06:50 AM
Demo29Demo29

Ok, well I've managed to solve this myself, not as nicely as I would have liked, but did find out some interesting things. So for anyone else who comes across this:

 

First of all I had to edit the css file so in the id declarations there was a wildcard character (*) so the appended id's would still reference the correct information (e.g. #[id*=header] { float:right; }). This still didn't work, however, as it appears that if you use a commandButton property, it will tramp all over your stylesheets, regardless if you set up your own and hide the header and declare false on the standardStylesheet property in the <apex:page> tag. The way round this was to then use a commandLink that references a button image, or an image with an actionSupport.

 

Finally got the page looking and acting the way it should, but it was very annoying to find out the commandButton played merry hell with the styles.