HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS. ocPortal 9 is superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


IE bug in "View memeber profile"

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#36061 (In Topic #8111)
Avatar

Fan in training

there is a IE bug which i cant solve..
i tried to create a class for each IE and firefox.
like:

.profile{
margin-right:50px;
}
html>body .profile{
margin-right:0px;
}

but it didnt seem to be working in the page ("view member profile")
can you help to solve ? cos most of the people may be using IE6..

Back to the top
 
Posted
Rating:
#36068
Avatar

It looks to me that is being caused by some other part of the CSS. Looks like position: absolute is set somewhere there.


Become a fan of Composr on Facebook or add me as a friend. Add me on on Twitter. Support me on Patreon
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#36146
Avatar

Fan in training

code

{TITLE}

<div style="position: relative">
   <div style="margin-right: {$CSS_DIMENSION_REDUCE,{AVATAR_WIDTH*},-30}">
      {+START,IF,{VIEW_PROFILES}}
         <h2>{!PROFILE}</h2>

         <div class="dottedborder ocf_member_details_boxes">
            <div class="ocf_member_detailer_{$CYCLE,omd,a,b}"><div onmouseout="Javascript: if (window.activateTooltip) deactivateTooltip(this,event);" onmousemove="Javascript: if (window.activateTooltip) repositionTooltip(this,event);" onmouseover="Javascript: if (window.activateTooltip) activateTooltip(this,event,'{PRIMARY_GROUP*;}','auto');" class="ocf_member_detailer_inner">
               <span class="ocf_member_detailer_titler">{!PRIMARY_GROUP}:</span> {PRIMARY_GROUP}
            </div></div>

            {+START,IF_NON_EMPTY,{JOIN_DATE}}
               <div class="ocf_member_detailer_{$CYCLE,omd,a,b}"><div onmouseout="Javascript: if (window.activateTooltip) deactivateTooltip(this,event);" onmousemove="Javascript: if (window.activateTooltip) repositionTooltip(this,event);" onmouseover="Javascript: if (window.activateTooltip) activateTooltip(this,event,'{JOIN_DATE*;}','auto');" class="ocf_member_detailer_inner">
                  <span class="ocf_member_detailer_titler">{!JOIN_DATE}:</span> {JOIN_DATE*}
               </div></div>
            {+END}

            <div class="ocf_member_detailer_{$CYCLE,omd,a,b}"><div onmouseout="Javascript: if (window.activateTooltip) deactivateTooltip(this,event);" onmousemove="Javascript: if (window.activateTooltip) repositionTooltip(this,event);" onmouseover="Javascript: if (window.activateTooltip) activateTooltip(this,event,'{ONLINE_NOW*;}','auto');" class="ocf_member_detailer_inner">
               <span class="ocf_member_detailer_titler">{!ONLINE_NOW}:</span> {ONLINE_NOW*}
            </div></div>

            <div class="ocf_member_detailer_{$CYCLE,omd,a,b}"><div onmouseout="Javascript: if (window.activateTooltip) deactivateTooltip(this,event);" onmousemove="Javascript: if (window.activateTooltip) repositionTooltip(this,event);" onmouseover="Javascript: if (window.activateTooltip) activateTooltip(this,event,'{TIME_FOR_THEM*;}','auto');" class="ocf_member_detailer_inner">
               <span class="ocf_member_detailer_titler">{!TIME_FOR_THEM}:</span> {TIME_FOR_THEM*}
            </div></div>

            {+START,IF_NON_EMPTY,{BANNED}}
               <div class="ocf_member_detailer_{$CYCLE,omd,a,b}"><div onmouseout="Javascript: if (window.activateTooltip) deactivateTooltip(this,event);" onmousemove="Javascript: if (window.activateTooltip) repositionTooltip(this,event);" onmouseover="Javascript: if (window.activateTooltip) activateTooltip(this,event,'{BANNED*;}','auto');" class="ocf_member_detailer_inner">
                  <span class="ocf_member_detailer_titler">{!_BANNED}:</span> {BANNED*}
               </div></div>
            {+END}

            {+START,IF_NON_EMPTY,{DOB}}
               <div class="ocf_member_detailer_{$CYCLE,omd,a,b}"><div onmouseout="Javascript: if (window.activateTooltip) deactivateTooltip(this,event);" onmousemove="Javascript: if (window.activateTooltip) repositionTooltip(this,event);" onmouseover="Javascript: if (window.activateTooltip) activateTooltip(this,event,'{DOB*;}','auto');" class="ocf_member_detailer_inner">
                  <span class="ocf_member_detailer_titler">{!DATE_OF_BIRTH}:</span> {DOB*}
               </div></div>
            {+END}

            {+START,LOOP,CUSTOM_FIELDS}
               <div class="ocf_member_detailer_{$CYCLE,omd,a,b}"><div onmouseout="Javascript: if (window.activateTooltip) deactivateTooltip(this,event);" onmousemove="Javascript: if (window.activateTooltip) repositionTooltip(this,event);" onmouseover="Javascript: if (window.activateTooltip) activateTooltip(this,event,'{VALUE^*;}'.replace(/\n/g,'<br />'),'auto');" class="ocf_member_detailer_inner">
                  <span class="ocf_member_detailer_titler">{NAME}:</span> {VALUE}
               </div></div>
            {+END}
         </div>
      {+END}

      {+START,IF,{$NOT,{VIEW_PROFILES}}}
         <p class="important_notification">
            {!ACCESS_DENIED}
         </p>
      {+END}

      <br />

      <h2>{!_STATISTICS}</h2>

      <div class="dottedborder ocf_member_details_boxes">
         <div class="ocf_member_detailer_{$CYCLE,omd2,a,b}"><div onmouseout="Javascript: if (window.activateTooltip) deactivateTooltip(this,event);" onmousemove="Javascript: if (window.activateTooltip) repositionTooltip(this,event);" onmouseover="Javascript: if (window.activateTooltip) activateTooltip(this,event,'{COUNT_POSTS*;}','auto');" class="ocf_member_detailer_inner">
            <span class="ocf_member_detailer_titler">{!COUNT_POSTS}:</span> {COUNT_POSTS*}
         </div></div>

         <div class="ocf_member_detailer_{$CYCLE,omd2,a,b}"><div onmouseout="Javascript: if (window.activateTooltip) deactivateTooltip(this,event);" onmousemove="Javascript: if (window.activateTooltip) repositionTooltip(this,event);" onmouseover="Javascript: if (window.activateTooltip) activateTooltip(this,event,'{MOST_ACTIVE_FORUM*;}','auto');" class="ocf_member_detailer_inner">
            <span class="ocf_member_detailer_titler">{!MOST_ACTIVE_FORUM}:</sp
