Re: Absolute positioning - a done deal?
"Ian Petersen" <[email protected]> Mon, 24 Apr 2006 08:01:33 -0400
| Newsgroups | gmane.comp.web.dom.wdf |
|---|---|
| Message-ID | <[email protected]> |
I agree with Seb. Your problem is with the specificity of the stylesheet rules in your document. Check out http://www.w3.org/TR/CSS21/cascade.html#cascade for the rules according to the W3C's CSS standard. In your case, the problem is that 'position: absolute;' is specified in the style attribute of the element but you were trying to set 'position: static;' with a "normal" selector. In HTML documents, the style attribute is the most specific place to put CSS declarations, which means you can't actually 'override' such a declaration. Instead, you have to replace it with a new one. Ian On 4/24/06, Seb Frost <[email protected]> wrote: > I'd go out on a limb and suggest that your problem is maybe one of > specificity in your stylesheet. If in doubt put " !important" after your > declaration, just to be sure. I.e: "position: static;" becomes "position: > static !important;" > > -----Original Message----- > From: [email protected] [mailto:[email protected]]On Behalf > Of Jonathan Berry > Sent: 24 April 2006 09:43 > To: [email protected] > Subject: Re: [wdf-dom] Absolute positioning - a done deal? > > > Guys, I just tried to use the style properties instead of className and it > worked. I read that className was faster and therefore more suitable, but it > doesn't seem to work. Why is this? Could it also have something to do with > the fact that my stylesheet is written to the page (which is has to be > because of the number of pages involved)? Thanks SO MUCH for your help. > > On 4/23/06, Jonathan Berry <[email protected]> wrote: > > > > Thanks, guys. But I just tried it and it didn't work. Let me show you some > > sample code that illustrates my problem. The ads are loading in and > bringing > > a series of divs with them. Maybe you could have a look at my code and see > > what I am trying to do? > > > > <!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"> > > <html> > > <head> > > <script type="text/javascript"> > > document.write('<style > > > type="text/css">.floatright{float:right;position:static;}.reg{float:right;po > sition:static;}</style>'); > > > > > > //These two functions I wrote just to try to align, but they are not > > working. Tried onload and onclick (div). > > > > function alignAds(){ > > var pgtables = document.getElementsByTagName('table'); > > for(i=0;i< pgtables.length;i++){ > > if(pgtables[i].className == 'bigbox'){ > > var divs = document.getElementsByTagName('div');; > > for(j=0;j<divs.length;j++){ > > var objs = divs[j].childNodes; > > for(k=0;k<objs.length;k++){ > > if(objs[k].tagName=='P'){ > > var pNode = objs[k]; > > var parNode = pNode.parentNode; > > while(parNode&&parNode.style.width!="360px"){ > > alert(parNode.tagName); > > pNode.className="floatright"; > > parNode.className = 'floatright'; > > parNode = parNode.parentNode ; > > parNode.className="reg"; > > } > > } > > } > > } > > } > > } > > } > > function pop(){ > > var pel = document.getElementById('pel'); > > pel.className = "reg"; > > pel.parentNode.className = "reg"; > > pel.parentNode.parentNode.className = "reg"; > > pel.parentNode.parentNode.parentNode.className = "reg"; > > pel.parentNode.parentNode.parentNode.parentNode.className = "reg"; > > } > > </script> > > </head> > > <body onload="pop();"> > > <table cellpadding="5" width="1024" class="stop"><tr><td> > > <div style="background-color:#f00;"> > > This is text. This is text. This is text. This is text. This is text. This > > is text. This is text. This is text. This is text. This is text. This is > > text. This is text. This is text. This is text. This is text. This is > text. > > This is text. This is text. This is text. This is text. This is text. This > > is text. This is text. This is text. > > This is text. This is text. This is text. This is text. This is text. This > > is text. This is text. This is text. This is text. This is text. This is > > text. This is text. This is text. This is text. This is text. This is > text. > > This is text. This is text. This is text. This is text. This is text. This > > is text. This is text. This is text. This is text. This is text. This is > > text. This is text. This is text. This is text. This is text. This is > text. > > This is text. This is text. > > <table align="right" class="bigbox"><tr><td> > > this is the right column text > > </td></tr></table> > > > > <div style="position:absolute;background-color:#edd;"> > > <div style="position:absolute;background-color:#ddf;"> > > <div style="position:absolute;background-color:#fdd;"> > > <div style="position:absolute;width:300px;background-color:F00;"> > > <p width="300" id="pel" style="background-color:#F90;">The Walrus and the > > Carpenter<br> > > Walked on a mile or so,<br> > > And then they rested on a rock<br> > > Conveniently low:<br> > > And all the little Oysters stood<br> > > And waited in a row.<br></p> > > </div> > > </div> > > </div> > > </div> > > This is text. This is text. This is text. This is text. This is text. This > > is text. This is text. This is text. This is text. This is text. This is > > text. This is text. This is text. This is text. This is text. This is > text. > > This is text. This is text. This is text. This is text. This is text. This > > is text. This is text. This is text. This is text. This is text. This is > > text. This is text. This is text. This is text. This is text. This is > text. > > This is text. This is text. This is text. This is text. This is text. This > > is text. This is text. This is text. This is text. This is text. This is > > text. This is text. This is text. This is text. This is text. This is > text. > > This is text. This is text. This is text. This is text. This is text. This > > is text. This is text. This is text. This is text. This is text. </div> > > <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> > > <div style="bottom:0;padding:3px;z-index:500;border:1px solid > > #9FF;background-color:#FF0;width:110px;" > > > > id="clicker">aLIGN</div> > > <script type="text/javascript"> > > document.getElementById("clicker").onclick = pop; > > </script> > > </div></td></tr></table> > > </body> > > </html> > > > > > > > > > ------------------------------ > > > > > > > > > > > -- > > Jonathan Berry, M.A. > > IT Consultant > > 619.306.1712(m) > > [email protected] > > www.mindarc.com > > > > > > -- > Jonathan Berry, M.A. > IT Consultant > 619.306.1712(m) > [email protected] > www.mindarc.com > > ----------------------------------------------------------- > > This E-mail is covered by the Electronic Communications Privacy Act, 18 > U.S.C. ?? 2510-2521 and is legally privileged. > This information is confidential information and is intended only for > the use of the individual or entity named above. If the reader of this > message is not the intended recipient, you are hereby notified that any > dissemination, distribution or copying of this communication is strictly > prohibited. > > ----------------------------------------------------------- > > > [Non-text portions of this message have been removed] > > > > Unsubscribe > [email protected] > > List info > http://www.quirksmode.org/dom/list.html > Yahoo! Groups Links > > > > > > > > > Unsubscribe > [email protected] > > List info > http://www.quirksmode.org/dom/list.html > Yahoo! Groups Links > > > > > > > -- Tired of pop-ups, security holes, and spyware? Try Firefox: http://www.getfirefox.com Unsubscribe [email protected] List info http://www.quirksmode.org/dom/list.html Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/wdf-dom/ <*> To unsubscribe from this group, send an email to: [email protected] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/