|
CSS - Contextual Selection Using Pseudo Elements
If i have the following html:
PHP Code: <div id="centre"> <h2>Header</h2> <p>Lorem ipsum appareat definiebas has eu. Eam consul ancillae ex.</p> <p> Sumo percipit instructior te mei. Est diceret convenire periculis ad, id vix facilisis sadipscing.</p> <p>Ei per aeque petentium tincidunt, posse inimicus ad sit.</p> </div> I want to select the first letter within the first <p> element, I've tried to do it using double pseudo-elements: PHP Code: div#centre p:first-child:first-letter { etc. } But this obviously won't work, because the <p> ain't first. I realise that i could do it very simply by just giving the first paragraph a class, but the use pretty much requires contextual selection, It seems the equivalent of second:child (which is what i want) will be available in css3, Even ideas would be great, Cheers Similar TutorialsHi, I can't seem to get this to work, I was wondering if anyone else has done it. I'm trying to get a :hover and :active pseudo-class to work in Explorer. I got something like this: Code:
<!--Base INPUT style def. All input classes inherit these attributes
though none use this style directly.-->
INPUT
{
background-color: #ffffff;
color: #000000;
etc...
}
<!--Specific class, inherits from base and applies specific traits-->
INPUT.underBlack1
{
border-style: solid;
border-color: #000000;
border-bottom-width: 1px;
border-top-width: 0px;
etc...
}
<!--Pseudo-class: highlights on hover-->
<!--(Doesn't work)-->
INPUT:hover
{
background-color: #fdfddf;
}
<!--Another try at a pseudo-class: also doesn't work-->
INPUT.underBlack1:hover
{
background-color: #fdfddf;
}
Do elements other than anchors and such not behave well with pseudo classes? I can't seem to get any kind of css pseudo-class behavior out of input elements in MSIE 6, WinXP. -Mike I took an example from w3.org (shown below) and it doesn't work. From http://www.w3.org/TR/css3-content/ Quote: 4.2.2. Inserting multiple '::before' and '::after' pseudo-elements In contrast with the previous section, the selector '::before(2)' represents a pseudo-element before another, both of which are contained at the start of an element. For example, the following rules: div { content: 'A' } div::before { content: 'B'; } div::before(2) { content: 'C'; } ...would result in the following rendering objects: ,-----------------------. | ,---. ,---. | | | C | | B | A | | `---' `---' | `-----------------------' The '::before' selector is exactly equivalent to '::before(1)'. A pseudo-element only exists if all the elements and pseudo-elements leading up to it exist. For instance, in the following example, only one pseudo-element is generated, the first one: div { content: 'A' } div::before { content: 'B'; } div::before(2) { content: inhibit; } div::before(3) { content: 'C'; } It would result in the following rendering objects: ,-----------------------. | ,---. | | | B | A | | `---' | `-----------------------' So my code is Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Page</title>
<style type="text/css" media="screen">
div { content: 'A' }
div::before { content: 'B'; }
div::before(2) { content: 'C'; }
</style>
</head>
<body>
<div>Test Div</div>
</body>
</html>
And the output is "BTest Div". Firefox error console comes up with Quote: Warning: Function token for non-function pseudo-class or pseudo-element, or the other way around, when reading 'before'. Ruleset ignored due to bad selector. Line: 10 I get a similar error when I validate it with W3.org using CSS level 3 Quote: 10 div Parse Error div::before(2) { content: 'C'; } I just find it odd because I copied the example off of their site and then when I validate it the code comes back as invalid. Any ideas? Hi, Tried using Pseudo Elements to set style property for first character (first-letter) and first line (first-line) inside an element. Every thing works fine when we set such styles on div or table elements, but failed on anchor tags Working on Code: <style>
div:first-letter{font-weight: bold;}
</style>
<div>
Pseudo Div<br>
Line Two<br>
Line Three<br>
</div>
Failed On Code: <style>
a:first-letter{font-weight: bold;}
</style>
<a href="">
Pseudo Div<br>
Line Two<br>
Line Three<br>
</a>
Can anyone give me the solution for this. Thanks in advance! I have three INPUT elements in a row and I want to apply different formatting to the second two. I know I can use: input+input { } This affects all but the first of the INPUT elements, which is exactly what I want. However, this works only with NS/Mozilla, and not MSIE. There is a way to apply CSS based on words within the value of the element, but I'm not sure how it works. For instance in the code: <INPUT type="submit" name="Submit" value="Browse"> I think there's a way to say "apply this style if the word 'BROWSE' is present in the element", but I can't make it work. Also, I know I can apply a CLASS to the element, but I'd like to not touch the HTML and use strictly CSS if possible. Can anybody help with this? Thanks. Hello everyone. I would like to make a layout that fills the entire window but not more. The content of the page i want to display in a container that is always on a certain distance from the window border. I came up with this code which works perfectly in FF but not in IE. html4strict Code: Original - html4strict Code <html> <head> <title>layouttest</title> <style type="text/css"> body { margin: 0px; } table { empty-cells: show; } #container { position: absolute; top: 38px; bottom: 27px; left: 161px; right: 19px; overflow: auto; background: maroon; } </style> </head> <body> <table cellspacing="0" cellpadding="0" style="height: 100%; width: 100%;"> <tr> <td style="width:142px;height:100%;" bgcolor="green"></td> <td style="height:100%;" bgcolor="blue"><table width="100%" height="100%" cellspacing="0"> <tr><td colspan="3" style="height:37px"></td></tr> <tr> <td style="width:16px;"></td> <td bgcolor="red" valign="top" style="overflow: hidden;"><div id="container"> adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br /> adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br /> adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br /> </div></td> <td style="width:16px;"></td> </tr> <tr><td colspan="3" style="height:26px"></td></tr> </table></td> </tr> </table> </body> </html> <html> I have looked through various threads here and found a lot of ideas for making it work in IE but it never did. So if you could help me with this i would be very thanksful. thx - HoB Is it possible to inline a :hover... something like this: <a href="loc" style="color: blue;" style:hover="color: red;">Click here</a> Now that in particular doesn't work, but can you do something like that by editing the style=""? (I know it's best to just have a separate css file. I'm just wondering if it can be done) I've got a form that I'm trying to lay out. I've prepared examples. http://www.dollardns.net/devshed/example1.html This is approximately what the form should look like. But I don't like how I managed to pull it off. I've explicitly declared a height for the middle row in my form. I want this to be automatic based on the contents. http://www.dollardns.net/devshed/example2.html But this is what happens if I take out the explicit height. The float lefts for the inner "box"es confuse the parent div into thinking it has no content. So the height collapses, and chaos results. http://www.dollardns.net/devshed/example3.html I've also tried making the "box"es use a display of "inline". But that doesn't work possibly cause inline elements are not supposed to contain block elements. Any recommendations? Does anybody know how to simulate the :after pseudo-element for msiepc? I want to add a small image icon on at the end of a regular anchor tag which MUST stay as an inline element and therefore can't use a background image to accomplish this (as this doesn't work over multiple lines in ie.) More specifically. Does anybody know a reliable cross-browser way of adding a small image (such as an arrow) to the end of an <a> tag that wraps over multiple lines? Cheers dudes I've run into a situation that I've never encountered before. I want to add em dashes to the content of my pseudo-classes, but apparently it isn't working. I'm using regular hyphens for now, like so: Code: #secondary h2:before {content: "- "}
#secondary h2:after {content: " -"}
I've tried the hex and dec values for the em dash, and those don't work either. Is there something easy that I'm missing, or is this a limitation of these pseudo-classes? Thanks for your time. Hi I've got a bit of a problem. I am making a website and what I want to do is create links with block background showing an image, which changes to just pink on a mouse over. what I did was make a div, give it classname menu_items and in that div put different hyperlinks. my code: Code: /* Menu picture caption */
.menu_items a { display: block; color: #FFF; background-color: #FF0066; text-decoration: none; padding: 5px; position: absolute; }
#menu_0910_dg000 { background-image: url('img/0910_dg000.jpg'); height: 90px; width: 140px; top: 100px; left: 0px; font-size: 12pt; }
#menu_0910_dg000:hover { background-image: none; color: #FFF; }
#menu_0910_dg601 { background-image: url('img/0910_dg601.jpg'); height: 90px; width: 140px; top: 100px; left: 150px; font-size: 12pt; }
#menu_0910_dg601:hover { background-image: none; color: #FFF; }
#menu_0910_dg200 { background-image: url('img/0910_dg200.jpg'); height: 90px; width: 140px; top: 100px; left: 300px; font-size: 12pt; }
#menu_0910_dg200:hover { background-image: none; color: #FFF; }
#menu_0910_elderly { background-image: url('img/0910_elderly.jpg'); height: 90px; width: 440px; top: 0px; left: 0px; font-size: 18pt; }
#menu_0910_elderly:hover { background-image: none; color: #FFF; }
#menu_0910_demos { background-image: url('img/0910_demos.jpg'); height: 90px; width: 890px; top: 200px; left: 0px; font-size: 20pt; }
#menu_0910_demos:hover { background-image: none; color: #FFF; }
Code: <div class="menu_items"> <a id="menu_0910_dg000" href="0910_elderly.html">Assignment: DG000 Introducing Competency-Centred Learning </a> <a id="menu_0910_dg601" href="0910_elderly.html">Assignment: DG601 Digital Video</a> <a id="menu_0910_dg200" href="0910_elderly.html">Assignment: DG200 Creative Programming for Designers</a> <a id="menu_0910_elderly" href="0910_elderly.html">Project: Elderly Interacting with the Digi-world</a> <a id="menu_0910_demos" href="0910_elderly.html">External: Demos Bar Committee</a> </div> You can see that I first used the nested selector .menu_items a, but this doesn't work with hover, so .menu_items a:hover doesn't work. Why not and how to fix?:S gr Bram I have another problem with IE for Windows: I have several links which should not appear as links but should inherate the colors (grey or black) and decoration (none) from their parents ... works fine every where except MSIE for windows (where the usual red and blue - but no underline - appear) the relevant styles: <style type="text/css"> a:link { text-decoration: none; color: inherit; } a:visited { text-decoration: none; color: inherit; } </style> the relevant html: <h3 style="padding: 0; margin: 0.25em;color:#000000; ">Some <a href="http://www.theDanceGypsy.com/danceFinder.shtml" target="viewFrame">Dance Events</a> near you:</h3> <ul class="newsList"> <li><a href="http://www.thedancegypsy.com/danceList.php?dance=dance-26:6-4" target="viewFrame"><span class ="unconfirmed">6/25: Bernardston~ <cite>Eastern Squares</cite> </span></a></li> <li><a href="http://www.thedancegypsy.com/danceList.php?dance=dance-30:6-4" target="viewFrame">6/26: Brattleboro~ <cite>Paneurhythmy</cite> </a></li> anyone have any idea for a workaround? Thanx Forgive the subject, I'm not sure how to describe this oddity. This seems to only happen in IE, test with this snippet: Code:
<style>
a:hover span { color: Green }
</style>
<a href="#"><span>link</span></a>
One would expect the text to turn green when hovering, but it doesn't. Works fine in other browsers as it should, but not in IE. However, if you add any valid style, regardless of function, to the bare :hover pseudo-class of the anchor, it works fine. For example, this doesn't change the theoredical function at all: Code:
<style>
a:hover { visibility: inherit }
a:hover span { color: Green }
</style>
<a href="#"><span>link</span></a>
But now it works fine in IE. It doesn't recognize the psuedo-class as a parent unless there's an explict valid style for the item itself. Order doesn't appear important. I guess I'm posting in part as a PSA and just to have this odd behavior confirmed by third parties. I've done a lot of reading on IE bugs and don't recall seeing this come up. It probably stems from the lack of :hover support for non-anchor tags. Confirm/deny/comment? Hey guys. I'm still learning css so excuse some crude styles. I don't know how to explain this so grap IE 6 and click here. Scroll down the links on the left until you get to the last one "Printable Pics." As you can see for some reason the last two links jump down the page and a big blank spot appears in it's place when you hover your mouse over it. It doesn't do that in firefox or opera so I don't know whats' going on. Heres my CSS: Code: body {
text-align: center;
height: 100%;
background-image: url(images/bg_title.gif);
}
img {
border: none;
}
#wrapper {
width: 780px;
height: 100%;
margin: 0 auto;
text-align: left;
position: relative;
background-color: #FFFF7D;
color: #000000;
border: solid 2px #0000ff;
}
#header {
width: 780px;
height: 143px;
margin-bottom: 3px;
}
#headerImage {
width:200px;
float: left;
margin-right: 2px;
}
#headerImage img {
margin: 0px;
}
#headerLogo {
width: 577px;
float: left;
margin: 0px;
}
#headerLogo img {
margin: 0px;
}
#navagation {
width: 204px;
margin-bottom: 1px;
float: left;
margin-right: 1px;
}
.navIcon {
float: left;
margin-right: 2px;
margin-bottom: 1px;
padding: 0px;
}
.navButton {
float: left;
margin-bottom:1px;
padding: 0px;
}
a.navButton:link {
border: none;
}
a.navButton:visited {
border: none;
}
a.navButton:hover {
border: 1px solid #000000;
}
#mainContentArea {
float: left;
width: 570px;
height: 711px;
border: solid 1px #000000;
background-color: #ffffff;
margin-bottom: 3px;
}
#footer {
height: 1px;
margin-top: -1px;
clear: both;
overflow: hidden;
}
Thanks in advance! -Tim Hi, I have a series of images that act as hyperlinks to other pages. I want the image border to initially be set to none, but when I rollover the image I want it to turn white, 1px wide. Tried doing this with normal link styles, but it ain't workin. So how do you do this? Thanks mM Hello all, I'm having a bit of trouble with a list of relative, floated <li> elements, each containing a single absolutely positioned div that appears on hover. I'm using the :hover pseudo-class currently but I will use JavaScript for IE6 once it displays correctly. The code is below. The problem is that the <div> appears on top of it's parent element but behind all other elements. Code:
#wrapper-body ul.staff-list{
list-style-type:none;
padding-top:10px;
position:relative;
}
#wrapper-body ul.staff-list-team{ width:313px; padding-top:0; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d7e3a9; }
#wrapper-body ul.staff-list li{
float:left;
width:230px;
position:relative;
padding:8px 0 8px 15px;
z-index:1;
}
#wrapper-body ul.staff-list-team li{ width:151px; padding-left:0; padding-left:5px; }
#wrapper-body ul.staff-list-team li.right{ padding-left:5px; }
#wrapper-body ul.staff-list-clerks li{ float:none; width:310px; padding-left:5px; }
#wrapper-body ul li.highlight{ background-color:#f4f6ec; }
#wrapper-body ul.staff-list li p{
padding:0 0 9px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list li small{
padding:0 0 5px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list-clerks li span{
color:#A6302B;
display:block;
float:left;
}
#wrapper-body ul.staff-list-clerks li span.clerk-name{ width:140px; }
#wrapper-body ul.staff-list-clerks li span.clerk-phone{ width:120px; background:url(../img/structure/clerks-phone.gif) 0 2px no-repeat; padding-left:23px; }
#wrapper-body ul.staff-list-clerks li a.clerk-email{ display:block; float:left; height:16px; width:16px; background:url(../img/structure/clerks-mail.gif) 0 3px no-repeat; }
#wrapper-body ul.staff-list li div.staff-list-detail{
display:none;
background:url(../img/structure/staff-list-bottom.gif) left bottom repeat-x;
padding-bottom:3px;
margin-top:-15px;
left:4px;
z-index:10;
top:15px;
position:absolute;
}
#wrapper-body ul.staff-list li div.staff-list-detail a{ background:url(../img/structure/staff-list-bullet.gif) no-repeat 0 4px; padding-left:8px; }
#wrapper-body ul.staff-list li:hover div.staff-list-detail{
display:block;
}
An image of what is happening below: Thanks for reading! Using the following example: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
a
{
display: block;
}
a.one.on, a:hover.one, a:hover.one.on
{
color: red;
}
a.two.on, a:hover.two, a:hover.two.on
{
color: orange;
}
a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
</style>
</head>
<body>
<a href="#" class="one">one</a>
<a href="#" class="two">two</a>
<a href="#" class="three">three</a>
<p> </p>
<a href="#" class="one on">one</a>
<a href="#" class="two on">two</a>
<a href="#" class="three on">three</a>
</body>
</html>
Notice how, in IE6 (works fine in FF), when the secondary style named 'on' is added, all 3 links in the 2nd set display the properties of the style: Code: a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
(since it is last in the list) rather than the style specified by their respective numbers (i.e. 'one', 'two' or 'three'). Is there a way to overcome this in IE. I've recently tried to make it so that when you hover over something, another background appeared, and when I tried that, I already had a working Selected Page background, which stopped working when the hovering one was implemented. The code is: ul#menu li a:hover { color: #FFF; background: #0066CC url(menu_hover.png) repeat-x;} ul#menu li.selected a, ul#menu li.selected a:hover { color: #FFF; background: #1C2c3E url(menu_select.png) repeat-x:} I am quite new to css and wandering how I can add my Stylesheet selection on the page to a dropdown list so the user can choose his/her theme. I have the coding worked out for stylesheet selection and cookies saving and stuff just need help on how to display the 3 themes in a dropdwon list instead of 3 merged links on screen. On my main page atm I have the code: Code:
<?
include('includes/stylearray.php');
?>
<?
// WRITE OUT SWITCHER LINKS
while(list($key, $val) = each($styleSheets)){
echo "<a href='styleswitcher.php?SETSTYLE=".$key."'title='".$val["title"]."'>".$val["text"]."</a>";
}
?>
but this just lists them as 3 links, I need them in a dropdown list but cant seem to format it right to do that. Can anyone point me in right direction about splitting up that setstyle php bit into dropdown list instead of 3 ugly links? the code below draws a nice hairline textbox <input type='text' name='name' style="border:1px solid black; font-size: 10px; font-family: arial"> the colde below draws a nice hairline texarea <textarea name='msg' rows='10' cols='40' style="border:1px solid black; font-size: 12px; font-family: arial"> but the code below doesn't change anything <select name='sel' style="border:1px solid black; font-size: 10px; font-family: arial"> <option value='1'>first</option> <option vakue='2'>second</option> </select> Is there a way to remove this ugly shade from a selection menu as it exists for textboxes and textareas? Thanks for your help! So, I'm pretty new to all this, and any help is really key. So, on my site, I have a lot of rollover images. I may be breaking usability rules! The site has a lot of hand drawn elements that are supposed to act as nav. So, we implemented hand drawn nav that changes color when you rollover it. The problem is that when you click on those rollovers, a big dotted box appears around the selected one... it looks especially tacky if you don't go over to the next page. All of these elements have this box. Is there a way to tell the browser not to show that selection box?? |
|||||||