|
CSS - Firefox Hover Properties Bug?
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 Similar TutorialsHi, 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 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;
}
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;}
Hi there, I'm using a css navigation hover effect that's loosely based on this mark-up: http://css.maxdesign.com.au/listamatic/horizontal23.htm This works fine in opera 8, ie and reasonably well in firefox; but there's a 1 second delay on the firefox hover. I've used this before with success. Not really understanding why/how this could be happening. I should mention I'm using the AlphaImageLoader on an unrelated part of the page. Anyone else have this problem? Possible solutions? Thanks. H. 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 I've having an issue with Firefox and my navbar. It's image based I can't find a way to exclude it from the hover state of a:hover { border-bottom:1px dashed #666;} When you hover over the links on the navbar, it shifts the page a bit and then back to normal when you leave the hover state. http://www.graphics-tech.com/concept There is the link for example. Thanks For some reason, when I hover over images in the #content div of my site firefox is adding a strange little box to the bottom right hand corner of the image. The color of the box is the same color as my text hyperlinks which makes it more interesting. You can see the issue on my site. Here is the code that deals with the images in the #content div: Code: #content img {
margin:2px 5px 0px 0px;
}
#content a img, #content a:visited img, #content a:active img {
border:2px solid #6FA6D9;
}
#content a:hover img {
border:2px solid #ffffff;
}
This issue is only happening on the images I insert from my wpg2 gallery. The images get one of the following classes applied to them: Code:
.g2image_float_left {
display:block;
float:left;
}
.g2image_float_right {
display:block;
float:right;
margin-left:5px;
}
Now I don't see how either of these could cause a problem but they have to be the issue considering this doesn't happen on images that don't have one of the above classes applied to them. Any ideas what is causing this? Thanks in advance. Hi all, haven't had to post for awhile. Need some help! Am trying to create a popup box below menu when hovering over link, strictly using CSS. My problem is everything's working perfect in IE(a rarity), but in Firefox the box pops up too high and is wider than I want Here's the code... CSS: Code:
body {
margin: 0; padding: 0;
background: url(bodybg.jpg) repeat-x #000;
}
#header {
position: absolute; top: 0; left: 0;
width: 100%; height: 100px;
background: url(metalpipe2.png) bottom repeat-x;
margin: 0; padding: 0;
}
#leftcontent {
position: absolute; top: 110px; left: 0;
width: 125px; height: 700px;
margin-left: 15px; padding: 0;
}
/*moved background to #leftcontent a. Can now create transparent gap for background to show between links.*/
#leftcontent a {
display: block;
margin: 0; padding: 5px;
font-weight: bold; font-size: 17px;
background: #222; color: #C00;
font-family: Arial;
text-align: center;
text-decoration: none;
}
#leftcontent a:hover {
color: lightgrey;
border: none;
}
/*had to add border: none; to make span box work in IE*/
#leftcontent a span {
display: none;
}
#leftcontent a:hover span {
display: block;
position: absolute; top: 255px; left: 0;
width: 135px;
margin-left: -5px; padding: 5px;
background: #000; color: lightgrey;
font-size: 12px;
border: 1px solid white;
}
#midcontent {
position: absolute; top: 110; left: 155px; right: 25px;
height: 700px;
margin: 0; padding: 0;
background: #F5F5F5;
}
#midcontent p {
margin: 0; padding: 20px;
}
HTML: Code:
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" href="TestPage.css" type="text/css" media="screen" />
<style type="text/css">
<!--
#leftcontent a#link1 {
color: #C00;
background: #444;
border: none;
padding: 5px;
}
--> </style>
</head>
<body>
<div id="header">
<img src="x-fire_logo_t4.png" alt="X-Fire logo" />
</div> <!-- end #header -->
<div id="leftcontent">
<a href="link" id="link1">Home</a>
<a href="link" id="link2">Home Fire Sprinklers<span>Text for<br />a:hover span { }<br />popup window</span></a>
<a href="link" id="link3">Fire Alarm Systems</a>
<a href="link" id="link4">Burglar Alarm Systems</a>
<a href="link" id="link5">Insurance<br /> Info.</a>
<a href="link" id="link6">Contact Us</a>
</div> <!-- end #leftcontent -->
<div id="midcontent">
<p>Here's my dilema. Hover over Home Fire Sprinklers link. There should be a popup window below menu.<br />Popup location & width looks great in IE.<br />But in Firefox it pops up higher & wider than I wish. </p>
<p>Could someone tell me what I'm overlooking?...Many Thanks!</p>
<p>Got idea from <a href="http://www.meyerweb.com/eric/css/edge/popups/demo.html">Eric Meyer's site</a>. His page doesn't encounter this problem and I can't see anything special in the source that's much different from mine.</p>
</div> <!-- end #midcontent -->
</body>
</html>
Many Thanks, James HellO~! I'm current trying to code a website for someone, but I'm having some problems getting the menu to work properly in Firefox. It works great in Chrome and Safari but I have no idea how to make it work properly for firefox. So basically, I have a drop line menu, but instead the sub links all showing up in the same spot when I hover, I want the sub links to show up under the link I'm hovering over. Now, I managed to get this working great by just changing the position of the sub ul and il hover to relative. URL But in Firefox, when you hover over a link, that link expands to the width of the sub navigation and pushes the other links to the right. It just looks terrible and I don't know how to fix this. URL I've tried searching for a solution, but no luck! I'd really appreciate if someone could enlighten me on how this could be fixed? Or if it's even possible? I'm still new to working with drop downs and would love the help! Advance thanks for those who read this! Hopefully someone can help me out with this! EDIT: Looks like my images wont show up after all . Hopefully you will all know what I mean. CSS CODE: Code: * {
margin:0;
padding:0;
}
#nav {
list-style:none;
position:relative;
}
#nav li {
float:left;
text-align:center;
}
#nav a {
display:block;
text-decoration:none;
}
#nav a:active, #nav a:focus, #nav a:hover {
background:#254563;
}
/* --------- Sub Nav --------- */
#nav li.current ul {
left:0px;
}
#nav ul {
position:absolute;
left:-999em;
list-style:none;
padding:0 0 0;
width: 500px;
}
#nav ul li {
width: auto;
margin: 3px 3px 0 0px;
}
#nav ul a {
font-size: 12px;
height: auto;
padding: 5px 10px;
background: #dfeec9;
border-radius: 8px;
-moz-border-radius: 8px;
width: auto;
}
#nav li:active ul, #nav li:hover ul {
height: 30px;
left: 10px;
position: relative;
padding: 0px 3px 5px 3px;
background: none;
width: 500px;
}
.navi01 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 33px;
height: 44px;
text-decoration: none;
background: url(images/navi_01.png);
}
.navi02 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 133px;
height: 44px;
text-decoration: none;
background: url(images/navi_02.png);
}
.navi03 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 86px;
height: 44px;
text-decoration: none;
background: url(images/navi_03.png);
}
.navi04 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 83px;
height: 44px;
text-decoration: none;
background: url(images/navi_04.png);
}
.navi05 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 92px;
height: 44px;
text-decoration: none;
background: url(images/navi_05.png);
}
.navi06 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 82px;
height: 44px;
text-decoration: none;
background: url(images/navi_06.png);
}
.navi07 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 30px;
height: 44px;
text-decoration: none;
background: url(images/navi_07.png);
}
HTML NAV CODE: Code: <ul id="nav"> <li><span class="navi01"> </span></li> <li><a href="originalart/gallery.php"><span class="navi02"> </span></a> <ul> <li><a href="originalart/gallery.php">Original Art</a></li> <li><a href="fanart/gallery_fanart.php">Fan Art </a></li> <li><a href="commissions/gallery_commissions.php">Commissions</a></li> <li><a href="roughwork/gallery_roughwork.php">Rough Work</a></li> </ul> </li> <li><a href=""><span class="navi03"> </span></a> <ul> <li><a href="info.php">Info</a></li> <li><a href="http://luisarafidi.deviantart.com/journal/11831940/">FAQ </a></li> </ul> </li> <li><a href="oldartwork/gallery_oldartwork.php"><span class="navi04"> </span></a></li> <li><a href="http://blog.luisarafidi.com/"><span class="navi05"> </span></a> <ul> <li><a href="#">Old Artwork</a></li> <li><a href="#">More</a></li> </ul> </li> <li><a href=""><span class="navi06"> </span></a></li> <li><span class="navi07"> </span></li> </ul> I have a drop down menu located at http://www.fieldspianos.com/new/index.php If you hover over the menu items they turn black and white when you are right on the text but not if you are in the area surrounding it which is what I also need to occur. You can view the source on the page for the html but I will include the css below. This is the basic layout of the menu: Code:
<ul>
<li>About Us</li>
<ul>
<li><a href="#">Locations</a></li>
etc..etc..etc.. Here is the css: Code:
/*Begin Content of drop down menu*/
a {
outline:none;
}
* html div#dropdownmenu ul {
float: left;
}
* {
margin: 0;
padding: 0;
}
div#dropdownmenu {
float: left;
background-color: #C8C6C6;
font-size:11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div#dropdownmenu ul li {
list-style-type: none;
float: left;
background-color: #000000;
position: relative;
}
div#dropdownmenu ul li:hover {
list-style-type: none;
background-color: #000000;
}
/*Hides drop downs when not overed over and reveals them when they are hovered over.*/
body div#dropdownmenu ul li ul {
display: none;
}
body div#dropdownmenu ul li:hover ul {
display: block;
}
div#dropdownmenu ul li ul {
margin: 0;
width: 13em;
position: absolute;
left: -1px;
}
div#dropdownmenu ul li ul li {
width: 100%;
background-color:#bdb35e;
color: #660000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 3px;
}
div#dropdownmenu ul li ul li:first-child {
border-top: 1px solid #000;
}
div#dropdownmenu ul li ul li:hover {
color: #FFFFFF;
background-color: #000000;
}
div#dropdownmenu ul li ul li a {
color: #660000;
text-decoration:none;
outline: none;
}
div#dropdownmenu ul li ul li a:hover {
color: #FFFFFF;
background-color: #000000;
text-decoration:none;
outline: none;
}
div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover {
display: block;
}
Any help is greatly appreciated, this seems like it would be a simple fix but I can't figure it out. Maybe I am overlooking some small detail. Thanks! You know how you can modify Mozilla css with properties like css Code: Original - css Code -moz-border-radius: 4px 4px 4px 4px; -moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow transparent; -moz-border-top-colors: ThreeDDarkShadow ThreeDShadow transparent; -moz-border-right-colors: ThreeDDarkShadow ThreeDShadow transparent; -moz-border-left-colors: ThreeDDarkShadow ThreeDShadow transparent; -moz-border-radius: 4px 4px 4px 4px; Is it possible to get something like this to work with IE? See on F/F the box is rounded.. but on IE its just a complete square ( duh that's because I'm modding Mozilla css properties ). I see that document.getElementById('foo').style.width is a valid property, but yet I see documentation which accesses the style's properties as an array element, example: document.getElementById('foo').style['width']. Are both equivalent? What would be the property equivalent for 'text-align'??? document.getElementById('foo').style.textAlign?? Where can I find the docs for this? I'm trying to write a function that will resize a few <div>s on my page when it loads. Before I got too far, I wrote a simple function to alert the current height of each <div> to be resized. It looks like this: Code: function resizeDivs()
{
var saidDivs = new Array("cBodyMid", "cLeftPane", "cLeftPanelData", "cRightPaneData");
for(i=0;i<saidDivs.length;i++)
{
var el = document.getElementById(saidDivs[i]);
curElHeight = el.style.height;
alert(curElHeight);
}
}
All I get is 4 empty alert boxes. All of the styles are defined in an external style sheet a la: Code: #myDiv {
height: 25px;
}
and they are all assigned to <div> tags a la: Code: <div id="myDiv">here's my div</div> However, if I create a div with the height specified as an inline style, it works. I've got to be missing something really simple here. Anyone know how to get that height property? I want the iframe to have a horizontal scrollbar but no vertical scrollbar. My code I've been attempting looks like this: Code: <iframe scrolling="auto" src="quicklinks.php" width="100%" height="200" name="helpContent" style="overflow-x: visible; overflow-y: hidden"></iframe> Is this possible? If so, is it compatible with all browsers? I know many of you are going to say, well you have it on auto and if you don't want it to scroll vertically, don't have a page in the iframe that is too high in height. However the page has dynamic thing submitted to it and there might be the possibility that a user submits a name too long and I don't want to deal with only showing a certain length of the string. I noticed that if you place a border around an object with all sides having different colors, that a diagonal appears in each corner where the two colors meet. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My site</title>
<style type="text/css">
#my_id {
width: 100px;
height: 100px;
border-top: 10px solid red;
border-bottom: 10px solid green;
border-left: 10px solid blue;
border-right: 10px solid black;
</style>
</head>
<body>
<div id="my_id"> </div>
</body>
</html>
Is there anyway to override this so that for example the bottom border extends from left to right edge at a height of 10px (using the above example) instead of gradually decreasing the height as it nears the edge? Edited to add: I know that I could achieve this effect by nesting divs but I was curious as if there was a simpler solution. I have a style for links that I use in my main navigation menu, like so: Code:
a.main_nav
{
color:#FFFFFF;
font-size:12px;
}
a.main_nav:link{ text-decoration: none }
a.main_nav:visited{ text-decoration: none }
a.main_nav:active{ text-decoration: none }
a.main_nav:hover{ text-decoration: underline; }
How can I wrap all the links in a <div> and not have to specify the class on each <a> ? Is it necessary to declare properties like : border-bottom:none; text-transform:none; My question is why would I declare them (above) ? Is it not assumed that unless I need something like text-transform:lowercase; I should not declare text-transform:none; ...this just add up more unnecessary lines of code. What are the default properties of selectors? if not declared would it be safe to asumme that those defaul to 0, none, etc depending of the selectors? tahnks Guys I have the following issue regarding links and colours: The colours of links are set thus: a:link : White; a:hover : Blue; a:visited : White; The problem I have is that I want a hovered link to turn blue even if it has been visited. Is there anything I can do about this...? Hey all, I'm developing an app for a client, and I've implemented quite a bit of it already, and it includes CSS. Code:
<style>
td {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
}
</style>
As you all might know, this changes all <td> tags into this particular style. Is there a class that I can include that contains NO properties (default)? I'm not even sure if it's possible. I just don't want to go back and add class tags everywhere. I am confused by the "rules" of how to indicate what you are trying to style when an element is within other elements. Specifically in this case (but hopefully this lesson will be portable to other contexts). I have a UL with an LI (classed) that is within an id'd UL that is within an id'd DIV. Code: <div id="horzmenu">
<ul id="horznavmenu">
<li><a href='rooms.php'>Accomodations</a></li>
<li class='hot'>Location & Info
<ul>
<li><a href='/otherprops.php'>Other Properties</a></li>
<li><a href='/news.php'>News & Photos</a></li>
</ul>
</li>
<li><a href='booking.php'>Booking</a></li>
</ul>
</div>
So if I were to wish to style this new UL and its LI's do I refer to: The parent UL as in: #horznavmenu ul ul { The parent UL and the class'd LI as in: #horznavmenu ul ul li.class{ Or? Thanks in advance for any feedback or suggested reading... |
|||||||