|
CSS - Style To Option Value
Hi guys,
This has been driving me crazy for the past couple of hours which leads me to the conclusion that this is a bug. The code is self explanatory, any ideas why it will not work: <option value="images.php?vidno=1"><span style="color:#ff0000;">Title:</div>XYZ Thanks in advance, Rob. Similar TutorialsHello All, following is my code Code: <html>
<head>
<style type="text/css">
.test {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #ff0000;
font-weight: bold;
}
</style>
</head>
<select name="slt" >
<option class="test">value1</option>
<option>value2</option>
<option>value3</option>
</select>
</html>
In the above code i am trying to apply style for first option i got the color for first option but not the size and weight. The font-size and font-weight attributes are not applied.... can some one help me out in this... Please help me ASAP Thanks in Advance Ramesh 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! ok hi, i making this site with a background that's 100% height and 10 px padding on both sides....below is another background of 100% height i cant get this to work in Firefox and opera...if i put 100% height from html down to the backgrounds...they stay at 100% viewport if content is longer then that. if i leave height then they just stay small if content is. if i put min-height:100% it works on 1 background but the next 1 doesnt work unfortunately... so if i can get this to work with a table would it be bad side effects on my page or something? if so...you know a different option to solve this? thanks in advance Hi, I am trying to format my forms option tags inside a select list (basically I want to create something like the quick forum jump on devshed). In my css is: PHP Code: SELECT.quickselect { background-color: #ffffff; width: 250px; height: 20px; font-family: verdana, arial, 'times new roman'; font-size: 10px; } OPTION.quickselectmain { font-weight: bold; color: #6D9500; background-color: #F2F2F2; } OPTION.quickselectsub { color: #595959; } And in my HTML is: Code: <select name="quickselect" class="quickselect"> <option name="Antiques" value="5" class="quickselectmain">Antiques</option> <option name="Antiques - Decorative" value="32" class="quickselectsub">Decorative</option> How come I cant apply any formatting to the option tag? currently i am trying to get my navigation to line up in IE, works great in FF... currently i have something that kinda works... Code: * html #navigation {
margin-top:-24px;
}
but it has fatal flaws.. is there any setting i can flick on to get IE to look like FF... here is the link.. Navigation Menu Issues in IE also, for some reason there is a wider gap on the right of the login boxes then in FF... i could define a * html code for it, but would rather not. Hello first of all I'm new here Well I have a linked css file where I define some basic style for <a> tag. But there are some <div> where I want to override the basic <a> defines and I have no idea how. Here is what I mean: Code:
a{
color: #ffffff;
}
.someDivClass{
..some defines..
But here I also want to make <a>'s color red for example.
}
Hope you understood me Thanks a lot. Hi guys, I've trawled the web for this query and have found many solutions, some work, some do not. Some are quite complex, some are fairly simple. I haven't quite found a technique I'm happy with just yet - or that I can get to work properly. Please download the attached .zip and open the index.html in a browser. Basically, that page will show a big main div tag container with 6 smaller divs within it, containing different sized backgound images, with text. I would like the text to be right aligned (which it is)... but also vertically aligned in the middle (and here lies the problem). With table cells it was easy, you aligned items right : middle. Not quite so easy with divs.... grrrrr.... they really shoulda sorted that aspect out ! Nevermind. I've written down the Background pixel heights of the images to save people time - as I suspect the solution may lie with something to do with calculating the heights of the div tags (?) If someone could perhaps jiggle the code and CSS a bit to help create the perfect, working vertically-aligned solution that'd be great - and then paste up either the full HTML code or full CSS code, or both please.... thanks a lot ! Cheers, Andy Whats the best way to align text in select option drop downs that works also in I.E. 6 and 7 as well Thanks having a problem ;-) Why else post here right ?? well please have a look at http://www.furastadesigns.com/kfn/ using firefox,, see the pulldowns ? they are correctly sized when the pulldown is dropped. But in Explorer they are keeping the same size as the mainbox (not the pulldown) I tried controlling the option tag but using width:; but that works only in firefox. Any ideas on how to make the option (the pulldown list) bigger then the main box in firefox ??.. Thanks alot... Did a quick Google search and a search on this board.. but didn't find anything... so here's the question: Is it possible to use a low resolution version of a background image via CSS? In HTML it is like this... Code: <img src="Images/Layout/Header.jpg" lowsrc="Images/Layout/lowRes/Header_lowRes.jpg"> And the CSS I am using is this: Code:
#pageHead {
background: #FFFFFF url(../Images/Layout/Header.jpg) center top no-repeat;
}
Is there a tag to add a low res version of the BG image? Thanks in Advance! I have a page where the <select> is very screen right. it has little room to show the full name in the <option> so i do like "S - Summary". You only end up seen the S. When the dropdown happens, my clients wants to see the whole name. This works in FF, but not IE. Can i via CSS control the location of the options. Say move them left 50px. Thanks. Okay, so I'm having a little bit of a problem with setting the background color through an onClick event on an option tag. Here is what I mean. Code: <div id = "move">
<form name = form2>
<span style="float:left;">
<select name= theDay size=1>
<option value=0 selected>Default [themes]
<option value=1>White</option>
<option value=2 onClick = "red()">Light Blue</option>
<option value=3>Aqua
<option value=4 value = "document.body.style.backgroundColor= '#98AFC7';">Lighter Blue</option>
<option value=5 onClick = "document.body.style.backgroundColor= 'white';">Saturday</option>
<option value=6 onClick = "document.body.style.backgroundColor= 'white';">Sunday</option>
</select>
When I click one of the options, nothing changes, although I set the body.style.backgroundColor to register to a different color when the option tag is clicked. Any ideas? Hi friends, all good? It was wanting to make an equal thing of the image that I am placing To place option with these properties of the source and the size. Somebody would know as to make this? Sorry my English Thanks Code:
<form action="">
<div>
<select id="about_menu" name="about_menu"
onchange="window.location.href=this.form.about_menu.options[this.form.about_menu.selectedIndex].value;"
title="Go to About pages">
<option value="">About</option>
<option value="http://myblog.com/about-the-blog/">About The Blog</option>
<option value="http://myblog.com/welcome/">Welcome</option>
</select>
</div>
</form>
I use <option value="">About</option> as self labeling. I would like the width of the form to be so that there won't be a blank after About even if other options are longer. The issue is that About is going to be translated in several languages and thus I can't rely on a determined value for the width. on my site I have a list with the UL Class of threads. I am not good with CSS at all I have this Code:
#threads {
padding:0;
margin:0;
}
#threads li {
list-style:none;
border-bottom:1px dotted #ccc;
display:block;
padding:2px 0px 2px 13px;
background:url(images/sub.png) no-repeat 0 0px;
}
not doing what I want, my site is mypricesavings(dot)com you can see the list on the homepage under Recent Activity, I'd like to make it so that the avatars line up on top of each other and a line between each one like the featured section located on this site, however, without the scrolling. http://demo.colorlabsproject.com/?theme=arthemia-premium thank you for attempting Hello, In the css below, why I can't set it on the same time? Code:
background: #FFF url(../images/main_bottom.gif) no-repeat bottom ;
background: #FFF url(../images/main_top.gif) no-repeat top ;
I did a web page for a company and it looks fine in ie7 where I tested it. The problem is when viewed in IE6 its like it ignores the sizes I put in. The box appears too big in IE6 and is the propr size in IE7. Is there any way to fix it so it would look the same in IE6 as IE7? I was reading a tutorial were they always style both <tr> & <td> with the same thing... Is this needed? Or do you just need to style <tr>? Code:
table.navigation tbody tr.odd {
background: #252525;
color: #fff;
}
table.navigation tbody tr.odd td {
background: #252525;
color: #fff;
}
How would you go about creating a navbar like the one Red cross uses on the left side for generic website mapping? Red Cross Example Is this pure css with dual images? Or is this done with some effect with other forms of CSS (or even DHTML?) |
|||||||