8 replies [Last post]
York
York's picture
Offline
Regular
Los Angeles
Last seen: 14 years 5 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

In Firefox, when I click on the navbar links, a thin gray border is drawn around the link image from the far left of the browser.

Any idea why this is, and if there's a way to hide it? Thanks in advance for your assistance.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 48 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

How are we supposed to

How are we supposed to assist you? Read your mind? Did you read the stickies in this forum?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 1 day ago
Joined: 2004-06-30
Posts: 9679
Points: 815

The "box" is the default

Laughing out loud

The "box" is the default dotted border that browsers apply to "active" links, eg when they are clicked.

Why it happens on your logo is hard to diagnose without a link to the page Wink

Verschwindende wrote:
  • CSS doesn't make pies

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi This is the faulty

Hi

This is the faulty code:

#index:hover a, #index:focus a, #index:active a, #index.p7hvr a { background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navIndexColor.jpg); } #learn:hover a, #learn:focus a, #learn:active a, #learn.p7hvr a { background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navLearnColor.jpg); } #look:hover a, #look:focus a, #look:active a, #look.p7hvr a { background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navLookColor.jpg); } #play:hover a, #play:focus a, #play:active a, #play.p7hvr a { background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navPlayColor.jpg); } #read:hover a, #read:focus a, #read:active a, #read.p7hvr a { background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navReadColor.jpg); } #share:hover a, #share:focus a, #share:active a, #share.p7hvr a { background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navShareColor.jpg); } #shop:hover a, #shop:focus a, #shop:active a, #shop.p7hvr a { background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navShopColor.jpg);

You have put the hover etc on the div and not the anchor, so it should look like #shop a:hover ...

Trevor

York
York's picture
Offline
Regular
Los Angeles
Last seen: 14 years 5 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

Thanks for the tip, Trevor.

Thanks for the tip, Trevor. I've made the suggested changes, but the box remains. You can see the effect in Firefox when you visit my page.

On a side note, if anyone can suggest useful tools for working with and troubleshooting CSS - such as the Firebug and Web Developer add-ons for Firefox - I'd enjoy learning of them.

Thanks,

York

My CSS is:

/******************************************************************* Global Styles */
html {
margin: 0;
padding: 0;
background-attachment: fixed;
background-color: #353535;
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/backgroundGradient.jpg);
background-repeat: repeat-x;
color: #CCC;
text-align: center;
}
body {
font: 10px "Trebuchet MS", Arial, Helvetica, sans-serif;
line-height: 1.75;
margin: 0px auto;
text-align: left;
width: 728px;
}
#wrap {
margin: 0px auto;
padding: 0px;
}
#banner {
margin-top: 104px;
}

/******************************************************************* Headings */
h1 {
display: block;
color: #FFF;
background-color: transparent;
font-size: 11px;
text-transform: uppercase;
}
h2 {
display: block;
color: #999;
background-color: transparent;
font-size: 10px;
text-transform: uppercase;
}
#l_sidebar h2, #r_sidebar h2 {
margin: 0;
padding-top: 10px;
line-height: 2em;
}

/******************************************************************* Hyperlinks */
a img {
border: 0;
}
a:link,
a:visited {
color: #CCC;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: #FFF;
background-color: transparent;
text-decoration: none;
}

/******************************************************************* Navbar */
#p7menubar {
position: absolute;
top: 0;
clear: both;
z-index: 10;
font-size: 9px;
}
#p7menubar li {
width: 104px;
height: 104px;
text-indent: -9999px;
background-repeat: no-repeat;
}
#p7menubar li li {
height: auto;
}
body#indexPage li#index {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navIndexColor.jpg);
}
body#learnPage li#learn {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navLearnColor.jpg);
}
body#lookPage li#look {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navLookColor.jpg);
}
body#playPage li#play {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navPlayColor.jpg);
}
body#readPage li#read {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navReadColor.jpg);
}
body#sharePage li#share {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navShareColor.jpg);
}
body#shopPage li#shop {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navShopColor.jpg);
}
#index {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navIndexGray.jpg);
}
#learn {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navLearnGray.jpg);
}
#look {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navLookGray.jpg);
}
#play {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navPlayGray.jpg);
}
#read {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navReadGray.jpg);
}
#share {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navShareGray.jpg);
}
#shop {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navShopGray.jpg);
}
#index a:hover, #index a:focus, #index a:active, #index.p7hvr a {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navIndexColor.jpg);
}
#learn a:hover, #learn a:focus, #learn a:active, #learn.p7hvr a {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navLearnColor.jpg);
}
#look a:hover, #look a:focus, #look a:active, #look.p7hvr a {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navLookColor.jpg);
}
#play a:hover, #play a:focus, #play a:active, #play.p7hvr a {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navPlayColor.jpg);
}
#read a:hover, #read a:focus, #read a:active, #read.p7hvr a {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navReadColor.jpg);
}
#share a:hover, #share a:focus, #share a:active, #share.p7hvr a {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navShareColor.jpg);
}
#shop a:hover, #shop a:focus, #shop a:active, #shop.p7hvr a {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navShopColor.jpg);
}
#p7menubar li:hover ul a, #p7menubar li:focus ul a, #p7menubar li:active ul a, #p7menubar li.p7hvr ul a {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navMenuGray.jpg);
}
#index ul li a:hover {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navMenuIndex.jpg);
}
#learn ul li a:hover {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navMenuLearn.jpg);
}
#look ul li a:hover {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navMenuLook.jpg);
}
#play ul li a:hover {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navMenuPlay.jpg);
}
#read ul li a:hover {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navMenuRead.jpg);
}
#share ul li a:hover {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navMenuShare.jpg);
}
#shop ul li a:hover {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navMenuShop.jpg);
}

/******************************************************************* PVII Menu CSS Express Drop-Down Menu (www.projectseven.com) */
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#p7menubar, #p7menubar ul {
padding: 0;
margin: 0;
list-style: none;
}
#p7menubar a {
display: block;
width: 104px;
height: 104px;
}
#p7menubar li {
float: left;
}
#p7menubar li ul, #p7menubar ul li {
width: 104px;
}
#p7menubar ul li a {
line-height: 2em;
height: 2em;
text-align: right;
padding-right: 9px;
width: 95px;
text-decoration: none;
}
#p7menubar li ul {
position: relative;
display: none;
color: inherit;
background-color: #FFFFFF;
}
#p7menubar li:hover ul, #p7menubar li.p7hvr ul {
display: block;
}
#p7menubar li {
width: auto;
}

/******************************************************************* Left Sidebar */
#l_sidebar {
float: left;
width: 160px;
}
#l_sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
#l_sidebar li {
list-style: none;
margin: 0;
padding: 0;
}
#l_sidebar li ul {
padding-bottom: 10px;
border-bottom: 1px solid #666;
}
#l_sidebar ul li {
margin: 0;
padding: 0;
}

/******************************************************************* Right Sidebar */
#r_sidebar {
float: right;
width: 160px;
}
#r_sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
#r_sidebar li {
list-style: none;
margin: 0;
padding: 0;
}
#r_sidebar li ul {
padding-bottom: 10px;
border-bottom: 1px solid #666;
}
#r_sidebar ul li {
margin: 0;
padding: 0;
}

/******************************************************************* Content */
#content {
margin: 0px auto 0px;
padding: 0px;
width: 728px;
}
#content p {
margin: 0px;
padding: 0px 0px 15px 0px;
}
#content img {
border: 1px solid #666;
float: left;
margin-right: 10px;
}
blockquote {
border-left: 2px dotted #666;
color: #CCC;
background-color: transparent;
font-style: italic;
margin: 0px 0px 0px 10px;
padding: 0px 20px 0px 10px;
}
#content blockquote p {
margin: 0px 0px 16px 0px;
padding: 0px;
}
#contentmiddle {
float: left;
margin: 0 0 0 2px;
padding: 0px 15px;
width: 374px;
}
.contenttitle {
float: left;
margin: 0px;
padding: 0px;
width: 100%;
}
#contentmiddle a:link {
color: #F1AC02;
background-color: transparent;
text-decoration: none;
}
#contentmiddle a:hover {
color: #FFF;
background-color: transparent;
text-decoration: none;
}
#contentmiddle h1 a:link {
display: block;
color: #FFF;
background-color: transparent;
font-size: 11px;
text-transform: uppercase;
}
#contentmiddle h1 a:hover {
display: block;
color: #949200;
background-color: transparent;
font-size: 11px;
text-transform: uppercase;
}
#contentmiddle ol {
margin: 0px;
padding: 0px 0px 15px 20px;
}
#contentmiddle ul {
list-style: square;
margin: 0px;
padding: 0px 0px 15px 20px;
}
#contentmiddle ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}
#content img.wp-smiley,
#content img.wp-wink {
border: none;
float: none;
margin: 0;
padding: 0;
}
.postspace {
margin: 0 0 10px;
padding: 0;
border-bottom: 1px solid #666;
}

/******************************************************************* Footer */
#footer {
border-top: 1px solid #666;
margin: 20px auto;
padding: 10px 0px;
text-align: center;
width: 728px;
}

/******************************************************************* Search Form */
#searchdiv {
margin: 0;
padding: 0;
}
#searchform {
margin: 0;
padding: 0;
overflow: hidden;
padding-bottom: 15px;
border-bottom: 1px solid #666;
}
#s {
border: 1px solid #666;
padding: 3px;
width: 152px;
}

/******************************************************************* Comments */
#commentblock {
background: #515151;
border: 1px solid #666;
color: #CCC;
float: left;
margin: 10px 0px;
padding: 15px;
width: 344px;
}
ol#commentlist {
list-style-type: none;
margin: 0px;
padding: 5px 0px;
}
.commentdate {
padding-left: 0px;
}
#commentlist li p {
line-height: 20px;
margin-bottom: 8px;
padding: 0px;
}
.commentname {
margin: 0px;
padding: 45px 45px 45px 0px;
}
.commentinfo {
clear: both;
}
.commenttext,
.commenttext-admin {
color: inherit;
background: #515151;
clear: both;
margin: 5px 0px 15px;
width: 344px;
}
#commentsform,
#commentsform form {
margin: 0px;
padding: 0px;
text-align: left;
}
#commentsform p {
margin: 0px;
}
#commentsform form textarea {
width: 99%;
}
p.comments_link img {
margin: 0px;
padding: 0px;
}

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 1 day ago
Joined: 2004-06-30
Posts: 9679
Points: 815

An OT reply, but regarding

An OT reply, but regarding your extensions question I've only ever needed the WebDev toolbar, and only for helping diagnose problems on this forum.

Mind you, I'm not a web dev by trade, and have never done any javascript Tongue

Verschwindende wrote:
  • CSS doesn't make pies

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi Try this for the dotted

Hi

Try this for the dotted bit fix:

#p7menubar li a{ display:block; width: 104px; overflow:hidden}

Trevor

York
York's picture
Offline
Regular
Los Angeles
Last seen: 14 years 5 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

Solved! Once again, I am

Solved! Once again, I am impressed by, and grateful for, the mentors of CSScreator.com. Thank you, Trevor.

As a CSS newbie, I'm here to learn, too, though. If you have the time, Trevor, would you explain to me how this rule works (I haven't gotten to the chapter explaining overflow in my CSS book.)

Cheers,

York

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Well, by setting a large

Well, by setting a large negative text indent, you stretched the size of the anchor (the a link) way off the page. By giving it a width, and then setting the overflow to hidden, the browser truncates it to just that width, and so the dots stay in the width you wanted. The anchor tag is display inline which means it is only as wide as it needs to be, but setting it to block means it will fix itself to the width you set.