CSS - Fixed Positioning Problem With Ie

Hi all,

Okay, so I've got a page with a central column which has a drop-shadow and a background image... The obvious problem is that the repeated background image doesn't always line-up with the background image in the dropshadow. Plus, The backround image changes position whenever the page is resized.

So I was looking here, to see if I could find the code to center the background image in the screen, and make it a fixed position, but even then, when you resize the page, the background image seems to move with it.

Does anyone know how to fix a background image so that it will stay aligned with the central content/dropshadow of the page?

Thanks.

Hi everyone,

I have posted here [HTML Programming] because I'm not entirely sure what forum this particular problem should be put in.

I have a fixed menu that I include using php. From looking at the source code I can see that it has definately included the menu. However IE only displays the menu 50% of the time.

I have no idea why. At first I thought it was because I have a javascript animation for it to slide down, but I removed that and I still get the same problem.

To see what I mean please visit twisted-reality.co.uk using IE and refresh a few times.

Firefox, Opera, Safari and Netscape all display the menu fine, but IE feels like it needs to be different.

I'm new to this forum but I hope someone can help

Twisted-Daemon

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;
}

I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values):

It needs to be sticked to fit after content of 4 column DIV's like it is in example.

http://www.split.info/dev/less-content/
http://www.split.info/dev/more-content/

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF;  top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966;  position: absolute;  top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
	<div id="contentPane">Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
	</div>
	<div id="leftPane">Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
	</div>
	<div id="rightPane">Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
	</div>
	<div id="rightPane2">Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
	</div>
</div>
<div id="headwide">
	<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>

Content from above 4 column div's need to push footer DIV below (after them)!

Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns).

Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer...

So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx!

Echo

Hi, I have this problem with loading new movie on the same page with fixed background.
Here is an example of what i want to do . I have two flash files main.swf and movie1.swf, and main.swf loads first when i open index page. On the button of this main.swf i have action

loadMovieNum("movie1.swf", 0);

which should load new movie in the same window and everything works fine when i test SWF file but when i embed it in a HTM page with fixed background only first move main.swf loads fine as it should but when i click on the button in this main.swf to load new movie movie1.swf in the same page it will not load??? It starts to load and than just stops. I guess there could be something wrong with my CSS style but i have never been working with CSS as i am only beginner in web design. Could anyone help here please? Here is y CSS style. PHP Code:
 body {margin:0px; padding:0px; vertical-align:top; background:url(images/back.jpg) no-repeat top #2BA3F4;} 

My layout is not liquid. everything is fixed position. If the veiwer adjusts his text size in his browser then part of the content text in the div's will be pushed out of sight because {overflow:hidden;} has me covered.

How do I get the content in the div to become scrollable in this case?

I don't know if it's possible but I don't really want to have scroll bars on my div's UNLESS the user adjusts text size and forces it to happen.

Can this be done and if so any Ideas on how to do it?

Hi!
My first post

I got a problem with my sticky footer
as you can see the footer is fine, fixed to the bottom of the page but I got an unnecessary scroll

The site: www dot flyttamig dot com

think the problem is that i put 100% height on html

html,
body {
margin:0;
padding:0;
height:100%;
}


Can you guys help me get rid of this scroll

Thanks

Has anyone else experienced this? I have a div with a specified width of 503px. If I fill it with text, after about a screens worth it's physically 506px in IE (it's fine in every other browser).

Anyone any ideas what could be causing this, or a solution to this problem?

Many thanks

I'm really tired, so this may be a dumb question. I'm having problems keeping thumbnails fixed in their position. I want them to have a 1px yellow border when I hover over them. I can get the border but when I hover over them the other images move slightly. I have the thumbnails set up inside a <ul>. Here's the pertinent CSS:

Code:

#thumbcontainer {
		
			margin-left: auto;
			margin-right: auto;
			margin-top: 10px;
			margin-bottom: 0px;
			padding: 10px 10px 0px 0px;
			width: 840px;
			background-color: #000000;
	
		}
			
		a img {   
           			 border: none;
            			margin: 4px 4px 10px 4px;
        		   }
		
		a img: link  {
			border: 1px solid #000000;
			
			}

		a img: visited {
			border: 1px solid #000000;
			}

		a img:hover { 
			border: 1px solid #e5cb43;   
			}
	
		a img: active {
			border: 1px solid #000000;

			}

		ul.content   {
			list-style-position: outside; 
			padding: 0px; margin: 0px;
			border: none;
			background-color: #000000;
			width: 850px;
			text-align: center;
			
		}

		li.content  {
			margin: 0px;
			padding: 0px;
			list-style-type:none;
			
		}

What are my options? Thanks in advance!

I've mocked up a page using 960.gs that has has several elements fixed in a div under which the content of the of the page is to flow. The background of this div is a CSS gradient, and has a height of 100% (if the gradient is applied to to the actual body of the page it doesn't actually extend the whole width of the page). As the user scrolls up, the content is to be viewable behind an opaque menu.

bit.ly/f2a4rC

The layout works as I want in FF and Chrome, but the content of the page scrolls over the fixed upper area in IE7.

I understand that a new stacking context is being created, but I've been unable to resolve this by fiddling with the z-index of the elements in question, or their parents. I know I can consolidate some of the extra divs used by the grid, but I've been unable to do so in a way that keeps the gradient and transparency effects.

How can I achieve this look in IE7?

Hello all, still a little new to css layout problem-shooting in older browsers, so thanks for your help in advance!

I'm having a problem which is only occurring in Internet Explorer 6, but I just can seem to figure out what's wrong.


if you look at the page in any other browser, you can see the header <div> stretches the width: 100%, but in IE6, the header <div> does not extend all the way to the left, but rather starts where the margin:auto Main <div> tag starts from the left side.

What I am lost on is that the footer <div> performs this just fine, but it's position is not fixed and there is no z-index. here is the code for both, and thanks again for having a look:

#header {
width: 100%;
height: 107px;
display: block;
position: fixed;
margin: 0px;
padding: 0px;
background-color: #000000;
background-image: url(../images/main/bhs_design_header_gradient.jpg);
z-index: 100;

}

#footer {
width: 100%;
height: 35px;
display: block;
background-color:#000000;
margin-top: 10px;
clear: both;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #EBEAE8;
margin: 0px;
background-image: url(../images/main/bhs_design_footer_gradient.jpg);
}

How can I fix a Div a set distance below another Div without a set height?

Hi folks,

I'm working on a website at the moment and having some issues 'fixing it' for Internet Explorer. The design scrolls horizontally, and using 'position:fixed;' on certain elements keeps them on the page while the rest scrolls - this works fine in Safari / Camino / Firefox etc. but as we know position:fixed; is broken in IE.

I tried applying the fix found at http://web.tampabay.rr.com/bmerkey/...tion-fixed.html but this only seems to work for regular vertical scrolling pages - when scrolled horizontally the "fixed" elements still scroll with the page.

Is there any way possible to get this to work? I really really want to avoid any of those javascript "jumpy" scripts to reposition the element all the time. Thanks all.

Hi all,

I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's.