Strange problem

Janitor_Willie

New Member
Not sure if this is a coding error on my part or a browser idiosyncrasy.

From the landing page if you click "news", sometimes the boarder thickness value around the left menu bars will seem to fail to load properly. Instead of being rather thick it will have tiny little boarders. Complicating matters is that this problem is intermittent. Sometimes it does it and sometimes not.

So if you go to http://www.junkyardwillie.com/index.html and then click "news" hopefully the menu bar boarder radias will be very tiny, unless you reload the page.

Also someone loaded this site up with their iPhone and some of the menu buttons appeared as the wrong colors.

http://www.junkyardwillie.com/ttt-css.css is the CSS page.
 

Phreaddee

Super Moderator
Staff member
who knows. I started using maxthon last week for the first time. it's not bad. got a bit confused by it's back button and refresh looking almost identical. I also decided to fire up ie6 and netscape side by site to see which one really won the battle when faced with websites of today, my verdict was the same as it was back then. netscape.

I clicked news and the border did decrease in thickness but alas the radii was still the same. unless you actually meant border thickness. despite the overall garish nature of the website, i'd say the thicker border was much more appealing.

and yes the second time i returned to the news page the border was thick again. i'm only hazarding a guess here but i think it's got something to do with this line

border-radius: 1.5px rem 1.px;
1.5px? rem? 1.px?

i'm surprised any border shows up at all not a single value is correct
1px or 0.1rem but go with one or the other.
the poor browser doesn't know what to do, don't blame it! well unless it's ie then it probably it it's fault.
 

Phreaddee

Super Moderator
Staff member
hmmm on second thoughts i'd say it's got a lot to do with too much css.

Code:
nav ul li a {
    display: block;
    background-image: none;
    width: 18rem;
    height: 6rem;
    border: 0.5rem solid #fff;
    border-radius: 1.5px rem 1.px;
    color: #fff;
    font-family: Verdana, Geneva, sans-serif;
    text-decoration: none;
    line-height: 4.4rem;
    font-size: 2.8rem;
    margin-bottom: 23px;
    text-shadow: 3px 3px 5px #000;
    box-shadow: 3px 3px 5px #000;
    border-radius: .7px rem .px;
    border-radius: 0.9em;
    font-weight: bold;
    text-align: center;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    background-color: #3E0BB2;
}

nav ul li:nth-child(1) a {
    display: block;
    background-image: none;
    width: 18rem;
    height: 6rem;
    border-radius: 1.5px rem 1.px;
    color: #fff;
    font-family: Verdana, Geneva, sans-serif;
    text-decoration: none;
    line-height: 4.4rem;
    font-size: 2.8rem;
    margin-bottom: 23px;
    text-shadow: 3px 3px 5px #000;
    box-shadow: 3px 3px 5px #000;
    border-radius: .7px rem .px;
    border-radius: 0.9em;
    font-weight: bold;
    text-align: center;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    background: linear-gradient(to bottom, blue, black);
    border-top-width: 0.5;
    border-right-width: 0.5;
    border-bottom-width: 0.5;
    border-left-width: 0.5;
    border-top-color: #0F0;
    border-right-color: #0F0;
    border-bottom-color: #0F0;
    border-left-color: #0F0;
    }
