|
CSS - 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;
}
Similar TutorialsI have my website at omel.co.cc I have a menu that I positioned absolute, but when I view in a different resolution the menu changes position, I have put a parent div positioned relative but every time I scroll the menu moves which I do not want to, when positioned fix, the position of the menu goes off, on different resolutions and when I resize the window, I have googled these, hope someone could help, or I just did not googled enough? I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it. The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox? You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html). css Code: Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; } #main-nav html4strict Code: Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div> <div id="main-nav"> The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers. Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem. Please look at http://www.rodstrans.com/diagnosis/body_leaks.html In IE & Chrome the checkboxes are positioned absolute in each table cell, but in Firefox they all bunch at the top left. I have put a position:relative on all parent elements and can not figure out what is happening. Has anyone heard of Firefox 4 or Firefox 3.5 positioning a Div 3 pixels higher on a web page than all other A-Grade browsers? If you want to see what I mean, go to baampblue . asystechonline . com / ReconstructIndex.php. Sorry I could not insert a link. I'm a new member. I password protected this to keep bots from scanning it. The username is the word demo. The password is also the word demo. Look for "Carl Gohm" on the right side of the page, under "BAAMP Honors Lifetime Members". Click on the Carl Gohm link. A new rounded corner box will open up in the "Featured Projects" display with a picture and information about Carl. If you look at the new box in IE 8, Opera 11, Chrome 11, or Safari 5.0.5 the new box fits perfectly inside of the Featured Projects display. If you look at the new box in Firefox 4 or 3.5, you should notice that the new box is shifted up 3 pixels too high. The HTML and CSS validate with no errors on the W3C validators. I'm using jQuery to generate the new box for Carl Gohm. I have ruled out the jQuery as the cause of the problem by creating a minimal test case that doesn't involve jQuery. I tried using a clean version of Firefox from Spoon.net, because I thought maybe one of the Add-Ons in Firefox was causing the problem. That didn't make any difference. I tried viewing this on another computer that is running Firefox 4 on Windows XP, but the problem was still there. I used Firebug to disable and then re-enable each line of CSS one at a time to see if there was a CSS problem. I didn't notice an improvement. I just need to know if I am wasting my time trying to troubleshoot something that is not correctable. Thank you in advance for your time. I think the best way to explain this is by example, if you go to this page: http://lifeyouwant.workinprogress.co.uk/how-we-work You will notice the drop down menu works fine in Firefox, Safari, Opera etc. However when it comes to IE7 the drop down menu is positioned too far to the right. Has anyone got any ideas how I can get this to display correctly in IE7 (like it does in Firefox). I would prefer to try not to use a hack for IE7. ANy ideas would be great! Thanks. Hey guys, This is my first time messing with absolute positioning, and I am in a pickle. I have created a website and it contains a services page. On the list of the services, when you scroll over each word, a block of text describing that particular service pops up. Now, I have placed the box using <span>'s and hidden blocks. My problem is that when I change screen resolutions, the placement of the box changes. I am looking for a resolution-independent workaround for this, so that others running 1024, 1280, etc wont have a problem viewing the site correctly. I have searched the web dry it feels like. Maybe I'm just bad at looking, but its the last thing I need to do before putting up the site. Check out the page and source code he URL Additionally, this is the code I used to make this (it's Eric Meyers PURE CSS codes): Code: <style type="text/css">
<!--
div#links a:hover {text-decoration: none;
background: #698165;}
div#links a span {display: none;}
div#links a:hover span {display: block;
position: absolute; top: 535px; left: 233px; width: 377px; height: 230px;
padding: 5px; margin: 10px; z-index: 100;
color: white;
font: 10px Verdana, sans-serif; text-align: justify;}
div#links a:link { text-decoration: none;
color: white;}
div#links a:visited { text-decoration: none;
color: white;}
-->
</style>
then the code is activated by: Code: <a href="#">Mowing <span>Service Landscapes will tend and maintain your lawn with the most substantial of detail and care. Our services will provide you with a beautiful, healthy landscape that will turn heads. If you are looking for quality and dependable service that you can turn to time and time again, look no further than Service Landscapes. </span> </a> Any help would be greatly appreciated, and thanks in advance! Hi, I was wondering if any CSS experts could give me some advice on how to position elements on a page. Right now I'm really into using absolute positioning because it just seems so easy to place things on an exact point on the screen irrespective of all other elements, but I am wondering whether that is considered bad practice, any advice would be greatly appreciated. Thank you in advance for any correspondence. Hello everyone, I would like to ask for any and all help on solving this problem I am having. Well recently I used to make all of my web sites in tables until I came upon an article saying you should use CSS and absolute positioning. Therefore, my problem is this, If you go to this partially completed site, http://sykotic-designz.org/newsite/index.html. You will now notice that there are two 'shadow' images. One on the left and one on the right. The one on the left works fine. Test it by making your browser window smaller and bigger. You will notice the right shadow moves. I have tried various alternatives like using a table just for the one image but you still need to use absolute position and did not work, I have messed with displaying absolute position by % and by pixels. But it doesn't want to seem to work either. I am mainly having problems probably because I am new to the DIV tags in which I use entirely through out this page, I am not sure if CSS will help at all. You can view the source of the page if you wish. I appreciate and and all help you may provide, thanks! Hi everyone, I just stated handcoding and I am having a great time. Everything seemed to be going well on my first site until I previewed it on IE. After solving the nasty png issue, I realized that the two elements that I have absolute postioned a) screw the layout up in IE6 b) don't appear all together in IE7 and IE8, but doesn't screw up the flow. The elements are an arm that is supposed to hang off the left side, and hair that sits above the contentwrap (you will understand once you look) It renders perfectly in Firefox, safari and google chrome. Go figure. I read I can't put hyperlinks because of spam, so if you don't mind helping out, please visit: w w w . goscoblog. com/test/index.html Thanks In advance Good morning, I've been working on my site, and it's in its final stages, but I'm experiencing a problem I can't figure out. I have a floating bar with all of my navigation links in it which is absolutely defined with the following code: Code: #headerBar { /* sets position of floating bar */
position: absolute;
clear: both;
top: 57px;
left: 0px;
padding: 0px;
margin: 0px;
width: 100%;
filter: alpha(opacity=50);
-moz-opacity: .50;
opacity: .50;
}
The problem I'm experiencing is that in Firefox, Safari, and Opera, the bar appears magically in the perfect position, however, in Internet Explorer, the bar is 5-10 pixels higher than it should be. The url is: http://www.alokw.com Any suggestions? Thanks! Now i have used some of this on one of my designs and at 1280x1024 resolution it looks perfect however if you decrease the resolution then it move the image into a place i dont want it to be. Now is there a way around this or am i just going to have to put the "this site is best viewed at 1280x1024" sign on it? Hello All. I have very little experience with coding and the likes so i don;t even think I'm allowed to post on these forums? hehe BUT, I have ran into a problem on myspace with code. I am trying to create a linkable image I believe it would be called. <a href="website url"> <img src="wouldnt let me post url's" /> </a> Thats what i have so far. I beleive that means when the image is clicked it takes y ou to the homepage. (I dont even know if that is CSS, so i apologize if this is the wrong forum I'm posting on.) I am trying to get the image to appear around 300 pixels from the left and 400 pixels from the top. I had looked on google for a solution of some code to help me out and all I found was thing saying how 'Absolute Positioning' was what was needed. I tried adding various bits of code I had found to the code i currently had, and some of them would almost work, but text would appear after the image and it would be clickable also. I was just wondering how I could place the image were I want it and when it is clicked on, it takes you to the homepage. Thanks in advance to anyone who replies, and also apologies for my incredible noobness. -Connor The link below shows the fixed positioning layout I need to achieve, but rather than have the scrolling content fixed to the left or right hand side I want to have it centered with the navigation fixed and just to the left of the scrolling content. Like the image below: http://limpid.nl/lab/css/fixed/header Is this possible? Thanks For a search tool, I have a "results toolbar", horizontally across the top of the results page. Within this toolbar (position: relative) I have a span containing the current page, absolutely positioned at top: 8px; left: 5px; What I get when rendering however, is the following: Right: http://tim.komta.com/images/css/Firefox.gif Wrong: http://tim.komta.com/images/css/IE.gif More accurately, I should say that I get what I expect in Firefox, and not what I expect in IE, which is not overly surprising. Anyway, what am I doing wrong? If I change the text-align of the box from right (current) back to left, it's still overlaid on top of the images, but on the left, like it's supposed to be. It kinda seems like IE is making the images the bounding box for absolute positioning. Any thoughts? MPEDrummer K...I have an absolutely positioned toolbar in a search tool page. There are instances where the toolbar (on the left) is longer than the actual (non-absolute) results. When this happens, IE refuses to scroll for the absolutely positioned content! Anyone know what I can do about this? It's a little...crappy. MPEDrummer Ok, ive got the footer bar that should be at the bottom of content, in FF it displays perfect, but in IE it disappers http://fasttracksites.com/new%20layout/ heres the css Code:
html, body {height: 100%;}
body {
background: #beb185 url('images/bggrad.gif');
background-attachment: fixed;
font-family: Helvetica, Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
line-height: 16px;
color: #000;
padding: 0px;
margin: 0px;
text-align: left;
}
/*==============================
Layout
==============================*/
div#container {
background: #fff;
width: 961px;
height: 100%;
margin: 0px;
padding: 0px;
text-align: left;
float: left;
z-index: 1;
}
div#page {
height: 100%;
float: left;
z-index: 2;
}
#left-col {
background: #121212 url('images/leftcolgrad.jpg');
color: #fff;
width: 190px;
min-height: 100%;
height: 100%;
padding: 0px 5px 0px 5px;
border-right: 10px solid #13496e;
float: left;
z-index: 3;
}
#right-col {
color: #000;
width: 750px;
height: 100%;
padding: 0px;
border-right: 1px solid #121212;
float: right;
z-index: 4;
}
div#header {
background: #fff;
width: 740px;
height: 78px;
margin: 0px;
padding: 0px 5px;
text-align: left;
float: left;
z-index: 5;
}
div#content {
background: #fff;
width: 740px;
padding: 0px 5px 0px 5px;
float: left;
clear: both;
z-index: 6;
}
div#footer {
position: absolute;
bottom: 0px;
background: #000 url('images/footergrad.jpg');
width: 740px;
height: 180px;
padding: 0px 5px 0px 5px;
float: left;
/*clear: both;*/
z-index: 7;
}
Hey, I have a bit of a problem and am very new to using CSS. On a web site I am making I have used a CSS style sheet to position a table on the page. This what the coding on the sheet is like: table { position: absolute; top: 117px; left: 120px; width: 167px; } However, I have a second table that I wish to position using absolute positioning, but I have no idea how the browser can tell the difference between the two. As you can see above, the first table has been identified as 'table', but what can I call the second table so that I can use different pixel settings without effecting the first? I have a button that when you click it a div appears. This div is absolutely positioned. In Firefox the margin of the absolute positioned div is from the top of the UL element. In IE6/7 its from the bottom of the UL element... Help? CSS: Code: #sitenav { border-bottom: 1px solid #d6d6d4; border-left: 1px solid #d6d6d4; border-right: 1px solid #d6d6d4; width: 958px; background-repeat:no-repeat; margin-bottom: 2px; overflow: auto;}
#sitenav ul { margin: 0; padding: 0; margin-left: 40px; list-style: none; }
#sitenav ul li { float: left; margin: 0; width: 100px; padding: 0px 10px; font-size: 14px; font-weight: bold; text-align: center; padding-top: 6px; }
#sitenav .active-top { background-image: url(../images/tabs/topNavTab.jpg); height: 22px; }
#sitenav #nav-products { clear: both; position: absolute; margin-top: 30px; margin-left: 40px; width: 450px; height: 225px; background-color: #fff; border: 1px solid #333; }
HTML: Code: <div id="sitenav">
<ul>
<li class="active-top">Products</li>
<li>Solutions</li>
<li>Partnerships</li>
<li>Technology</li>
</ul>
<div id="nav-products"></div>
</div> <!-- END SITENAV -->
Example: http://www.nwkeeley.com/test2.html FYI: this line: #sitenav #nav-products the margin-top: 30px is great on FF, but it has to be margin-top: 2px to look good in IE Thanks for any help! |
|||||||