CSS - Custom Underline On Text Links Is Affecting Images

hi, i would like the underline of my top level links to be as wide as the naviagtion box, it is currently only streching to the end of the text itself

PHP Code:
<ul>
    <li><a href="?action=abouUs">about us</a>
        <ul>
            <li><a href="?action=press">press</a></li>
            <li><a href="?action=tellFriend">tell a friend</a></li>
            <li><a href="?action=feedback">feedback</a></li>
        </ul>
    </li>
    <li><a href="?action=new">fitting room</a></li>
    <li><a href="?action=offers">best sellers</a></li>
    <li><a href="?action=col">useful info</a>
        <ul>
            <li><a href="?action=pay">payment options</a></li>
            <li><a href="?action=delCharge">delivery charges</a></li>
            <li><a href="?action=retPol">returns policy</a></li>
        </ul>
    </li>
</ul> 





PHP Code:
/* LEFT NAV */
    
    #leftNav {
        color: #000;
        float: left;
        margin: 0;
        padding: 0;
        width: 128px;
    }
    
    #leftNav a {
        border-bottom: 1px solid #000;
        text-decoration: none;
        width: 120px;
    }
    
    #leftNav ul li ul a {
        border-bottom: none;
    }
    
    #leftNav ul {
        list-style: none;
        margin: 0;
        padding: 10px 0 0 10px;
        display: block;
        border: none;
    }
    
    #leftNav ul li {
        margin: 0;
        padding: 0 0 10px 0;
        width: 110px;
        font-size: 14px;
        font-weight: bold;
    }
    
    #leftNav ul li ul {
        margin: 0;
        padding: 5px 0 0 10px;
    }
    
    #leftNav ul li ul li {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 12px;
        font-weight: 300;
        width: 95px;
    }
    
    /* END OF NAV */ 





thanks for your help

Hello I'm trying to figure this out. I want different color on the text-decoration overline and underline then the text. I know it's possible but how?
It works if i change it into border but that's not the case. Here's a picture to give you the idea.
Please help

Thanks in advance

Since i can't link url here's the link for the picture
i41.tinypic.com/29bvd1.png

Not sure if I'm missing something or if there's a hack for FF (and possibly other browsers), but on hover, text-decoration:underline doesn't seem to work in FF.

Here's the HTML:
Code:

<div class="prod_container">			
<div class="leftprods">
<div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_ta.gif" style="border:0;" alt="Time and Attendance" /><div class="prod_text">Time and Attendance</div></a></div><div>&nbsp;</div>
<div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_devkit.gif" style="border:0" alt="Development Kits" /><div class="prod_text">Development Kits</div></a></div>
</div>

<div class="rightprods">
<div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_access.gif" style="border:0" alt="Access Control" /><div class="prod_text">Access Control</div></a></div><div>&nbsp;</div>
<div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_finger.gif" style="border:0" alt="Fingerprint Readers" /><div class="prod_text">Fingerprint Readers</div></a></div>
</div>
</div>

Here's the CSS:
Code:

.leftprods { text-align:left; float:left; }
.leftprods a{ text-decoration:none; color:green; }

.rightprods { text-align:left; float:right; }
.rightprods a{ text-decoration:none; color:green; }

.prod_text { font-size:16px; color:green; font-weight:bold; padding-bottom:5px; }

.prod_container a:hover { text-decoration:underline; }

Thanks.

Hi, I am trying to make a link's text black with a blue underline. Is this possible?

Here is my code, which produces black text with a black underline: Code:

