PDA

Click to See Complete Forum and Search --> : elements dissappear in ff

thechasboi
11-02-2007, 03:48 PM
I have two pages. They both look totally alike but for some reason I have not been able to determine is that page one makes several elements dissappear from the dom. How his occurs in all browsers I have no clue. The elements are in the html in view source but disappear from the DOM. Here is the address of the disappearing www .ivwebsites .com/disappear.html . And here is the amazing reappearing act page www .ivwebsites .com/disappear2.html if you view the source they both are the same as far as I can tell. I am obviously missing something. Thanks for the reply.
WebJoel
11-02-2007, 03:55 PM
First things first: -in the first URL you have some 'warnings' ("small errors") not the least of which is "<style>~</style>" in "<body>", -which is invalid. :) Screenshot:

edit:

I checked your second URL to see if anything jumped out at me... whoa! You have got some seriously bloated inline style going on there!! Maybe this exists in the first URL (I only briefed it), -but this quantity of markup is totally unecessary. Much of this could be stated in a "STYLE" (which goes BEFORE the "</head>" and nowhere else), -and it can be inherited (and not repeated a dozen times). See second screenshot image for a short example of the bloat...
I can't even begin to untangle this.. :eek:
thechasboi
11-05-2007, 09:19 AM
WebJoel

Thanks for the reply it is appreciated. The thing is that these pages are from a program I wrote which are automatically inserted to the page and the style and some other information is retrieved from a db. I am aware of the warnings and the inline but that has nothing to do with the disappearing elements. Both pages have the same warnings if you check. disappear.html has a few more warnings but do not seem to make the elements disappear from the DOM all together. I am beside my self. Thanks for the reply.
drhowarddrfine
11-05-2007, 04:47 PM
In any case, you have far, far too many HTML and CSS errors, including properties that don't even exist. Until those are fixed, this is not worth commenting on.
thechasboi
11-05-2007, 04:53 PM
drhowarddrfine

