|
CSS - Can't Hide Bg Image In Links.
I am converting my news system from tables to pure CSS. So far its going great, and I'm almost complete except for one problem; Each post has a category, and the category image is displayed in each post using "background-image" in CSS. Although it somehow comes back in the background of each link within the <div> (in Firefox). I have attached an image of what I'm talking about.
Here's the html (simplified): Code: <div class="games"> <div class="newstoryinfo"> <h2>Topic goes here</h2> </div> text text text text text text text text text text text text text text text text text text text text text and so on... </div> Here's the CSS Code:
.news {
background-image: url("/img/topics/1.gif");
background-color: transparent;
background-repeat: no-repeat;
border: 1px solid black;
padding: 10px;
}
.news div {
text-align: justify;
margin-left: 1ex;
margin-bottom: 10px;
padding-left: 60px;
padding-right: 5%;
line-height: 1.6em;
}
.newstoryinfo {
padding-top: 5px;
color: #888;
font-size: 11px;
font-family: "Lucida Grande", Verdana, Geneva, Lucida, Helvetica, sans-serif;
}
Can someone please tell me how to make links in the "text text text.." area display with a white/transparent background? Thank you! Similar TutorialsHey all, I'm trying to make some links using the normal list method, and have the link class leak the image. Right now nothing is showing up...no text, no button/image...nothing. It's rather baffling to me, because I have pretty much the same code working on a different page. I can't see anything that would cause this. I would very much appreciate it if you have a look at my code and see if you can see something I missed. CSS: Code:
.box1{
width:900px;
height:700px;
background-image:url(bg.jpg);
}
#links{
width:853px;
height:31px;
margin: 0 auto;
text-align:center;
line-height:0;
display: block;
overflow: hidden;
text-decoration: none;
text-indent: -99999px;
font-size: 0.0;
line-height: 0.0;
background-repeat:no-repeat;
}
#links li{
float: left;
list-style: none;
}
a.link1{
width:185px;
height:31px;
display:block;
background-image:url(bg.gif);
background-position: 592 25px;
}
HTML: Code:
<div class="box1">
<ul id="links">
<li><a href="#" class="link1" title="Job Description">Job Description</a></li>
<li><a href="#" class="link1" title="Home">Job Description</a></li>
<li><a href="#" class="link1" title="Home">Job Description</a></li>
<li><a href="#" class="link1" title="Home">Job Description</a></li>
</ul>
</div>
Thanks much I m wondering if any body help me out regarding style sheet.. I m using an image as a background in a column of a table... I just want to display the lower portion of tht image while using it as a background..and cut down the upper portion...how can i achieve this in css style sheet? Code:
<table width="800" align="center" cellpadding="0" cellspacing="0"
style="">
<tr>
<td width="800" height="258" STYLE="background-image:
url('Images/mega/mega.gif');background-repeat:no-repeat"></td>
</tr>
</table>
My website works in safari, but not in IE or firefox. My question is, how do I get my links to match up in the other browsers? Hi all, This is probably simple, but I can't get it working for some reason. At http://www.bartlett-family.net/chri...ett/index2.html I want the 8 image links below the "Quote of the moment" to be centered between the vertical lines. I'd appreciate help. CSS is here and the class in "centerinline". Hi there, Was wondering if anyone had a solution with what I am trying to achieve if at all possible. I've been playing with a drop down that opens onclick with pure css. What I am trying to accomplish to have the dropdown close automatically when pointer is not on the dropdown menu. I know this is possible with jQuery but get this, I am trying to accomplish this in pure css. My code is below which is pure css which again works onclick to open the 2nd tab. Again, I am trying to achieve an automatic close behavior such as with a hover but not by using the hover class or javascript. <!doctype html> <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> <!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]--> <!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]--> <!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <!-- Mobile viewport optimized: j.mp/bplateviewport --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects --> <script src="js/libs/modernizr-1.7.min.js"></script> <style> div.items ul:not(:target) {display:none;} div.items ul:target {display:block;} .tabs { float:left; clear:none; width:200px; height:30px; border:solid 1px #cccccc; padding:10px; background:#000000; } a { text-decoration:none; } .tabs a { float:left; margin:8px 5px 5px 5px; color:#ffffff; } ul { width:222px; float:left; clear:both; padding:10px 0px 10px 0px; margin:-8px 0px 0px 222px; line-height:35px; list-style:none; } li { border-left:#cccccc solid 1px; border-right:#cccccc solid 1px; border-bottom:#cccccc solid 1px; } ul li a { margin-left:15px; } </style> </head> <body> <!-- Start Tabs --> <div class="tabs"> <a href="#">Dashboard</a> </div> <div class="tabs"> <a href="#item2">Data & Reports</a> </div> <div class="tabs"> <a href="#">Data Archives</a> </div> <!-- End Tabs --> <!-- Start 2nd Tabs Content --> <div class="items"> <ul id="item2"> <li> <a href="#">Sales By Device</a> </li> <li> <a href="#">Delivery</a> </li> <li> <a href="#">Revenue</a> </li> <li> <a href="#">Sales By Purchase Type</a> </li> <li> <a href="#">Data Archives</a> </li> </ul> </div> <!-- End 2nd Tabs Content --> </body> </html> Hi all, I am having difficulty with the background for an image link. I have the following: 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" xml:lang="en" lang="en">
<head>
<title>Test page</title>
<style type="text/css">
a:hover { color: #FFFFFF; background: #0000ff; text-decoration: none; }
a:hover img { background: none; }
.box { background: #00ff00; padding: 1em; }
.box img { border: 0; }
</style>
</head>
<body>
<div class="box">
<p><a href="#"><img src="images/a1a8aa6a43.jpg" alt="" /></a></p>
<p><a href="#">Text link</a></p>
</div>
</body>
</html>
I have a global style for links that change the background color and the color of the text. However, this also changes the background color of an image link which makes it look odd. I attempted to fix this with Code: a:hover img { background: none; }
But this does not fix the issue. Any thoughts? I am using XHTML strict because the CMS I am using forces me to an XHTML stylesheet. Also, this is just a snippet of the code of the actual page but the bug is present in this snippet. edit: the sites @ www.tomaustin.dsl.pipex.com/webdev Ive been doing some googling and cant find out how it works how do i apply attributes like a:link, a: hover to an image I had some like Code:
image a:hover, a:link, a:active, a:visited {
border: etc..
}
this does not work..it comes up with the horrid blue and purple backgrounds how do i do it? tom: ) Hi, I have some links in a <ul> list. I have set them to have a background image using CSS. When I rollover the links using IE6 the egg timer appears briefly. No such problem with FF or Opera. Anyone come across this before? Here's my CSS: Code: #section1 div ul{
padding:0;
margin:0;
}
#section1 div li{
list-style-type:none;
margin:15px 0 0 0;
}
#section1 div li a{
color:#fff;
text-decoration:none;
padding-right:20px;
background: transparent url(/newsite/images/square.gif) right center no-repeat;
display:block;
}
Hobby Helper Model Trains The above link is where my problem is... If you look at the middle column running down the page, there are several text links that I have the CSS working nice with the background color changing to orange. There is an arrow image that should follow the mouse as I run over these text links, but can't figure out how to get the darn thing to move. Any help will be GREAT!! THANKS! Hi, not sure if it is possible but i thought it may be possible in CSS... I was wondering: * I have a shopping cart (using JS) * A CSS based Navigation which is "View Shopping Cart" * An form button called "Add to cart" ** I want the CSS based Nav, to be hidden, until the user clicks on the form button, then it is visible, so that the user can click on it... Anyone know how this is done??? Cheers Jackson Simple question, but i'm trying to create a decent sized space in between my links, and make them white. I can make my links white, but can't seem to change the space inbetween them. HTML Code: div id="bar-links"> <center> <div class="content box1"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="4"><img src="images/barlist_01.gif" width="500" height="23" alt=""></td> </tr> <tr> <td background="images/barlist_02.gif" width="20"></td> <td background="images/barlist_03.gif" width="456"> </p> <div id="bar-links"> <h4><a href="#" title="Riley's Pub">Riley's Pub</a> <a href="#" title="Ho Down Bar"style="color: #fff">Ho Down Bar</a> <a href="#" title="Depot Square"style="color: #fff">Depot Square Bar</a> <a href="#" title="Egans Pub"style="color: #fff">Egans Pub</a> </h4> </div> </td> <td background="images/barlist_04.gif" width="24"></td> </tr> <tr> <td colspan="4"><img src="images/barlist_05.gif" width="500" height="27" alt=""></td> </tr> </table> </div> CSS Code: #bar-links { text-indent:inherit; text-align:left; }
Hello, Can search engine see a hide H1 tag? Quote: h1 {display:none;} Hi all, pls can anybody help me out in writing a code to hide the address bar and IE bar with css..it is very urgent.. thank you in advance I used the following code to hide overflowing content in one of my earlier works. Not working this time, check it yourself (purple section), http://www.refinethetaste.com/html/ Code:
<style>
.playlist { float:left; width:474px; height:80px; background:#FFF; overflow:hidden; }
.playlist .entries { position:absolute; width:10000em; }
.playlist .entries a { float:left; width:452px; height:60px; font-size:9px; padding:10px; background:#90F;}
.playlist .entries a:hover { background-position:-211px 0; color:#000; }
.playlist .entries a.playing { background-position:-422px 0; }
.playlist .entries a.paused { background-position:-633px 0; }
.playlist .entries a.progress { opacity:0.8; }
/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage { float:left; width:20px; height:60px; margin:15px 0; background:url(/html/themes/default/images/home_carousel_arrow_left.png) no-repeat; display:block; cursor:pointer;}
/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover { background-position:0px -18px; }
/* disabled navigational button */
a.disabled { visibility:hidden !important; }
/* next button uses another background image */
a.next, a.nextPage { background-image:url(/html/themes/default/images/home_carousel_arrow_right.png); }
</style>
Hello. I have code like this one Code: <div class='captionCell cbregName'> <label for="cbpplan10">AVATAR DESIGN</label> </div> how to hide just that label. Since there is many <div class='captionCell cbregName'> but labels are named different like for="cbblane9"... hey on my site at http://www.tequme.com theres a little copyright footer at the bottom and it looks good in 1280 but in 1024 it gets tucked away under the main site. its all divs and css and i kinda get whats going wrong but any suggestions/solutions on resolving it would be appreciated. i use one table to centrally align the main div. Regards Russell I'm looking for a way to show / hide a DIV triggered buy mousing over / clicking on a tab. The action will not navigate away from the page, just show / hide the DIV. I found this script: http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm But it seems like a lot of JS overhead. Is there a simpler way? For some reason i am adding css Code: Original - css Code /* Hide this from IE-Mac \*/ div.spacer { height: 5px; } /* End the hiding */ /* Hide this from IE-Mac \*/ But IE keeps seeing this, does anyone knows why? I am very new to css. I am trying to show and hide text by clicking a button. My intention is to use this in a threaded discussion board. For example I'd like the topics to be displyed when the page loads 1) topic 1 (Open/Close) 2) topic 2 (Open/Close) On hitting the Open button this would be something like this: 1) topic 1 (Open/Close) ---message 1 ---message 2 ---message 3 ---message 4 2) topic 2 (Open/Close) Hope someone can suggest me an answer or point me to one. Thanks |
|||||||