CSS - Create Hyperlink In Css

I have this website that i am using CSS for much of the styles.

I have used hotspot hyperlinks in parts of the images. Now there is the blue line that a link in html normally has around the entire div the hotspot is in. If clicked its the purple colour that a clicked (visited) hyperlink has.

The link to the page in question is
itxtme.com/still_lime/os_z_b.html

This only occurs in IE, it is not occuring in Opera. All the other links are working correctly. All source is in the webpage (view/source code)

Kind regards how i can work around this!

Scott

I've got my normal navigation links styled using the standard a:link, a:hover etc etc.

I want to include an image on one of my pages which links to a download, because the style applies to all 'a hrefs' the properties for my text links are assigned to the image (for instance a border is given).

Is there a way to assign a different class to the image hyperlinks?

Cheers.

I have a page that has a bunch of thumbnails on it and using css to format those images, i've added a margin to both sides for spacing. The class is applied to the href and set to have the img as a descendant. When the page renders in FF, there is no problem. But when it renders in IE, i get the nice little hyperlink underline where the margin is between two thumbnails. Any help would be great.

HTML

<a href="hometour/defiancemo/P9010045.jpg" class="thumbs" target="_blank">
<img src="hometour/defiancemo/thumbs/P9010045.jpg" alt="" />
</a>

CSS
a.thumbs img {margin: 0px 5px 10px 5px;text-decoration: none;color: #019934}

On my page I have 2 different hyperlink styles, one for my menu and one for any hyperlink in the content. One is under #menu in my stylesheet and the other under #content. With FF everything looks great, but when I open my site in IE6, the hyperlink styles seem to combine. Any ideas?

Can I make certain hyperlinks to be (eq) red and the others (eq) blue in one page with one css file?

I have page that automatically changes the images in a container via css. Does anyone know if its possible for each image to have a different hyperlink?

Would have done this in Flash but, IT Security is not on board with that yet.

Any suggestions?

Hi can any one suggest a solution to my problem.
I have all my a tags as -

a{border-bottom: thin #0066FF solid;text-decoration:none;padding-bottom: 2px}
and my img tag as
img {border-bottom: none}

However I have 4 images in 1 div that just wont accept it. So it must be precedence right. But theres no selector after it that would cause the issue so I've ruled that out.

So I tried a more deeper selector.

#rightside img/#rightside a img/#rightside img a/
They didn't work.

So in frustration I added a class to the 4 images a tag and then tried

.info/.info img/.info a img/.info img a/

Still no joy.

I then moved the class to the img tag in desperation and tried -
.info/img .info
Still no joy.
I tried all these with the below css -

{border-bottom: none}
{border-bottom: thin #FFF solid}
{border-bottom: 0px}
{border-bottom: transparent}
{border: none}
{border: thin #FFF solid}
{border: 0px}
{border: transparent}

I know it's not precedence because there is 1 image after these in a different p tag that takes effect.ie: no border.

It's not a selector on the same tag as there is no border on the tag.

I then drop kicked my computer across the room and decided to ask for help. Any one got any ideas?

The code looks similar to this -

<div id="new-image">
<h4><a href="my-site.htm">Link</a></h4>
<a href="my-site.htm" class="info"><img src="/images/pic.gif" alt="A picture of the picture" height="100" width="100"></a>
<h4><a href="my-site.htm">Link</a></h4>
<a href="my-site.htm" class="info"><img src="/images/pic.gif" alt="A picture of the picture" height="100" width="100"></a>
<h4><a href="my-site.htm">Link</a></h4>
<a href="my-site.htm" class="info"><img src="/images/pic.gif" alt="A picture of the picture" height="100" width="100"></a>
<h4><a href="my-site.htm">Link</a></h4>
<a href="my-site.htm" class="info"><img src="/images/pic.gif" alt="A picture of the picture" height="100" width="100"></a>
</div>

the css is -
#new-image {text-align: center;width:180px;margin:-10px 0px 13px 15px}
.info {border-bottom: none}

The a tag css is above this in the css code.

Cheers in advance

Jazajay

okey i m just putting hyperlink on picture and i get blue boarded around it? how can i remove it?

Hi,

I would like to make a html 'button' tag of 'submit' type look and behave like a html hyperlink.

(For those who would be curious, the reason is that I want to pass a variable to the target script, using the post method rather than appending a name-value pair to the hyperlink url, while keeping a conventional presentation. In the end, it should make the passed variable less visible for the end user, except of course if they look at the source code and look for a hidden input).

I considered to use the CSS2 system colors codes, but I did not find a code for hyperlink, and anyway, system colors will be deprecated in CSS3, so it is no good idea if I want to make my pages portable in the far future.

I tried to use the appearance property from CSS3, but it does not seem to be wel implemented yet in current browsers.

For now, I just styled my html button, removing border, and setting the background and foreground colors to something similar to an hyperlink, but then I have no guarantee that this will match the actual look & feel in the end user's browser.

Any hint or suggestion ?

Hi all,

I've tried several methods of doing what I want, but so far nothing's working.

At this test site, I would like to basically create a box for text in the area right of the vertical line. The text has to fit in the given width, but will have to expand downward if there's enough text.

I've tried a great many things but seem to be stuck completely. I've basically removed everything I tried and if someone could take a look to point me in the right direction I'd appreciate it.

Thanks,

Chris

hi, i would like to create a nav like in the picture

I have tried and nearly got there, but I cannot get the subnav to position correctly. If i position the subnav absolute but when you resize your browser the nav moves and if i position it relative (i dont even knowwhat its relative to) it freaks out

I can post my css if you want it, but im just wanting to know how you would do it, I dont want code...just like 'i would do blah blah becuase bah and stuf'

Does anyone know how I can achieve this effect in CSS navigation?.

The lighter blue is a hover state and I'm wondering how I can get it to work behind the previous nav button's arrow.

Cheers!

Hi there,

I am trying to acheive an effect like the image below.. so when the link is hovered on, there is a light gray bg, but with a 1px space above and below the bg.

This is my CSS I have, but it is displaying what looks like a 2px border because my link has a top and bottom gray border.

Any ideas how I can acheive this effect?



PHP Code:
#categories_home a{
background-image: url('images/nav_arrow.gif');
background-repeat:no-repeat;
background-position:left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #6dbd00;
text-decoration: none;
padding: 2px 2px 2px 25px;
border-bottom: 1px solid #ececec;
border-top: 1px solid #ececec;
display:block;
}

#categories_home a:hover{
background-image: url('images/nav_arrow.gif');
background-repeat:no-repeat;
background-position:left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #6dbd00;
text-decoration: none;
display:block;
padding: 2px 2px 2px 25px;
background-color: #f6f6f6;
border-bottom: 1px solid #ffffff;
border-top: 1px solid #ffffff;
} 

Hi,
I'm developing a site that is growing daily and I need to create a menubar that I can update just once, and it works across multiple pages.
What is the best way to do this? Any links to instructions or tutorials would be much appreciated as I'm a fairly basic designer.
thanks,
Jean