Link Color/Underlining in Safari

I'm working on building a website. Not knowing how to go about it, I started from scratch with a text editor and am still messing around with it. It's fairly crude, but I've created a CSS stylesheet to change font sizes and type. I'm trying to get links to show up as plain text in Safari, rather than blue and underlined. They show as plain text in IE and Firefox. Is this possible? I've tried adding a.link {color: black; text-decoration: none; } to the stylesheet and using class="link" in my <a class="link" .... text. My website is bruceeatonfurniture.com
Thanks!

Hi
http://www.w3schools.com/css/csspseudoclasses.asp may be useful, as may the w3schools site in general.

Similar Messages

Change visited link color in Safari 5.1.3

Visited link colors in Safari, most notably visited Google links when I return to the search page, don't change colors as they used to do... Actually, I think it's been that way for a long time (years) now but I am just now coming back around to being interested in why and if there is a way to get back to the days where new links were BLUE and visited links were GREEN (or whatever color you wanted)...
Is this still possible with the new Safari and if so, how do you go about setting this visted link color preference???
thanks... bob...

This appears to be an issue affecting most versions of Safari from about version 5 onwards.
I recently experienced it with Safari version 5.0.6 and eventually found a fix adequate for my purposes.
1 - Sometimes simply selecting 'Private Browsing' (on Safari menu) and then deselecting it cures the problem.
2 - If that does not work I use the following Terminal command which has, so far, worked every time:
defaults write com.apple.Safari RegisteredSafariSyncClient -bool false
I must point out that I do not intend to use any sync services but it appears that if Safari gets confused it is necessary to use this command to reset its sync services.
3 - If you don't like using the Terminal command you could trash the following preference file although this more brutal approach is more likely to lose data:
~/Library/Preferences/com.apple.Safari.plist
Quit from Safari before attempting 2 or 3.
I have only tested the Terminal command on Safari 5.0.6 on a Leopard G4 without any user defined sync services but it will probably work on other versions and OSs. It is always safest to backup first.

Trouble getting rid of default link colors!

Dear Folks,
I have created a ul list for navbar: reads just great in Safari, but has residual blue link color and underline - I have eliminated all styles in the source code, and have written styles in the CSS. Firefox reads all the visted and current links as default underlines, where I want color boxes.
The header where the navbar is located is a secondary header with the div #header2 (no nav bar on the splash index page)
What I wanted was a "tabbed" look, (dark background with light rollovers) which I got as long as I don't "visit" pages - then it reverts to blue letters with underline.
Any help? Here is the code in the CSS
In frustration, I set a separate link color for the footer for all pages - it read fine when each was a separate command, but combining it in CSS Shorthand made it not function.
#footer a:link a:visited a:hover a:active {
color: #CCC98F;
text-decoration: none;
and here is the code for the navbar in the secondary header:
#header2 #navbar ul {
font-family: "Gill Sans", Helvetica, Arial, sans-serif;
font-size: 0.8em;
font-style: normal;
font-weight: normal;
color: #CC9;
list-style: none;
#navbar li {
float: left;
list-style: none;
padding: 0px 10px 15px 0px;
margin: 0;
#navbar li a:link, #header li a:visited {
background: #2B2D16;
padding: 0.2em 0.5em;
font-family: "Gill Sans", Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 1em;
font-weight: normal;
color: #CC9;
text-decoration: none;
margin-right: 0.5em;
width: auto;
text-align: center;
white-space: nowrap;
word-spacing: 0.2em;
letter-spacing: 0.1em;
#navbar li a:hover {
color: #D2A44E;
background: #625214;
#navbar li a.current, #header li a.current:hover, #header li a.current:active {
color: #D2A44E;
background: #625214;
cursor: default;
Martha

In your CSS, you always need to define a minimum of 4 rules for the "states" of each link.
Minimum states are:
link
visited
hover
active
in that order.
In your CSS, for #navbar li a (which is any link inside a list inside an element with id="navbar"), you have only defined the link and hover states.
In the absence of a specific CSS rule for the visited state, the browser will always default to blue underline.
Change your CSS as follows
#navbar li a:link, #navbar li a:visited, #header li a:visited {
background: #2B2D16;
padding: 0.2em 0.5em;
font-family: "Gill Sans", Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 1em;
font-weight: normal;
color: #CC9;
text-decoration: none;
margin-right: 0.5em;
width: auto;
text-align: center;
white-space: nowrap;
word-spacing: 0.2em;
letter-spacing: 0.1em;
If the #header li a:visited compound selector in that rule is doing nothing (since you have <div id="header2"> on the page but not <div id="header">) then change it or delete it.

