|
CSS - Image Class Problem
Hello,
I have created a design in photoshop which has been sliced into a number of smaller images. I am then trying to reapply the design as a series of background <td></td> elements, using an external css. The style is: Code: td.tablebackground
{
background-image:url('/media/headerarea/topnav_search.jpg');
background-repeat:no-repeat;
width:40;
height:10
}
This works fine in IE6 but doesn't show in Firefox. Can anybody please suggest a way around this? I have also tried defining a class to attach to an <img> tag but this always places a border around the image even if border=0. The external css for this is: Code: img.tablebackground
{
background-image:url('/media/headerarea_red/topnav_search_red.jpg');
background-repeat:no-repeat;
width:40;
height:10 ;
border-style:none; // also tried border:0;
}
Many Thanks, J Similar TutorialsHey, I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble. my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css Thanks. I have used several image classes in my css to control the thickness of the border like so .. img.left { border: #FF66CC solid 0.02em; border-left: #FF66CC solid 0em; border-top: #FF66CC solid 0em; } img.right { border: #FF66CC solid 0.01em; border-right: #FF66CC solid 0em; border-bottom: #FF66CC solid 0em; } But for some reason this doesn't sho up in Safari or IE5.2 (on the mac) and also I checked it on Opera 5, and it doesnt show the borders on the image? any ideas? thanks for your time. I'm running into a problem with IE and using the :hover sub-class on an image within a class. IE: .zoomer img:hover {}. Works just fine, nice and neat in any other browser. Page in question: [URL=http://www.cavemanapparel.com/ncaa-c-34.html[/URL] Code: .zoomer img:hover { background: #008; margin-left: auto; margin-top: -400px; position: absolute; z-index: 999; display: block; border: 0; height: 60%; width: 40%; overflow: visible; clear:both; }
I've tried placing various hacks and/or solutions I've found across the web inside: <!--[if IE]> <![EndIf]--> but the POSITION attribute seems to be ignored and takes on the code in the .css file. I know WHY it's doing it but can't seem to fix it. Well, I guess if I knew exactly why it's doing it I would be able to fix it. Right? Anyway, if you view the page source, I'm sorry for the shoddy work. It's been a long couple of days. Any insight or solutions are greatly appreciated. please please somebody help me with this... i have given my links some effects with this code: Code: <style type="text/css">
<!--
a img {border: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; border-bottom:3px double; color: #000000;}
a.head,
a.head:link { text-decoration: none; }
a.head:hover { text-decoration: none; }
//-->
</style>
it works fine on my links, but the class "head" doesn't seem to be effecting the link with that class....it still has the same hover effect as the other links. I have class="head" in the link tag of the element, but it still doesn't work. I want no effect on this link since it is an image and I don't want a double-underline on it. The only thing I can think of is that maybe the head image isnt being effected correctly because it is an include file, but I don't think that really matters. Thanks! i've been searching the web for a couple weeks trying to find a simple way to swap CSS classes onMouseOver, making a simple, and elegant Rollover button. i've found tons of examples with really complex methods, but i really need to do it with CSS classes. so i've read repeatidly that by putting the following code as your TD tag you'll be able to change class names. and it simply doesn't work at all. the code i'm having a problem with reads like this: <td class="out" onMouseOver="this.className='over'" onMouseOut="this.className='out'"> it just doesn't work. anyone at all who can give me a code that does work, i'd be more than appreciative. oh, and by the way i'm using IE 6.0.2600 hi all ... i am trying to hide the link of "Price" and "Broker" from the class "CONTENT" ... however it doesnt work with it . What wrong with my code? i am a new css learner ... sorry for troublesome ... CHEER <html> <head> <title>Stock</title> <meta http-equiv="Content-Type" content="text/html; charset=big5" /> <style> .CONTENT:link {display : none ! important;} </style> </head> <body> <tr class="MarkColor3" valign="top"> <td class="CONTENT" valign="top" width="35"> 1234</td> <td class="CONTENT" valign="top" width="140"> XXX Cop. Limited </td> <td class="CONTENT" valign="top" width="55"> 5.050</td> <td class="CONTENT" valign="top" width="58"> <img src="../images/index_up.gif" />0.075</td> <td class="CONTENT" valign="top" width="58"> <img src="../images/index_up.gif" />1.508%</td> <td class="CONTENT" valign="top" width="69"> 707,730,172</td> <td class="CONTENT" valign="top" width="198"> | <a href="../a.html">Price</a> | <a href="../b.html">Broker</a> | </td> </tr> </body> </html> Hey guys. I'm still learning css so excuse some crude styles. I don't know how to explain this so grap IE 6 and click here. Scroll down the links on the left until you get to the last one "Printable Pics." As you can see for some reason the last two links jump down the page and a big blank spot appears in it's place when you hover your mouse over it. It doesn't do that in firefox or opera so I don't know whats' going on. Heres my CSS: Code: body {
text-align: center;
height: 100%;
background-image: url(images/bg_title.gif);
}
img {
border: none;
}
#wrapper {
width: 780px;
height: 100%;
margin: 0 auto;
text-align: left;
position: relative;
background-color: #FFFF7D;
color: #000000;
border: solid 2px #0000ff;
}
#header {
width: 780px;
height: 143px;
margin-bottom: 3px;
}
#headerImage {
width:200px;
float: left;
margin-right: 2px;
}
#headerImage img {
margin: 0px;
}
#headerLogo {
width: 577px;
float: left;
margin: 0px;
}
#headerLogo img {
margin: 0px;
}
#navagation {
width: 204px;
margin-bottom: 1px;
float: left;
margin-right: 1px;
}
.navIcon {
float: left;
margin-right: 2px;
margin-bottom: 1px;
padding: 0px;
}
.navButton {
float: left;
margin-bottom:1px;
padding: 0px;
}
a.navButton:link {
border: none;
}
a.navButton:visited {
border: none;
}
a.navButton:hover {
border: 1px solid #000000;
}
#mainContentArea {
float: left;
width: 570px;
height: 711px;
border: solid 1px #000000;
background-color: #ffffff;
margin-bottom: 3px;
}
#footer {
height: 1px;
margin-top: -1px;
clear: both;
overflow: hidden;
}
Thanks in advance! -Tim hey, I got a table, every <td> in the table got the css class .regular. (<td class='regular'>). When the user moves their mouse over a row, that row should change color. This works with the following code: <tr onmouseover='this.className=\"hoverRow\"'> However, this only works if the td's in that row have no class set yet. And since all td's in my table have a class set allready, i cant use this. How can i overwrite the class of the td's by the class for the whole row? thanks in advance Using the following example: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
a
{
display: block;
}
a.one.on, a:hover.one, a:hover.one.on
{
color: red;
}
a.two.on, a:hover.two, a:hover.two.on
{
color: orange;
}
a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
</style>
</head>
<body>
<a href="#" class="one">one</a>
<a href="#" class="two">two</a>
<a href="#" class="three">three</a>
<p> </p>
<a href="#" class="one on">one</a>
<a href="#" class="two on">two</a>
<a href="#" class="three on">three</a>
</body>
</html>
Notice how, in IE6 (works fine in FF), when the secondary style named 'on' is added, all 3 links in the 2nd set display the properties of the style: Code: a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
(since it is last in the list) rather than the style specified by their respective numbers (i.e. 'one', 'two' or 'three'). Is there a way to overcome this in IE. I've read several forums and know that the technique I'm trying to achieve is possible, however I can't seem to get it to work. Basically I'm trying to shift the background positions of both the list item I'm hovering over and the next list item. I'm sure its just a syntax error and not a logic error, anyways the code is below - any help would be greatly appreciated! Code:
HTML Code
<div class="menu">
<ul>
<li><a href="#" class="search"></a></li>
<li><a href="#" class="battery"></a></li>
<li><a href="#" class="cart"></a></li>
<li><a href="#" class="contact"></a></li>
</ul>
</div>
CSS
.search, .contact, .cart, .battery
{
width:100px;
height:30px;
margin-left:-1px;
display:block;
}
.search
{
background-image:url(Images/search.png);
}
.contact
{
background-image:url(Images/contact.png);
}
.cart
{
background-image:url(Images/cart.png);
}
.battery
{
background-image:url(Images/battery.png);
}
ul li a.search:hover
{
background-position:0px 60px;
}
ul li a.search:hover ul li a[class=battery]
{
background-position:0px 60px;
}
Sorry for the lousy title, can't come up with better wording.... What I'm trying to say is can someone give me an example code of a css syntax that accept one css classname and add a few more properties to it under a different class name. Sort of like merging two classname into one. Thanks... I've downloaded a web template he http://www.freewebsitetemplates.com/preview/dogstemplate/ I've been re-working it to fit what I need, but I've run into some problems with the CSS. I want to center my images that I place, but I can't seem to figure it out. For whatever reason I'm not able to attach my html or css file. So I've uploaded a zip file with them to: http://www.tombraiders.net/katie/css.zip If any of you would be able to help I would be so appreciated! I'd also like to move the image down a line as right now it's right under the previous line of text. Thank you! I put together a new web layout with divs and css at www.verbazon.net/index.php. I have a php include for that main content box text that shows up, and as you can see, it screws up the content box images separating them. If anyone can help me fix this I appreciate it. My Css file is located at www.verbazon.net/style.css Morning guys and girls, I am getting a headache trying to straighten this bug out and could really do with a fresh pair of eyes. The page is he www.BeeBee-Design.co.uk/dev. It works fine in IE6 ( ) but not FF ( ). The relevant piece of HTML is: Code:
<div class="navigation">
<ul>
<li class="navigation">
<a class="nav" href="index.html#">HOME</a></li>
<li class="navigation">
<a class="nav" href="index.html#">SERVICES</a></li>
<li class="navigation">
<a class="nav" href="index.html#">HOTELS</a></li>
<li class="navigation">
<a class="nav" href="index.html#">QUOTE</a></li>
<li class="navigation">
<a class="nav" href="index.html#">BOOK</a></li>
<li class="navigation">
<a class="nav" href="index.html#">CONTACT</a></li>
</ul>
</div>
And the CSS: Code:
div.navigation {
font-family: Arial;
font-weight: normal;
word-spacing: 10px;
padding: 0 40px 0 0;
margin-top: 120px;
line-height: 30px;
background-color: #9A9FBA;
text-align: center;
}
* html div.navigation {
word-spacing: -6px;
}
a.nav:link {color: #FFFFFF; text-decoration: none; background-image: url(images/navback.jpg); width: 117px; height: 30px;}
a.nav:visited {color: #FFFFFF; text-decoration: none; background-image: url(images/navback.jpg); width: 117px; height: 30px;}
a.nav:hover {color: #FFFFFF; text-decoration: none; background-image: url(images/rollover.jpg); width: 117px; height: 30px;}
li.navigation {
display: inline;
font-size: 18px;
font-weight: normal;
color: #FFFFFF;
}
The problem seems to be something to do with the way that IE will stretch the block to the width and height settings in the CSS and FF will not. Any suggestions greatly appreciated and will be rewarded with a packet of the finest Chocolate Digestives known to mankind. I thank you......... Hey all. I've been putting together a website for my friend, and my css chops are admittedly pretty old and not that great anyway. I'm wondering if anyone could give me some advice. I can't get a background-image in a <div> to load at all in a firefox browser, though it loads in safari. I've highlighted the particular image tag. Does anything look wrong? _____________________________________ a:link { text-decoration: none;} a:visited { text-decoration: none;} a:hover { text-decoration: underline;} a:active { text-decoration: none;} body { background-image: url("images/backcolor.jpg"); } #site { position: absolute; top: 0px; left: 0px; width: 864px; height: 576px; background-image: url("images/backdrop.jpg"); overflow: auto; } ____________________________ (snippet from html) <body> <div id="site"> <div id="nav"> <a href="about.html"><img src="images/about.jpg" border="0"></a> <a href="resume.html"><img src="images/resume.jpg" border="0"></a> <a href="portfolio.html"><img src="images/portfolio.jpg" border="0"></a> <a href="links.html"><img src="images/links.jpg" border="0"></a> </div> <div id="image"> </div> <div id="text"> <span class="main"> <span class="title">There is music in everything.</span><br> <span class="link">In the very core of the emotions we emit as human beings there is sonic substance. Much like music, sound contains rhythm, texture, timbre and tone. It has the incredible capability of evoking and opening all of our senses: sight, taste, touch and smell. When a sound design is successful it is an art, a piece that is honored individually for its strength and intelligence, rather than its ability to support a production.</span> <br><br> <span class="link">These are the qualities I strive for in my designs, to create sensory events that evoke emotional responses and aesthetic meaning. Sound can have great presence in a performance. It should always be welcomed. </span> <br><br> <span class="link">Anthony Mattana is a junior sound design major at Carnegie Mellon University's School of Drama. Please feel free to contact at any time.</span> </span> </span> <br><br><br> <span class="main2"> <a href="mailto:anthmattana@gmail.com"><img src="images/sig.jpg" border="0"></a> </span> </div> </div> </body> </html> I'm working on a new layout for my site, and I've sliced up the left and right side of the content box so it will expand and contract accordingly to all the content inside of it. And I can't get it to line up right. And I'd appreciate any help. Here it is: http://thesethexperience.f2g.net/ne...navboxtest.html And the code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>navbox</title>
<style type="text/css">
body { background-color:#FFFFFF; }
img { border:0px; }
#navleft
{
background-image: url(images/navleftspacer.png);
background-repeat: repeat-y;
padding: 0px;
background-position:left;
}
#navright
{
background-image: url(images/navrightspacer.png);
background-repeat: repeat-y;
padding: 0px;
background-position:left;
}
</style>
</head>
<body>
<div id="navbox">
<div id="navhead">
<img src="images/navigation.png" alt="" />
</div>
<div id="navbod">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="navleft" height="100%" valign="top"><img src="images/navleftspacer.png" /></td>
<td><p><br /><br /><br /></p></td>
<td id="navright" height="100%" valign="bottom"><img src="images/navrightspacer.png" /></td>
</tr>
</table>
</div>
<div id="navfoot">
<img src="images/navbottom.png" alt="" />
</div>
</div>
</body>
</html>
Thanks in advance. Hello friends, I have created this page http://www.geocities.com/axe_42k1/index.html with html and css its working fine with IE but in mozilla firefox, images in center are overlaping on right side images and no round border to themplease help me to solve this problem and i want to insert link to top left hand side image how can i do it with css?. |
|||||||