CSS - Whole Div As Hyperlink Not Working

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'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 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 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}

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?

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,

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 ?

My CSS is causing my image to drop down and I want it in line with the number with the text to the right. If I take out the Span then it works but I need the span, can anyone see what is wrong with my code?


Code:

<div id=artContent>
  1.<span class=img-shadow><img src='AR6.jpg'></span>
</div>

CSS:

Code:

#artContent {margin: 0px 0px 100px; padding: 0px; color: #000; background-color: #ccc;}
    #artContent .info {color:#000000; font-size: 14px; font-family: Sylfaen;letter-spacing: 0.1em;}
    #artContent .img-shadow {
  float:left;
  background: url(shadowAlpha.png) no-repeat bottom right !important;
  background: url(shadow.gif) no-repeat bottom right;
  margin: 0px 0 0 23px !important;
  margin: 0px 0 0 23px;
  }

    #artContent .img-shadow img {
  display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #a9a9a9;
  margin: -6px 6px 6px -6px;
  padding: 4px;
  } 

The first image is what I am getting and the second is what I want.

Hi there,

I'm working with a template which is utilizing really bad transparent corner images in the master css file, and for sake of maintenace ive created my own custom.css and Im trying overwrite those background gif's with png's in my custom.css without any success - its coming up blank

Any idea's where Im going wrong? FYI im using the !important hack which IE 6 and below supposedly ignore

Code:

/* master.css */
.sidebar_container .CL_upperLeftCorner{
	background-image: url('../images/top_left_gom.gif');
	background-repeat: no-repeat;
	background-position: top left;
	float: left;
	margin-right: -15px;
}

Code:

/* custom.css */
.sidebar_container .CL_upperLeftCorner{
	background-image: url('../images/top_left_gom.png') !imprtant; /* ignored by IE */
   background-image: none;     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/top_left_gom.png,
sizingMethod='scale');

	background-repeat: no-repeat;
	background-position: top left;
	float: left;
	margin-right: -15px;
}

Hi all for some reason my css just won't work:
http://www.milztech.net/area51/

Css:
Code:

body
{
	font-family: verdana, geneva;
	font-size: 52px;
	background-color: #CCCCCC;
}

Any ideas??

Why does this css style work only in firefox and not IE :

Code:

.showhide {font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;font-size: 12px;color: #EA6D67;cursor: pointer; onMouseOver:text-decoration: underline;}

Everything in the style works apart from the last section: {onMouseOver:text-decoration: underline;}

Any ideas? Cheers

Hello,

I have an odd problem.

I do some websites as a hobbie so I'm no expert.

I have created several sites using css with a linked stylesheet and never had a problem using:

link rel="stylesheet" href="styles.css" type="text/css"

Today I opened Homesite (old version 4.5) for the first time in a few months and began a new project. My problem is, I can't seem to get the stylesheet to work when linked. If I use it inline or in the head tag it works, just not linked. I'm using the same code I have always used. I even copied from other working pages to be sure I'm not missing something.

I have also opened several other existing projects stored locally and they work fine. Just nothing I code now will work.

I must be overlooking something simple.

Thanks for any ideas!