CSS - Removeing Board Around Ma Hyperlink Picture

Hi

I am looking for stylesheet method where I can give a image and a hyperlink for that image inside a stylesheet..

Kindly post ur suggestions to my email adddress
godwinsharmila@yahoo.com

Thanks in advance..

Regards
Sharmila

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?

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}

i have a screenshots page on a website for a peice of software i've written. it has a number of thumbnails on it, when you click a thimnail, the full size image pops up in a new window.

<a href="javascript: void window.open('fullSize.jpg', 'pic1', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=660,height=500');"><img src="thumbnail.jpg" width="120" height="90" border="0"></a>

i want the thumbnail to have an orange (#EE9515) border, bossibly 4px thick, when the user hovers over it. how do i do this?

My site is a .org that I recently created and I am having picture problems. For some reason that i cant under stand the picture wont link up to my menue as a sub menue and adjust the spacing and type like it does with the regular menu. Ideally I would like to modify it so it is random pick from a file on the server but IDk how and advice on how to make it not cut off my text or have my text over lap it. The site is my name IGADA dot org any suggestions. Really what I need to now is if i should be trying to make this happen in the CSS or in the HTML. I can post the relavent CSS if some one wants me too.

Hey all,

I've got a gallery of sorts, where teams register and they show up with a thumbnail and team info.

You can see what I'm talking about here.

In FF, the first team on each page's box drops down to the end of the floated form on the right. I'm sure it's something to do with the floated element, but I can't seem to fix it. It displays the way it's supposed to look in IE7 (note I didn't say 'properly', as i'm sure that's not true).

Here's the CSS:
Code:

.teamBox {
width:400px;
margin:5px auto;
min-height:200px;
background:white url(images/teamBox_tile.gif) repeat-y center;
}

* html .teamBox {
height:200px;
}

.teamBox h3 {
margin:0;
width:390px;
height:27px;
padding:12px 0 0 10px;
background:white url(images/teamBox_top.gif) no-repeat top center;
border-bottom:1px solid white;
color:white;
}

.teamBox p {
color:#333;
margin:5px 15px;
}

.teamBox p a {
color:white;
}

.teamBox .teamBoxBottom {
width:400px;
height:10px;
background:white url(images/teamBox_bottom.gif) no-repeat bottom center;
}

.teamThumb {
float:right;
width:150px;
height:150px;
margin:5px 10px;
overflow:hidden;
}

I have a picture of a city.. then i have transparent pictures of stores and stuff i want to layer ontop of the city.. but i was wondering if someone could go about showing me how to layer them? i found help on layering pictures, but they wont show through to the city.. =/

I am trying to add a border to my pictures. I read a tutorial about it but however in firefox it escapes from the box. In IE it looks fine. Has anyone had this problem before? Any tips on fixing it?

Thank you

here is the link

http://www.conceptofgravity.com/test/pictures_test.html

[http://]blumoney[dot]latestdot[dot]net[/]plb[/]pictures[dot]php
You see?
I want the thumbnails to pile up underneath the full sized image.

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?

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

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

On my site which im using to practice css, the picture isnt being displayed on the main page. Why is this?

http://www.trowbridge-wiltshire.co.uk/newtrowbridge

Cheers