nav ul li:nth-child(2) a {
    display: block;
    background-image: none;
    width: 18rem;
    height: 6rem;
    border-radius: 1.5px rem 1.px;
    color: #fff;
    font-family: Verdana, Geneva, sans-serif;
    text-decoration: none;
    line-height: 4.4rem;
    font-size: 2.8rem;
    margin-bottom: 23px;
    text-shadow: 3px 3px 5px #000;
    box-shadow: 3px 3px 5px #000;
    border-radius: .7px rem .px;
    border-radius: 0.9em;
    font-weight: bold;
    text-align: center;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    background: linear-gradient(to bottom, #FFF, #CB01CB);
    border-top-width: 0.5;
    border-right-width: 0.5;
    border-bottom-width: 0.5;
    border-left-width: 0.5;
    border-top-color: #F00;
    border-right-color: #F00;
    border-bottom-color: #F00;
    border-left-color: #F00;
}
    
nav ul li:nth-child(3) a {
    display: block;
    background-image: none;
    width: 18rem;
    height: 6rem;
    border-radius: 1.5px rem 1.px;
    color: #fff;
    font-family: Verdana, Geneva, sans-serif;
    text-decoration: none;
    line-height: 4.4rem;
    font-size: 2.8rem;
    margin-bottom: 23px;
    text-shadow: 3px 3px 5px #000;
    box-shadow: 3px 3px 5px #000;
    border-radius: .7px rem .px;
    border-radius: 0.9em;
    font-weight: bold;
    text-align: center;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    background-color: #00CC00;
    background: linear-gradient(to bottom, #00CC00, #030);
    border-top-width: 0.5;
    border-right-width: 0.5;
    border-bottom-width: 0.5;
    border-left-width: 0.5;
    border-top-color: #FF0;
    border-right-color: #FF0;
    border-bottom-color: #FF0;
    border-left-color: #FF0;
    }
nav ul li:nth-child(4) a {
    display: block;
    background-image: none;
    width: 18rem;
    height: 6rem;
    border-radius: 1.5px rem 1.px;
    color: #fff;
    font-family: Verdana, Geneva, sans-serif;
    text-decoration: none;
    line-height: 4.4rem;
    font-size: 2.8rem;
    margin-bottom: 23px;
    text-shadow: 3px 3px 5px #000;
    box-shadow: 3px 3px 5px #000;
    border-radius: .7px rem .px;
    border-radius: 0.9em;
    font-weight: bold;
    text-align: center;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    background: linear-gradient(to bottom, #EBF101, #000);
    border-top-width: 0.5;
    border-right-width: 0.5;
    border-bottom-width: 0.5;
    border-left-width: 0.5;
    border-top-color: #FFF;
    border-right-color: #FFF;
    border-bottom-color: #FFF;
    border-left-color: #FFF;
    }
nav ul li:nth-child(5) a {
    display: block;
    background-image: none;
    width: 18rem;
    height: 6rem;
    border-radius: 1.5px rem 1.px;
    color: #fff;
    font-family: Verdana, Geneva, sans-serif;
    text-decoration: none;
    line-height: 4.4rem;
    font-size: 2.8rem;
    margin-bottom: 23px;
    text-shadow: 3px 3px 5px #000;
    box-shadow: 3px 3px 5px #000;
    border-radius: .7px rem .px;
    border-radius: 0.9em;
    font-weight: bold;
    text-align: center;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    background: linear-gradient(to bottom, #0FF, #333);
    border-top-width: 0.5;
    border-right-width: 0.5;
    border-bottom-width: 0.5;
    border-left-width: 0.5;
    border-top-color: #FFF;
    border-right-color: #FFF;
    border-bottom-color: #FFF;
    border-left-color: #FFF;
    }
nav ul li:nth-child(6) a {
    display: block;
    background-image: none;
    width: 18rem;
    height: 6rem;
    border-radius: 1.5px rem 1.px;
    color: #fff;
    font-family: Verdana, Geneva, sans-serif;
    text-decoration: none;
    line-height: 4.4rem;
    font-size: 2.8rem;
    margin-bottom: 23px;
    text-shadow: 3px 3px 5px #000;
    box-shadow: 3px 3px 5px #000;
    border-radius: .7px rem .px;
    border-radius: 0.9em;
    font-weight: bold;
    text-align: center;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    background: linear-gradient(to bottom, #FFF, #333);
    border-top-width: 0.5;
    border-right-width: 0.5;
    border-bottom-width: 0.5;
    border-left-width: 0.5;
    border-top-color: #F00;
    border-right-color: #F00;
    border-bottom-color: #F00;
    border-left-color: #F00;
    }
if simplified to this

Code:
nav ul li a {
    display: block;
    background-image: none;
    width: 18rem;
    height: 6rem;
  [B]  border: 0.5rem solid #fff;[/B] 
    color: #fff;
    font-family: Verdana, Geneva, sans-serif;
    text-decoration: none;
    line-height: 4.4rem;
    font-size: 2.8rem;
    margin-bottom: 23px;
    text-shadow: 3px 3px 5px #000;
    box-shadow: 3px 3px 5px #000;
  [B]  border-radius: 0.9em;[/B] 
    font-weight: bold;
    text-align: center;
    padding: 0;
    background-color: #3E0BB2;
}
nav ul li:nth-child(1) a {
background: linear-gradient(to bottom, blue, black);
border-color: #0F0;
}
nav ul li:nth-child(2) a {
    background: linear-gradient(to bottom, #FFF, #CB01CB);
    border-color: #F00;
}
nav ul li:nth-child(3) a {
    background: linear-gradient(to bottom, #00CC00, #030);
    border-color: #FF0;
}
nav ul li:nth-child(4) a {
    background: linear-gradient(to bottom, #EBF101, #000);
        border-color: #FFF;

}
nav ul li:nth-child(5) a {
    background: linear-gradient(to bottom, #0FF, #333);
        border-color: #FFF;

}
nav ul li:nth-child(6) a {
    background: linear-gradient(to bottom, #FFF, #333);
    border-color: #F00;
}
at least much easier to manage!
 

Janitor_Willie

New Member
who knows. I started using maxthon last week for the first time. it's not bad. got a bit confused by it's back button and refresh looking almost identical. I also decided to fire up ie6 and netscape side by site to see which one really won the battle when faced with websites of today, my verdict was the same as it was back then. netscape.

I clicked news and the border did decrease in thickness but alas the radii was still the same. unless you actually meant border thickness. despite the overall garish nature of the website, i'd say the thicker border was much more appealing.

and yes the second time i returned to the news page the border was thick again. i'm only hazarding a guess here but i think it's got something to do with this line

border-radius: 1.5px rem 1.px;
1.5px? rem? 1.px?

i'm surprised any border shows up at all not a single value is correct
1px or 0.1rem but go with one or the other.
the poor browser doesn't know what to do, don't blame it! well unless it's ie then it probably it it's fault.

That's gotta be it. I will change and give it a shot.
I am using Firefox 21.0 on Windows 7 by the way.
 
Last edited:
Top