tinfanide Posted February 15, 2011 Share Posted February 15, 2011 I was trying to position the table as fixed on the top right.When I used position:absolute, it works;When I used position:fixed, it returns to the default position - top left.I found a website (http://davidwalsh.name/css-fixed-position) said fixed position can keep the object floating on the same position. But it does not work in my case.Could anyone tell me why it doesn't work? I'm using IE8. But it works in firefox. But in firefox 3.6, the LOVE HEART image overlaps with the table. In IE8, it doesn't. So,another question: how could I make sure all people though using different browsers see the same positioning?<html><head><title>marquee</title><style type="text/css">.marquee { position:fixed; top:0; right:0;}</style></head><body><div class="marquee"><table border=3 cellpadding=10><th colspan=2><h1>marquee in a table</h></th><tr><td colspan=2><marquee id="scroller" onMouseover="this.scrollAmount=2" onMouseout="this.scrollAmount=6" align="right" behavior="scroll" direction="up" width="250" height="500" style="font-size:24pt; font-weight:bold";><center>TESTING</center>TESTING<br /><center><a href="http://hk.yahoo.com/">Yahoo HK</a></center></marquee></td></tr><tr><td><a href="java script:scroller.start()">RESUME</a></td><td><a href="java script:scroller.stop()">HOLD</a></td></tr></table></div><hr><img border="groove" src="http://wallpapers-diq.net/wallpapers/90/Valentine%27s_Day_Love_Flames.jpg" /></body></html> Link to comment Share on other sites More sharing options...
boen_robot Posted February 15, 2011 Share Posted February 15, 2011 For position:fixed to work properly, your document needs to be in "standards mode". To achieve this, add any one of these (they're called "DTDs"; see link for details) at the very top of your HTML above the <html>.My personal reccomendation (for reasons I'm not sure you need to know or will understand) is the XHTML 1.0 Strict DTD, i.e. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Afterwards, just in case, make sure your document validates against your DTD of choice. To do that, go to W3C's validator and write out the address to your document (or upload it, or write it).[edit]I saw your other topic, and so I must ask... is there any reason you didn't keep the DTD from there?[/edit] Link to comment Share on other sites More sharing options...
tinfanide Posted February 16, 2011 Author Share Posted February 16, 2011 For position:fixed to work properly, your document needs to be in "standards mode". To achieve this, add any one of these (they're called "DTDs"; see link for details) at the very top of your HTML above the <html>.My personal reccomendation (for reasons I'm not sure you need to know or will understand) is the XHTML 1.0 Strict DTD, i.e.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Afterwards, just in case, make sure your document validates against your DTD of choice. To do that, go to W3C's validator and write out the address to your document (or upload it, or write it).[edit]I saw your other topic, and so I must ask... is there any reason you didn't keep the DTD from there?[/edit] Thanks for your reply. Yes, I knew nothing about DTD. I'm kinda newbie, just working for a department. Writing a page is not my job focus. Anyway, I have to write it though. But I'm getting to like it.My code did have nothing about DTDs on the notepad. I'd noticed the DTDs a bit while ago when I studied other websites' sources but for I didn't know it (too complicated for me) and I left it for learning other basic CSS codes.But I'll look at the link now. Thanks very much. Link to comment Share on other sites More sharing options...
tinfanide Posted February 16, 2011 Author Share Posted February 16, 2011 Thanks for your reply. Yes, I knew nothing about DTD. I'm kinda newbie, just working for a department. Writing a page is not my job focus. Anyway, I have to write it though. But I'm getting to like it.My code did have nothing about DTDs on the notepad. I'd noticed the DTDs a bit while ago when I studied other websites' sources but for I didn't know it (too complicated for me) and I left it for learning other basic CSS codes.But I'll look at the link now. Thanks very much.Still a problem to go after I added the DTDs and fixed positioning:The positioning messed up again. It didn't fix itself on the top right which I want.Later on I used float: right as advised by others. But it didn't keep the fixed positioning.Again, is there any way that makes the image and the marquee table remain in the same position even the browser is being resized?Now that I resize the browser, the image is forced to overlap with the marquee table.Thanks for your attention.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>marquee</title><style type="text/css">.marquee {float:right;overflow:auto;}a:visit {color:#30F;}a:hover {color:#F90; text-decoration:none;}.HKIEdcampus {float:left;overflow:auto;}</style></head><body><div class="marquee" style="border-width:5px; border-style:groove; border-color:red"><table border=3 style="table-layout:fixed; height:500px;"><tr style="height:30px"><th colspan=2><p style="text-align:center; font-size:28px; padding:1%"><strong>What's <em>New</em>?</strong></p></th></tr><tr style="height:450px"><td colspan=2><marquee id="scroller" onMouseover="this.scrollAmount=2" onMouseout="this.scrollAmount=6" align="right" behavior="scroll" direction="up" width="250" height="500" style="font-size:24pt; font-weight:bold;"><center><a href="http://www.ied.edu.hk/bme/seminar.html" style="text-decoration:none; font-size:20px" target="_blank"><strong>BME Seminars</strong></a></center></marquee></td></tr><tr style="height:20px"><td colspan="2" width="70"><input type="button" value="MOVE" onClick="java script:scroller.start()" style="position:relative; left:17%" /><input type="button" value="HOLD" onClick="java script:scroller.stop()" style="position:relative; right:-33%" /></td></tr></table></div><img class="HKIEdcampus" src="http://www.ied.edu.hk/bme/pic/Campus/2.jpg" width="549" height="411" /></body></html> Link to comment Share on other sites More sharing options...
boen_robot Posted February 16, 2011 Share Posted February 16, 2011 table-layout is not the same as position... where's your "position:fixed;"? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 16, 2011 Share Posted February 16, 2011 If you use float, it won't overlap, when browser is resized, but! it won't be fixed, and scroll with the rest of content.if you use position: absolute although out of flow of other elements, can be controlled when placed within a parent position:relative element container with min-width;, it also won't overlap, but it will still scroll with rest of content.position:fixed, is totally out of flow with other elements, it totally ignores these other elements, and can't be controlled with position: relative container, therefore it will always overlap these elements, also the left side will disappear past the left side of the viewport of the browser window, when reduced to the minimum width the browser will allow.Unless you use javascript/jquery to keep the position:absolute element option to top of viewport area of the browser, but you usually end up with element shuddering into the correct position, as you scroll. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 16, 2011 Share Posted February 16, 2011 Another option, prevent scrollbar appearing for body, and use scrollbar for content container instead, the scrollbar won't appear far left using this method, but it does work in FF, IE7 and IE8. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>marquee</title><style type="text/css">*{margin:0;padding:0;}p{margin:0.8em 0;}body { height: 100%; overflow: hidden;}html{overflow-y:hidden;height: 100%;}#wrapper{min-width:858px; height: 100%;padding:1px; }#content{margin: 0 270px 10px 10px; overflow:auto;height: 100%;padding:1px;}#content p{margin-right:10px;}#content img{margin: 10px 10px 0px 0;}.marquee {border:5px groove red;width:250px;height:640px;position: absolute;right:0px;top:0px;bottom:0;overflow:hidden;}a:visited {color:#30F;}a:hover {color:#F90; text-decoration:none;}.HKIEdcampus {float:left;overflow:auto;}.margin_spacer{height:0.9em; font-size:0;padding-bottom:10px; /*required for IE7*/}</style></head><body><div id="wrapper"><div style="position:relative;float:right;min-height:100%; height:auto;"><div class="marquee"><table border="3" style="table-layout:fixed; height:100%; width:250px;"><tr><th colspan="2" style="height:30px"><p style="text-align:center; font-size:28px;"><strong>What's <em>New</em>?</strong></p></th></tr><tr><td colspan="2" style="height:450px"><marquee id="scroller" onmouseover="this.scrollAmount=2" onmouseout="this.scrollAmount=6" align="right" behavior="scroll" direction="up" width="100%" height="500px" style="font-size:24pt; font-weight:bold;"><center><a href="http://www.ied.edu.hk/bme/seminar.html" style="text-decoration:none; font-size:20px" target="_blank"><strong>BME Seminars</strong></a></center></marquee></td></tr><tr><td colspan="2" style="height:20px"><input type="button" value="MOVE" onclick="java script:scroller.start()" style="position:relative; left:17%" /><input type="button" value="HOLD" onclick="java script:scroller.stop()" style="position:relative; right:-33%" /></td></tr></table></div></div><div id="content"><div><img class="HKIEdcampus" src="http://www.ied.edu.hk/bme/pic/Campus/2.jpg" width="549" height="411" alt="" /></div><p>Velit esse cillum dolore eu fugiat nulla pariatur. Cupidatat non proident, ut aliquip ex ea commodo consequat. Qui officia deserunt duis aute irure dolor sed do eiusmod tempor incididunt.</p><p>Lorem ipsum dolor sit amet, quis nostrud exercitation eu fugiat nulla pariatur. Excepteur sint occaecat qui officia deserunt ullamco laboris nisi. Sunt in culpa lorem ipsum dolor sit amet, velit esse cillum dolore. Quis nostrud exercitation. Lorem ipsum dolor sit amet, duis aute irure dolor in reprehenderit in voluptate.</p><p>Ut enim ad minim veniam, excepteur sint occaecat consectetur adipisicing elit. Sed do eiusmod tempor incididunt qui officia deserunt ullamco laboris nisi. Ut aliquip ex ea commodo consequat. Sunt in culpa consectetur adipisicing elit, excepteur sint occaecat. Eu fugiat nulla pariatur.</p><p>Qui officia deserunt lorem ipsum dolor sit amet, velit esse cillum dolore. Velit esse cillum dolore ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate sunt in culpa. Eu fugiat nulla pariatur. Excepteur sint occaecat quis nostrud exercitation mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, ut labore et dolore magna aliqua. Eu fugiat nulla pariatur. Sunt in culpa ut aliquip ex ea commodo consequat.</p><p>Ut enim ad minim veniam, sed do eiusmod tempor incididunt excepteur sint occaecat. Ullamco laboris nisi velit esse cillum dolore ut labore et dolore magna aliqua. Consectetur adipisicing elit, qui officia deserunt mollit anim id est laborum. Duis aute irure dolor cupidatat non proident, ut enim ad minim veniam. Sed do eiusmod tempor incididunt quis nostrud exercitation mollit anim id est laborum.</p><p>Qui officia deserunt velit esse cillum dolore ut enim ad minim veniam. Ut labore et dolore magna aliqua. Ullamco laboris nisi. Duis aute irure dolor sed do eiusmod tempor incididunt in reprehenderit in voluptate.</p><p>Ut aliquip ex ea commodo consequat. Qui officia deserunt ullamco laboris nisi ut labore et dolore magna aliqua. Eu fugiat nulla pariatur.</p><p>In reprehenderit in voluptate velit esse cillum dolore excepteur sint occaecat. Qui officia deserunt cupidatat non proident, ut aliquip ex ea commodo consequat. Duis aute irure dolor ut labore et dolore magna aliqua. Mollit anim id est laborum.</p><p>Quis nostrud exercitation ullamco laboris nisi in reprehenderit in voluptate. Lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation sunt in culpa. Ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, in reprehenderit in voluptate velit esse cillum dolore.</p><p>Consectetur adipisicing elit, eu fugiat nulla pariatur. Quis nostrud exercitation duis aute irure dolor qui officia deserunt. Eu fugiat nulla pariatur. Ut aliquip ex ea commodo consequat. Excepteur sint occaecat duis aute irure dolor quis nostrud exercitation.</p><p>Mollit anim id est laborum. Ut enim ad minim veniam, in reprehenderit in voluptate eu fugiat nulla pariatur. Cupidatat non proident, lorem ipsum dolor sit amet, velit esse cillum dolore. Mollit anim id est laborum. Ut labore et dolore magna aliqua.</p><p>Ullamco laboris nisi in reprehenderit in voluptate qui officia deserunt. Lorem ipsum dolor sit amet, eu fugiat nulla pariatur. Velit esse cillum dolore sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat.</p><p>Cupidatat non proident, mollit anim id est laborum. Quis nostrud exercitation ut labore et dolore magna aliqua. Excepteur sint occaecat consectetur adipisicing elit, velit esse cillum dolore.</p><p>Eu fugiat nulla pariatur. In reprehenderit in voluptate sed do eiusmod tempor incididunt cupidatat non proident. Qui officia deserunt. Velit esse cillum dolore sed do eiusmod tempor incididunt excepteur sint occaecat.</p><p>Lorem ipsum dolor sit amet, duis aute irure dolor ut enim ad minim veniam. Quis nostrud exercitation sunt in culpa cupidatat non proident. Ullamco laboris nisi ut labore et dolore magna aliqua.</p><p>Eu fugiat nulla pariatur. Consectetur adipisicing elit, in reprehenderit in voluptate cupidatat non proident. Mollit anim id est laborum. Qui officia deserunt. Ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, ut aliquip ex ea commodo consequat. Excepteur sint occaecat sed do eiusmod tempor incididunt in reprehenderit in voluptate. Eu fugiat nulla pariatur. Consectetur adipisicing elit, cupidatat non proident, sunt in culpa.</p><p>2nd from last Qui officia deserunt lorem ipsum dolor sit amet, in reprehenderit in voluptate. Eu fugiat nulla pariatur. Excepteur sint occaecat duis aute irure dolor mollit anim id est laborum. Ullamco laboris nisi duis aute irure dolor ut enim ad minim veniam. Quis nostrud exercitation in reprehenderit in voluptate lorem ipsum dolor sit amet.</p><p>Consectetur adipisicing elit, velit esse cillum dolore sed do eiusmod tempor incididunt. Qui officia deserunt ut enim ad minim veniam, ut aliquip ex ea commodo consequat. Ullamco laboris nisi lorem ipsum dolor sit amet, quis nostrud exercitation. Eu fugiat nulla pariatur. In reprehenderit in voluptate.</p><div class="margin_spacer"></div></div></div></body></html> Link to comment Share on other sites More sharing options...
tinfanide Posted February 17, 2011 Author Share Posted February 17, 2011 table-layout is not the same as position... where's your "position:fixed;"?Coz I didn't see position:fixed work, I removed it.table-layout was added, I couldn't remember well...perhaps I messed up with the positioning and searched for solutions online and ended up using sth I don't really know. Link to comment Share on other sites More sharing options...
tinfanide Posted February 17, 2011 Author Share Posted February 17, 2011 Another option, prevent scrollbar appearing for body, and use scrollbar for content container instead, the scrollbar won't appear far left using this method, but it does work in FF, IE7 and IE8.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>marquee</title><style type="text/css">*{margin:0;padding:0;}p{margin:0.8em 0;}body { height: 100%; overflow: hidden;}html{overflow-y:hidden;height: 100%;}#wrapper{min-width:858px; height: 100%;padding:1px; }#content{margin: 0 270px 10px 10px; overflow:auto;height: 100%;padding:1px;}#content p{margin-right:10px;}#content img{margin: 10px 10px 0px 0;}.marquee {border:5px groove red;width:250px;height:640px;position: absolute;right:0px;top:0px;bottom:0;overflow:hidden;}a:visited {color:#30F;}a:hover {color:#F90; text-decoration:none;}.HKIEdcampus {float:left;overflow:auto;}.margin_spacer{height:0.9em; font-size:0;padding-bottom:10px; /*required for IE7*/}</style></head><body><div id="wrapper"><div style="position:relative;float:right;min-height:100%; height:auto;"><div class="marquee"><table border="3" style="table-layout:fixed; height:100%; width:250px;"><tr><th colspan="2" style="height:30px"><p style="text-align:center; font-size:28px;"><strong>What's <em>New</em>?</strong></p></th></tr><tr><td colspan="2" style="height:450px"><marquee id="scroller" onmouseover="this.scrollAmount=2" onmouseout="this.scrollAmount=6" align="right" behavior="scroll" direction="up" width="100%" height="500px" style="font-size:24pt; font-weight:bold;"><center><a href="http://www.ied.edu.hk/bme/seminar.html" style="text-decoration:none; font-size:20px" target="_blank"><strong>BME Seminars</strong></a></center></marquee></td></tr><tr><td colspan="2" style="height:20px"><input type="button" value="MOVE" onclick="java script:scroller.start()" style="position:relative; left:17%" /><input type="button" value="HOLD" onclick="java script:scroller.stop()" style="position:relative; right:-33%" /></td></tr></table></div></div><div id="content"><div><img class="HKIEdcampus" src="http://www.ied.edu.hk/bme/pic/Campus/2.jpg" width="549" height="411" alt="" /></div><p>Velit esse cillum dolore eu fugiat nulla pariatur. Cupidatat non proident, ut aliquip ex ea commodo consequat. Qui officia deserunt duis aute irure dolor sed do eiusmod tempor incididunt.</p><p>Lorem ipsum dolor sit amet, quis nostrud exercitation eu fugiat nulla pariatur. Excepteur sint occaecat qui officia deserunt ullamco laboris nisi. Sunt in culpa lorem ipsum dolor sit amet, velit esse cillum dolore. Quis nostrud exercitation. Lorem ipsum dolor sit amet, duis aute irure dolor in reprehenderit in voluptate.</p><p>Ut enim ad minim veniam, excepteur sint occaecat consectetur adipisicing elit. Sed do eiusmod tempor incididunt qui officia deserunt ullamco laboris nisi. Ut aliquip ex ea commodo consequat. Sunt in culpa consectetur adipisicing elit, excepteur sint occaecat. Eu fugiat nulla pariatur.</p><p>Qui officia deserunt lorem ipsum dolor sit amet, velit esse cillum dolore. Velit esse cillum dolore ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate sunt in culpa. Eu fugiat nulla pariatur. Excepteur sint occaecat quis nostrud exercitation mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, ut labore et dolore magna aliqua. Eu fugiat nulla pariatur. Sunt in culpa ut aliquip ex ea commodo consequat.</p><p>Ut enim ad minim veniam, sed do eiusmod tempor incididunt excepteur sint occaecat. Ullamco laboris nisi velit esse cillum dolore ut labore et dolore magna aliqua. Consectetur adipisicing elit, qui officia deserunt mollit anim id est laborum. Duis aute irure dolor cupidatat non proident, ut enim ad minim veniam. Sed do eiusmod tempor incididunt quis nostrud exercitation mollit anim id est laborum.</p><p>Qui officia deserunt velit esse cillum dolore ut enim ad minim veniam. Ut labore et dolore magna aliqua. Ullamco laboris nisi. Duis aute irure dolor sed do eiusmod tempor incididunt in reprehenderit in voluptate.</p><p>Ut aliquip ex ea commodo consequat. Qui officia deserunt ullamco laboris nisi ut labore et dolore magna aliqua. Eu fugiat nulla pariatur.</p><p>In reprehenderit in voluptate velit esse cillum dolore excepteur sint occaecat. Qui officia deserunt cupidatat non proident, ut aliquip ex ea commodo consequat. Duis aute irure dolor ut labore et dolore magna aliqua. Mollit anim id est laborum.</p><p>Quis nostrud exercitation ullamco laboris nisi in reprehenderit in voluptate. Lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation sunt in culpa. Ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, in reprehenderit in voluptate velit esse cillum dolore.</p><p>Consectetur adipisicing elit, eu fugiat nulla pariatur. Quis nostrud exercitation duis aute irure dolor qui officia deserunt. Eu fugiat nulla pariatur. Ut aliquip ex ea commodo consequat. Excepteur sint occaecat duis aute irure dolor quis nostrud exercitation.</p><p>Mollit anim id est laborum. Ut enim ad minim veniam, in reprehenderit in voluptate eu fugiat nulla pariatur. Cupidatat non proident, lorem ipsum dolor sit amet, velit esse cillum dolore. Mollit anim id est laborum. Ut labore et dolore magna aliqua.</p><p>Ullamco laboris nisi in reprehenderit in voluptate qui officia deserunt. Lorem ipsum dolor sit amet, eu fugiat nulla pariatur. Velit esse cillum dolore sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat.</p><p>Cupidatat non proident, mollit anim id est laborum. Quis nostrud exercitation ut labore et dolore magna aliqua. Excepteur sint occaecat consectetur adipisicing elit, velit esse cillum dolore.</p><p>Eu fugiat nulla pariatur. In reprehenderit in voluptate sed do eiusmod tempor incididunt cupidatat non proident. Qui officia deserunt. Velit esse cillum dolore sed do eiusmod tempor incididunt excepteur sint occaecat.</p><p>Lorem ipsum dolor sit amet, duis aute irure dolor ut enim ad minim veniam. Quis nostrud exercitation sunt in culpa cupidatat non proident. Ullamco laboris nisi ut labore et dolore magna aliqua.</p><p>Eu fugiat nulla pariatur. Consectetur adipisicing elit, in reprehenderit in voluptate cupidatat non proident. Mollit anim id est laborum. Qui officia deserunt. Ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, ut aliquip ex ea commodo consequat. Excepteur sint occaecat sed do eiusmod tempor incididunt in reprehenderit in voluptate. Eu fugiat nulla pariatur. Consectetur adipisicing elit, cupidatat non proident, sunt in culpa.</p><p>2nd from last Qui officia deserunt lorem ipsum dolor sit amet, in reprehenderit in voluptate. Eu fugiat nulla pariatur. Excepteur sint occaecat duis aute irure dolor mollit anim id est laborum. Ullamco laboris nisi duis aute irure dolor ut enim ad minim veniam. Quis nostrud exercitation in reprehenderit in voluptate lorem ipsum dolor sit amet.</p><p>Consectetur adipisicing elit, velit esse cillum dolore sed do eiusmod tempor incididunt. Qui officia deserunt ut enim ad minim veniam, ut aliquip ex ea commodo consequat. Ullamco laboris nisi lorem ipsum dolor sit amet, quis nostrud exercitation. Eu fugiat nulla pariatur. In reprehenderit in voluptate.</p><div class="margin_spacer"></div></div></div></body></html> Thanks for ya detailed replay. It seems very hard to me at present.<div id=content> I've seen a lot these days on the sources of diff websites but is totally new to me.I'm keeping trying it now, though. Link to comment Share on other sites More sharing options...
boen_robot Posted February 17, 2011 Share Posted February 17, 2011 In general, you should avoid adding stuff without understanding what it does. This is especially true for floats, overflows and positions, as they can mess a lot of stuff up, as you've sort of found out already.Replace all "style" attributes with CSS equivalents, remove all styles you don't understand the purpose of, remove this marquee element... try to build it gradually, keeping track of each thing along the way. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.