OK you say it is not worth looking at well then could you tell me or at least give me a possible example why on earth would an element appear in the html source and when you load the page it is there for a split second and then suddenly dissappear from the page. if you look at 100's of other sites with the same setup but different positioning there is no problem. I am outside of my head now looking at this too long. I am no longer objectively looking just trying to get this fixed. Here is a site with the same setup with different positioning. www. photos.k4studios .com a second one www .wayneheim .com a third one
www .karapelou .com look at the stock pages to see the same elements but in different positions. THanks for the reply ans looking.
WebJoel
11-05-2007, 06:59 PM
I like a good, challenging help. But in this case I must agree with drhowardfine. Seriously...
-A (small!) excerpt from your second page: <style type="text/css">
#LinksTitle span a{color:#33FF66;}
body{height:100%;scrollbar-3dlight-color: #F0F0EE;scrollbar-arrow-color: #676662;scrollbar-base-color: #F0F0EE;scrollbar-darkshadow-color: #DDDDDD;scrollbar-face-color: #E0E0E0;scrollbar-highlight-color: #F0F0EE;scrollbar-shadow-color: #F0F0EE;scrollbar-track-color: #F5F5F5;}
div#body {text-align: center;}
div#container {margin: auto auto; padding: 0px;overflow:hidden;text-align:left;height:600px;width:1100px;clear: both; border-right: #cccccc 1px dashed; padding-right: 0px; border-top: #cccccc 1px dashed; padding-left: 0px; background-image: url(/images/ivfolio/artists/111/container-stock.jpg); padding-bottom: 0px; margin: 0px auto; overflow: hidden; border-left: #cccccc 1px dashed; width: 1100px; cursor: default; padding-top: 0px; border-bottom: #cccccc 1px dashed; position: relative; height: 600px; background-color: rgb(255,255,255); text-align: left;border:1px;border-style:solid;border-color:transparent;}
#ulButtons {position: absolute; clear: both; width: 735px; min-width: 109px; height: 19px; min-height: ; left: 357px; top: 22px; border-width: 0px; border-style: none; border-color: black; background-color: transparent; visibility: visible; text-align: center; min-width: 109px; white-space: nowrap; margin: 0px; margin-top: 0px; padding: 0px; z-index: 150; font-family: Trebuchet MS1,Helvetica,sans-serif; font-size: 18px;}
#ulButtons li {list-style-type: none; float: left; position: relative; clear: none; width: 92px height: 23px border-width: 0px; border-style: none; background-color: transparent; background-image: none; text-align: center; list-style: none; margin: 0px 33px 0px 0px; padding: 0px; z-index: -1; font-family: Trebuchet MS1,Helvetica,sans-serif; font-size: 18px; color: #000099;}
#ulButtons li a {position: relative; clear: none; width: 92px height: 23px border-width: 0px; border-style: none; background-color: transparent; background-image: none; text-align: center; list-style: none none outside; margin: 0px; padding: 0px; font-family: Trebuchet MS1,Helvetica,sans-serif; font-size: 18px; color: #000099;}
#stockimg1 {position: absolute; clear: both; width: 319px; min-width: ; height: 341px; min-height: ; left: 203px; top: 140px; border-width: 0px; border-style: none; border-color: black; background-color: transparent; visibility: visible; overflow: auto; margin: 0px; margin-top: 0px; padding: 0px; z-index: 10; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 16px;}
#divimg1 {position: absolute; clear: both; width: 365px; min-width: 10px; height: 120px; min-height: ; left: 10px; top: 9px; border-width: 6px; border-style: none; border-color: black; visibility: visible; overflow: auto; min-width: 10px; margin: 0px; margin-top: 0px; padding: 0px; z-index: 17; font-family: Arial,Helvetica,sans-serif; font-size: 12px;}
#divimg2 {position: absolute; clear: both; width: 88px; min-width: 10px; height: 87px; min-height: ; left: 988px; top: 8px; border-width: 6px; border-style: none; border-color: black; visibility: visible; overflow: auto; min-width: 10px; margin: 0px; margin-top: 0px; padding: 0px; z-index: -191; font-family: Arial,Helvetica,sans-serif; font-size: 12px;}
#div1 {position: absolute; clear: both; width: 527px; min-width: 10px; height: 105px; min-height: ; left: 337px; top: 466px; border-width: 6px; border-style: none; border-color: black; visibility: visible; overflow: auto; min-width: 10px; margin: 0pt; margin-top: 0pt; padding: 0pt; z-index: 1; font-family: Arial,Helvetica,sans-serif; font-size: 12px;}
#stock1 {position: absolute; clear: both; width: 339px; min-width: ; height: 385px; min-height: ; left: 583px; top: 91px; border-width: 0px; border-style: none; border-color: black; background-color: transparent; visibility: visible; overflow: auto; margin: 0px; margin-top: 0px; padding: 0px; font-family: Arial,Helvetica,sans-serif; font-size: 12px;}
p{diplay:block;}
</style>

.... some javascript links removed here ....

<div style="margin: auto auto; padding: 0px;overflow:hidden;text-align:left;height:600px;width:1100px;clear: both; border-right: #cccccc 1px dashed; padding-right: 0px; border-top: #cccccc 1px dashed; padding-left: 0px; background-image: url(/images/ivfolio/artists/111/container-stock.jpg); padding-bottom: 0px; margin: 0px auto; overflow: hidden; border-left: #cccccc 1px dashed; width: 1100px; cursor: default; padding-top: 0px; border-bottom: #cccccc 1px dashed; position: relative; height: 600px; background-color: rgb(255,255,255); text-align: left;border:1px;border-style:solid;border-color:transparent;margin:0px auto;position:relative;border:none;z-index:5;" id="container">
<ul id="ulButtons">

<div id="divUL" style="BACKGROUND: url(/scripts/images/000000.gif); WIDTH: 100%; HEIGHT: 100%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial">
<li id="ulButtonsLiHome" style="CLEAR: none; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: 800; FONT-SIZE: 18px; Z-INDEX: -1; FLOAT: left; BACKGROUND-IMAGE: none; PADDING-BOTTOM: 0px; MARGIN: 0px 33px 0px 0px; WIDTH: 92px; COLOR: rgb(0,0,153); BORDER-TOP-STYLE: none; PADDING-TOP: 0px; FONT-FAMILY: Trebuchet MS1,Helvetica,sans-serif; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; LIST-STYLE-TYPE: none; POSITION: relative; HEIGHT: 23px; BACKGROUND-COLOR: transparent; TEXT-ALIGN: center; BORDER-BOTTOM-STYLE: none; outline-color: invert; outline-style: none; outline-width: medium"><a id="ulButtonsHome" style="CLEAR: none; BORDER-RIGHT: black 0px; PADDING-RIGHT: 0px; LIST-STYLE: none none outside; BORDER-TOP: black 0px; PADDING-LEFT: 0px; FONT-WEIGHT: 800; FONT-SIZE: 18px; BACKGROUND: none transparent scroll repeat 0% 0%; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 92px; COLOR: #000099; PADDING-TOP: 0px; FONT-FAMILY: Trebuchet MS1,Helvetica,sans-serif; BORDER-LEFT-STYLE: none; POSITION: relative; HEIGHT: 23px; TEXT-ALIGN: center; TEXT-DECORATION: none; BORDER-BOTTOM-STYLE: none; (/scripts/images/000000.gif) repeat: undefined" >Home</a></li>
<li id="ulButtonsLiBio" style="CLEAR: none; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: 800; FONT-SIZE: 18px; Z-INDEX: -1; FLOAT: left; BACKGROUND-IMAGE: none; PADDING-BOTTOM: 0px; MARGIN: 0px 33px 0px 0px; WIDTH: 92px; COLOR: rgb(0,0,153); BORDER-TOP-STYLE: none; PADDING-TOP: 0px; FONT-FAMILY: Trebuchet MS1,Helvetica,sans-serif; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; LIST-STYLE-TYPE: none; POSITION: relative; HEIGHT: 23px; BACKGROUND-COLOR: transparent; TEXT-ALIGN: center; BORDER-BOTTOM-STYLE: none; outline-color: invert; outline-style: none; outline-width: medium"><a id="ulButtonsBio" style="CLEAR: none; BORDER-RIGHT: black 0px; PADDING-RIGHT: 0px; LIST-STYLE: none none outside; BORDER-TOP: black 0px; PADDING-LEFT: 0px; FONT-WEIGHT: 800; FONT-SIZE: 18px; BACKGROUND: none transparent scroll repeat 0% 0%; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 92px; COLOR: #000099; PADDING-TOP: 0px; FONT-FAMILY: Trebuchet MS1,Helvetica,sans-serif; BORDER-LEFT-STYLE: none; POSITION: relative; HEIGHT: 23px; TEXT-ALIGN: center; TEXT-DECORATION: none; BORDER-BOTTOM-STYLE: none; (/scripts/images/000000.gif) repeat: undefined" >Bio</a></li>
<li id="ulButtonsLiContact" style="CLEAR: none; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: 800; FONT-SIZE: 18px; Z-INDEX: -1; FLOAT: left; BACKGROUND-IMAGE: none; PADDING-BOTTOM: 0px; MARGIN: 0px 33px 0px 0px; WIDTH: 92px; COLOR: rgb(0,0,153); BORDER-TOP-STYLE: none; PADDING-TOP: 0px; FONT-FAMILY: Trebuchet MS1,Helvetica,sans-serif; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; LIST-STYLE-TYPE: none; POSITION: relative; HEIGHT: 23px; BACKGROUND-COLOR: transparent; TEXT-ALIGN: center; BORDER-BOTTOM-STYLE: none; outline-color: invert; outline-style: none; outline-width: medium"><a id="ulButtonsContact" style="CLEAR: none; BORDER-RIGHT: black 0px; PADDING-RIGHT: 0px; LIST-STYLE: none none outside; BORDER-TOP: black 0px; PADDING-LEFT: 0px; FONT-WEIGHT: 800; FONT-SIZE: 18px; BACKGROUND: none transparent scroll repeat 0% 0%; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 92px; COLOR: #000099; PADDING-TOP: 0px; FONT-FAMILY: Trebuchet MS1,Helvetica,sans-serif; BORDER-LEFT-STYLE: none; POSITION: relative; HEIGHT: 23px; TEXT-ALIGN: center; TEXT-DECORATION: none; BORDER-BOTTOM-STYLE: none; (/scripts/images/000000.gif) repeat: undefined" >Contact</a></li>
<li id="ulButtonsLiLinks" style="CLEAR: none; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: 800; FONT-SIZE: 18px; Z-INDEX: -1; FLOAT: left; BACKGROUND-IMAGE: none; PADDING-BOTTOM: 0px; MARGIN: 0px 33px 0px 0px; WIDTH: 92px; COLOR: rgb(0,0,153); BORDER-TOP-STYLE: none; PADDING-TOP: 0px; FONT-FAMILY: Trebuchet MS1,Helvetica,sans-serif; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; LIST-STYLE-TYPE: none; POSITION: relative; HEIGHT: 23px; BACKGROUND-COLOR: transparent;
.... MUCH MORE code removed here ....
Apart from the fact that it is incorrectly located in the <body>, LOOK AT IT! Yikes! I have built dozen+ page sites using one-tenth this amount of CSS. Sorry, -I just can't cope with this level of bloat. :o

(I had to edit this post THREE TIMES, removing more-and-more bloat code until I could fit this post into the 10,000-word limit on posts! :eek:

....or at least give me a possible example why on earth would an element appear in the html source and when you load the page it is there for a split second and then suddenly dissappear from the page... My guess:so much crap code entering RAM that it actually takes several seconds for loading.
Centauri
11-05-2007, 07:29 PM
I would also agree with the amount of bloat. The large amount of inline styles goes against the whole point of css - keeping visual presentation out of the markup. Besides that, inline styles prevent us from using the normal developer toolbars to vary styles to debug this for you.

Something that stood out to me just glancing at Joel's extract :#stockimg1 {position: absolute; clear: both; width: 319px; min-width: ; height: 341px; min-height: ; left: 203px; top: 140px; border-width: 0px; border-style: none; border-color: black; background-color: transparent; visibility: visible; overflow: auto; margin: 0px; margin-top: 0px; padding: 0px; z-index: 10; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 16px;} If an element is positioned absolutely, it is not going to clear anything.... it might validate, but it is pointless bloat.
thechasboi
11-07-2007, 10:03 AM
I agree entirely there are tons of bloat with these sites but this is how my application works. If you are interested in what I am talking about I can give you a link. But I found this tool for FF called YSlow I am going to try and figure out why the element disappears from the DOM all together. I do appreciate the help. I must also say that all these pages come from multiple db's and this is why it is all in one line. I have tried to make thing more neater but oh well can not have everything. Thanks again for the help oh and the constructive criticism. Much appreciates.
drhowarddrfine
11-07-2007, 05:02 PM
Instead of YSlow, you should just use Firebug.
WebJoel
11-07-2007, 06:15 PM
I have to ask... -are you coding this 'by hand' or using some program (like a WYSIWYG) to assist? If you are using some helpware program, it does CSS the way Dreamweaver does HTML... :mad:

Perhaps, your host requires this level of explainification but 90% of this could be removed to generic re-useable elements in a local CSS, thus be inheritable, and clean this page up. *I* think that this is the whole problem, right there.

I want to help but it would sap too many minutes & probably hours to do, and while we are prohibited from discussing or suggesting 'pay' on this forum, -I must profess that I could not be hired to clean this up. :cool:

I do think that you are totally kewl for not sniping back. So far, -all you've received is criticisms on this and when I opened this thread just now to view, I sort of was looking at it from behind my chair through my fingers.... :o
thechasboi
11-13-2007, 11:10 AM
WebJoel

I thank you for the post it was refreshing to here that I have been patient. OK, this page is autogenerated from a program I created. Here is the link www .ivwebsites .com click the free demo button. You will see what the user can do i think it is really cool but that is my oppinion. Try the sample page and its links to the sites already created by this app. I am aware that the code is a bit, well ok bloted a bit more than should be. It is a complicated process but simple for the user. What you see in the html pages provided are actually source from a browser from the auto generated pages.

If you force refresh the browser I notice that a scroll bar is created around the only element to appear on the page then they dissappear. I have run into problems where a missing end tag has done some strange thing like combining elements into one large element. Say you have several divs on the page positioned absolutely. if the second div is missing the end tag the following divs in order they appear on the page become melted into the second div intil another ending div tag is found. But I have never seen it so that elements dissapear from the DOM all together. This is the strangest thing I have encountered.

THanks for reading this post and replying.