Need help with link colors.....

New assignment at school (our 4th project).
Our teacher has given us a preformatted .html document that we
are not allowed to touch at all.
Having a hard time grasping working this way......
How do I change the color of the link in the top header
without changing the color of the other links?
How do I line the four paragraph divs up across my page
horizontally (left to right)?
http://student.ccbcmd.edu/~rsmit459/a_study_in_css/index.html

The div that the "Select a Design" and it's links are in is
called "#styles".
I put this code into my .css file and it did nothing:
.styles a:link {
color: #FFFFFF;
text-decoration: underline;}
.styles a:visited {
color: #999999;
text-decoration: underline;}
.styles a:hover {
color: #FF0000;
text-decoration: underline;}
.styles a:active {
color: #FF00FF;
text-decoration: underline;}
What am I doing wrong?

CSS for links display differently in Safari and Firefox

Hello all,
I am having some link display problems. The CSS code for my link display is as follows:
#sidebar_1 a{
text-decoration: none;
font-weight: bold;
#sidebar_1 a:link{
color: #CCC;
#sidebar_1 a:visited{
color: #000;
#sidebar_1 a:hover, #sidebar_1 a:active, #sidebar_1 a:focus{
color: #000;
Unfortunately, the website is not live yet so I can't direct you to it.
What happens: in Firefox, mousing over a link causes it to go black; but when the link is clicked and the new page has loaded, the link goes back to being gray even though the linked page is active. However, in Safari the links for visited pages stay black. Any ideas on why this is happening?
Thanks in advance for all your help.

#sidebar_1 a:vistied {
color:#000;
is stating that all visited links in the #sidebar_1 div to be black. Are you saying that all visited links are black, outside the sidebar_1 div?
Jim

[Locked] Link colors work in Firefox but not Internet Explorer

http://zenfotoz.com
I have changed the link colors by setting a CSS class to a non default color a:link to the div containing thumbnails. The site behaves as designed in Firefox, but uses default colors in Internet Explorer and no colors in Safari for windows.
Is this a known bug/issue with a workaround or am I just doing this incorrectly?
Thanks,
Erik

You have replied to a message that's more than a year old. If you're having problems with your links, post a URL to your site, and someone can have a look to see what the problem is.
[Thread locked because of duplicate post.]

Links not underlined when viewing in browser

I've set up a hyperlink style so that links are underlined. When I view my site in 'Preview' mode they appear to be underlined and OK, but when I export, upload via FTP and view in browser (Chrome, Firefox, Safari, IE), they don't appear underlined ? I thought it may have been due to the paragraph styles I have set for the content I have as links, but I've even tried removing the style and applying to a non-styled font... they still don't underline ? Does anyone have ideas ?

Hello,
Could you please confim if you have applied link to the text (by manually selecting the text) or to the "text box"?
If the link is applied to the text box, please check the settings in the text link style :
Please dit the text link style and check if making text underline there helps or not.
Regards,
Sachin

How i suppress the default link color?

Hi,
<p>
i have a little sql report, and i have coded the color for a column value in a function call. It looks like :
<p>
select format_html(col_x,5)
from mytable;
<p>
This function give me the following result:
<p>
---> select format_html(col_x,5) from syn
where rownum<10;
1<br>
2<br>
3<br>
4<br>
5<br>
<_font color="#dc143c">6</_font><br>
<_font color="#dc143c">7</_font><br>
<_font color="#dc143c">8</_font><br>
<_font color="#dc143c">9</_font><br>
<p>
Now all values > 5 have a different color. And this works fine.
<p>
But now i will link this column to an other page. And than the column has the default color for the link(wich is blue). How i can change this behavior, so the values have the color from the function and the links are only underlined?
<p>
Thanks for your help,
Maik

Hi Maik,
You can do something like the following:
In the region's Region Header for the report, add in:
<style>
.customlink:hover {color:red}
.customlink:active {color:yellow}
.customlink:link {color:purple}
.customlink:visited {color:green}
</style>
You can change "customlink" to whatever name you like and, obviously, pick your own colours.
Then in your SQL statement, add in a field that returns a stylename:
select field1,
field2,
CASE WHEN (test) THEN 'customlink' ELSE '' END STYLENAME,
etc
from etc
Then, in the link, in "Link Attributes", add in classname='#STYLENAME#'
Regards
Andy

Change text "link" color only in Spry Tab content area

