CSS - Anchor Style Inline?

I have the following defined in my css file:

Code:

table {
	border:1px dashed #999;
	}

And the following code interspersed throughout other parts of my code:

PHP Code:
echo "<table nowrap border=\"0\">"; 





The problem I have is that the border is still appearing around these tables where I have specified no border.

As I understand, the inline style should take precedence, right?

Is this a php issue? Or am I doing something else wrong?

I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule:
Code:

 .textarea-box {
	color: #990000;
	background-color: #fff;
	width: 375px;
	height: 200px;
	border: #000 solid 1px;
	} 

...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule?
Thanks for help with this.
j9

I have a menu bar made up of <a href> elements that have a hover style of: PHP Code:
#mainMenu a:hover {
    color:#000000;
    background-color: #66c74c;
    padding: 1px 4px 1px 4px;
    margin: 1px 1px 1px 1px;
} 



This will provide a green colored rollover visual as the user moves their mouse over the menu bar.

I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code:
//--- Simplify setup by creating an array of the menus and hilight ID's ---
    var menus = ["menu1","menu2","menu3","menu4","menu5",
                "menu6","menu7","menu8","menu9","menu10"];
    
    function J_hiliteMenu(menu) {
        //--- first make sure all the menu are hidden and unhilited ---
        for(i=0; i < menus.length; i++) {
            if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position
            var obj = document.getElementById(menus[i]);
            if (obj == null) continue;             // if menu is not available skip it
            obj.style.color = "#ffffff";
            obj.style.backgroundColor = "#234fd7";
        }
        //--- hilite the menu we're interested in ---
        var obj = document.getElementById(menu);
        obj.style.color = "#000000";
        obj.style.backgroundColor = "#f8f400";
    } 



Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript?

Thanks!

Hello,

I am trying to create something really simple:

An image anchor with a height of 100px where the image is centered inside the anchor ...

However, this is not working:

http://www.27lamps.com/Beta/Bar/Anchor.html

I added a red background to the anchor to check it out.

Any idea how to make this work?

Thanks,
Miguel

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.

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?

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

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

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>

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

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

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 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;

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?