function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
larevolucionlarevolucion 

IE8 Compatibility Mode - CSS Style Issue

I am wondering if anyone else has run into this issue I am having. I set up a simple page with an apex tabList. I then added a simple style to the page as seen below. When I then add this page to a tab (i.e. Contacts, Leads, etc.), and open the page in IE8 (running in compatibility mode) I find a number of situations that causes the embedded control to go blank.

 

For instance, resizing the page will cause the control to disappear. Also hovering over the labels near the top of the page that casue the hidden panel to appear (Activity History, Open Activity, etc) will cause the control to go blank.

 

I have narrowed down the issue to to "position: relative;" style attribute. If I remove that attribute, the issue does not occur. I have only noticed this happen in IE8 running in compatibility mode.

 

My code is below:

 

css style

 

.control { background-color:#F3F3EC; position: relative; }
 
page
 
 
<apex:page standardController="lead">
  <apex:stylesheet value="{!$Resource.TabStyle}"/>
    <apex:outputPanel id="control" styleClass="control" layout="block">
        <apex:tabPanel switchType="client" selectedTab="name1" id="theTabPanel">
            <apex:tab label="Tab 1" name="name1" id="tabOne" styleClass="tabOne">
                Tab 1
            </apex:tab>
            <apex:tab label="Tab 2" name="name2" id="tabTwo" styleClass="tabTwo">
                Tab 2
            </apex:tab>
            <apex:tab label="Tab 3" name="name3" id="tabThree" styleClass="tabThree">
                Tab 3
            </apex:tab>
        </apex:tabPanel>
    </apex:outputPanel>
</apex:page>
 
 Any
 information anyone can provide would be appreciated. Thanks.


stephanstephan
Why are you using position:relative in this case?


larevolucionlarevolucion
The code I posted is stripped out of a much larger application that uses the styles for placement of controls on the page. I narrowed down the problem to be related to that particular style and posted only what code was necessary to successfully recreate the issue.


stephanstephan
Got it. In this case, I don't think this is a VisualForce issue per se. While you can certainly apply formatting styles to various components (which tend to be stable/consistent across browsers), once you venture into layout styles (which are not), then you're on your own as far making it work. You my want to Google issues related to relative positioning using IE8 in compatibility mode...