I need to have multiple text link colors in my site for light
and dark background colors. The only regions in my site that have a
white background are in the Spry Tab Panel content area. I can't
figure out how to change the text color for text links in the spry
content only. I tried to add a:link ..etc... to the style sheet,
but it did not effect anything
(I also need to clean my style sheet (s). But that comes
next.
Here
is a Link to a Sample Page in my site
null

Here is the SpryTabbedPanels style sheet in my site. I can't
seem to figure out the changes I need to make to effect the content
area.
I tried to add the following (see .TabbedPanelsContentGroup
below)
a: link {
color: #0099CC;
text-decoration: none
a:active {
color: #99CC33;
text-decoration: none
a:visited {
color: #0099CC;
text-decoration: none
a:hover {
color: #99CC33;
text-decoration: underline
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.4 - Spry Pre-Release 1.6
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab
buttons
* (left aligned) above the content panel.
/* This is the selector for the main TabbedPanels container.
For our
* default style, this container does not contribute anything
visually,
* but it is floated left to make sure that any floating or
clearing done
* with any of its child elements are contained completely
within the
* TabbedPanels container, to minimize any impact or
undesireable
* interaction with other floated elements on the page that
may be used
* for layout.
* If you want to constrain the width of the TabbedPanels
widget, set a
* width on the TabbedPanels container. By default, the
TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this
selector is not
* necessary to make the widget function. You can use any
class name you
* want to style the TabbedPanels container.
.TabbedPanels {
margin: 0px;
float: right;
clear: none;
width: 82%; /* IE Hack to force proper layout when preceded
by a paragraph. (hasLayout Bug)*/
padding-top: 0px;
padding-right: 0px;
padding-bottom: 2px;
padding-left: 0px;
/* This is the selector for the TabGroup. The TabGroup
container houses
* all of the tab buttons for each tabbed panel in the
widget. This container
* does not contribute anything visually to the look of the
widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in
this selector is not
* necessary to make the widget function. You can use any
class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
/* This is the selector for the TabbedPanelsTab. This
container houses
* the title for the panel. This is also the tab "button"
that the user clicks
* on to activate the corresponding content panel so that it
appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1
pixel down from
* where it wold normally render. This allows each tab to
overlap the content
* panel that renders below it. Each tab is rendered with a 1
pixel bottom
* border that has a color that matches the top border of the
current content
* panel. This gives the appearance that the tab is being
drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this
selector is not
* necessary to make the widget function. You can use any
class name you want
* to style this tab container.
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
background-color: #CCCC99;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
font-family: sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
/* This selector is an example of how to change the appearnce
of a tab button
* container as the mouse enters it. The class
"TabbedPanelsTabHover" is
* programatically added and removed from the tab element as
the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
background-color: #99CC33;
color: #000000;
/* This selector is an example of how to change the
appearance of a tab button
* container after the user has clicked on it to activate a
content panel.
* The class "TabbedPanelsTabSelected" is programatically
added and removed
* from the tab element as the user clicks on the tab button
containers in
* the widget.
* As mentioned above, for our default style, tab buttons are
positioned
* 1 pixel down from where it would normally render. When the
tab button is
* selected, we change its bottom border to match the
background color of the
* content panel so that it looks like the tab is part of the
content panel.
.TabbedPanelsTabSelected {
background-color: #FFFFFF;
border-bottom: 1px solid #EEE;
color: #000000;
/* This selector is an example of how to make a link inside
of a tab button
* look like normal text. Users may want to use links inside
of a tab button
* so that when it gets focus, the text *inside* the tab
button gets a focus
* ring around it, instead of the focus ring around the
entire tab.
.TabbedPanelsTab a {
color: black;
text-decoration: none;
/* This is the selector for the ContentGroup. The
ContentGroup container houses
* all of the content panels for each tabbed panel in the
widget. For our
* default style, this container provides the background
color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in
this selector is
* not necessary to make the widget function. You can use any
class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
border-top: solid 1px #999;
border-right: solid 1px #999;
background-color: #FFFFFF;
color: #000000;
a: link {
color: #0099CC;
text-decoration: none
a:active {
color: #99CC33;
text-decoration: none
a:visited {
color: #0099CC;
text-decoration: none
a:hover {
color: #99CC33;
text-decoration: underline
/* This is the selector for the Content panel. The Content
panel holds the
* content for a single tabbed panel. For our default style,
this container
* provides some padding, so that the content is not pushed
up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this
selector is
* not necessary to make the widget function. You can use any
class name you
* want to style the Content container.
.TabbedPanelsContent {
padding: 4px;
/* This selector is an example of how to change the appearnce
of the currently
* active container panel. The class
"TabbedPanelsContentVisible" is
* programatically added and removed from the content element
as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
/* Vertical Tabbed Panels
* The following rules override some of the default rules
above so that the
* TabbedPanels widget renders with its tab buttons along the
left side of
* the currently active content panel.
* With the rules defined below, the only change that will
have to be made
* to switch a horizontal tabbed panels widget to a vertical
tabbed panels
* widget, is to use the "VTabbedPanels" class on the
top-level widget
* container element, instead of "TabbedPanels".
/* This selector floats the TabGroup so that the tab buttons
it contains
* render to the left of the active content panel. A border
is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #CCCC99;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
/* This selector disables the float property that is placed
on each tab button
* by the default TabbedPanelsTab selector rule above. It
also draws a bottom
* border for the tab. The tab button will get its left and
right border from
* the TabGroup, and its top border from the TabGroup or tab
button above it.
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
/* This selector disables the float property that is placed
on each tab button
* by the default TabbedPanelsTab selector rule above. It
also draws a bottom
* border for the tab. The tab button will get its left and
right border from
* the TabGroup, and its top border from the TabGroup or tab
button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #CCCC99;
border-bottom: solid 1px #999;
/* This selector floats the content panels for the widget so
that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;

Link colors and formats not WYSIWYG

I'm having trouble with Link colors. I have the Link Format set to a certain colors but what I see after I publish my site is a crap shoot. Sometimes the change takes sometimes it doesn't, and often what I see in Safari 4/5 or Firefox is not the same as I have set in iWeb. And yes I force a page refresh by clearing the cache and reloading the pages every time.
Any help would be greatly appreciated. So far I like how WYSIWYG iWeb is but this one problem has plagued me for some time now.
John

When you set the color use the Web Safe color pallet from the color pane:
Click to view full size
OT

Visited link color...

Howdy - Can the color of visited links (when using search engines) be changed from the default purple? I found that option in Camino, but don't see it in Safari. Thanks!

You need to use a CSS style sheet.
Select it in Safari preferences, advanced.
Here is a sample. Save the following 5 lines as plain text, with the extension css. For example, Safari_colors.css
focus { outline: 1px dotted invert }
a:link { color: #990000; text-decoration: none; }
a:link:active { color: #CC0099; outline: gray 1px dotted; }
a:visited { color: #0000FF; text-decoration: none; }
a:visited:active { color: #006699; outline: gray 1px dotted; }
If you put the following javascript in your bookmarks bar, you can see all the color by selecting that bookmark.
javascript:t='';c=new%20Array('00','33','66','99','CC','FF');for(i=0;i%3C6;i+)%7Bt+='%3Ctable%20width=100%25%3E';for(j=0;j%3C6;j++)%7Bt+='%3Ctr%3E';for(k=0; k%3C6;k++)%7BL=c%5Bi%5D+c%5Bj%5D+c%5Bk%5D;t+='%3Ctd%20bgcolor='+L+'%3E'+L%7Dt+=' %3C/tr%3E'%7Dt='%3C/table%3E'%7D;with(document)%7Bwrite(t);void(close())%7D

Visited Links - Override all link colors

Hi,
I'm using RH8 in WebHelp and IE. I read all the former postings regarding people having the same problem and some mentioned a fix in a .css but the .css wasn't available with the posting of March 25, 2008.
My visited link color seems to override all other link colors. Originally I had the link colors in a style sheet and changed the colors in the .css. That didn't work and all colors still were the visited link color. I deleted the link colors from this .css and added the link colors via the RoboHelp Edit Styles. Either way doesn't seem to work and all link colors are my visited color. I've tried clearing my cache several times and this doesn't work, neither does deleting the history.
Can anyone shed some light on this? Thanks very much for any help you can provide.

Hi Leon,
Here is all the code with "a" type styles in the .css. Again, I also have the links also in the mini-TOC but didn't see a way via the Format Placeholder to change
this. Currently, most of my links are showing up as the "visited" color -- grey. I'm going to revisit this link issue again very soon but have to get a ton of content in now. I really appreciate your efforts.
Thanks,
Sue
A.expandspot {
cursor: hand;
font-style: italic;
font-size: 10pt;
font-family: Verdana;
color: #800000;
text-decoration: none;
SPAN.expandtext {
font-style: italic;
font-weight: normal;
color: #ff0000;
font-family: Verdana;
font-size: 8pt;
A.dropspot {
cursor: hand;
color: #008000;
font-style: italic;
font-size: 10pt;
text-decoration: none;
A.glossterm {
cursor: hand;
font-size: 10pt;
font-family: Verdana;
font-style: italic;
color: #0000ff;
text-decoration: none;
SPAN.glosstext {
font-style: italic;
font-weight: normal;
color: #0000ff;
font-family: Verdana;
font-size: 10pt;
OL,
UL {
margin-top: 0px;
margin-bottom: 0px;
p.breadcrumbs {
font-size: 8pt;
x-on-hover: fontchange(bold=on);
x-next-class: breadcrumbs;
x-next-type: p;
A.breadcrumbs {
font-size: 10pt;
A:link {
font-size: 10pt;
font-family: Verdana;
color: #0000ff;
text-decoration: underline;
A:visited {
font-size: 10pt;
font-family: Verdana;
color: #808080;
text-decoration: underline;
A:hover {
font-size: 10pt;
font-family: Verdana;
color: #0000ff;
A:active {
font-size: 10pt;
font-family: Verdana;
color: #0000ff;
text-decoration: underline;
A.popupspot {
font-size: 10pt;
font-family: Verdana;

Link Color not changing for Visited Pages - How do I set the Color?

In earlier versions of Safari, the user could select the color used to display links that have already been visited. I can't find that option in Preferences anymore. Some visited links do show a different color, some don't. Is it just random? How do I set the color in Safari 4.0.4 and activate the behavior?

HI,
I think you change visited pages link colors using Google preferences.
http://www.googleguide.com/preferences.html
Carolyn

Visited link color on unvisited links

This isn't a major issue, just a curiosity, but does anybody know why I often find links on Google and Wikipedia and the like that are purple, like links to pages I've been to, yet I've never visted them? They're not websites I don't remember visiting; I've checked my history to the past year, and nothing.
Who knows why this is?

I DO see what you are talking about, Jeff. After I visit the links embedded in your paragraph of text, they change to the same color as the rest of the text. And unless I move the mouse cursor back over the text and cause the link to underline I would never know that the link existed. I can see how this could be a potential problem for visitors.
I'm afraid that the only way to change this behavior currently is to go into the CSS files published by iWeb and make edits there. I'll include the link to Michael Wong's tutorial page on doing just this here in case you get motivated...
Hyperlinks and CSS in iWeb
Otherwise, the workarounds that I would suggest would be to either not have your links embedded in a paragraph of text (probably less likely to happen). The better workaround is probably to change the color of your NON-hyperlinked "background" text to something else.
I know all this workaround business and CSS editing business is annoying. Let's hope that future versions of iWeb incorporate a little user customization in this area. Good luck to you, Jeff.

How do you get 2 different link colors on the same page in DW CS4

Hi
After creating a white link called “white link test” in a blue background, I need to create a blue link called “blue link test” in a white background. How do I accomplish this task In DW CS4? I would greatly appreciate any feedback. Thank you
<style type="text/css">

</style>
</head>
<body>
<div id="apDiv1"><a href="file:///C|/wamp/www/laserzone/public_html/add_maintenance.php">white link test</a></div>
<p> </p>
<p>blue link test</p>
</body>
</html>

Nothing has changed. A stylesheet is still a stylesheet. And pseudo-classes are still pseudo-classes.
You need to define a set of link states (link, visted, hover, active) for each ID or class name required.
Let's say you want to have red links in your #header and white links in your #footer.
CSS:
#header a {text-decoration:none}
#header a:link {color:red} /**unvisited**/
#header a:visited {color:gray} /**visited**/
#header a:hover, /**on mouse over**/
#header a:active, /**on click**/
#header a:focus {text-decoration:underline}
#footer a {text-decoration:none}
#footer a:link {color:white}
#footer a:visited {color:yellow}
#footer a:hover,
#footer a:active,
#footer a:focus {text-decoration:underline}
HTML:
<div id="header">
<a href="some-link.html">Link in the header</a> |
<a href="some-link.html">Link in the header</a> |
<a href="some-link.html">Link in the header</a> |
</div>
<div id="footer">
<a href="some-link.html">Footer link</a> |
<a href="some-link.html">Footer link</a> |
<a href="some-link.html">Footer link</a> |
</div>
For more on CSS pseudo classes:
http://www.w3schools.com/css/css_pseudo_classes.asp
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Link Color/Underlining in Safari

Similar Messages

Maybe you are looking for