CSS - Ie Not Seeing Simple Anchor Tag...puzzle.

If you look at this site with IE6 there is a strange behaviour with the in-page anchor links where IE6 will set them all 'visited' (grey) even when they have not been visited.

www.warehammid.dorset.sch.uk/

The ordinary site navigation links work OK (grey only if visited).

With all other browsers all works OK even IE7.

Any ideas as to why IE6 does not conform (is it a bug)?

I'm sure its something to do with the '#'. Code below for you to see.

Here is an example xhtml code:

<!-- NAVIGATION -->
<!-- Navigation Level 3 -->
<div class="leftsideCol"><!-- InstanceBeginEditable name="sideNav" -->
<ul>
<li class="title">In-Page links</li>
<li><a href="#">Governors</a></li>
<li><a href="#pta">Parents Association</a></li>
<li><a href="#staff">Staff</a></li>
</ul>
.... </div>

and here is its CSS styling:

.leftsideCol ul {
margin: 0px 0px 0px 0px;
padding: 0px;
}
.leftsideCol li {
display: block;
list-style: none;
}
.leftsideCol li.title {
/*title of column is actually an li*/
color: #fff;
text-transform: uppercase;
text-align: center;
font-weight: bold;
background-color: #41a9ef;
height: 21px;
border-bottom: 2px solid #0c578d;
line-height: 1.5em;/*to center lfc top header*/
}
.leftsideCol li a {
height: 1.3em;
padding: 0px 0px 0px 2px;
border-left: solid 7px #fff;
font-weight: bold;
text-decoration: none;
}
.leftsideCol li a:link {
color: #0c578d;
}
.leftsideCol li a:visited{
color: #888888;
}
.leftsideCol li a:hover, .leftsideCol li a.selected{
border-left: solid 7px #d52c1e;
border-bottom: 1px solid #d52c1e;
}

What is the proper way to specify an anchor target in CSS?

I have an interesting problem. I'm using a basic <div> for my content in the center of my page. On one page (a FAQ page) I'm using a table to display the question/answer part. At the top of the page, above the table, I have a bunch of questions (I'm sure you've seen this layout before). I'm trying to link the questions to anchors set to specific rows in my table, and it's just not working. I use <a name="blah"> for the anchor and <a href="#blah"> for the link...and what it does is take me to the very top of the entire table. Every link, every time. Regradless of where in the table the anchor is declared it just takes me to the top of the table. The table scrolls about 1.5 screens, so it should be going further. I placed a tag just after my </table> and just before my </div> and it worked perfectly, took me right to the bottom of the page. But when I moved it to just inside the </table> it quit working, and took me to the top of the table.

That was far too much for one paragraph...sorry.

Now, understand that I'm not using a table for the "question link" part of the page, only the "question/answer" part. I just can't figure this out, and it looks too nice in the table to go trying to do it all with css. The rest of my site so far is pretty much tableless, and I'm pretty new to css.

The reason I'm asking here, is I figure it must have something to do with the css since I've seen the same code work fine on a table layout.

Sorry if this is a dumb question, or if I should ask it somewhere else. I'm just losing my mind.

Hello,

On a bottom of a form I have 2 buttons: Submit and Cancel.

Submit is an input and submits the form.
Cancel should just redirect the user to a new page without submitting the form.

I need the Cancel button to look the same as the Submit button.
If I use an input of type button as Cancel button I am able to do that but then I need to rely on "onclick" to redirect the user ... I think would be better to use an anchor.

However, I am having a problem in styling the anchor to make it look the same as the Submit input.

Could someone tell me how to style the anchor and if using an anchor is better then using the button?

My code:
http://www.27lamps.com/Labs/Buttons/Buttons.html

Thanks,
Miguel

Hello,

I am applying a style to a anchor tag. This anchor is created by an
ASP.NET page and is inside a list item.
I know the style is working because I applied it to the anchor in a
page that has only this.

.Test
{
background-color: #101010;
color: #E2E2E2;
padding: 4px 10px 6px 12px;
text-decoration: none;
font: normal 1.2em Verdana, Geneva, sans-serif;
}

<a href="Test.aspx" class="Test">Testing</a>

However, when I apply it to the anchor inside the list item I don't
get the bottom margin unless I add "display: block" to the style! But
then the background is extended 100%.

I don't know what is going on. I tried everything I could think off.
Here is the code where the Test style is giving me problems:
...
<li>
<label for="tbMessage" id="lMessage">Mensagem<span
class="Required">*</span></label>
<textarea name="tbMessage" rows="4" cols="20" id="tbMessage"></
textarea>
</li>
<li>
<a id="lbSubmit" class="Test"
href='javascript:WebForm_DoPostBackWithOptions(new
WebForm_PostBackOptions("ctl00$ctl00$cphSite$cfSendContact$lbSubmit",
"", true, "ContactForm", "", false, true))'>
Send
</a>
</li>
</ul>

