Hi. I am still looking on other places on the web to better familiarize myself with firefox compatible css, but I decided to try and post my problem here as well to see if I can get any help. My problem is that I am trying to get a code for someone and the css code I have looks perfectly fine in IE but is all messed up in Firefox. I'm trying to figure out what to delete, what to change, etc...to make it work. Any help would be appreciated! Thanks! Here is the code: <div class="comt"><table><td><table> </td></tr></table></td></tr></table></td></tr></table></div> <style> bbz Overlay Model Generator v0.5 bbzSpace dot com </style> <STYLE TYPE="text/css">p {align=justify} BODY{cursor: url(http://www3.telus.net/wilsoncheung/cursor.ani);} a {cursor: url(http://www3.telus.net/wilsoncheung/cursor.ani);} </STYLE> <style type="text/css">.. --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> a:hover{filter:blur(color:, strength=40);height:0px;width:inherit} //--></style> <style type="text/css"> .. --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> .text, .spacetext, .redtext, .redtext8, .redbtext, .redtext12b, .bluebtext, .redbtext, .utext, .orangetext, .orangetext2, .orangetext15, .lightbluetext8, .bluetext8, .whitetext7, .whitetext12, .whitetext15, .blacktext15, .blacktext13, .blacktext12, .nametext, .blacktext12nb, .blacktext10, .blacktext10nb, .blacktext7, .footer, .skip, .blacktext14bu a, a:link, a:active, a:visited, a.navbar, a.readmail, a.readmail:link, a.readmail:active, a.readmail:visited, a.redlink, a.redlink:link, a.redlink:active, a.redlink:visited, a.blink, a.blink:link, a.blink:active, a.blink:visited, a.white, a.white:link, a.white:active, a.white:visited, a.white7, a.white7:link, a.white7:active, a.white7:visited, a.black7, a.black7:link, a.black7:active, a.black7:visited, a.navbar:link, a.navbar:active, a.navbar:visited, a.skip, a.skip:link, a.skip:active, a.skip:visited, a.redlink7, a.redlink7:link, a.redlink7:active, a.redlink7:visited, a.graylink7, a.graylink7:link, a.graylink7:active, a.graylink7:visited, a.bluelink, a.bluelink:link, a.bluelink:active, a.bluelink:visited, a.searchlinkBig, a.searchlinkBig:link, a.searchlinkBig:active, a.searchlinkBig:visited, a.searchlinkSmall, a.searchlinkSmall:link,a.searchlinkSmall:active, a.searchlinkSmall:visited, a.searchlinkSmall:hover, a.blue_white, a.blue_white:link, a.blue_white:active, a.blue_white:visited { font-family: courier new; font-size: 7.5pt; line-height: 10px; color:880000; font-weight: none; text-decoration: none; text-transform: none; } a:hover, a.readmail:hover, a.redlink:hover, a.blink:hover, a.white:hover, a.white7:hover, a.black7:hover, a.navbar:hover, a.skip:hover, a.redlink7:hover, a.graylink7:hover, a.bluelink:hover, a.searchlinkBig:hover, a.blue_white:hover { font-family: courier new; font-size: 7.5pt; line-height: 10px; color:000000; font-weight: none; text-decoration: line-through; text-transform: none; cursor:crosshair; } .navbar, .blacktext10, .nametext, .copy, .text, .whitetext10, .whitetext12, .lightbluetext8, .pinktext15, .orangetext15, .btext, .blacktext12, .redtext, .redbtext, .lightbluetext8, { font-family: courier new; font-size: 7.5pt; line-height: 10px; color:555555; font-weight: none; text-decoration: none; text-transform:none; } A:hover img{filter:none} --> </style> <style type="text/css"> body {background-color:black; background-image:url("http://i19.photobucket.com/albums/b157/alexandra354/Skulona_lola.jpg"); background-repeat:no-repeat; background-position:center center; background-attachment:fixed;} td, .text, div, input {color:999 !important;} a {color:999 !important;} img {border:0px;} table, tr, td {background:transparent; border:0px;} img, .contactTable { display:none; } .bbzContainer img, .comt img { display:inline; } table div, td td td, table div div { visibility:hidden; } font, a, .bbzsc a { visibility:hidden; } marquee, a.navbar { visibility:visible !important; } .bbzComment { This is where you control the position of the player. } table table object {display:block; width:202px; height:35px; position:absolute; top:460px; left:350px; visibility:visible;} table table table object, .bbzContainer div embed {position:static !important; width:auto; height:auto; } .bbzComment { You selected to show comments. } .bbzsc { visibility:hidden; } .herpe { You selected to show friends. } .comt td, .comt table{width:0px!important; height:0px!important; background-color:transparent!important; border:0px!important; _padding:2px!important;} .comt, .comt td, .comt table, .comt td a img, .comt td td td a, .comt td b a, .comt td .redlink{visibility:visible;} .comt td td td b{top:0px; display:inline;} .comt .orangetext15{display:none;} .comt td b, .blacktext10 {display:block;} .comt table, .comt td b, .comt .btext, .redlink{position:relative; top:-9px;} .comt {z-index:7;} .herpe { This is where you control your top8 and comment position. } .comt { visibility: visible; position:absolute; left:50%; top:0%; overflow:none; width:450px; height:400px; border:0px solid; border-color:483D8B; margin-top:750px; margin-left:-225px; background-color:transparent; } .comt span, .comt b {color:999 !important; visibility:visible !important; display:inline !important; } .comt table { width:400px !important; } .comt table table { width:0px !important; } .blacktext10 { width:350px; display:block; } .comt a, .comt font, .comt span { visibility:visible !important; } .div1 { background-color:black; color:999; border:1px solid; border-color:483D8B; width:250px; height:250px; overflow:none; position:absolute; z-index:2; left:50%; top:0%; margin-left:-300px; margin-top:200px; text-align:center; visibility:visible;} left:50%; top:0%; margin-left:-300px; margin-top:200px; text-align:center; visibility:visible;} .div2 { background-color:black; color:999; border:1px solid; border-color:483D8B; width:350px; height:115px; overflow:auto; position:absolute; z-index:2; left:50%; top:0%; margin-left:-30px; margin-top:200px; text-align:center; visibility:visible;} .div3 { background-color:transparent; color:999; border:0px solid; border-color:483D8B; width:350px; height:115px; overflow:none; position:absolute; z-index:2; left:50%; top:0%; margin-left:-30px; margin-top:335px; text-align:center; visibility:visible;} marquee { z-index:8; } table div, span, td td td, table div div { visibility:hidden !important; } .bbzContainer div, .bbzContainer div font, .bbzContainer div a, .bbzContainer div div, .bbzContainer font a, .bbzContainer span, .bbzContainer div table a, .bbzContainer div table img, .bbzContainer div table font, .bbzContainer div table, .bbzContainer div table td, .comt, .comt td, .comt span, .comt a, .comt div {visibility:visible !important;} .bbzDiv {content:"Overlay Generator beta";} </style> <div style="display:none;"><table><tr><td><table><tr><td><table><tr><td> </td></tr></table></td></tr></table></td></tr></table></div> <div class="bbzContainer"> <div class="div1"> <font family="trebuchet ms"> <font size=3><font color=yellow>A</font><font color=green>l</font><font color=magenta>e</font><font color=orange>x</font><font color=blue>a</font><font color=pink>n</font><font color=silver>d</font><font color=red>r</font><font color=purple>a</font></font> <br><br> <a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=9241145"><img src="http://i19.photobucket.com/albums/b157/alexandra354/z58753518.png"></a> <br> <a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=9241145">see me</a> <br><br> <a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=9241145">add me</a> <br> <a href="http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=9241145">write me</a> <br> <a href="http://groups.myspace.com/index.cfm?fuseaction=groups.addtogroup&friendID=9241145">invite me</a> <br> <a href="http://collect.myspace.com/index.cfm?fuseaction=block.blockUser&userID=9241145">block me</a> </div> <div class="div2"> <font family="trebuchet ms"> <font size=1> <br> <br> I'm Ali. I don't do much. I don't go out a lot because there's nothing to do. This is probably why all my friends and accquaintances have forgotten about me. Oh Joy. <br> <br> <br> <br> <font size=1><font family="courier new">I'm stuck in a flower patch of artistic originality.</font></font> </div> <div class="div3"> <font family="trebuchet ms"> <font size=1> <font color=white><b> OH, AND P.S. THIS PROFILE IS NOT FIREFOX COMPATIBLE...YET.<b> <br> <br> <font color=yellow>♥</font> My favorite color is yellow. <br> <font color=blue>♥</font> The Vita-Mix man at Costco is my hero. <br> <font color=orange>♥</font> I don't really like these little hearts, but I like the colors, so I will keep using them. <br> <font color=magenta>♥</font> Frasier and the X-Files are two of the best shows ever made. Ever. <br> <font color=green>♥</font> I love to laugh. I love to see other people laughing. I love to make people laugh. It's a great thing. <br> <font color=silver>♥</font> Be happy! Because depression is way overrated and never helps with anything. <br> <font color=red>♥</font> I'm running out of colors. <br> <font color=darkgreen>♥</font> To travel is...to be freaking amazing. Traveling is for savages. I love to travel. <br> <font color=purple>♥</font> I have a thing for men with big noses; so long as they are proportional to the face. Namely, Alan Rickman. Wow. <br> <font color=red>♥</font>I love overcast weather as well as sunny, if not more. <br> <font color=lightblue>♥</font> I'm partial to old people and cashews. <br> <font color=white>♥</font> I love anything ancient Egypt. <br> <font color=silver>♥</font> I love to read. <br> <font color=pink>♥</font> And now, to conclude this appalingly drawn-out list of fancies and whatnot, I leave you with this last confession; I fucking love myself.</font> <style> body { scrollbar-face-color:222266; scrollbar-highlight-color:222244; scrollbar-3dlight-color:222244; scrollbar-shadow-color:222222; scrollbar-darkshadow-color:000000; scrollbar-arrow-color:666666; scrollbar-track-color:222244; } </style> </div> </div> <div class="bbzsc"><table><tr><td><table><tr><td><table><tr><td> Code (markup):
i don't think there is such a thing as ff-compatible or ie-compatible. css is css. the only problem is that ff is very strict while ie is more lenient. so when you code css, best start off testing with ff first and then only try using ie.
Ahh ok, thanks for clearing that up for me. Haha, I feel a little dumb. I'm going to definetely keep that (testing in FF) in mind anytime I do a code.
It's not that IE is more tolerant, it's that IE supports less than half of css 2, and much of what it does support, it gets wrong. Firefox and Opera support more than 99%, and get it right, to boot. Opera seems to have too many differences from build to build for me to use it as a primary test bed. Firefox, though, is consistently good, and is my choice for primary testing. Once it's right in Firefox, it is fairly trivial to apply the hacks and work-arounds that IE needs. If you write buggy code[1] to support IE, it's damned near impossible to make it work in modern browsers. Be sure you're using a complete and proper DTD to trigger standards mode in browsers. It doesn't matter to Firefox all that much, but in quirks mode, IE and Opera, which tries to be backward compatible with IE, follow proprietary rules. That makes it even more difficult to achieve cross browser compatibility. One more thing, if Firefox and IE have different renderings, IE got it wrong. If you don't like what Firefox is doing, your code is wrong; it is doing exactly what you told it to do. cheers, gary [1] If you write for a buggy browser, you cannot help but write buggy code.
Ok. Thanks so much. I'm a lot cleared up now. Firefox will definetely be my browser of choice from now on for just about everything.
Do keep in mind that you still need to test and add fixes for IE. The important thing is to be sure you start from a good base of html and css rather than the poor foundation that coding for IE produces. cheers, gary