Does anyone know why these radio buttons don't work in Firefox...or Opera? http://www.videogamelinks.com/submit.php The page xhtml validates..I just can't get them to click! HELP!
Just a quick look poses a couple of potential problems (before having a detailed look at the code and css) ... try removing all of the underscores you've used in your css selectors (this can cause problems in some browsers) and your code does not actually validate - you ned to encode ampersands in URLs (although I doubt that that is the problem). I believe its a css issue - the page works fine without css. Good luck with your site
Yeah I am narrowing it down to CSS. I didn't know underscores don't validate. I use underscores all the time..dammit.
I'm not saying that underscores don't validate, in fact they are supposed to be valid in css2, but they can cause errors in some browsers I'm going to take a deeper look when I have a moment.
OK css validates but still the radio buttons don't work..validation took me like an hour...what crap. Also I see a strange behavior on the footer links...they don't work in FireFox or Opera as well...should be a clue I guess.
Firefox and Opera didn't like the absolute positioning of the left_nav and trhere was a badly commented line, so this css works for all 3 (I've put comments in the places where I've made changes) ... html {margin: 0; padding: 0;} BODY { font-family: Verdana, Sans-serif; font-size: 12px; color: #FFFFFF; background: #525965; text-align: left; margin:0px; padding:0px; } A { color: #FFFFFF; text-decoration: none; } A:Hover { text-decoration: underline; } div#header2 { width: 760px; height: 171px; background: url('images/header.gif') no-repeat; padding-top: 37px; margin-bottom: -37px; margin: 0 auto; } div#logo_1 { margin-left: 42px; margin-top: -6px; } div#nav_bar_1 { padding-left: 310px; margin-right: -310px; margin-top: -62px; } div#nav_bar_2 { padding-left: 310px; margin-right: -310px; padding-top: 19px; } div#content_bg { background: url('images/page_bg.gif') repeat-y; width: 760px; margin: 0 auto; margin-top: -37px; } div#left_nav { float: left; width: 244px; /* position: absolute; removed */ } .nav_head { background: url('images/nav_section_head.gif') no-repeat; width: 244px; height: 37px; padding-left: 37px; margin-right: -37px; padding-top: 11px; margin-bottom: -11px; } .nav_link { background: url('images/nav_link_bg.gif') no-repeat; width: 244px; height: 29px; padding-left: 42px; margin-right: -42px; padding-top: 5px; margin-bottom: -5px; } .google_left { width: 244px; height: 300px; padding-left: 42px; margin-right: -42px; padding-top: 5px; margin-bottom: -5px; } div#content_area { width: 516px; padding-left: 244px; margin-right: -244px; } div#page_title { background: url('images/page_title_bg.gif') no-repeat; width: 516px; height: 22px; padding-top: 3px; margin-bottom: -3px; padding-left: 3px; margin-right: -3px; } div#content { width: 516px; padding-left: 3px; margin-right: -3px; padding-top: 3px; } div#footer_curve { width: 760px; height: 50px; background: url('images/footer_curve.gif'); margin: 0 auto; } div#footer { width: 760px; height: 65px; margin: 0 auto; text-align:left; } div#footer_bars { float: left; width: 642px; height: 65px; background: url('images/footer_bg.gif'); text-align:left; } div#footer_bar_1 { padding-top: 10px; margin-bottom: -10px; padding-left: 39px; margin-right: -39px; position: absolute; text-align:left; } div#footer_bar_2 { padding-top: 42px; margin-bottom: -42px; padding-left: 39px; margin-right: -39px; position: absolute; text-align:left; } div#footer_top_button { width: 118px; height: 65px; float: right; } /* MAIN below - this was not commented out properly */ #mainlayoutbox { display: inline; width: 480px; float: left; font-size: 12px; line-height: 1.30em; position: relative; /* added */ } #header { width: 470px; height: 30px; text-align: center; } #header h1 { font-size: 16px;} #maincolumn { font-size: 12px; line-height: 1.50em; width: 470px; min-height: 445px; text-align: center; border-top: 1px solid #9cbbad; } #maincolumn h3 { color: #9cbbad; padding-top: 10px; clear: both; } /* #maincolumn .content width is adjustable. It is currently set up to center by use of 0 auto on the margins. */ #maincolumn .content, #maincolumn p { margin: 0 auto; text-align: left; } #maincolumn .content { width: 100%; } h1 { font-size: 14px; margin: 0; padding: 15px 0; } h2, h3 { font-size: 14px; margin: 0; padding: 0 0 11px 0; } h4 { font-size: 14px; color: #9cbbad; } #footer { color: #ffffff; font-size: 11px; width: 100%; text-align: right; clear: both; position: relative; height: 100px; } * html #footer {height:100px;height:99px;} #footer p { margin: 0; color: #cccccd; padding: 45px 20px 0 30px; } #footer h4 { width: 100%; margin: 0; padding: 15px; font-size: 11px; color: #592349; } #footer a:link { color: #90306d; font-weight: bold; } #footer a:visited { color: #cccccd; font-weight: bold; } #footer a:hover { color: #FFF; font-weight: bold; decoration:underline; } #footer a:active { color: #cccccd; font-weight: bold; } .clearA { overflow: hidden; clear:both; height:0; margin:0; font-size: 1px; line-height: 0; } img a { border: 0; } .center { text-align: center; margin-right: auto; margin-left: auto; padding-bottom: 5px; } .navigation { font-size: 12px; width: 90%; margin: 0 5%; } .alignleft { text-align:left; width: 100%; margin: 0 15px 0 10px; display: inline; } .alignright { text-align:right; width: 40%; margin: 0 10px 0 15px; display: inline; } .featured { font-size: 105%; clear: both; background: #ebecde; margin: 5px 0; padding: 0 4px; border-bottom: 1px solid #9cbbad; border-top: 1px solid #9cbbad; text-align: left; } h3.featured { margin: 0; padding: 0; } .c { float: left; } .cr { clear: left; } td { vertical-align: top; padding: 5px; } #descr { width: 50%; float: left; padding: 8px 10px 5px 10px; margin: 0 0 5px 0; font-size: 12px; text-align: left; } .err { padding: 3px; color: #FF0000; background: #FFEDED; border: 1px solid #A0A0A0; text-align: left; } input.text { color: #000000; border: 1px solid #cccccd; } textarea.text { font-size: 12px; border: 1px solid #cccccd; } select { font-size: 12px; } h4 { padding-top: 35px; } .captcha { border: 1px solid #cccccd; margin: 5px 0 15px 0; } form { display: inline; } .submitpage { clear: both; } .searchbox { display: block; width: 150px; line-height: 2em; } .btn{ font-size: 12px; font-weight: bold; border: 1px solid #ffffff; background-color: #3D4553; color: #cccccd; margin-top: 3px; } span.req{ margin-left: 3px; color: #FF0000; font-weight: bold; } .totals { clear: both; padding: 10px 10px 10px 65px; border-top: 1px solid #9cbbad; border-bottom: 1px solid #9cbbad; } div.errForm, span.errForm { margin: 0px 0 0px 5px; padding: 2px 3px 2px 3px; color: #FF0000; background: #FFFFF3; border: 1px solid #cccccc; text-align: left; clear: right; } .small, .small a { color: #909090; font-size: 11px; text-decoration: none; margin: 0; padding: 0; } .small { margin-left: 15px; } .smaller { font-size: 11px; } .sort { color: #000000; } p.subcats { margin: 0px 0px 10px 0px; } div.pr { font-size: 11px; color: #000000; float: left; height: 30px; margin-right: 5px; } div.prg{ width: 40px; border: 1px solid #cccccd; height: 3px; font-size: 1px; } div.prb{ background: #ebecde; height: 3px; font-size: 1px; } .price { border-bottom: 1px solid #9cbbad; } .price table td{ margin: 0; padding: 2px; vertical-align: bottom; } #catwrapper { float: left; clear: both; display: inline; margin: 0; font-size: 10px; } #maincolumn ul { float: left; display: inline; width: 400px; list-style: none; text-align: left; margin: 0 20px; } #maincolumn ul li { float: left; width: 15em; padding: 10px 5px 10px 10px; font-size: 12px; text-align: left; display: block; } #maincolumn ul p { padding: 0 0 5px 6px; font-size: 11px; } .catlinks { color: #9cbbad; } .catlinks p a { font-weight: normal; } .catlinks a { font-weight: bold; } .catlinks a:link { color: #9cbbad; } .catlinks a:visited { color: #9cbbad; } .catlinks a:hover { color: #FFF; decoration:underline; } .catlinks a:active { color: #9cbbad; } a img { border: 0; } #title {margin: 0; padding: 0;} br.both { font-size:12px; line-height: 0; height: 0; clear:both; }
Ok got the radio buttons to work..damn that was hard... Now for the footer to be fixed. This was a CSS nightmare. The radio buttons seemed to be in an area that conflicted with left nav. It created this weird overflow on top of the form area. Even though everything LOOKED perfect..it didn't act how it looked. Really stupid actually.
lol..I posted just as you did...thanks for the help. I got it all now..even the footer...had to get rid of the absolutes and reposition it but all seems well now. Whew...now I can sleep.
You could probably do with the Firefox and IE developer's toolbars, they are handsome in helping narrow down errors ... see this thread for the links ~ http://forums.digitalpoint.com/showthread.php?t=64619