CSS - Firefox Link Underlining

Hi!

Having a problem again with firefox! On IE6 the links in the bottom news bar work fine, in firefox, only two of them work!

Its a little strange! Output at www.generating-sets.com

Validated the markup and the CSS and they validate fine! (apart from the buggy PHPSESSID issue and my use of marquee which is due to be removed shortly).

CSS below:


PHP Code:
 html {height:100%;}
body {
margin:0; padding:0; height:100%;
background-image:url(images/newback.jpg);
background-position:top right;
background-repeat:repeat-y;
background-color:#ffffff;
font-family: sans-serif; 
font-size: .7em;
}
#wrap {
background-image:url(images/newback150px.jpg);
background-position:top left;
background-repeat:repeat-y;
min-height:100%;
}
* html #wrap {height:100%}

div#navbar {padding: 0%; 
text-align: center;
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff; 
margin-bottom: 0px; 
border-bottom: solid #000000 1px}

div#formbox {
color: #000000;
padding: 2%;
border: #000044 solid 1px;
}
div.displaybox {
color: #000000;
padding: 2%;
margin: 1%;
border: #000044 solid 1px;
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;
font-size: 1.1em;
}
div#userbar {padding: 0%; 
text-align: center;
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff; 
margin-bottom: 0px; 
border-bottom: solid #000000 1px}

div#topleveladminbar {
padding: 0%; 
text-align: center;
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff; 
margin-bottom: 0px; 
border-bottom: solid #000000 1px
}

#header {
background-color: #000044;
background-image:url(images/wel.jpg);
width: 100%;
background-repeat: repeat;
border-bottom: 2px #000000 solid;
color: #ffffff; 
margin:0; padding:0;
height:100px;
}


#left {
float:left;
width:149px;
background-image:url(images/newback.jpg);
background-repeat: repeat;
color: #ffffff; 
text-align:center;
background-color: #000044;
border-right: 1px #000000 solid; 
}
#main {
position:relative;
margin-left:200px;
}

#content {
text-align:center;
padding:4px;
margin-right:200px;
margin-bottom:160px;
text-align:left;
}

#clearfooter {
clear:both;
height:80px;
overflow:hidden;
}
#footer {
height:40px;
background-color: #000044;
border-top: 2px #000000 solid;
margin:0; padding:0;
background-image:url(images/newback.jpg);
background-repeat: repeat;
margin-top:-0px;
color: #ffffff; 
text-align:center;
}
div#newsbar {padding: 0%; 
text-align: left;
height:150px; 
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff;
margin-left: +150px;
margin-right: +10px; 
margin-top: -180px;
border: 2px #000000 solid;  
width: auto;} 

code {
font-size:0.8em;
border:1px solid navy;
background-color:white;
color:#333333;
padding:10px;
display:block;
width:80%;
margin:10px auto;
overflow:auto;
}

h1 {font-size: 1.4em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h2 {font-size: 1.3em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h3 {font-size: 1.2em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h4 {font-size: 1.1em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h5 {font-size: 1em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

a:link {color: #ffffff; 
text-decoration: underline;} 

a:visited { 
    color: #ffffff; 
    text-decoration: underline;}     

a:hover {color: #ffffff;
background-color: #0000FF;
text-decoration: underline;} 

.displaybox a:link {color: #0000FF; 
text-decoration: underline;} 

.displaybox a:visited { 
    color: #0000FF; 
    text-decoration: underline;}     

.displaybox a:hover {color: #000044;
background-color: #EEEEEE;
text-decoration: underline;} 

hi,

i am using a navigation bar at the top of my pages (http://sa-ewb.org.uk ) that has been designed with CSS and java (thanks to http://www.gazingus.org ).

I have set it up so that visited links have no decoration and do not change colour in the navigation, as opposed to the main body of text where they do behave as normal links.

i.e. a:visited {.......normal behaviour
and a.actuator:visited {.......no changes to appearance

this works fine in firefox (gotta love it!)

but in internet explorer, for some reason, it ignores the 'a class="actuator"' and uses my normal link rules. (gotta... errr... not love it!)

any ideas?

many thanks,

jim.

Hi there.

I have a blank space that appears as a link when my animated T-R MENU button is clicked.

Click here to view the problem

It didn't do this in the last version of FF... I can't see why it's doing it, there aren't blank spaces in the code to make it behave this way.

Opera, Safari and IE view it fine. Just FF3 that's doing it.

Can anyone shed some light on why it's doing this or how to fix it?

Thanks in advance.

SO my site is starting to get somewhere and I am starting to test it on all browser and I already found a couple problems while looking at it through firefox and fixed some of the problems but there is still the issue of the link font is not working. I set the size on the font family and yet it is looking all ugly. You guys can view by going to this page. http://www.paragliderworld.com/flyingsites.php and then select places untill you get to the viewing page. Please let me know what is wrong with this. Here is the link to my style sheet http://www.paragliderworld.com/style.css

Nick

The problem:
a link appears in the color i have set in IE, but in other (probably the default one) color in FireFox

the explanation of the situation:

attachment 1
that's how it looks in FireFox
attachment 2
that's how it looks in IE, and the way it should look!

cause that's the color i have set in the css file

here is the code from the css file
Code:

A {
	color: #D9E0EF;
	text-decoration: underline;
}

A:HOVER {
	color: #D9E0EF;
	text-decoration: none;
}

here is the code around the link from the screenshots
Code:

<p align="center"><b><font size="7"><a href="index.php?p=join/index">JOIN</a></font></b></p>

where may be the problem which doesn't allow to FireFox to see that there is set color for the links?

Long title I know...

My problem is that I want a particular style for a link BUT it seems that Firefox has a glitch with it.

The css code is:

Code:

a, a:link, a:visited {
	color: #000;
	text-decoration: none;
	border-bottom: 2px solid #000;
}
		
a:hover {
	color: #28f;
	border-bottom: 0;
}

Basically Firefox starts "flashing" the cursor simply just by hovering over the link. It only does this if you hover over the "line" part of the link. Here's an image of what it looks like:


You can view this yourself on the page http://www.jasonashdown.co.uk/css_glitch.html

I did however find a way around it with css code:

Code:

a:hover {
	color: #28f;
	border-bottom: 2px solid transparent;
}

http://www.jasonashdown.co.uk/css_glitch_solution.html

This works fine in Firefox and Opera without displaying the glitch. BUT now IE won't accept it (putting a Doctype in the file seems to make the bottom-border disappear).

Can anybody explain to me why Firefox has this glitch?
I couldn't find anything about this problem on this forum or through google. It has been bothering me for months.
Many Thanks in advance

Can any of you tell me why with the a:link/visited set with border:none
(as in the example at the bottom of the e-mail), I get a box around an
image inside a link:

<a href="communication.php"><img src="resources/president.jpg"></a>

Working on a MAC, I noticed that the border only appears in
Firefox but not in Safari, Opera and OmniWeb. Can anyone
tell me why this border appears around the image, why only in FF, and of course, how one can make it dissappear using the stylesheet?

STYLESHEET:

a {text-decoration: none;}
a:link { color: #000000; border: none;}
a:visited { color: #000000; border: none;}
a:hover { color: #bbbb00; border: none;}
a:active { color: #000000; border: none;}

.image{border-width:0px; border: none;}

This code works in IE but not in FF. Does Firefox not support these?

<style type="text/css">
<!--
A:link
{
text-decoration: underline;
color:"#ffffff";
}

A:visited
{
text-decoration: underline;
color:"#ffffff";
}

A:active
{
text-decoration: underline;
color:"#ffffff";
}

A:hover
{
text-decoration: none;
color:"#fffffff";
}

Body
{
background:url(http://n0madism.tripod.com/mbg.jpg);
background-color:#000000;
background-repeat: no-repeat;

font-family:Georgia;
color:#ffffff;
font-size:10 pt;
text-align:left;

scrollbar-face-color : #000000;
scrollbar-highlight-color : #000000;
scrollbar-3dlight-color : #000000;
scrollbar-shadow-color : #000000;
scrollbar-darkshadow-color : #000000;
scrollbar-track-color : #000000;
scrollbar-arrow-color : #FFFFFF;
}

td
{
font-family:Georgia;
color:#ffffff;
font-size:10 pt;
}

-->
</style>

I have had this bug in another web I built. I use a centered fixed layout with a relative positioned container and floated divs inside.

In Firefox, when I rollover on a link in the menu the contents of some divs show over all content as if they where triggered by the rollover.

I have no idea why this happens. Please check this link and rollover the links on the left column to see the bug. You'll see how the comments show again over themselves and the rest of the content. Very weird!

Thank you!

I've searched the forum but can't find why my test with the following code works properly in IE (white link goinf yellowish on mouse over but not in FF or Op. It would be useful to correct this before going any further:

Many thanks

Robert
______________________________

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="description"
content="test"
content="test">
<title>test</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8895-1" />
<link rel="stylesheet" href="testcss.css" TYPE="text/css">

</head>

<body topmargin="0">

<div align="center">
<table border="1" cellspacing="1" width="760" bordercolor="#243348" height="50">
<span class="menu">
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item1.htm">item1</a></td>
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item2.htm">item2</a></td>
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item3.htm">item3</a></td>
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item4.htm">item4</a></td>
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item5.htm">item5</a></td>
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item6.htm">item6</a></td>
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item7.htm">item7</font></a></td>
<td width="41" align="center" bgcolor="#243348" height="50">
<p align="center"><a href="item8.htm">item8</font></a></td>
</span></table>
</div>
</body>


______________________________

.menu a {text-decoration:none; font-family: arial; font-size: 10pt
}

.menu a:link {color:#FFFFFF;
}
.menu a:visited {.color:#FFE2A8;
}
.menu a:hover {color:#FFE2A8;
}
.menu a:active {.color:#FFE2A8;

I need some really rediculous link styles, like all of the cool fading/pixelating ones that work on IE - but I can't find any for Firefox. Does anyone know if they exist, or where to find them?

Everyone,

I'm having an issue with the first DIV intensive site I am doing:

IE will not recognize links or allow me to highlight text, or fill in forms in the left side of DIVs that I have on a site I am developing:

httP://www.ephire.com/mack

If you try and click the "more" link up top, or goto the "contact" link, no joy in IE, but Firefox works just fine:

Here is the code I think is the culprit:

Code:

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_bg.png', sizingMethod=scale);

And here is the whole page. I'm seriously stumped...I tried going through and deleting things line by line and jacking with settings, and the only thing that allowed anything to work was messing with the section of code above.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
	<title>MACK Insurance</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style>

* html #wrapper {
    background: url(images/body_t.gif) 24px 0px no-repeat;
    backgro\und: none;
}

* html #ie {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_t.png');
    height: 39px;
    width: 434px;
    position: absolute;
    margin-left: 24px;
}

* html #body {
    background: url(images/body_bg.gif);
    backgro\und: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_bg.png', sizingMethod=scale);
}

.footerie {
    display: block;
    disp\lay: none;
}

.footer {
    display: none;
    disp\lay: block;
}

</style>
<![endif]-->

</head>

<body>
<center><table><tr><td>  <div id="ie"></div>
  <div id="wrapper">
      <h1><a href="/"><img src="images/logo.jpg" width="200" height="30" alt="logo" /></a></h1>
      <div id="body">
          <div class="inner">
              <div id="content"><div>
                <font face="Arial" size="2"><b>Health, Life, Disability</b></font>
		<br>Designed Benefits Associates is dedicated to finding the best health care program to suit the needs of a family or individual. <br><br>Our specialty is paired programs that protect not one, or two, but multiple areas of life. <a href="index_01.html"><img src="images/btn_more.gif" width="52" height="6" alt="more" /></a>
		</div></div><!-- end content -->
              <div id="page_title">
                  <img src="images/title_main_page.gif" width="47" height="200" alt="main page" />
              </div><!-- end page_title -->
              <div id="news"><div><div>
                  <font face="Arial" size="1"><b>Things to Consider</b></font>
                  <img src="images/picture_3.jpg" width="96" height="56" alt="picture 3" />
                  <p>04-20-2006</p>
                  <p>As your insurance broker, we daily search for the best priced health plans with the optimum benefits, so you can spend time doing what's important.<br><br><br></p>
                  </div></div></div><!-- end news -->
              <div class="clear"></div>
          </div><!-- end .inner -->
          <div id="footer">
		<img src="images/footer.gif" width="435" height="196" alt="footer" class="footer" />
          </div><!-- end footer -->
      </div><!-- end body -->
      <div id="paper">
          <div class="inner">
              
              <font face="Arial" size="2"><a href="http://www.ephire.com"><b>Health</b></a></font>
              <a href="http://www.ephire.com"><img src="images/picture_1.jpg" width="130" height="74" alt="picture 1" /></a>
              <br><br>
              <font face="Arial" size="2"><a href="http://www.ephire.com"><b>Life</b></a></font>
              <a href="http://www.ephire.com"><img src="images/picture_2.jpg" width="130" height="74" alt="picture 2" /></a>
              <br><br>
              <font face="Arial" size="2"><a href="http://www.ephire.com"><b>Disability</b></a></font> 
	      <a href="http://www.ephire.com"><img src="images/picture_4.jpg" width="130" height="74" alt="picture 4" /></a>
              <p>A single plan can add peace of mind, all three together can insure stability.</p>
              <center><font face="Arial" size="1"><a href="contact.html"><b>Contact</b></a> - <a href="index.html"><b>Home</b></a> - <a href="testimony.html"><b>Testimony</a></font></center>
              
          </div><!-- end .inner -->
      </div><!-- end paper -->
	
  </div><!-- end wrapper -->
  <div style="clear:both;position:relative;display:block;margin-top:530px;" >

</div></td></tr></table></center>
<center><br><table><tr><td>  <br><br><br><center>Powered by <a href="http://www.ephire.com">ephire</a></center></td></tr></table>
</body>
</html>

Any help is appreciated~

PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative?

I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow.

Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too.

Here's the HTML:

<a class="button" href="#"><span>Update Profile</span></a>

Here's the css:

a.button:link, a.button:visited {
background:url(button_right.gif) no-repeat right top;
}
a.button span:hover, a.button span:active {
background:url(button_left_hover.gif) no-repeat right top;
}
a.button span {
background:url(button_left.gif) no-repeat left top;
color:#fff;
cursorointer;
display:block;
height:20px;
line-height:20px;
margin:0 2px 0 0;
padding:0 10px;
position:relative;
white-space:nowrap;
}

Hello
Is there a way i can restore my <a href> link back to its original color, that is before the a:visited event, when I click on another link?
PS. no Javascript code needed, is their an alternative in css?

I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it.

The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox?

You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html).

css Code:
Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; }

  

 #main-nav


 {


     background-color: black;


     height: 40px;


 }


 #nav


 {


     position: relative;


     margin: 0;


     padding: 0;


 }


 #nav li


 {


     position: relative;


     float: left;


     display: table;


     width: 99px;


     height: 40px;


     border-right: 1px solid white;


     text-align: center;


     font-size: 10px;


 }


 #nav li:hover


 {


     background-color: darkred;


 }


 #nav a


 {


     display: table-cell;


     vertical-align: middle;


     line-height: 11px;


     font-weight: bold;


     text-decoration: none;


     color: #fff;


 }


 #nav li ul


 {


     position: absolute;


     padding: 0;


     background-color: gray;


     top: 40px;


     left: 0px;


 }


 #nav li ul li


 {


     width: 98px;


     border: 0;


     border-top: 1px solid white;


 } 

html4strict Code:
Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div>

  

 <div id="main-nav">


     <ul id="nav">


         <li id="m1"><a href="#1">Main Menu 1</a></li>


         <li>


             <a href="#2">Main Menu 2</a>


             <ul>


                 <li><a href="#2a">Sub-Category 1</a></li>


                 <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li>


             </ul>


         </li>


         <li>


             <a href="#3">Main Menu 3 with multiple lines</a>


             <ul>


                 <li><a href="#3a">Sub-Category 2</a></li>


             </ul>


         </li>


         <li><a href="#4">Main Menu item which has a really long name on it</a></li>


     </ul>


 </div> 

The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers.

Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem.