|
CSS - A:hover Not Workin In Firefox/opera
Im novice to CSS, im makin my first one.
I have this problem, i made my class and then i did the a:hover with that class but it is not shown in firefox and opera, works fine in IE. Am i forgetting something? how do i fix? here's my code: Code:
body {
background-color: #1A1852;
background-image: url(../imagenes/fondo2.gif);
}
.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
color: #000000;
text-decoration: none;
}
a:menu:link {
text-decoration: none;
}
a:menu:active {
text-decoration: none;
}
a:menu:visited {
text-decoration: none;
color: #000000;
}
a:menu:hover {
font-weight: bold;
text-decoration: none;
color: #000000;
}
.actual {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
color: #000000;
font-weight: bold;
text-decoration: underline;
}
.descarga {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
color: #FFFFCC;
text-decoration: none;
}
a.descarga:hover {
font-weight: bold;
text-decoration: underline;
color: #FF9966;
}
.texto {
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
}
.pie {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CCCCCC;
font-size: 10px;
}
.titulo {
color: #CC66CC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small; font-weight: bold;
}
.vinculo {
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small; color: #FFFFCC;
}
.tabla {
border-style: dashed;
border-width: thin;
border-color:#CC66CC;
}
Similar TutorialsThis page - juicyart dot net / test.html (sorry I can't post URLs yet) - displays fine in IE, but not in Firefox or Opera. In those two browsers the top image and white background of the container div won't display. The top image displays, but not completely - only about half of it shows up. Any suggestions? I can't figure this out for the life of me and W3C validates my css as valid so I'm at a loss. Hello ppl, I have a problem about 6 div's which are displayed inline. Everything is OK in Opera and IE but in firefox everything is wrong .. all the divs are almoust in the same place , one over another here is the link http://www.immo-land.ro/test/div-inline.html and below is the code which I wrote for every DIV Code: <div style="border: 1px solid #c5732a; width: 164px; height: 150px; padding: 95 0 0 0; margin: 3px 3px 3px 3px; display: inline; background-image: url(../images/immo-land-apartamente-garsoniere.jpg); background-repeat: no-repeat"> <a href="http://localhost/immoland/vanzare-apartamente.php" style="background: #C5732A; width: 100%;">Apartamente</a> <br> Text here </div> any ideea why is all that mess in firefox ? 10x in advance See ya all I'm hoping I can get some guidance on why I can't get this popout menu to work! I used the code from this article to build a popout menu, but for some reason I can't get it to work in firefox. If you test their demo in Firefox but if you test mine, it looks great in Internet Explorer, but gets all messed up Firefox & Opera. If you save the page you will see there is a style sheet as well as a small Javascript file too. If someone could check over my code for me that would be great! I have been staring at it for hours and can't seem to find the problem! This is my first project using CSS styles to control something besides the usual things like fonts, etc. so go easy on me! Thanks in advance! Chelsea Hello. I've spent the past week making my web page. It is currently hosted on my laptop. When I finalize it, I will upload it to a proper hosting service. I have a job interview for a co-op job for searstravel.ca tomorrow, and I want to make sure my website works across all browsers. My webpage is at URL. If you open the page in IE, you will notice a horizontal white space just beneath the image at the top. In Mozilla (suite/Firefox) and Opera the site displays just fine. I've had the site looked at by a number of friends who are more adept at CSS than me, but to no avail. I was hoping that someone in here might spot the cause of the display bug. The CSS file is located at URL. Thanks for your help everyone! Hello Everybody, I had this site working in opera and IE and it works beautifully. When it comes to firefox, the box form extends for a hundred pixels and I don't know why. The sheet is set at a specific width and i can't change anything with the form in css. can anyone please help me with this, thank you. here is the site Firefox not working for form the url is: http:// jhlmc.com/JHLMC/FreshDemoFiles/CoverTToLayers_JHLMCArt.html In IE8 beta it works perfectly. In firefox the entire bottom section (the part under the slide show) is messed up. In Opera there's a gap under the play controls. If I close the gap, it messes up IE. Getting this slide show to work was quite the task, but I'm close to having it work on the big three! Should I just un-nest everything? Hi, I am very new to CSS and am having a small problem with a breadcrumb that moves in different browsers. It's in the right place in IE but it moves down a little in Firefox, and moves even further down in Opera. If you look at the page it is the red "Home" above the menu bar (well it is in IE and Firefox, it is behind the menu bar in Opera). I know that IE doesn't always show things like it should, but what I wanted to know was - is it me or them? and if it is them which one is right? If it's me could you point me in the right direction please. The page is URL The 2 stylesheets that are used are; URL URL I would really appreciate some advice. Thanks First of all here is the page: http://xander6669.com/ It looks like I want in IE, but there is a still a white space on top of the page with firefox/opera. I've tried hundreds of things but I can't seem to be able to fix it. Anyone could give me a hand? Here is the HTML and CSS: HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/><title>Xander6669</title> <link rel="stylesheet" href="body/body.css"/></head><body> <img src="images/border1.gif" alt="" height="5" width=779"/></body></html> CSS: Code: body {
margin: 0px;
padding: 0px;
}
Hi! Let's consider this XHTML: (I've put the CSS in a style attr. for conciseness) [HTML] <div style="width:100%;height:70px;background: #D10C23;display:block;">dfsdfdsfsd <img src="haha.gif" width="1000" height="50"></div> [/HTML] Now, if you make the browser window in FF or Opera less than 1000 pixels wide (a horizontal scrollbar appears), and scroll to the right, you'll see that the background color doesn't span until the end of the page. Why is this? Thanks OK, So I have put together what I thought was a reasonably basic xhtml page outline. I'm using a Win2k box. I checked it in Opera 7 and IE6 and it looks fine (more or less). I've also validated the xhtml and css codes. However, when I look at the page in Netscape 7.1 or Firefox, the menu kind of hangs a bit in limbo. Otherwise the rest of the page render's fine. I've included my code below. Does anyone have any suggestions since it's likely that if it doesn't work in Netscape/Firefox, it won't work in many other browsers either. Thanks! Shawn PS I'm not saying there is anything wrong with Firefox/Netscape, but likely my code URL: http://www.raisetheratesottawa.org/xhtml/ ===== CSS ===== HTML { PADDING-RIGHT: 0px; MARGIN-TOP: 0px; PADDING-LEFT: 0px; BACKGROUND-COLOR: #FF99CC; MARGIN-BOTTOM: 20px; PADDING-BOTTOM: 0px; COLOR: #000000; PADDING-TOP: 0px } BODY { PADDING-RIGHT: 0px; MARGIN-TOP: 0px; PADDING-LEFT: 0px; BACKGROUND-COLOR: #FF99CC; MARGIN-BOTTOM: 20px; PADDING-BOTTOM: 0px; COLOR: #000000; PADDING-TOP: 0px } #upper { width:700px; margin:0px auto; text-align:left; padding: 0px; border: 5px solid #FFFFFF; BACKGROUND-COLOR: #000000; PADDING-RIGHT: 0px; MARGIN-TOP: 0px; PADDING-LEFT: 0px; MARGIN-BOTTOM: 10px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px } /* Horizontal nav */ #menu { width:700px; margin:0px auto; padding: 0; } #menu ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; clear: left; } #menu ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #menu ul li a { background: #000000; width: 175px; /* was 'height: 2em; */ height: 24px; padding: 0; /* was 'margin: 0 0 10px 0; ' this affects the margin between upper menus*/ margin: 0 0 0 0; color: #FF0000; text-decoration: none; display: block; text-align: center; font-weight: bold; letter-spacing: 1px; /* was 'line-height: 2em; */ line-height: 24px; /* was 'font-size: x-small; ' */ font-size: 10px; font-size: 10px; /* was 'FONT: 8px Verdana, Arial, Helvetica, Sans-Serif;*/ } #menu ul li#one { width: 46px; } #menu ul li#two a { width: 154px; } #menu ul li#three a { width: 105px; } #menu ul li#four a { width: 85px; } #menu ul li#five a { width: 56px; } #menu ul li#six a { width: 57px; } #menu ul li#seven { width: 147px; } #menu ul li a:hover { color: #000000; background: #FF0000; } #menu a:active { background: #c60; color: #fff; } #content { width:700px; margin:0px auto; text-align:left; padding:0px; border:5px solid #FFFFFF; background: url(/xhtml/graph/rtr-logo-bk.gif) #FF99CC; } ====== XHTML ====== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <link rel="stylesheet" href="graph/rtrcss2.css" type="text/css" /> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="en-us" /> <meta name="ROBOTS" content="No Index" /> <meta name="Copyright" content="Copyright (c) 2004" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="help" href="about.php" title="Site info." /> <meta name="Rating" content="General" /> <meta name="revisit-after" content="2 Days" /> <meta name="doc-class" content="Living Document" /> </head> <body> <div id="upper"> <div id="header"> <img src="graph/top-right2.jpg" width="700" height="78" alt="" /> </div> <div id="menu"><ul> <li id="one"> </li> <li id="two"><a href="link1.php" title="Link 1.">Link 1</a></li> <li id="three"><a href="link2.php" title="Link 2.">Link 2</a></li> <li id="four"><a href="link3.php" title="Link 3.">Link 3</a></li> <li id="five"><a href="link4.php" title="Link 4.">Link 4</a></li> <li id="six"><a href="link5.php" title="Link 5.">Link 5</a></li> <li id="seven"> </li> </ul></div> </div> <div id="content"> <p>Here is some text</p> <p>Here is some more text </p> </div> </body> </html> I'm starting to get a headache trying to figure out what the problem is with Firefox on this issue... A highlighted menu should drop down over the div beneath it. It works fine in Opera & IE, but Firefox gets moody about it. geekville.net Any ideas? Thanks! EDIT: Nevermind, I made it work. 2am is a good time to stop writing css. In IE-only.com Firefox is extending the bottom border of my blogTitle divs the lenth of the page. The other browsers are fine with the code. Tested on FC4, and IE was tested on XP Home. All are the latest versions (Fx:1.5, Konqi:3.x, Opera: 8.5, IE: 6.x). Why would Firefox do this? How can I correct this? Thank you. Hi everyone A bit of a call for help with some niggly issues - all found on the following page and css: http://www.crashingbydesign.com.au/rsaa/index.html http://www.crashingbydesign.com.au/rsaa/home.css 1. Two of the absolutely positioned divs don't show up at all in IE6, but they're fine in Opera 7.5 and Firefox 1.0PR. The ones with id's "title" and "utility" are the problem ones and I can't see what the problem is with IE. In addition to this, this div shows up in a different position in both Opera and Firefox (10 pixels higher in Opera). Please help!! 2. The links in the "mainnav" div are only clickable either at the very top of the <a> element (Firefox) or the very bottom of the <a> element (Opera), however in IE the whole <a> element is completely clickable. I can't see any element that is overlapping. What is going on?? All help appreciated. Cheers Bevester I'm pretty new to CSS (only just begun). I've been teaching myself using a number of resources, but I realise the best way to learn is to practice. I just don't think I'm doing it right. I want to have the main content of the page floating in the centre of the window, which works in IE but not firefox or opera. I also want san serif fonts, but these also aren't being displayed in Opera or Firefox. Any ideas? Here's the code: Code: /*** TEXT AND TAG STYLES ***/
body {
font:Geneva, Arial, Helvetica, san-serif;
color:#000000;
text-align:center;
background-color:#003366;}
h1 {
font:Geneva, Arial, Helvetica, san-serif;
color:#336699;
text-decoration:underline;}
h2 {
font:Verdana, Arial, Helvetica, sans-serif;
color:#336699;
text-decoration:none;}
h3 {
font:Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;}
a {
color:#3366CC;
text-decoration:none;}
a:link {
color:#3366CC;
text-decoration:none;}
a:hover {
color:#336699;
text-decoration:underline;}
ul {
list-style-image:url(../images/bullets/bullet1.gif);}
ul ul {
list-style-image:url(../images/bullets/bullet2.gif);}
em {
color:#336699;
text-decoration:none;
}
/*** PAGE DIVISIONS ***/
#container {
width:772px;
height:600px;
top:7px;
text-align:left;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
background-color:#FFFFFF;
padding: 10px 10px 10px 10px;}
#masthead {
height:100px;
width: auto;}
#navbar {
position:relative;
top:2px;
width:auto;
height:15px;
padding: 3px 6px 3px 6px;
border-top: 2px solid #000033;
border-bottom: 2px solid #000033;
background-color:#336699;
color: #FFFFFF;}
#content {
position: relative;
top: 2px;
border-color:#336699;
border-style:groove;
border-width:1px;
width: auto;
height: 438px;
padding: 10px 7px 10px 12px;}
.piece {
position:relative;
float:left;
width: 522px;
height: 422px;
z-index: 1;
padding: 12px 6px 3px 12px;
border: 1px solid #000000}
.rightspace {
position:relative;
top: 0px;
float:right;
width:190px;
height:422px;
z-index: 2;
background-color:#CCCCCC;
padding:12px 6px 3px 8px;}
#bottombar {
height: 12px;
margin-top: 12px;
top: 12px;
border-top: 1px solid #333399;
background-color:#00FF33;}
also, i don't think i'm using classes properly, but I think I just realised that. midgetporn 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 posted this by accident in the html forum , so im asking he I have this in my CSS page: Code:
a.mainlevell:link, a.mainlevel:visited {
display: block;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
font-family: Verdana, Helvetica, Arial, sans-serif;
margin-bottom: 1px;
font-size: 12px;
}
a.mainlevell:hover {
color: #FFFF00;
font-size: 12px;
}
And I use this style for four links: Code: <a href="mobile.html" class="mainlevell">Home</a> <a href="m_about.html" class="mainlevell">About Us</a> <a href="m_games.html" class="mainlevell">Games</a> <a href="m_links.html" class="mainlevell">Links</a> When viewing in IE, all the URL's using m_* in the file name works with the CSS; the one referencing mobile.html doesn't. However, putting an m_ in front of the mobile.html makes the link work. Why? This happens only in IE. firefox/opera/netscape/etc ; the links all show up fine and work as supposed to. However, I have a similar set up for another menu that does almost the same CSS as the above: Code:
<table width="100%" border="0" cellspacing="2" cellpadding="3">
<tr>
<td align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="home" width="14" height="14" id="home"></td>
<td bgcolor="#990000"><a href="mobile.html" class="menulevel" onMouseOver="MM_swapImage('home','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Home</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="one" width="14" height="14" id="one"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('one','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="two" width="14" height="14" id="two"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('two','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="three" width="14" height="14" id="three"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('three','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="four" width="14" height="14" id="four"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('four','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="five" width="14" height="14" id="five"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('five','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="six" width="14" height="14" id="six"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('six','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
</table>
and this one works fine ( even with the mobile.html) Hi All, I'm pretty confused by this. Work ins IE6 but not in Firefox 1.0.4 I've uploaded the offending page below... http://www.bertucci.net/nwhc/index2.php I moved the relavent CSS into the HTML and commented out the linking sheets. The problem... at seemingly random places the hover properties do not work. On hover, the link should be underlined. Some links will work right, while others do not. I've done many googles and a Dev Shed search with no answers so far, so I'm making a post here for help. The page is a mix of DIV and TABLE elements. I just think it's easier for me to work with. A Side question, is this an 'ok' practice or should sites be designed strictly DIV or TABLE only? (All styles for DIVs are right in the DIV I have not broken them out yet until the design is hammered down). Cheers, Fozzy Hi, I have the following CSS: .class2 a:hover {text-decoration: none; background-color: #333366; color: #ffffff; width: 100%; height: 100%; font-weight: bold;} for this javascript/HTML: menu1[0]='<span class="class2"><a href=""> About our trees</a></span><br>' It's part of a drop down menu and in IE when a user hovers over the About our trees, the entire box is highlighted with my chosen color. In Firefox, only the text in the box is highlighted. Can someone help me with this one? I tried switching from a <span> to a <div> and still no good. AAUGH. Happy Thanksgiving to all who are celebrating! Kimber Hey, Just making a site for a friend and I have run into a block with the Hover tag. It works fine in IE but for some reason other browsers aren't working properly... Any ideas? I have put my source underneath, sorry its squashed up. I have also loaded the site to the domain but won't put the link - not sure if I'm allowed. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Innovate Photography - Home</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="StyleSheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div id="wrap"> <div id="header"> <img src="images/logo2.png" alt="logo - Innovate photography" width="780" height="62" /> </div> <ul id="nav_bar"> <li><b href="index.html">Home</b></li> <li><a href="about.html">About Us</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="disability.html">Disability</a></li> </ul> <div id="slideshow"> <img src="images/index_page/1.jpg" alt="Slideshow Image 1" class="active" /> <img src="Images/index_page/2.jpg" alt="Slideshow Image 2"/> <img src="Images/index_page/3.jpg" alt="Slideshow Image 3"/> <img src="Images/index_page/4.jpg" alt="Slideshow Image 3"/> </div> <!--Java image gallery - Index Page --> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript"> /*** Simple jQuery Slideshow Script Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :) ***/ function slideSwitch() { var $active = $('#slideshow IMG.active'); if ( $active.length == 0 ) $active = $('#slideshow IMG:last'); // use this to pull the images in the order they appear in the markup var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first'); var $sibs = $active.siblings(); var rndNum = Math.floor(Math.random() * $sibs.length ); var $next = $( $sibs[ rndNum ] ); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); </script> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et mi magna, non sodales augue. Aliquam porta, risus id euismod egestas, lacus velit tincidunt quam, in sodales enim urna et dui. Duis interdum libero at dolor aliquet nec ultricies lacus interdum. Proin non consequat erat. Sed varius, libero id bibendum aliquam, arcu augue ultrices dui, placerat laoreet dolor nibh et nunc. Ut dui magna, semper quis sagittis sed, faucibus ac ante. Nulla imperdiet tempor orci vel varius. Aliquam porta placerat tortor, non dignissim libero elementum ac. Mauris in magna in ligula tincidunt viverra non vestibulum elit. Etiam hendrerit leo non mauris consectetur nec blandit orci auctor. Sed felis felis, facilisis nec posuere ac, accumsan nec est. Aenean sapien magna, commodo ut sagittis gravida, varius eget magna. Etiam ligula sem, faucibus eget tristique quis, hendrerit vitae justo. Maecenas fermentum sollicitudin sodales. Ut non aliquet neque. Mauris sagittis gravida purus nec consequat. Sed in quam leo.</p> <p>Phasellus quis orci ligula. Curabitur quis neque ultricies ante adipiscing vehicula. Morbi blandit, purus dictum pharetra feugiat, magna ipsum lobortis velit, eu blandit turpis ipsum at arcu. Vestibulum non mauris felis. Curabitur viverra arcu eget tortor pellentesque a laoreet mauris mattis. Sed et ligula tortor, eget laoreet mauris. Integer nunc enim, tristique eu tempus at, vehicula non enim. Maecenas sed porttitor lorem. Nam ultricies, nisl rutrum vulputate facilisis, enim purus commodo elit, sed pretium tortor ligula quis lectus. Aliquam erat volutpat. Duis euismod placerat nisi ac adipiscing. Fusce varius pellentesque sapien, eu placerat neque mattis pharetra. Aenean mollis neque sed mi pretium sodales. Aenean fringilla rhoncus tincidunt. Sed vel odio et sem condimentum iaculis.</p> <p>In mollis posuere tortor, at euismod sem fermentum nec. Aenean euismod, neque sit amet tincidunt mattis, risus nunc bibendum mi, non malesuada purus eros ut urna. Donec accumsan sagittis nibh, auctor ultricies massa tincidunt et. Phasellus quam nunc, pretium eu dictum at, porttitor a dolor. Etiam nec odio felis, nec aliquam nibh. Sed eleifend, odio faucibus venenatis vulputate, orci neque mattis augue, sed consectetur tellus lorem a lacus. Aliquam diam ipsum, consectetur et tempus non, suscipit nec orci. Donec dignissim lobortis gravida. Integer ornare diam vitae elit tristique a auctor lorem condimentum. Sed sapien nisi, ullamcorper at gravida vitae, mollis vel mauris. In non tortor ante, nec scelerisque elit. Etiam tristique, magna quis tristique ultrices, nunc tellus tempus lorem, a suscipit tortor magna at dui.</p> </div> </div> </body> </html>
Code: /* Index Markup */ * { padding: 0px; margin: 0px; } body { background-color: #ffffff; margin:0; padding:0; border:0; min-width:700px; font-size:100%; } #wrap { width:750px; margin:0 auto; padding-top: 20px; } #header {width: 200px; padding-left: 0px;} #nav { margin:0 auto; font:Palatino; } #nav_bar { width: 100%; float: left; margin: 0 0 3em 0; padding: 0; list-style: none; font:Palatino; padding-left: 190px; } #nav_bar li { float: left;} #nav_bar li a { display: block; padding: 8px 15px; text-decoration: none; font-weight: bold; color: #069; border-right: 1px dotted #000; font:Palatino; } #nav_bar li b {display: block; padding: 8px 15px; text-decoration: none; font-weight: bold; color: #069; border-right: 1px dotted #000; font:Palatino; border-left: 1px dotted #000; } #nav_bar a:hover {color: #000;} #nav_bar b:hover {color: #000;} #nav_bar:hover {color: #000;} h2 { font:Palatino; font-size:15px; text-decoration: none; } /*** Slideshow positioning **/ #slideshow { position:relative; width: 570px; height: 400px; padding-bottom: 10px; } #slideshow IMG { position:absolute; top:55px; right: -40px; z-index:10; } #slideshow IMG.active { z-index:10; opacity:1.0; } #slideshow IMG.last-active { z-index:9; } #content { position: relative; width: 670px; padding-top: 20px; font:Palatino; font-size:12px; color: #1e54ef; padding-bottom: 20px; padding-left: 30px; } #photo { } #index_style { position:absolute; left:50px; top:150px;} #index_button { position:absolute; left:750px; top:400px; } #index_button a { font-size: 30px; font:Palatino; } #index_button a:hover {color: #1e54ef} #index_button a:link {text-decoration: none; font-family:Georgia,serif;}
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 |
|||||||