I know I need to learn CSS ...

July 21, 2007 2:05 PM

Help with right-clicking and underlined links in Firefox.

I'm editing a friend's website so it works better in Firefox. It was created using Word, unfortunately. I only have a basic knowledge of HTML, and no knowledge of CSS. I have ironed out most of the issues, but am stuck on some minor things.

Firstly, is there any way to turn off the underlining of links in Firefox? I understand that the viewer can turn them off in some versions of the programme, but can they be turned off in the code? Failing that, can I change their colour? The site has green text links, which look odd with blue underlining. The Word-generated code already contains text-decoration:none, and this is working in IE but not in Firefox.

Secondly, is there a relatively simple way to disable right clicking on images to save/copy them in Firefox? Again, this is working in IE but not Firefox.

Thanks for your help - posted for a friend.

posted by paduasoy to Computers & Internet (9 answers total)

When you create a web site using stylesheets, things like link color and underlining will be things you set in the stylesheet and they will work with ALL BROWSERS. Almost all formatting stuff works across all browsers and it's pretty easy to tell what won't. So, forget about Firefox for a moment, you want something that works for all browsers (and isn't set up to only work for IE)

I'm not sure if you need to learn about stylesheets or figure out how to do the things you mentioned without them. In short: you pretty much need stylesheets to usefully do what you want to do.

Here is a site that will get you started with stylesheets. It's old but the basics are correct. If you are only making one web page, you can lkeep the stylesheet as part of your HTML document. If you are making a whole site, you'll want to make a separate stylesheet [just a txt file called something simple like style.css] and link to it form the document.

To change the color of the links and the underlining you have to set that up within the stylesheet. A basic way to do that is to say something like this

a {
text-decoration: none;
}

This loosely says "every time I use an anchor, I want the text within that anchor to not have any text decoration" (standard decoration is underlining for links). You can see people doing this in combination with something like this

a:hover {
text-decoration: underline;
color: red;
background: yellow;
}

In this case links wouldn't be underlined UNLESS you hovered your mouse over them in which case they would be underlined and have a yellow background and the text would change to a red color. Don't copy this, I'm sure it looks horrible, but it's an example of how to do what you want.

You can even style links so that they are different colors depending on what section of a web page they're in, but that's a step ahead of where you are now. A thing to remember about stylesheets is that there is a lot of picky punctuation that sort of matters. If you're not getting the results you want, make sure your colons and semi-colons and brackets are all in the right place and make sure you spelled all your terms properly. Post again if you need something more specific or links to go for more information, Typing CSS Tutorial into Google should get you started well.
posted by jessamyn at 2:22 PM on July 21, 2007

Helpful hint: Run the CSS through the W3C validation tool. If you have invalid code (very likely if generated by Word) you'll get screwy results. Do not forget to also validate the HTML as well; valid CSS on top of invalid HTML = screwy results, because the browser ends up in "quirks mode" (meaning "act like an old browser and ignore anything an old browser wouldn't recognize").

W3C HTML validator

W3C CSS validator

I had lots of help learning the basics on CSS and validation from the Webmonkey Stylesheets Guide, with more advanced fun at A List Apart and DiveIntoAccessibility. Other good references abound.
posted by caution live frogs at 4:30 PM on July 21, 2007

Response by poster: Thanks for the answers. I was hoping to be able to do this without using CSS, as I have a time limit, but it looks like that isn't possible.
posted by paduasoy at 4:53 PM on July 21, 2007

Best answer: Install the Firefox plugin "Firebug". Inspect a link, and see what CSS rules contribute to it. There's probably some weight/precedence problem that is screwing you up.
posted by cmiller at 6:00 PM on July 21, 2007

You might want to run the HTML through one of the many Word HTML cleaners, too.
posted by flabdablet at 7:15 PM on July 21, 2007

As far as the downloading images thing, don't bother. It's FAR FAR too easy to get around, with no recourse on your end. The only way you can attempt to do it is to use javascript to catch the right click, a simple check box turns off that, and your protections go out the window. There isn't anything else you can do (at least technically, feel free to sue and cease&desist whoever you like)
posted by cschneid at 9:09 PM on July 21, 2007

Best answer: To expand a little on what cschneid said: the only way for an image to be displayed in somebody's browser is for that browser to have already downloaded a copy of the image file to their computer. Whether you disable right-click or not, every single user of your site has already got a saved copy of your images.

If you're worried about somebody else making a buck off your work, rest assured that anybody who makes money ripping off other people's images already knows how to save copies of the files that turn up in their browser's cache.

Messing with the right-click menu is going to annoy your legitimate users a hell of a lot more often than it stops Something Bad.
posted by flabdablet at 1:53 AM on July 22, 2007

Just putting an Old Grouch's point of view that you shouldn't mess with the usual colour of links or the default behaviour of a browser without a very strong reason. Planning to change both "this is a link" cues for Firefox users seems a bit unkind. Obviously it matters less if your users are likely to be only experienced interweb users.
posted by Idcoytco at 4:36 AM on July 22, 2007

Response by poster: Thanks to all - the underlining issue is now sorted and my friend has taken cschneid, flabdablet and Idcoyto's advice about not disabling right-clicking.
posted by paduasoy at 12:58 PM on July 22, 2007