.link{ text-align:left; 
color:#000000; 
font-size:14.5pt; 
font-family:times new roman,serif; 
font-weight:normal; 
text-decoration:underline color:#09328a; }

Let say you have this:

<a href="#">
<img src="some.gif" alt="">
Some text
</a>

I want to have underline for the text on hover, but not for image.

How do I do that for the above A IMG text?

I want both the IMG and text within the A tag.

Would appreciate a solution that worked in at least:
IE, FF, OP, NE, Safari

For me it is working in IE and OP but not in the gecko browsers.... FF, NE

Regards

I was wondering if there was a way to have a chapter listing in a OL or UL. I want to be able to have "Chapter <i>:" as the list style where <i> is the increment.

is this possible. I thought I saw that somewhere floating around, but i can't seem to find it.

thanks in advance.

I recently put a section on my web page that allows people to submit data to database, and it works but it looks kind of plain. And I had seen this web page (http://textsfromlastnight(dot)com/Submit-a-Text.html) and saw how they seem to use a custom text box for their submit form. Can anyone explain to me how they did this? Or if its done with something other than CSS possibly point me in the right direction to learn?

Thanks in advance!!

on this page http://tampabay-online.org/cetr/artists.php

I am getting lines under the images and text that are links (I do not want the line under the images). This happens in Firefox. It displays how I want it to in IE and Opera. I usually design my sites for Firefox but I really trust Opera's compliance.

my css includes :
Code:

a img {
border: none;
}

Any ideas where the lines are coming from?

Thanks!

I have pictures lined up horizontally in a content box, which is fine. The issue I am having is having links beneath each picture. The issue I have is that all of the links bunch up next to the last picture horizontally and don't appear on a separate line underneath the images.

HTML

Code:

<div id="content">   <h2>Pictures from Events</h2>      <ul class="hoverbox"> <li> <a href="#"><img src="images/TEST1.jpg" alt="description" /><img src="images/TEST1.jpg" alt="description" class="preview" /></a> </li> <li> <a href="#"><img src="images/TEST1.jpg" alt="description" /><img src="images/TEST1.jpg" alt="description" class="preview" /></a> </li> <li> <a href="#"><img src="images/TEST2.jpg" alt="description" /><img src="images/TEST2.jpg" alt="description" class="preview" /></a> </li> <li> <a href="#"><img src="images/TEST3.jpg" alt="description" /><img src="images/TEST3.jpg" alt="description" class="preview" /></a> </li> </li> </ul> <p id="links"><a href="#"> Epic Fridays|&nbsp;</a> <a href="#">Zen West&nbsp;</a> <a href="#">|Green Turtle&nbsp;</a> <a href="#">|Craig's&nbsp;</a>  </div>

CSS


Code:

#content {   float: right;   width: 560px;   height: 300px;   color:#2C5923;     background-image:url(images/Picscontent2.jpg);     background-repeat: no-repeat;     padding-top:20px;     padding-left:20px;

 

i have a basic html page which includes a number of hyperlinks using jpeg images... essentially <img> tags wrappped in <a> tags.

i want to create a rollover effect with these links so that when a link is highlighted (mouseover) the jpeg image changes to another seperate jpeg impage.

is it possible to do this with html/css and if so how can i do this?

i have read about a method of doing this which combines both the original image (before mouseover) and the mouseover image into one single jpeg and changing the image's x-coordinate using css so that there is no preload/image flicker issues when the link is clicked on, but i'm not sure exactly how to code this.

any help is appreciated.

Hello, I encounterd this problem when I was making a website for a friend. The goal was to make a website that downloaded as fast as possible and had a good navigation etc. I made the navigation bar and I made different Div's for each button. I ended up making it so that the background color in the Div changed color when you rolled over it. That worked fine in Mozilla but not IE.

Then I wanted to make it so if you click the box (not just the text in the box i.e. "Home", "About Me", etc. However I could not figure out how to do it.

My question is, do rolover background changes work in I.E. at all? How do I make it so when you click the box it directs you to the link?

Thanks,
~Brendan

A thousand apologies -- this is a very poorly worded and general question, because I've learned through scavenging and don't know the jargon, and the answer might not even lie in CSS... but the problem is really driving me to distraction.

Is it possible in CSS to define a hover effect such that upon hovering over one element, a different element is affected? For example, I know you can add something like this:

#example a:hover{
color: #000000;
}

in order to change the color of any links in the example div upon hovering. But can you change properties of links in any other divs? If so, then how? And if not, then is there a different language which can effect this change?

Again, a thousand apologies for the amateurishness and outsider-wording of this question. I will be happy to clarify on request to the extent of my ability.

Hello great forum you guys got here!

I am kinda new to CSS and need some help :S

I have this link and I wrapped it with a plain simple box, but I also want the text to change from its default blue when I roll over it as well.

Here is the CSS code

Code:

.navigation {
			width: 160px;
			height: 18px;
			padding:6px 6px;
			padding-left: 15px;
			margin-bottom:2px;
			font-size:10px;
			color: #333;
			background-color: transparent;
			display:block
		}
		
		.navigation:hover {
			background-color: #CCC;
		}

I want it so that the color turns red upon hover!


Regards & Thank you in advance!

Below is a sample of my CSS page, I'm having an issue with the floats that are commented out, they are affecting my th even though I haven't actually classed anything in my html... Any ideas?

<code>
/* CSS Document */

body {
margin: 0;
padding: 0;
background-color: #000;
color: white;
font-family: "Lucida Grande";
font-size: x-small;
}
table.outer {
border:1px solid #fff;
width: 178px;
}
/*.left {
float: left;
}
.right {
float: right;
}*/
table {
clear: right;
width: 700px;
line-height: 1.4em;
border-collapse: collapse;
border: 1px solid #000;
color: white;
background: #000;
font-family: "Lucida Grande";
font-size: x-small;
}</code>

After months of scrutinizing different layouts for http://what-is-what.com, I've pretty much settled on modifying a layout that I found at this address:
http://www.positioniseverything.net...example/borders

I'm having a problem with arranging the header without using tables. The site logo should be on the far left side, and to the right of it a search form. When I float the logo left, the content of the page left aligns itself with the right edge of the logo. My test code (displaying this problem) can be found he
http://what-is-what.com/tests/june2007-leftalign.html

How can I have the float not affect the rest of the page?

I'm currently going through these tutorials to learn more about floats:
http://www.brainjar.com/css/positioning/
http://www.westciv.com/style_master...yout/index.html

I'm led to believe that I must use "clear", but I'm not sure where.