Any idea why this is happening?

All I am trying to do is to make my anchor look as a simple button.

Thank You,
Miguel

I am hacking a clients css. Can someone tell me where I am going wrong. His site is a Smarty one. Here is the meta tags. The website is www.russiansweets.us and I am trying to format the links in the right nav menu underneath the search function that are presently red. I added class A.one:{} Class but it seems not to make a difference. I get the same color links before as after (red)
Code:

<html>
<head>
link href="stylenew.css" rel="stylesheet" type="text/css">
{literal}
<style>
		A
		{
		    COLOR: red;
		    FONT-FAMILY: Arial, Verdana, Helvetica;
		    FONT-SIZE: 11px;
		    FONT-WEIGHT: bold;
		    TEXT-DECORATION: none
		}
		A:hover
		{
		    COLOR: #993300;
		    FONT-SIZE: 11px;
		    FONT-WEIGHT: bold;
		    TEXT-DECORATION: none
		}

 // here is the part I added 		a.one
		{
    COLOR: #FFFFFF;
		    FONT-FAMILY: Arial, Verdana, Helvetica;
		    FONT-SIZE: 13px;
		    FONT-WEIGHT: bold;
		    TEXT-DECORATION: none
    }
    a.one:hoover
    {
    COLOR: #FFFFFF;
		    FONT-FAMILY: Arial, Verdana, Helvetica;
		    FONT-SIZE: 13px;
		    FONT-WEIGHT: bold;
		    TEXT-DECORATION: none
    }
		</style>
 //end of what I added 
	{/literal}

Here is the html

Code:

<td>
      
<a class="one" href="disclaimer.php">Disclaimer</a>
                  </td>

i want to make it so a certain div is always at the bottom, but i cant do it by playing a min-height on the div above it, is there a solution to this problem?

Does anyone know if there is a css property that applies to links that are linked to anchored tags on the page?

Can there be a selector just for links that go to an anchor tag?
I don't want to use a seperate class for only those links.

thanks

Hello,

I want to have every anchor in a paragraph have this effect when mouse-overed.

p a:hover {background-color:#00bff3;color:#fff;}

It works fine but what I didn't think about was any image I may put into a paragraph that is wrapped in an anchor will also get it.

How can I exclude anchored images in paragraphs from this effect?

i have a horizontal navigation pane in which i want 5 links to be placed across the top.
any ideas?
ive tried setting the width a percentage and a fixed width but no luck.

width:50px;

Hey all,
I'm having a minor problem with an anchor (a.return, at the bottom of the page) on the following page:
calvarychapeljax.com/fellowship.php
In FF, Chrome, and IE8, it is displaying "properly" (a relative term, for sure ) on one line. In IE7 (and possibly prior IE versions; I don't have IE6 to test), the anchor is stacking vertically. I can't figure out if there's a wrapping issue, if there is less space in the way IE7 is interpreting the CSS, etc. What makes it worse is I have this anchor on other pages (webelieve, musicministry) and it is fine, even in IE7. Is the table affecting it? Any ideas?

I'm not extremely familiar with CSS, as I've only used a few simple implementations of it. Please move this if it's in the wrong place, but I was wondering if it was possible to alter the behavior of <a> tags so that when clicked, instead of loading the page specified in the src, it executes a JavaScript function, providing the src for a value. It seems to me that this would be done through CSS.

I could go through and replace each "src='src'" with "onClick='function(src)'", but there are far too many pages, each with far too many links, to edit. So it seems it would be easier to simply import a CSS style in each page that'll have the same effect. Any ideas?

How does css work when it comes to inheriting Anchor Styles?

For instance, check this out.
http://section31.us/temp/csslinks.html

The following has 2 styles for links, one red and one blue. It only works if I define the styles in the same order that I place them in my html document. Is there anyway around this?

If you need more clarification, please let me know.

This is a simple question.

In my menu system, I want my "items" to look like links. I've put the text in an Anchor tag... but I then get the, for this time at least, undesired blue underline action going on...

What CSS do I need to use to prevent this. I want my <div> tag and/or my <a> tags to not change...

Thanks.

Is it possible to apply an A style inline? Eg inside a tag?

You can do this obviously:

Code:

<div style="background: url(blah.gif);">blah</div>

But is it possible to apply an A (anchor) style in the same fashion. I do have a very valid reason to do this; being that I need to slide a background image using background-position, but the image is not known until the page loads.....

Thanks for any pointers.