Looking For A Fix To Use "fixed" Positioning In Ie

shadowx

Sep 20 2007, 12:31 PM

Hi all

I'm trying for the first time to use JS to modify styles and such and part of my design is to have a DIV appear in the middle of the browser's window, so to do this, and keep the DIV in the middle even while scrolling ive used the FIXED positioning style with CSS, now i develop in FF so as soon as i toggle to IE, version 6.x, i suddenly see that my DIV is just stuck at the top not where it should be and not FIXED either. After some research i find that FIXED doesnt work in IE less than version 7, now i could just upgrade to IE7 despite my reluctance but then the issue is, if i were to fully develop something like this for a real website, would *all* of my visitors, or at least 99%, be using IE7 or FF or Netscape, which should then be able to view the DIV correctly?

Im thinking no... so thats why i want a fix for this issue, ive looked on the web and seen a few including using JS to move the DIV in relation to the scrolling thats going on, but thats really jerky and i think its more complicated. Ive also seen a CSS fix for it too, but again it seems a little complicated and the thing is the solution involves "tricking" IE into using ABSOLUTE instead of FIXED to get the same effect which then renders ABSOLUTE useless for anything other then emulating the FIXED effects, and that isnt very desirable.

Are there any other solutions? I dont mind upgrading to IE7 if i have to but then im worried that my users wont have IE7 or FF or NS which are able to display it correctly.... Why cant everyone just abandon IE?!

jlhaslip

Sep 20 2007, 08:06 PM

Stu Nicholls / cssplay.co.uk to the rescue (again)...

http://www.cssplay.co.uk/layouts/fixed.html#bites

Enjoy!

shadowx

Sep 20 2007, 09:59 PM

I did see this particular website but the thing that stopped me is this line:

QUOTE

The only problem with this is that you cannot use absolute or relative positions on the moving page but float is allowed

And i use ABSOLUTE positioning, but i tried it anyway and it didnt work, im not sure why, i views the source of that page and copied the CSS that related to the div "menu" as that is the "FIXED" one and i also saw some HTML code within comments that related to CSS so i copied that too and it didnt work. Im wondering if it has anything to do with the fact that im using an external CSS file and they are using the CSS within the HTML? I dont think it would make any difference.

The Relevant CSS is below. The Div im trying to format is classed "submit", if you could shed any light on the problem it'd be great!

CODE

div.submit {display: block; border-width: 3; border-style: Solid; border-color: blue; background-color: #55AAFF; width: 555; position: fixed; top: 35%; Left: 25%; padding: 5;}

* html #submit {position:absolute;}

body {border:0; height:100%; overflow-y:auto;}

Im not massively experienced in CSS so im not sure what the hashes and asterix means either.

jlhaslip

Sep 20 2007, 10:19 PM

maybe attach the entire page code to a posting for review.

shadowx

Sep 20 2007, 10:39 PM

Okies, ive attached both files with this post.

This is a real pain in the... that IE cant do something right for a change!

Merge my posts if it seems more convenient, it just seemed easier to do it this way

jlhaslip

Sep 21 2007, 01:46 AM

QUOTE

This is a real pain in the... that IE cant do something right for a change!

why would they start now???

bishoujo

Sep 21 2007, 02:01 AM

I'd need some advice on this too. I was always having problems with the absolute positioning in IE! My frames site would look perfect in Firefox but when I test it in IE, it'll look distorted. Wish everyone would just use Firefox.

jlhaslip

Sep 21 2007, 04:56 AM

The Tutorial at cssplay was pretty clear about what to do, I thought, but here is your page back. have (literally) 'fixed' the problem... heeheeheeee!

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>

		<script language="Javascript" src="ajax_begin.js" type="text/javascript">
</script>
		<title>
			DB CMS V O.O1
		</title>
		<style type="text/css">
/*<![CDATA[*/
		body {border:0; height:100%; overflow-y:auto;}
		#submit.submit {display: block; border-width: 3; border-style: Solid; border-color: blue; background-color: #55AAFF; width: 555; position: fixed; top:25%; Left: 25%; padding: 5;}

		div.reset {border-width: 1; border-style: solid; font-style: underlined; width: 155; padding: 2; text-align: center;}
		/*]]>*/
		</style>
	</head>
	<body>

		<div id="submit" class="submit" width="255">
			<br />
			The details you specified are now being checked and saved to the database. Please stand by for further instructions or confirmation.<br />
			<br />
		</div>
		<form action="add_page.php" method="get" name="details" id="details">
			<br />
			<br />

			Page Title: <input type="text" id="title" /><br />
			<br />
			Module Name: <input type="text" id="module_name" /><br />
			<hr />
			<br />
			HTML Content<br />
			<textarea id="content" rows="35" cols="95">

</textarea>
		</form><br />
		<br />
		<button onclick="ajaxdelay();">Save</button><br />
		<br />
		<br />
		<br />
	</body>
</html>

I included the css with the page so I didn't need to post both of them. Might want to separate them again. Cleaned it up a little, too. Notice that I have added a Doctype at the top, too. VERY IMPORTANT that you have a proper Doc Type on your page. Make the Browsers behave, not the same, but predictably.

If you want to use this code again, use a "named" div submit, of the "class" submit. The Named div is the hash sign (#) and a class is the period (.), so this css code will 'freeze' anything that is selected as id="submit" and class="submit" on your page.

You can benefit from this sample code by learning to use Floats, Margins and padding to position elements on your page instead of position:absolute. It works, but is difficult to deal with across the different browsers. Until you understand the w3c Box Model, try to avoid position:absolute.

shadowx

Sep 21 2007, 11:20 AM

Thanks for that Jlhaslip! I always forget the doc types and i really should use them, i remember they played an important part in my last CSS related problem too

Ill look into the margins and padding styles and floats, i thought i new enough CSS to get me through but perhaps not!

Thanks for all the help!

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE