7 replies [Last post]
banglo
Offline
newbie
Last seen: 14 years 37 weeks ago
Joined: 2007-08-05
Posts: 7
Points: 0

Hi,

I've been having trouble with a particular problem and I was wondering if anyone had an idea/solution.

I've just put up this new site: http://www.top20hotness.com. I've got horizontal scrollbars for two divs that are displaying thumbnails. The problem is, anytime I click on the div containing the scrollbar and thumbnails, I see this dashed border around the div container, which is not the behavior I want. I'd rather not display a border at all. Any help will be appreciated. Let me know if more information is needed. Thank you.

Triumph (not verified)
Anonymous's picture
Guru

First let me tell you why I

First let me tell you why I removed the link from your other post. "Site Checks" is for completed, validated and ready for release web sites. Your site is none of those things. I can only assume that you are posting your link here for page impressions of your hundred and one google ads on the page and possibly for links to increase your siterank.

Had the page been validly marked up I would not have removed the link.

On to this problem: first things first, you should validate your markup. Second, the reason the border is applied is because that item has focus. Either define it's pseudo class :focus with border:0; or take it's focus away with javascript.

banglo
Offline
newbie
Last seen: 14 years 37 weeks ago
Joined: 2007-08-05
Posts: 7
Points: 0

I get your reasoning. I'll

I get your reasoning. I'll run my code through HTML and CSS validators before posting the link next time around. I just assumed that since it rendered well on most browsers, that it might have been ready for showtime.

As for actual problem, thanks for the advice. Do div's have pseudo classes? Becauses I attempted setting the border upon focus in my style sheet like this:
div.

:focus
{
border: 0;
}

at that didn't work, I've tried using Javascript and overrode the click event with this code and tried moving focus to a different div:

function videoGalleryClick()
{
document.getElementById("youtube-preview").focus();
}

but that doesn't seem to work either. Any other suggestions?

Triumph (not verified)
Anonymous's picture
Guru

banglo wrote:... As for

banglo wrote:
... As for actual problem, thanks for the advice. Do div's have pseudo classes? Becauses I attempted setting the border upon focus in my style sheet like this:
div.<div_name>:focus
{
border: 0;
}

I could be way off base here. I may have to let another more knowledgeable person help. IE doesn't play nice with pseudo classes except on <a> tags. I wonder if Whatever:hover will work with focus as well. :?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

If it was something that

If it was something that occured when it was activated then it had to have been an anchor? anchors have a default outline box shown when a link has focus, is activated, so try :focus{outline:0;} div.:focus is not going to do much.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Triumph (not verified)
Anonymous's picture
Guru

Hugo wrote:If it was

Hugo wrote:
If it was something that occured when it was activated then it had to have been an anchor? anchors have a default outline box shown when a link has focus, is activated, so try :focus{outline:0;} div.:focus is not going to do much.

Whoops. Is it outline and not border? Sorry about the misinformation above.

Before validating your page I'd google the term "divitis" because you've got a bad case. Perhaps a quick search for "semantic markup" will help as well. Smile Is all of your content generated by scripts on other sites? :?

banglo
Offline
newbie
Last seen: 14 years 37 weeks ago
Joined: 2007-08-05
Posts: 7
Points: 0

found the solution: adding

found the solution:

adding

outline: none;

to the div's style fixed it.

banglo
Offline
newbie
Last seen: 14 years 37 weeks ago
Joined: 2007-08-05
Posts: 7
Points: 0

As per my previous message,

As per my previous message, outline works. Thanks for your help!