I have this application that stores the css data into a database. When you visit the site of some clients you get their individual css data for the elements on the page. I am including a sample of the text that is outputted to the page via an ASP function. The gist of my problem is that the css is enterpreted or parsed correctly by IE and not by firefox or safari Please advise me on how to fix the output. I greatly appreciate it. sample css string, by the way it is one long string sorry so long thanks in advance for the help div#body {text-align: center;} div#container {margin: auto auto; padding: 0px; overflow: hidden; text-align: left; height: 570px; width: 767px; border: 1px solid gray;border-right: #ccc 1px dashed; padding-right: 0px; border-top: #ccc 1px dashed; padding-left: 0px; z-index: -1; background-image: url(/images/ivfolio/artists/1026/container-.jpg); padding-bottom: 0px; margin: auto; overflow: hidden; border-left: #ccc 1px dashed; width: 767px; padding-top: 0px; border-bottom: #ccc 1px dashed; height: 570px; text-align: left; backoverflow: hidden;} #ulButtons {position: relative; clear: both; width: 112px; height: 510px; left: 29px; top: 37px; border: black 6px; visibility: visible; list-style: none; overflow: auto; white-space: nowrap; margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #ffffff;} #ulButtons li {list-style-type: none; float: left;border-right: black 1px solid; border-top: black 1px solid; margin-top: 0px; font-size: 11px; float: left; border-left: black 1px solid; width: 70px; color: #ffffff; margin-right: 0px; border-bottom: black 1px solid; list-style-type: none; height: 14px; background-color: #999900; text-decoration: none; float: left;} #ulButtons li a {margin-top: 0px; font-size: 11px; width: 70px; color: #ffffff; margin-right: 0px; height: 14px; text-decoration: none;} #img2 {position: relative; clear: both; width: 132px; height: 132px; left: 146px; top: -487px; border: black 6px; visibility: visible; overflow: auto; margin: 0px; z-index: 2; font-family: Arial, Helvetica, sans-serif; font-size: 12px;} #img3 {position: relative; clear: both; width: 170px; height: 124px; left: 395px; top: -592px; border: black 6px; visibility: visible; overflow: auto; margin: 0px; z-index: 3; font-family: Arial, Helvetica, sans-serif; font-size: 12px;} #spn1 {position: relative; clear: both; width: 283px; height: 29px; left: 429px; top: -755px; border: black 6px; background-color: #ffff00; visibility: visible; overflow: auto; margin: 0px; padding: 4px; z-index: 4; font-family: Arial, Helvetica, sans-serif; font-size: 12px;}
Here is a link to the page that has the problem. In FF/Safari either PC or Mac some elements move but in IE they do not move. I am baning my head here on the preverbial wall. Thanks for the help.
thanks, I stripped out all propriatary stuff. Thanks in advance for the help. http://www.indexedvisuals.com/scripts/homecss.html
I already answered this in another forum (which post I can't find at the moment). By cross-posting, you're wasting people's time working on something to which you already have the answer. Nevertheless, I'll re-answer. Your code is crap. Until you produce valid html, there is no way to debug the page with any hope of consistency. gary
kk5st I posted here bacuse it is a different forum which may have different oppinions. And for your "answer" as much as I appreciate you comments and suggestions they helped in some ways. If you are who I am thinking of. I would appreciate some one else looking at the page. Oh and if you are the person who talked about the puirk box then I have tried to get rid of most of the errors. The problem with alot of it is that it is old asp and dynamically created code. You just get the html. As I am sure you and many others are aware that with the site there are tons of include files. So going through the files looking for a needle is a great idea but if there is a suggestion to help me move away from the puirk box I would appreciate it. Thanks for the help in advance
Well, that's the crux, is it not? If you don't get rid of a bad script, you're stuck with bad html, and there's no way to fix it properly. To reiterate: You must fix the html, or its generator, before you can properly debug the page. It was probably written against IE, not to mention written without a clue toward valid html. Junk it. Start over from scratch and do it correctly. gary
kk5st Thanks for thepost I really appreciate it. I went through the old asp code and it seems to be "OK" in terms of no open tags. I did fond an extranious body tag and a head tag but that seemed to be it. So I took the html I sent you and saw what you meant by broken links. The site is aranged in a really odd manner with loads of nested objects, especially tables. In order to achieve what he desired in a rather speedy manner the old programmer just nested tons of tables. OK the point, I think that the mark up is "OK" in respect to tags and such it is just that it is very hard to follow and read. If you look at the individual include files it is possible to follow how the page is outputted to the user. But looking at after it has been sent and parsed by the browser is really tough. I am going to redesign the site in .NET with the new features of .NET to make the amount of code smaller but in the mean time this darn javascript app is making me nuts. I would most greatly appreciate your thoughts on moving away from the quirk mode in IE. If you are familiar with that. It seems from another post some one mentioned that I was forcing IE into that mode and the CSS will not work in other browsers very well. Sorry for the length. I could also take the important code and keep it and then strip the rest of the crap like the header, footer, sidebar to allow better looking of the problem. I will change the same file in about half hour or so. Thanks again for the help
I have stripped out all the BS and only have what I am concerned about. I have checked it against the CSS and HTML validator in order to make things easier to see. This is the link http://www.indexedvisuals.com/scripts/homecss2.html still moves in FF. If some one could point out how to change over from the proprietary IE to the w3c standard or atleast give me some pointers, they would have total appreciate from me. I am not a CSS guru and thank any one for the help.
Even my brother-in-law, who is a big .net stack fanboy, is coming around to the fact that while .net is a very easy framework for the backend coder, it is really difficult to turn out proper html with it. So, good luck with all that. Since I see no particular difference between javascript on and javascript off, strip it all out. A good site will be fully functional without js anyway. Once things are fixed, it can be added back. Strip out all font tags. Period. They're simply redundant and obscure the real markup. Lose the tables. As near as I can see, they take the form of single celled containers. That can be a Good Thing if you need some of table's special features. That doesn't seem to be the case here. Get rid of all those nested spans. You have elements nested 49 or more deep! The page, cleaned up a bit, and a proper DTD added to trigger standards mode rather than quirks follows in next post due to length constraints. Hint regarding the scrolling box: AP elements are positioned relative to their nearest positioned ancestor. Study http://www.w3.org/TR/CSS21/visuren.html#propdef-position to gain an understanding. Take especial heed of negative values for margins and top/left, &c., wherever they are. Look for duplicate entries in the style sheet. It will give you tired head to make a correction that's over-ridden by a later duplicate selector changing things back. cheers, gary
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Indexed Visuals </title> <link rel="shortcut icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico"> <style type="text/css"> br { font-size : 10px; } table { border : none; } i { font-style : italic; } body { background-color : #fff; left : 0; [color=red] top : 5px; right : 0; bottom : 0;[/color] margin : 5px 0 0; } .hide { display : none; } .header { background-image : url("/images/tbg.gif"); } .tabbar { font-family : Arial, Helvetica, sans-serif; font-size : 10px; text-transform : capitalize; color : #fff; text-decoration : none; font-weight : bold; } .username { font-family : Arial, Helvetica, sans-serif; font-size : 12px; text-transform : capitalize; color : #000; text-decoration : none; } .logout { font-family : Arial, Helvetica, sans-serif; font-size : 9px; text-transform : capitalize; color : #000; text-decoration : none; } .boxtext { font-family : Arial, Helvetica, sans-serif; font-size : 10px; text-transform : capitalize; color : #000; text-decoration : none; } .login { display : none; } .browseArtist { width : 120px; font-family : Arial, Helvetica, sans-serif; font-size : 11px; text-transform : capitalize; color : #000; text-decoration : none; } .browseSmall { font-family : Arial, Helvetica, sans-serif; font-size : 10px; text-transform : capitalize; color : #000; text-decoration : none; } .smallFont { font-family : Arial, Helvetica, sans-serif; font-size : 10px; } .normalFont { font-family : Arial, Helvetica, sans-serif; font-size : 12px; } .largeFont { font-size : 16px; } .linkText { font-family : Arial, Helvetica, sans-serif; font-size : 10px; text-decoration : underline; } .editButton { border : 1px solid #000; background-color : #fffb9d; font-size : 14px; } .dimText { font-family : Arial, Helvetica, sans-serif; font-size : 10px; color : #ccc; } .dimText:hover { color : #000; text-decoration : none; } .link { cursor : pointer; } a { text-decoration : none; } br { font-size : 10px; } h1 { font-family : Arial, Helvetica, sans-serif; font-size : 16px; } h2 { font-family : Arial, Helvetica, sans-serif; font-size : 12px; } td { font-family : Arial, Helvetica, sans-serif; font-size : 12px; } table { border : none; } i { font-style : italic; } body { padding : 0; height : 100%; border : none; left : 0; top : 5px; right : 0; bottom : 0; margin : 5px 0 0; } .style1 { background-color : #262525; } .style3 { border-style : none; border-color : #262525; background-color : #262525; } .style4 { border-style : none; border-width : 0; background-color : #262525; border-collapse : collapse; } .style5 { border-style : none; border-color : #262525; background-color : #262525; text-align : center; } .style6 { border-style : none; border-color : #262525; background-color : #262525; text-align : right; } .style7 { text-align : right; } .style8 { border-style : solid; border-color : #262525; background-color : #262525; } .style2 { text-align : left; } div#body { text-align : center; } div#container { margin : auto; padding : 0; overflow : hidden; text-align : left; height : 570px; width : 767px; border : 1px solid gray; border-right : 1px dashed #ccc; padding-right : 0; border-top : 1px dashed #ccc; padding-left : 0; z-index : -1; background-image : url(/images/ivfolio/artists/1000/container-home.png); padding-bottom : 0; margin : auto; overflow : hidden; border-left : 1px dashed #ccc; width : 767px; padding-top : 0; border-bottom : 1px dashed #ccc; height : 570px; background-color : #000000; text-align : left; } #ulButtons { position : relative; clear : both; width : 568px; height : 34px; left : 7px; top : 514px; border : 6px black; visibility : visible; text-align : center; list-style : none; overflow : auto; white-space : nowrap; margin : 0; padding : 0; z-index : 1; font-family : Impact; font-size : 15px; color : #ffffff; } #ulButtons li { list-style-type : none; float : left; border-right : 0 solid black; border-top : 0 solid black; margin-top : 0; font-size : 15px; float : left; border-left : 0 solid black; width : 85px; color : #ffffff; margin-right : 6px; border-bottom : 0 solid black; font-family : impact; list-style-type : none; height : 19px; text-align : center; text-decoration : none; float : left; } #ulButtons li a { margin-top : 0; font-size : 15px; width : 85px; color : #ffffff; margin-right : 0; font-family : impact; height : 19px; text-align : center; text-decoration : none; } #img1 { position : relative; clear : both; width : 45px; height : 47px; left : 29px; top : 426px; border : 0 solid #ffffff; visibility : visible; overflow : auto; margin : 0; padding : 0; z-index : 8; font-family : Arial, Helvetica, sans-serif; font-size : 12px; } #img2 { position : relative; clear : both; width : 425px; height : 297px; left : 128px; top : 95px; border : 0 solid #333333; visibility : visible; overflow : auto; margin : 0; padding : 0; z-index : 1; font-family : Arial, Helvetica, sans-serif; font-size : 12px; } #img3 { position : relative; clear : both; width : 259px; height : 275px; left : 30px; top : -302px; border : 0 double #999900; visibility : visible; overflow : auto; margin : 0; padding : 0; z-index : 2; font-family : Arial, Helvetica, sans-serif; font-size : 12px; } #spn1 { position : relative; clear : both; width : 447px; height : 48px; left : 18px; top : -639px; border : 6px black; visibility : visible; overflow : auto; margin : 0; padding : 4px; z-index : 3; font-family : Arial, Helvetica, sans-serif; font-size : 12px; } #spn2 { position : absolute; clear : both; width : 559px; height : 35px; left : 4px; top : -237px; border : 6px black; background-color : #cccccc; visibility : visible; overflow : auto; margin : 0; padding : 4px; z-index : 4; font-family : Arial, Helvetica, sans-serif; font-size : 12px; } #div2 { position : absolute; clear : both; width : 203px; height : 495px; left : 542px; top : 42px; border : 2px groove #d1d8dc; background-color : #443232; visibility : visible; overflow : auto; margin : 0; padding : 4px; z-index : 6; font-family : Arial, Helvetica, sans-serif; font-size : 12px; } .style3 { border-style : none; border-width : 0; background-color : #262525; } .style4 { text-align : left; } .style5 { text-align : right; } .style7 { text-align : center; } .style8 { border-width : 4px; } .style9 { font-size : 12px; font-family : Arial, Helvetica, sans-serif; color : #4b4b4b; font-size : small; font-family : Arial, Helvetica, sans-serif; font-style : italic; font-variant : normal; font-weight : bold; line-height : normal; background-color : #3e3e3e; } .style11 { background-color : #3e3e3e; } </style> <!-- the following are generic classes to replace style attributes in-lined with the html --> <style type="text/css"> body.c18 {background-color:#3e3e3e} table.c17 {border: 1px solid #262525; border-collapse: collapse; overflow:auto; height: 10px;} div.c16 {width: 767px; height: 570px; margin: auto auto; border: none;} p.c15 {color: #BAC5CB; text-align: justify} p.c14 {font-family: Arial, Helvetica, sans-serif; font-size: 80%; text-align: justify} span.c13 {color: #BAC5CB} p.c12 {text-align: right} span.c11 {color: #8F8E97; font-family: impact,chicago} span.c10 {font-size: 150%} span.c9 {font-family: Webdings} span.c8 {color: #B6B6B7} p.c7 {text-align: justify} span.c6 {font-family: Arial, Helvetica, sans-serif; font-size: 80%} span.c5 {font-family: Arial, Helvetica, sans-serif; font-size: 150%} span.c4 {color: #000000} span.c3 {font-family: tahoma,arial,helvetica,sans-serif} span.c2 {color: #FFFFFF; font-family: andale mono,times; font-size: 200%} div.c1 {position:absolute;left:1px;top:1px;} </style> </head> <body class="c18"> <div id="checkcss" class="c1"> <img src="/images/spacer.gif" height="1" width="1" name="imgTRK" alt="" id="imgTRK"> </div> <table id="MainContent" cellspacing="0" cellpadding="0" width="789" align="center" border="1" class="style3 c17"> <tr> <td> <table cellspacing="0" cellpadding="0" width="99%" align= "left" border="0"> <tr> <td width="100%" id="MiddleContentCell" valign="top" class="style2"> <div id="MiddleContent" class="style2"> <div id="body"> <div class="c16" id="container"> <ul id="ulButtons"> <li> <a href="#" class="linksCurrent">Home</a> </li> <li> <a href="#" class="linksOther">Bio</a> </li> <li> <a href="#" class="linksOther">Contact</a> </li> <li> <a href="#" class="linksOther">Links</a> </li> <li> <a href="#" class="linksOther">Portfolio</a> </li> <li> <a href="#" class="linksOther">Stock</a> </li> </ul><img alt="" id="img1" src= "http://www.indexedvisuals.com/images/ivfolio/artists/1000/img1-.jpg" name="img1"><br> <img alt="" id="img2" src= "http://www.indexedvisuals.com/images/ivfolio/artists/1000/img2-.jpg" name="img2"><br> <img alt="" id="img3" src= "http://www.indexedvisuals.com/images/ivfolio/artists/1000/img3-.jpg" name="img3"><br> <span id="spn1"></span> <p class="c7"> <span id="spn1"><span class="c6"> <!-- 27 nested spans deled --> <span class="c5"><span class= "c4"><span class="c3"><span class="c2">Welcome to Our Website</span></span> </span></span> <!-- 27 span closings deled --> </span> </span> </p><br> <span id="spn2"></span> <p class="c12"> <span id="spn2"><span class="c6"><span class= "c6"><!-- 30 some odd nested spans deled --> <span class="c11"><span class= "c10"><span class="c8"> Nature</span> <span class="c9">i</span> <span class="c8">Life</span> <span class="c9">i </span><span class= "c8">Beauty</span></span> <!-- 30 some odd span closings deled --> </span></span> </p><br> <div id="div2"> <p class="c14"> <span class="c6"><!-- more nested spans removed --> <span class="c13">This is sample place holding text. Go to edit mode and replace this text with your intro text for your website.<br> <br> Turpis inceptos quam ac, ut cras ante voluptatum et, consectetuer placerat porta volutpat sed, non tellus arcu nibh. Tincidunt egestas augue sit sequi, tincidunt erat eget diam augue, nec congue in neque occaecati. Amet tristique convallis dignissim, nibh iaculis mattis mi sed. Ipsum magna varius luctus lacus, mi faucibus vel neque, urna cras ante tellus, quisque et ut nibh.</span><!-- span closings deled --> </span> </p> <p class="c15"> Porttitor voluptatem et malesuada sodales, condimentum ut sodales semper eros, blandit neque eleifend felis hac, ut purus vestibulum wisi quam. Donec quam phasellus gravida, tristique sapien posuere vulputate, at quis pellentesque vitae metus. Parturient justo dolor sodales, maecenas sed bibendum in, dictum consectetuer id eu nec. Vitae integer lorem architecto, nunc elit gravida a, adipiscing at velit vestibulum, sodales wisi pretium donec. Nulla scelerisque ante malesuada, congue non duis a sem. Proin tincidunt lorem cursus, nisl risus lorem mauris, congue at praesent ornare. </p> <p class="c15"> Lectus suscipit vel accusantium nulla, accumsan metus sapien vel, molestie etiam fusce vehicula. Volutpat dapibus tellus sit vitae, congue nulla sed in laoreet, urna nostra sagittis sed imperdiet. Et eget sit suspendisse, accumsan et malesuada ut, massa donec vulputate consectetuer dolor. Ut tincidunt lorem vehicula, mi nibh consequat morbi, pede urna nec tempor in. Dui vestibulum erat non, nec eleifend est beatae orci, volutpat proin etiam orci, praesent fringilla sit quis. Mauris integer enim diam felis, montes parturient metus nunc, porttitor sed ante ipsum imperdiet, velit est non cras. </p> <p class="c15"> Duis suspendisse nascetur pharetra, aenean pellentesque dis nibh, facilisis quisque arcu nonummy senectus, phasellus in in ornare ante. Pharetra quam enim elementum est, adipiscing sint ut sed, nullam nisl quam senectus pede. Massa commodi amet aenean lectus, imperdiet malesuada maecenas nulla. Aptent nonummy ligula justo, sed et id interdum lectus, urna porta sed quisque ultricies, magna eu semper dictum convallis. Nascetur sed volutpat nisl imperdiet, id vel leo nunc turpis. Velit duis urna vehicula, et fusce ipsum condimentum, tortor facilisi orci nulla non, cursus parturient in elit. </p> </div><br> </div> </div> </div> </td> </tr> </table> </td> </tr> </table> </body> </html> Code (markup): cheers, gary