radio button in firefox...problem

Discussion in 'HTML & Website Design' started by RectangleMan, Mar 14, 2006.

  1. #1
    RectangleMan, Mar 14, 2006 IP
  2. Tam

    Tam Peon

    Messages:
    89
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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 :)
     
    Tam, Mar 14, 2006 IP
  3. RectangleMan

    RectangleMan Notable Member

    Messages:
    2,825
    Likes Received:
    132
    Best Answers:
    0
    Trophy Points:
    210
    #3
    Yeah I am narrowing it down to CSS. I didn't know underscores don't validate. I use underscores all the time..dammit.
     
    RectangleMan, Mar 14, 2006 IP
  4. Tam

    Tam Peon

    Messages:
    89
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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.
     
    Tam, Mar 14, 2006 IP
  5. RectangleMan

    RectangleMan Notable Member

    Messages:
    2,825
    Likes Received:
    132
    Best Answers:
    0
    Trophy Points:
    210
    #5
    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.
     
    RectangleMan, Mar 14, 2006 IP
  6. Tam

    Tam Peon

    Messages:
    89
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #6
    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;
    }

    :)
     
    Tam, Mar 14, 2006 IP
  7. RectangleMan

    RectangleMan Notable Member

    Messages:
    2,825
    Likes Received:
    132
    Best Answers:
    0
    Trophy Points:
    210
    #7
    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.
     
    RectangleMan, Mar 14, 2006 IP
  8. RectangleMan

    RectangleMan Notable Member

    Messages:
    2,825
    Likes Received:
    132
    Best Answers:
    0
    Trophy Points:
    210
    #8
    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.
     
    RectangleMan, Mar 14, 2006 IP
  9. Tam

    Tam Peon

    Messages:
    89
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Tam, Mar 14, 2006 IP