an> {MOST_ACTIVE_FORUM*}
         </div></div>

         {+START,IF,{$IS_ON_POINTS}}
            <div class="ocf_member_detailer_{$CYCLE,omd2,a,b}"><div onmouseout="Javascript: if (window.activateTooltip) deactivateTooltip(this,event);" onmousemove="Javascript: if (window.activateTooltip) repositionTooltip(this,event);" onmouseover="Javascript: if (window.activateTooltip) activateTooltip(this,event,'{COUNT_POINTS*;}','auto');" class="ocf_member_detailer_inner">
               <span class="ocf_member_detailer_titler">{!POINTS}:</span> {COUNT_POINTS*}
            </div></div>
         {+END}

         <div class="ocf_member_detailer_{$CYCLE,omd2,a,b}"><div onmouseout="Javascript: if (window.activateTooltip) deactivateTooltip(this,event);" onmousemove="Javascript: if (window.activateTooltip) repositionTooltip(this,event);" onmouseover="Javascript: if (window.activateTooltip) activateTooltip(this,event,'{SUBMIT_DAYS_AGO*;}','auto');" class="ocf_member_detailer_inner">
            <span class="ocf_member_detailer_titler">{!LAST_SUBMIT_TIME}:</spa
n> {!DAYS_AGO,{SUBMIT_DAYS_AGO}}
         </div></div>

         {+START,IF_NON_EMPTY,{IP_ADDRESS}}
            <div class="ocf_member_detailer_{$CYCLE,omd2,a,b}"><div onmouseout="Javascript: if (window.activateTooltip) deactivateTooltip(this,event);" onmousemove="Javascript: if (window.activateTooltip) repositionTooltip(this,event);" onmouseover="Javascript: if (window.activateTooltip) activateTooltip(this,event,'{IP_ADDRESS*;}','auto');" class="ocf_member_detailer_inner">
               <span class="ocf_member_detailer_titler">{!IP_ADDRESS}:</span> {IP_ADDRESS*}
            </div></div>
         {+END}
      </div>

      {+START,IF_ARRAY_NON_EMPTY,SECONDARY_GROUPS}
         <h2>{!SECONDARY_GROUP_MEMBERSHIP}</h2>

         <p>{!_SECONDARY_GROUP_MEMBERSHIP,{USERNAME*}}</p>
         <ul>
         {+START,LOOP,SECONDARY_GROUPS}
            <li><a href="{$PAGE_LINK*,_SEARCH:groups:view:{loop_key}}">{loop_va
r*}</a></li>
         {+END}
         </ul>
      {+END}

      {+START,IF_NON_EMPTY,{GALLERIES}}
         <h2>{!GALLERIES}</h2>
 
         {GALLERIES}
         <br />
      {+END}
   </div>

    {+START,IF_NON_EMPTY,{AVATAR_URL}}
      <div style="position: absolute; top: 0px; right: 0px">
         {+START,BOX,{!AVATAR},{AVATAR_WIDTH*}}
            <img class="blend" src="{AVATAR_URL*}" alt="{!AVATAR}" />
         {+END}

      </div>
   {+END}
</div>

<br />

<div style="position: relative">
   <div style="margin-right: {$CSS_DIMENSION_REDUCE,{PHOTO_WIDTH*},-30}">
      <h2>{!ACTIONS}</h2>

      <div class="ocf_member_actions_left">
         {ACTIONS_usage}
         {ACTIONS_views}
         {ACTIONS_content}
      </div>

      <div class="ocf_member_actions_right">
         {ACTIONS_contact}
         {ACTIONS_profile}
      </div>

      <br class="float_passer" />

      {+START,IF_NON_EMPTY,{SIGNATURE}}
         <br />

         <h2>{!SIGNATURE}</h2>

         {SIGNATURE}
      {+END}
   </div>

  {+START,IF_NON_EMPTY,{PHOTO_URL}}
      <div style="position: absolute; top: 0px; right: 0px">
         {+START,BOX,{!PHOTO},{PHOTO_WIDTH*}}
            <a href="{PHOTO_URL*}"><img src="{PHOTO_THUMB_URL*}" alt="{!PHOTO}" /></a>
         {+END}
      </div>
   {+END}

</div>



this is the code from OCF_MEMBER_PROFILE_PAGE.tpl. there is only 2 div that is absolute.
Back to the top
 
Posted
Rating:
#36153
Avatar

I don't know why this is happening myself, but IE can be very awkward with absolute positioning. You might want to try removing the position: relative bits and see what happens.


Become a fan of Composr on Facebook or add me as a friend. Add me on on Twitter. Support me on Patreon
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: