CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

A CHALLENGE: Firefox bug combining absolute and fixed positioning

Discuss A CHALLENGE: Firefox bug combining absolute and fixed positioning in the CSS Help forum on Dev Shed.
A CHALLENGE: Firefox bug combining absolute and fixed positioning Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old May 5th, 2008, 02:37 AM
flicity flicity is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: May 2008
Posts: 3 flicity User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 24 m 14 sec
Reputation Power: 0
A CHALLENGE: Firefox bug combining absolute and fixed positioning
Join Date: May 2008
Posts: 2

Firefox bug combining absolute and fixed positioning
Hey helpful people.

I am designing a site which has a floating toolbar (position: fixed) with popup menus. The popup menus are using nested lists and position: absolute to display.
JavaScript is dealing with the transition.

The problem is that in firefox alone the fixed toolbar jumps when the popup menus show and hide. Removing either position: fixed or the offset (bottom: 27px) removes this problem. However these need to be present in the design.

Anyone know a workaround? (webpage and css below)

Code:
<div class="toolbar_O">
  <div class="toolbar_I">
    <!-- top page info -->
    <div class="pageInformation cf">
      <!-- Page Status Info Start -->
      <div class="pageStatus">
        <h4 class="statusLabel">Status: </h4>
        <span class="status">Live</span> </div>
      <!-- Page Status Info End -->
      <div class="RHS cf">
        <div class="toolbarMenu">
          <ul>
            <li class="publicationDates"><a href="#" title="Publication dates">Publication dates<span class="moreArrow"><span class="wai">^</span></span>
              <!--[if gte IE 7]><!--></a><!--<![endif]-->
              <ul class="popup">
                <li>
                  <form>
                    <p>
                      <label for="email" class="expiryDate">Set expiry date</label>
                    </p>
                    <input type="text" class="inputTextbox" name="expiryDate" id="expiryDate"/>
                    <p>
                      <label for="email" class="liveDate">Set live date</label>
                    </p>
                    <input type="text" class="inputTextbox" name="liveDate" id="liveDate"/>
                  </form>
                </li>
              </ul>
            </li>
            <li class="dateAction"><a href="#" title="Last published">Last published 29/01/08<span class="moreArrow"><span class="wai">^</span></span>
              <!--[if gte IE 7]><!--></a><!--<![endif]-->
              <ul class="popup">
                <li>
                  <p class="cf"><span class="label">Author:</span><span class="value">Anne Light</span></p>
                  <p class="cf"><span class="label">Approver:</span><span class="value">John Smith</span></p>
                  <p class="cf"><span class="label">Review date:</span><span class="value">21/06/07</span></p>
                </li>
              </ul>
            </li>
            <li class="versions"><a href="#" title="Other versions">Other versions (#)<span class="moreArrow"><span class="wai">^</span></span>
              <!--[if gte IE 7]><!--></a><!--<![endif]-->
             <ul class="popup">
                <li>
                  <p>Ann Light's version sent for approval on 24/12/07 at 10.03am</p>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- bottom user functions -->
    <div class="userFunctions cf">
      <!--Left Hand Side Buttons Start -->
      <div class="btnLHS"> <a id="#" class="btnHelp" title="Help" href="#">Help</a>
        <div class="toolbarMenu pageActions">
          <ul>
            <li class="otherPageActions"><a href="#" title="Other page actions">Other page actions<span class="moreArrow"><span class="wai">^</span></span>
              <!--[if gte IE 7]><!--></a><!--<![endif]-->
              <ul class="popup">
                <li>
                  <ol>
                    <li><a href="pa001a_delete_page.html" class="lbOn modal:{width:450}" title="Delete page">Delete this page</a></li>
                    <li><a href="pa002_set_date.html" class="lbOn" title="Set date">Set publication/expiry date</a></li>
                    <li><a href="pa003_page_permissions.html" class="lbOn modal:{width:450}" title="See page permissions">See page permissions</a></li>
                    <li><a href="pa004_add_subpage.html" class="lbOn" title="Create sub page">Create sub page</a></li>
                    <li><a href="pa005_page_history.html" class="lbOn modal:{width:450}" title="See page history">See page history</a></li>
                    <li><a href="#">Preview</a></li>
                    <li><a href="link_1d.html" class="lbOn modal:{width:450}" title="Save a copy">Save a copy</a></li>
                  </ol>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
      <!-- Left Hand Side Buttons End -->
      <!-- Right Hand Side Buttons Start -->
      <div class="btnRHS"><a href="st016_page_notes.html" class="lbOn pageNotes" title="page notes">See page notes</a> <a id="#" class="btnReject" title="Do Not Approve" href="#"><span class="buttonText">Don't Approve</span></a> <a id="#" class="btnApprove" title="Approve" href="#"><span class="buttonText">Approve</span></a> </div>
      <!-- Right Hand Side Buttons End -->
    </div>
  </div>
</div>

Code:
div.toolbar_O { 
	background: #eaf1f9 url(../images/interface/toolbar_bg.gif) 0 0 repeat-x;
	border: 1px solid #3a8ea8;
	padding: 9px 0px;
	width: 729px;
	color: #0a3b3f;
	font-size: 0.9em;
	position: fixed;
	bottom: 20px;
	left: 100px;
	height: 82px;
	}
body.editMode div.toolbar_O {
	position: relative;
	left:0;
	bottom: 0;
	float:right;
}	
	
.toolbar_O .toolbar_I {
	border: 1px solid #073f58;
	background: url(../images/interface/toolbarinner_bg.gif) #54b4cc;
	margin: 0px 9px;
}


.toolbarMenu ul li a, 
.toolbarMenu ul li a:visited {
	font-weight: bold;
	color: #77aeb5;
	border: 1px solid #287e95;
	text-decoration: none;
	padding: 4px 5px 6px 5px;
	background: #e6f4f5;
	color: #0a3b3f !important;
	display: -moz-inline-box;
	display: inline-block;
	height: 13px;
}

.toolbarMenu ul {
	padding:0;
	margin:0;
	list-style-type: none;
	margin: 0;
}

.toolbarMenu ul li {
	float:left;
	position:relative;
	margin: 0 0 0 10px;
}
.toolbarMenu ul li ul li {
	margin: 0;
	font-size: 0.9em;
}
.toolbarMenu ul li ul {
	visibility: hidden;
	position:absolute;
	bottom: 27px;
	left:0;
	padding: 5px;
	background: #ebf6f8; 
	border: 1px solid #2e869c;
	margin: 0;
	z-index: 1000;
	font-size: 1em;
	text-align: left;
}

.toolbarMenu ul .moreArrow {
	display: -moz-inline-box;
	display: inline-block;
	padding: 6px 8px;
	width: 1px;
	margin-left: 10px;
	border-left: 1px solid #89abb7;
	background: url(../images/interface/morearrow.gif) 3px 0 no-repeat
}
.toolbarMenu ul li.open ul {
	visibility: visible;
	
}

.toolbarMenu ul li.versions.open ul {
	width: 250px;
}

div.toolbar_O .toolbarMenu ul li.open a {
	color: #4594A5 !important;
}
div.toolbar_O .toolbarMenu ul li.open .moreArrow{
	background: url(../images/interface/closearrow.gif) 3px 0 no-repeat;
}
/* top part of toolbar */
.toolbar_O .pageInformation {
	padding: 6px;
	height: 25px;
}
 
.toolbar_O .pageInformation .pageStatus {
	color: #FFF;
	font-size: 1.3em;
	width: 170px;
	float: left;
}
.toolbar_O .pageInformation .RHS {
	float: right;
}
h4.statusLabel {
	height: 100%;
	display: inline;
	text-transform: uppercase;
}
div.toolbar_O div.pageInformation .label, 
div.toolbar	_O div.userFunctions .label {
	width: 75px;
	float: left;
	text-align: left;
}
div.toolbar_O div.pageInformation .value, 
div.toolbar	_O div.userFunctions .value {
	font-weight: bold;
	text-align: left;
	float: right;
	vertical-align: top;
	width: 75px;
}
div.toolbar_O div.pageInformation .inputTextbox {
	width: 80%;
}

/* bootom part of toolbar */
.toolbar_O .userFunctions {
	padding: 8px 0;
	height: 25px;
}
div.toolbar_O div.userFunctions div.btnRHS {
	float: right;
	margin: 0px 10px 0px 0px;
}
div.toolbar_O div.userFunctions .btnLHS {
	float: left;
	margin: 0px 0px 0px 10px;
}
div.toolbar_O div.userFunctions div.btnLHS a.btnHelp, 
div.toolbar_O div.userFunctions div.btnLHS a.btnHelp:hover {
	padding: 5px 5px 5px 25px;
	margin: 1px 5px 0 0;
	background: #e6f4f5 url(../images/interface/icon_help.gif) 3px 3px no-repeat !important;
	float: left;
	border: 1px solid #287e95;
	text-decoration: none;
	font-weight: bold;
	color: #0a3b3f;
	height: 12px
	
}
.toolbarMenu.pageActions {
	float: left;
}
.toolbarMenu ol {
	margin: 0;
	padding: 0;
	width: 320px;
	height: 60px;
	list-style: none;
}
.toolbarMenu ol li,
.toolbarMenu ol li a {
	margin: 0;
	padding: 0;
	float: left;
	width: 150px;
	min-height: 8px;
	display: inline-block;
	border: none !important;
	color: #0a3b3f !important;
	font-size: 1.2em;
	background: none;
	}
div.toolbar_O div.toolbar_I a.pageNotes {
	font-weight: bold;
	color: #0a3b3f;
}
div.toolbar_O div.toolbar_I a.pageNotes:hover {
	color: #FFF;
}

/* approve/reject btns */
div.toolbar_O div.userFunctions div.btnRHS a.btnApprove,  
div.toolbar_O div.userFunctions div.btnRHS a.btnReject {
	border: 1px solid #287e95;
	border-bottom: 2px solid #06465f;
	border-right: 2px solid #06465f;
	text-decoration: none;
	height: 12px;
	padding: 5px 15px 5px 0;
	background: #fffeff url(../images/interface/icon_approve.gif) 95% 3px no-repeat;
	display: -moz-inline-box;
	display: inline-block;
	color: #0a3b3f;
}
div.toolbar_O div.userFunctions div.btnRHS a.btnApprove:hover,  
div.toolbar_O div.userFunctions div.btnRHS a.btnReject:hover {
	background-color: #135d82;
	border: 1px solid #FFF;
	border-bottom: 2px solid #06465f;
	border-right: 2px solid #06465f;
	color: #FFF;
}
div.toolbar_O div.userFunctions div.btnRHS a.btnReject {
	background: #fffeff url(../images/interface/icon_reject.gif) 95% 3px no-repeat;
}



li.otherPageActions ul,
li.otherPageActions ul li{
	margin: 0;
	padding: 0;
	list-style: none;
}
Last edited by Kravvitz : May 5th, 2008 at 12:23 PM. Reason: added [code] tags
Reply With Quote
  #2  
Old May 5th, 2008, 12:31 PM
Kravvitz's Avatar
Kravvitz Kravvitz is offline
CSS & JS/DOM Adept
Click here for more information.
  
Join Date: Jul 2004
Location: USA
Posts: 15,149 Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level) 
Time spent in forums: 3 Months 2 Weeks 2 Days 2 h 47 m 18 sec
Reputation Power: 1294
Welcome to DevShed Forums, flicity.

Which browsers have you tested this in? IE7? IE6? FF2? FF1.5? FF1.0? Safari 3.1? Opera 9.2x? Others?

It seems we can't see the problem since you didn't post the JavaScript code.

What happens when JavaScript support isn't enabled in the user's browser?
I am concerned that your code is not following JavaScript Best Practices. I strongly recommend you read up on them.

Why do you have <!--[if gte IE 7]><!--></a><!--<![endif]--> still in there?

P.S. It would be helpful if you put your code between [code][/code] tags in the future. I added them for you this time.
__________________
Spreading knowledge, one newbie at a time.

Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

IE7: the generation 7 browser new in a world of generation 8 browsers.
Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.
Reply With Quote
  #3  
Old May 5th, 2008, 05:36 PM
flicity flicity is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: May 2008
Posts: 3 flicity User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 24 m 14 sec
Reputation Power: 0
Thanks Kravvitz, I shall take note of your suggestions for future posts - still very new!

This problem is appearing in Firefox/2.0 - IE 7 and Safari 3 display fine. We are not supporting IE 6 (it is a CMS within a closed organisation so this is allowable).

Yes, the show hide in this instance is with javascript, but the problem persists if I use hovers. I think it is documented on the mozilla bugs:

Bugzilla@Mozilla – Bug 207915
Bug 207915 – position:fixed elements are incorrectly redrawn when the value of the display property changes
Reply With Quote
  #4  
Old May 5th, 2008, 06:44 PM
Kravvitz's Avatar
Kravvitz Kravvitz is offline
CSS & JS/DOM Adept
Click here for more information.
  
Join Date: Jul 2004
Location: USA
Posts: 15,149 Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level) 
Time spent in forums: 3 Months 2 Weeks 2 Days 2 h 47 m 18 sec
Reputation Power: 1294
When I replace ".over" with ":hover" in the stylesheet I'm not seeing this problem in FF2 or FF1.5.
Reply With Quote
  #5  
Old May 5th, 2008, 08:58 PM
flicity flicity is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: May 2008
Posts: 3 flicity User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 24 m 14 sec
Reputation Power: 0
Quote:
Originally Posted by Kravvitz
When I replace ".over" with ":hover" in the stylesheet I'm not seeing this problem in FF2 or FF1.5.


You're quite right. This was a problem in previous versions of the page, but I have tried many variations and I obviously didn't test the hover state in the latest version.

Still shakes with JS though, but I guess that's a problem for a different forum!

MANY thanks.
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > A CHALLENGE: Firefox bug combining absolute and fixed positioning

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

 Free IT White Papers!
 
Accelerating Trading Partner Performance
One in five. That's how many partner transactions have at least one error. That is an amazing statistic, particularly given the extraordinary leaps in innovation across the global supply chain during the past two decades. Download this white paper to learn more.
 
Competing on Analytics
This Tech Analysis is designed to help identify characteristics shared by analytics competitors, and includes information about 32 organizations that have made a commitment to quantitative, fact-based analysis.
 
Cost Effective Scaling with Virtualization and Coyote Point Systems
An overview of the industry trend toward virtualization, how server consolidation has increased the importance of application uptime and the steps being taken to integrate load balancing technology with virtualized servers.
 
Five Checkpoints to Implementing IP Telephony
Implementation planning for IP PBX software and IP telephony has become vital as businesses replace discontinued legacy PBX phone systems. This informative whitepaper outlines five "checkpoints" for any implementation plan that will help make IP communications a successful proposition.
 
Hosted Email Security: Staying Ahead of New Threats
In the last two years, email has become a fierce battleground between the nefarious forces of spam and malware, and the heroes of messaging protection. The spam volumes increased alarmingly every month, bringing clever new forms of phishing and virus propagation attacks.
 

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 2 hosted by Hostway.