CSS - A:link With Absolute Postion Not Working In Ff

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.

Hi all,
Code:

.box1 {
			position: absolute;
                        top: 20px;
                        left: 20px;
			width: 220px;
			height: 152px;
			background: transparent url(../images/box-1_im-back.gif) no-repeat; 
			padding: 50px 54px 0px 25px;
			}

I've got a div with position absolute on it, width, height, padding, etc.

I've got an A tag inside it which I've also made position absolute, and expanded it to cover the whole div, so it acts as a button over the whole div and it works in everything BUT IE6 and as much as I'd like to forget about this browser, it's still quite common, so. Anyone know why this is happening or how I can fix it?

Code:

.box1 a {
			position: absolute;
			top: 0px;
			left: 0px;
			color: #0b54a9;
			font-weight: bold;
			padding: 126px 0px 0px 26px;
			width: 260px;
			height: 48px;
			}

If I take the A tag out of the div and absolute position it over the div it works fine, the only trouble is I really need to keep the A tag inside the div.

I generate the following in my PHP script and it seems to work in IE but not in FF or Chrome. It doesn't redirect to the pdf file nor does it appear in the status bar when I mouse over it.

<div id="downloadts"><a href="URL address/Tearsheets/MP-160.pdf" class="button">Download Tear Sheet</a>
</div>

The downloadts looks like
#downloadts
{
height:auto;
width:150px;
border:thin;
background-color:#999999;
position:absolute;
top:365px;
left: 15px;
text-decoration:none;
}

and the button is in a separate style sheet as
.button {
font-family: "Palatino Linotype", Palatino, "Book Antiqua", serif;
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
font-style: normal;
text-decoration:none;
line-height: 20px;
background-color: #999999;
}

I don't see what is wrong. It appears on the page as I expect it to.

I am baffled and don't doubt it is something simple.

It passes validation as well.

You can see it in action at:
mandp dot lamster dot org/product.php?coll=French%2040%27s&catno=MP-160
Thanks for any help.
Hal

I have my links, and a:hover does not activate when the link has been visited. Is there any special for a hover visted link or any way to fix this?

Whew, it's been a while sin'ce i've been here. Thanks in advance!

~Brendan

Hi all, I'm a newbie to CSS but I'm giving it a good crack and trying to learn all I can, reading and experimenting etc.

I'm currently building a website for my wife's cake baking business and can't seem to get multiple CSS link classes working and I don't know why. I've been reading various websites on CSS for the last couple of hours but honestly can't see what I've done wrong. Any help would be appreciated.

If you look at the site Ladybirdbakery co uk the top navigation has a .top_nav class that makes it white and the links are supposed to turn yellow and underline when you hover but they just don't. Similarly the small print links at the bottom, the mailto link underlines but the external link to my marketing website doesn't. I've tried re-writing the CSS a few times and put it through the W3 validation and it doesn't pull up any errors on my link classes that seem to be causing this issue. Could anyone offer me some advice so I can get this right and not make the same mistakes in the future?

The CSS lives at the above address /ladybird.css

Thank you very much.

Ant

Hello,
My unvisted links within a div section are not working, they default to Red which is set up in the CSS as a catch-all.
I see this happenning with IE 6.x and FireFox 1.5 and netscape 7
Example HTML code where the unvisited link appears in Red and it should be in Grey:
Code:

<div class=medGray>
<a href="/data/tmp/E300vV60cB.s5ukal.diblu.tmp">Download</a> extracted device records (4 records).
</div>

Here's my snippet from my CSS file:
Code:

a.medGray:link {
	text-decoration: underline;
	FONT-SIZE: 12px; COLOR: #666666; FONT-FAMILY: Verdana, Tahoma, sans-serif;
}
a.medGray:visited { color:#666666; }
a.medGray:hover { text-decoration: underline; }
a.medGray:active { color:#666666; }
/*-- Default Red--*/
a:link {
text-decoration: underline;
font-family:Verdana, Arial, Helvetica; font-size:12px; color:#CC0000; }
a:visited { color:#999999; }
a:hover { text-decoration:underline }
a:active { color:#CCCCCC; }

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.

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>

my layout is pretty simple...

Code:

<div class="container">
 	<div class="topbar">
 	<div class="list">
 		<div class="gametitle"></div>
 		<div class="percentage"></div>
 		<div class="system"></div>
 	</div>
 </div>

i have the following CSS applied to gametitle, percentage and system... for somereason, gametitle doesnt work...

Code:

.gametitle {
 float:left;
 width:250px;
 color:#FFF;
 }
 .gametitle a:link,
 .gametitle a:visted,
 .gametitle a:hover {color:#FFF;}
 .percentage {
 float:left;
 color:#FFF;
 }
 .percentage a:link,
 .percentage a:visited,
 .percentage a:hover {color:#FFF;}
 .system {
 float:right;
 color:#FFF;
 }
 .system a:link,
 .system a:visited,
 .system a:hover {color:#FFF;}

here is the page where all this code is going down...

Mini Catalog

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~

please please somebody help me with this...
i have given my links some effects with this code:

Code:

<style type="text/css">
<!--
a img {border: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; border-bottom:3px double; color: #000000;}

a.head,
a.head:link { text-decoration: none; }
a.head:hover { text-decoration: none; }
//-->
</style>

it works fine on my links, but the class "head" doesn't seem to be effecting the link with that class....it still has the same hover effect as the other links. I have class="head" in the link tag of the element, but it still doesn't work. I want no effect on this link since it is an image and I don't want a double-underline on it. The only thing I can think of is that maybe the head image isnt being effected correctly because it is an include file, but I don't think that really matters.

Thanks!

I have a thumbnail image with a link below. When hovering over the link, I want the enlarged image to pop up. I've tried it 2 ways. Both are close, but neither works the way I want it. Perhaps someone can help tweak one of these options?

Option 1 is he
http://concrete-creative.com/temp/print/1.html
**What I don't like here is that you can hover over a big, blank area below the link and the larger image pops up. I only want the linked text [JACK IT UP] to pop the larger image up.

Option 1_B is he
http://concrete-creative.com/temp/print/1_B.html
**The problem here is the the larger image while INVISIBLE is sitting below the text [JACK IT UP] which is pushing my HTML table too wide.

Can someone help me find the happy medium between these 2 solutions so it works the way I want it to?

THANKS!

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;
}

http://tinyurl.com/5llwfl

I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down.

I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes.
I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either.

I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally.

I am trying to position a footer at the bottom right hand corner of the page with style Code:

{position: absolute; bottom: 0px; right: 0px;}

However, the footer is not lying on the bottom, its about an inch off the bottom, interfering with a form field. How do I fix this?