|
CSS - Is This A Specificity Issue?
I was playing around with CSS transitions, and I came across I problem I haven't been able to figure out. I have my a:links set up to fade to a different color and rise by 3 pixels when hovered over. But if the link is also an image, I want the image opacity to fade in without being raised up the 3 pixels. I would have thought simply adding "bottom: 0" to a img:hover would negate the raising, but apparently not. I'm not an expert in CSS specificity, but it seems like it's not a specificity issue since a img:hover is slightly more specific than a:hover. What can I do to prevent the image links from rising the 3 pixels on hover?
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link href="css/styles.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css">
body {
background: #c44032;
color: #f4f1de;
font-size: 20px;
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
}
a:link, a:visited {
color: black;
position: relative;
-webkit-transition: color .25s ease-out .1s, bottom .25s ease-out .1s;
transition: color .25s ease-out .1s, bottom .25s ease-out .1s;
}
a:hover {
color: #ff6a5a;
position: relative;
bottom: 3px;
-webkit-transition: color .15s ease-out, bottom .15s ease-out;
transition: color .15s ease-out, bottom .15s ease-out;
}
a:link img {
opacity: .5;
border: 1px solid #c44032;
padding: 3px;
-webkit-transition: opacity .25s ease-out .1s;
transition: opacity .25s ease-out .1s;
}
a:link img:hover {
opacity: 1;
bottom: 0;
border: 3px solid white;
padding: 1px;
-webkit-transition: opacity .15s ease-out ;
transition: opacity .15s ease-out;
}
</style>
</head>
<body>
<p>Here is a <a href="#">text link.</a></p>
<a href="#"><img src="http://www.toprival.com/temp/balloon.jpg" height="64" width="64" border="0"></a>
<a href="#"><img src="http://www.toprival.com/temp/cat.jpg" height="64" width="64" border="0"></a>
<a href="#"><img src="http://www.toprival.com/temp/bee.jpg" height="64" width="64" border="0"></a>
</body>
</html>
Similar TutorialsHi all, I have been teaching myself CSS for a website I am making, which has all been running smoothly until an issue today. Basically the issue is with a .class DIV nested inside a #id DIV.. Code:
<div id="wrap">
......
<p>...</p>
.......
<div class="info_box">
........
<p>.....</p>
......
</div>
.......
</div>
Using CSS, i set the font color (among other things) for <p> to be different in the "wrap" id and "info_box" class.... and I was shocked to find that the styling I had written for the class was ignored, and it was using all the styling specified for the ID. After searching, I found that this is because of specificity, in which the #id has a higher specificity. Although I now know the cause, i am not sure what I should do? I would like to be able to keep "info_box" as a .class, because I would use it more than once on a page. The only solution I can think of is to make the "wrap" a .class, but this does not seem logical, as I only use it once. Please Help! I have this navigation menu I made for my online catalog that is comprised of some 300+ links that display in 3 levels of CSS-controlled menues. A root UL and 2 levels of subULs. It's located here . The menues all work fine except for a small area where the first submenu overlaps the root menu. Illustration . The problem is in mousing from one link in the list in the first submenu to the next link in the same list. (below or above) As the mouse pointer moves between the links, the menu changes to the sublist for the next link in the root menu instead of the next link in the already open submenu. The second level submenu (sub-submenu) doesn't have any problem. Links in the opened submenu can be moved between successfully if the pointer is moved out to an area that isn't shared with the root menu. Making any sense? This is HTML for the basic structu HTML Code: Original - HTML Code <table><tr> <td class="linktd"> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Category</a> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Subcategory</a> <ul class="folderul"> <li class="nonfolderli"><a class="submenua" href="http://www.mydomain.com">Subsubcategory</a> </li> </ul> </li> </ul> </li> </ul> </td> </tr></table> <table><tr> <td class="linktd"> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Category</a> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Subcategory</a> <ul class="folderul"> <li class="nonfolderli"><a class="submenua" href="http://www.mydomain.com">Subsubcategory</a> </li> </ul> </li> </ul> </li> </ul> </td> </tr></table> These are the two CSS lines that are supposed to control the displays. css Code: Original - css Code ul.folderul ul.folderul, li.folderli:hover ul.folderul ul.folderul { display: none } li.folderli:hover ul.folderul, li.folderli:hover li.folderli:hover ul.folderul { display: block }
ul.folderul ul.folderul, li.folderli:hover ul.folderul ul.folderul { display: none }
Maybe my understanding is deficent, but I haven't been able to find the problem and I'm hoping someone of you can point it out for me, please? So, I have my CSS, works wonderfully (well, as expected) in FF2. Unfortunately, IE7, Safari 3, and Opera 9 all seem to ignore the whole stylesheet. UNLESS! Any one of the properties in the sheet is declared !important. Then, it applies the entire sheet the way I expect. What gives? The way I understand (understood?) specificity, the !important flag should only effect the specific line it's applied to, not the entire sheet. Right? I'm really confused. The stylesheet is included last, so all else being equal, should cascade properly and override the other sheets. Any ideas? I'm just going to use the !important for now, but I really don't like that. MPEDrummer Hello, I'm an amateur with CSS, and would appreciate if you could take some time to help me out! I have a CSS rule to render all bullets in my page with a different icon, including on the sidebars. But there's one single list (a secondary navigation bar) where I do not want any bullets. I am trying to override it, but am unable to. I'd be glad if you could review my CSS and tell me where I'm going wrong. Thanks a Ton! Code:
.sidebar li {
border-top:dashed #cccccc 1px;
}
.sidebar ul li {
padding:0 0 0 1.5em;
list-style-type: none;
list-style-image: none;
background-image: url(img/menu-leaf.gif);
background-repeat:no-repeat;
background-position: 0.3em 0.6em;
}
This is my navigation block Code:
#navigation-secondary a {
display:block;
color:#ffffff;
}
#navigation-secondary a:hover {
background-color:#369; /* to change color when hovered over */
}
The following method to override it doesn't work Code:
#navigation-secondary , #navigation-secondary ul,
#navigation-secondary ul li, #navigation-secondary a {
list-style-type:none;
list-style:none;
}
ul.secondary-links li, ul.secondary-links ul li {
background-image:none;
border-top: none;
}
I should mention, the top border has been overridden, but not the background image. My html code snippet (rendered via php) is here Code:
<div class="sidebar" id="sidebar-left">
<div id="navigation-secondary">
<ul class="links secondary-links">
<li class="menu-138 first"><a title="Link1 site" href="/link1">Link1</a></li>
<li class="menu-139"><a title="Link2 site" href="/link1">Link2</a></li>
<li class="menu-140 last"><a title="Link3 page" href="/link1">Link3</a></li>
</ul>
<div style="clear: both;"/>
</div>
I'd be glad if you could help me out. Thanks! Hi, I'm currently designing a Wordpress skin for someone and trying to style the navigation using CSS. Given that Wordpress is so popular, I expect that someone has encountered this before - but I can't find anything about this particular problem. Basically, I'm having problems achieving the correct precedence in the CSS cascade for certain elements of my page (navigation) design. In one part of the CSS I've had to use !important to get it to behave appropriately, but then I have another part which I need to be able to denote as "very important" but I don't think this is possible. I get the feeling that I can probably do this without !important since I'm aware that it is abusing its purpose a bit (i.e. accessibility?) and instead I could do it according to the selector's specificity if I understood it better: http://www.w3.org/TR/REC-CSS2/casca...cascading-order Here's a HTML snippet of what I have in the navigation: html4strict Code: Original - html4strict Code <div id="sidebar"> <ul> <li class="page_item current_page_item"> <a title="Home" href="home.php">Home</a> <ul> <li class="page_item"> <a title="Directors" href="home.php?page_id=12">Directors</a> </li> </ul> </li> <li class="page_item"><a title="News" href="home.php?page_id=3">News</a> </li> </ul> </div>
I'm then using the following CSS to attempt to style this part: css Code: Original - css Code #sidebar { float: left; width: 149px; padding: 1em 0; } #sidebar ul { list-style: none; } #sidebar ul li { margin: 0.4em 0.8em; padding: 1px; } #sidebar ul li a { font-size: 1.5em; font-weight: 500; padding: 0.3em; text-decoration: none; color: #000; background: #FFFACD; display: block; border: 1px solid blue; } #sidebar ul li a:hover { color: #bb2a2a; } #sidebar ul li ul li { display: none; } #sidebar ul li.current_page_item ul li, #sidebar ul li.current_page_parent ul li { /* sub-menu item */ display: inline; padding: 0; margin: 0; border: none; } #sidebar ul li.current_page_item, #sidebar ul li.current_page_parent { border: 1px solid green; } #sidebar ul li.current_page_item ul li a, #sidebar ul li.current_page_parent ul li a { /* sub-menu item link */ font-size: 1.2em; padding: 0.1em 0 0.2em 17px; background: #FFFACD url(images/sub-dot.gif) no-repeat left; } #sidebar ul li.current_page_item a, #sidebar ul li.current_page_parent ul li a.current_page_item { color: #bb2a2a !important; border: none !important; } .current_page_item ul li a { color: #000 !important; border: none !important; } #sidebar ul li.current_page_parent ul li a, .current_page_parent a { border: none !important; } #sidebar ul li.current_page_item ul li a:hover, #sidebar ul li.current_page_parent a:hover { color: #bb2a2a; border: none !important; }
Using "View Formatted Source" in FF I'm finding that the color defined in ".current_page_item ul li a" is over-ruled by "#sidebar ul li.current_page_item a, #sidebar ul li.current_page_parent ul li a.current_page_item". As you can perhaps tell, the current_page_item class is set on the list item that matches the current page, and if the current page is within a sub-section (i.e. it has a parent), current_page_parent will be set to the parent list item. This gives me a navigation such as: > Home >> Directors If we're on the Home page (as in example code above), I want that to have the red colored text, but Directors to be black. If Directors is the current page, I want that to be red, and Home to be black. Basically anything that isn't the current page should be black... At the moment (because .current_page_item ul li a doesn't seem to work) I'm getting red text for Home and Directors when on the Home page... I want Directors to be left black in this situation. N.B. It's more complicated than above because I also want to do some styling with borders on the top level list items (well, the a element within), but if someone can point out where I'm going wrong with the above I think I should be able to sort the rest out... Thanks in advance - please let me know if you need more details! WHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE? w w w. jaywayproductions . c o m/portfolio/work_history.html It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated! Hello I am having difficulties with a site I am working on. First, if you look at it in IE and roll your mouse to the right of the site the whole thing shifts to the left. No idea why it does this. Second: In Firefox it looks like a disaster! Help! http://www.tombraiders.net/katie/shelly/index.html User: letme Pass: in Thank you! Hi everyone, For years I've been using tables solely to position elements on web pages but it's come to my attention that this is now "frowned" upon in the web community so I figured if I'm going to start doing things the more common way (with DIVs) I might as well start now. I'm not a professional website developer (C programmer here...eek! haha), but I do part time web work for some important clients of mine. So I have a very simple layout done with DIVs/CSS to start (code at the bottom). The problem is when you render it you'll see a large gap between the bottom of the layout and bottom of the page. My hypothesis is that this is due to where the "DIVs" would normally have been, except I moved them around. It sounds very similar to the problem encountered he http://forums.devshed.com/css-help-116/how-to-remove-blank-space-at-bottom-554773.html but I don't see what he did to solve it. Note that ultimately what I want is only the "header" and "footer" to have a fixed width/height. The leftcol and content should have fixed widths, but height grow with what ever is in them. And it should be centered in the page the way it is now. I tried various "text-wrap" and "height: 100%" and a few different codes but no luck. I really don't want to have to give up on DIV's but I am finding them a tad frustrating . I've altered the code from here (http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/3/). I tried "floating" them but that didn't seem to help either or is messes up my centering, plus I don't want it expanding to different resolutions. Thanks in advance if you can give a DIV newbie a heads up. Code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TWO-COLUM FIXED LAYOUT
WITH FIXED BOXES</title>
<style type="text/css">
<!--
#header {
background: #0f0;
position: relative;
z-index: 1;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: relative;
z-index: 2;
top: 0px;
left: -325px;
width: 150px;
height: 600px;
}
#content {
background: #ff0;
position: relative;
z-index: 3;
top: -600px;
left: 75px;
width: 650px;
height: 600px;
}
#footer {
background: #0f0;
position: relative;
z-index: 4;
top: -600px;
left: 0px;
width: 800px;
height: 100px;
}
-->
</style>
</head>
<body style="margin: 0pt;">
<div align="center">
<div id="header">Header
Section</div>
<div id="leftcol">Left
Section
<p align="left">
Test
</p>
</div>
<div id="content">Content
Section</div>
<div id="footer">Footer
Section</div>
</div>
</body>
</html>
Hello Guys, I am trying to get the the css to work but having a hard time with it and need some help.. Here is the content lined up in fire fox. http://content.screencast.com/users/dank2009/folders/Jing/media/4198ca5c-6c75-4196-a2e7-ba1c423caca7/2011-08-22_1550.png Ad this is what it looks like in IE (See my issue) http://content.screencast.com/users/dank2009/folders/Jing/media/c9f0dcd6-19c9-48f6-83f8-9c55d7417fcc/2011-08-22_1551.png Here is the code Code: echo '<div class="listing"><img src="'.$listing_photo.'"><span class="listlink"><a href="index.php?content=subcats&id='. $listing_id.'">'.$listing_title2.'</a></span><br><span class="listbody">'.$listing_body2.'<span class="readmore"><a href="index.php?content=subcats&id='. $listing_id.'"> Read more</a></span>>>></div>'; Here is the CSS Code: .listing {
width:560px;
height:auto !important;
margin: 0 auto;
text-align: left
}
.listlink {
float:left;
margin-left: 10px;
margin-top: 20px;
position: absolute;
text-decoration:underline;
}
.listbody {
float: left;
margin-left: 110px;
margin-top: -30px;
width:440px
}
.listingdiv{
border-bottom: 2px dotted #9EABB5;
color:#FFF;
}
Please advise how to fix this.. Thanks for your help in advance.. Dan I'm having trouble pinning down an issue with just one part of a page. I can't seem to figure out if the issue is a css issue or an HTML issue. I have a tab that is under a picture that has a floating height and fixed width. Under the picture when the page first loads a div element that is supposed to be a css tab seems to float over it until I reload the page. When the page is reloaded the tab moves back to its static position. This only happens in IE7 by the way. nevermind it was a doc declaration issue Hi guys, I have a page entity that is meant to be displayed like this: But in IE7 and IE8 on Windows is displaying like this: The page is: http://www.drivinglessonsoxford.com/ Any thoughts smart people? I'm trying to switch images on rollover using CSS. It works fine in FF, but not in IE7. The images don't show up at all. Is there a way to make it work, or am I missing something? From my stylesheet: Code:
a.menu1 {
float: left;
display: block;
background: transparent url(../images/m1.gif) no-repeat;
width: 164px;
height: 34px;
margin-right:10px;
}
a.menu1:hover {
background-position: -169px 0;
}
a.menu2 {
float: left;
display: block;
background: transparent url(../images/m2.gif) top left no-repeat;
width: 122px;
height: 34px;
margin-right:10px;
}
a.menu2:hover {
background-position: -127px 0;
}
a.menu3 {
float: left;
display: block;
background: transparent url(../images/m3.gif) top left no-repeat;
width: 167px;
height: 34px;
margin-right:10px;
}
a.menu3:hover {
background-position: -172px 0;
}
a.menu4 {
float: left;
display: block;
background: transparent url(../images/m4.gif) top left no-repeat;
width: 47px;
height: 34px;
}
a.menu4:hover {
background-position: -52px 0;
}
And from my html: Code: <div class="menu1"><a href="#" class="menu1"></a></div> <div class="menu2"><a href="#" class="menu2"></a></div> <div class="menu3"><a href="#" class="menu3"></a></div> <div class="menu4"><a href="#" class="menu4"></a></div> Hey folks, I have one glitch that I can't get rid of (bear in mind I am in my second week of CSS thinking so go easy on me) - and have basically come here to ask your advice. I think I'll have to put a browser detection within the head especially for IE7 as it's a being a problem. Here's the website: http://www.three60design.com/sky_site/home.htm it performs exactly as I like in FF and Safari but not IE. What do you think? The second glitch is this: http://www.three60design.com/sky_site/portfolio.htm Within FF the content in each "box" is ok in FF, but in IE it overflows the box. I don't want to have a scroll in there ie overflow: scroll or auto. What am I doing wrong!? Cheers! REALLY REALLY appreciate it I have this website he galeriashqiptare.net With Firefox looks everything fine, but with IE the logo is not showing at all. Any idea where may be the problem and how to fix it? Regards. When I resize the browser then scroll across my div tag images move along. Last time I fixed this problem with "min-width:100px;" etc but now it won't work. Hoping someone can figure out this problem :P <html> <head> <link rel="stylesheet" type="text/css" href="layout.css"/> </head> <body bottommargin="0" leftmargin="0" topmargin="0" > <div id="designLayout" align="center"> <img src="echo_rain.jpg" alt="" /> <div class="button_facebook"> <form> <input type="button" value="" class="button_fb" onclick="window.location.href='()"> </form> </div> <div class="button_twitter"> <form> <input type="button" value="" class="button_tw" onclick="window.location.href='()"> </form> </div> <div class="button_soundcloud"> <form> <input type="button" value="" class="button_sc" onclick="window.location.href='()"> </form> </div> <div class="button_youtube"> <form> <input type="button" value="" class="button_ut" onclick="window.location.href='()"> </form> </div> </div> </div> </body> </html> @charset "utf-8"; /* CSS Document */ body { background-color:#000; } .button_facebook { top:-135px; left:-230px; width:0px; height:0px; position:relative; } .button_fb { background:url(facebook.png) ; border:none; width:80px; height:80px; } .button_fb:hover { border:none; background:url(hover_fb.png); width:80px; height:80px; } .button_twitter { top:-135px; left:-115px; width:0px; height:0px; position:relative; } .button_tw { background:url(twitter.png) ; border:none; width:80px; height:80px; } .button_tw:hover { border:none; background:url(hover_tw.png); width:80px; height:80px; } .button_soundcloud { top:-133px; left:0px; width:0px; height:0px; position:relative; } .button_sc { background:url(soundcloud.png); border:none; width:75px; height:75px; } .button_sc:hover { border:none; background:url(hover_sc.png); width:75px; height:75px; } .button_youtube { top:-138px; left:115px; width:0px; height:0px; position:relative; } .button_ut { background:url(youtube.png); border:none; width:80px; height:80px; } .button_ut:hover { border:none; background:url(hover_ut.png); width:90px; height:90px; } Cheers in advance. Hello all On the following page: http://planning.northumberland-national-park.org.uk/ if viewed in Mac IE (I believe version 5.0), the dotted lines below each left-hand menu item extend beyond the width of the menu across the whole of the main frame. The menu is a <ul>. The CSS is located at http://planning.northumberland-national-park.org.uk/css/style.css. Does anyone have any ideas? Thanks Tom The problem I'm having is very hard to explain, so I'll try to do it with pictures. In the attached image, five pictures are loaded with 2 links under each one (Enlarge & Remove). For some reason, when IE renders the page, the last one creates a random Remove link in the middle of the page on the next line. The XHTML code is he Code: <div class="column1of1"><span class="text-underline"><strong><br />Customer Images:</strong></span></div> <div class="column1of1"> <div class="column1of4even"><a href="/store/customer/enlarge.php"><img style="padding-left: 11px;" title="aaaa" alt="aaaa" src="/store/customer/uploads/thumbnails/1-aaaa1-.jpg" width="120" height="96" /></a><span class="text"><a href="enlarge.php">Enlarge</a> / <a href="remove.php">Remove</a></span></div> <div class="column2of4even"><a href="/store/customer/enlarge.php"><img style="padding-left: 11px;" title="Another Picture" alt="Another Picture" src="/store/customer/uploads/thumbnails/1-Another_Picture.jpg" width="120" height="96" /></a><span class="text"><a href="enlarge.php">Enlarge</a> / <a href="remove.php">Remove</a></span></div> <div class="column3of4even"><a href="/store/customer/enlarge.php"><img style="padding-left: 11px;" title="asfsfasf" alt="asfsfasf" src="/store/customer/uploads/thumbnails/1-asfsfasf.jpg" width="120" height="96" /></a><span class="text"><a href="enlarge.php">Enlarge</a> / <a href="remove.php">Remove</a></span></div> <div class="column4of4even"><a href="/store/customer/enlarge.php"><img style="padding-left: 11px;" title="A Picture of Something" alt="A Picture of Something" src="/store/customer/uploads/thumbnails/1-A_Picture_of_Something.jpg" width="120" height="96" /></a><span class="text"><a href="enlarge.php">Enlarge</a> / <a href="remove.php">Remove</a></span></div> </div> <div class="column1of1"> <div class="column1of4even"><a href="/store/customer/enlarge.php"><img style="padding-left: 11px;" title="sdfd" alt="sdfd" src="/store/customer/uploads/thumbnails/1-sdfd.jpg" width="120" height="96" /></a><span class="text"><a href="enlarge.php">Enlarge</a> / <a href="remove.php">Remove</a></span></div> </div> The CSS: Code:
.column1of1 {
float: left;
width: 590px;
display: block;
}
.column1of4even {
float: left;
width: 144px;
text-align: center;
}
.column2of4even {
float: left;
width: 144px;
text-align: center;
}
.column3of4even {
float: left;
width: 144px;
text-align: center;
}
.column4of4even {
float: left;
width: 144px;
text-align: center;
}
I've tried everything I could think of, but nothing works. Please help!! I am having an issue with IE using the .htc file to render the CSS menu system I have. I am not sure why though. I think it has to do with the server that I have the site up on. Unfortunitly, I am unable to do anything to the server, so I will have to work around this issue. The menu system works the way it should in Firefox, but not IE. So if you can look at it (in Firefox) and help me figure out what I need to do to make it work in IE I would greatly appreciate it. The site is: www.fired-up.ca I am confident this is a css issue http://www.sweetbyholly.com/index2.php The navigation in the site above, in IE7 only, shifts to the left on hover. I can't for the life of me figure out why. Can anyone pinpoint this issue? It seems the second nav item is loosing some margin or padding on the left on hover. I can figure it out. |
|||||||