|
CSS - <select> Tag Ignores Css?
Why <select> tag ignores my CSS settings for border color, instead it renders XP default?
I have external CSS file and I assign specific class to <select tag> wich contains: border: 1px solid #545454; it works well on all form fields except <select>. Help? Similar TutorialsI 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 my HTML code: Code: <input name="search" type="text" id="search" size="35" /> CSS: Code: input {
padding:5px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
^ padding around the textfield supposed to show. It does show up in Opera but not in Internet Explorer. Then I tried this: Code: <input name="search" type="text" id="search" size="35" class="forms"/> Code: .forms {
padding:5px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
still nothing. Works fine in Opera, but Internet Explorer seems to be ignoring it. what's the problem? I'm using IE 7 btw Firefox ignores the white background in the "main" <div> in the following, but IE, Opera and Safari/Win all display the white background. Is this a firefox bug, or am I missing something here? Note: The z-indexes are for when the "main" div is scrolled... Also note: I am making the <body> tag relatively positioned because otherwise, Firefox (apparently) treats the viewport as the parent to the absolute-positioned element. In that case, it renders the white background until the bottom of the window, but reverts back to black "below the fold" because bottom: 0 is interpreted as the bottom of the window. Code:
<html>
<head>
<style type="text/css">
body {background: black; color: silver; position: relative}
div#header {position: fixed; top: 0; left: 20%; height: 80px; z-index: 2; right: 0; background: gray; margin-bottom: 2px; color: yellow}
div#sidebar {position: fixed; top: 0; bottom: 0; left: 0; right: 80%; background: silver; margin-right: 2px; color: maroon}
div#main {position: absolute; top: 80px; left: 20%; right: 0; bottom: 0; background: white; color: red; z-index: 1}
</style>
</head>
<body>
<div id="header">
<h1>header</h1>
</div>
<div id="sidebar">
sidebar
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
<div id="main">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque rhoncus metus eget purus pellentesque auctor. Aenean dui mauris, eleifend sed, ultricies eget, commodo in, neque. Integer quis orci. Vivamus a diam sit amet nisl adipiscing aliquet. Nullam nisl justo, accumsan eu, blandit at, vehicula ut, leo. Sed porttitor tellus auctor lectus. Curabitur congue libero. Proin suscipit quam id felis. Aliquam hendrerit ligula in mauris. Quisque non eros a velit dictum ornare. Donec viverra dolor eu felis. In hac habitasse platea dictumst. Suspendisse tristique accumsan justo. Sed faucibus elit quis lacus.
</p><p>
Nullam commodo. Vivamus lobortis nibh nec dui gravida pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis posuere, metus et porta dictum, felis quam ullamcorper quam, ac ultrices mauris nisi et odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc interdum bibendum velit. Integer viverra laoreet justo. Vestibulum bibendum ante nec dui. Nunc congue iaculis enim. Proin suscipit, lacus dignissim tempus sagittis, lacus libero bibendum velit, lacinia porttitor turpis ante sit amet neque. Nulla facilisi. Quisque rhoncus leo eu sem. Aenean sed tellus. Pellentesque pellentesque mollis diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc feugiat est at nunc.
</p><p>
Donec hendrerit sapien. Donec sodales, mauris eu gravida eleifend, nisi nunc elementum augue, vel ullamcorper augue dolor vel lorem. Donec hendrerit ante non nisi. Proin feugiat, eros sit amet scelerisque cursus, tortor eros viverra nunc, vel tincidunt sem erat nec nisi. Sed adipiscing nisl vitae enim. Nulla odio mauris, eleifend ut, dictum ac, tristique et, felis. Donec nec eros. Suspendisse potenti. Integer ac orci. Nunc sapien nisl, fringilla at, elementum at, mattis vel, magna. Vestibulum congue. Sed at mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec metus vel lorem vulputate sagittis. Aliquam leo ipsum, semper vitae, malesuada id, suscipit quis, odio.
</p><p>
Maecenas semper hendrerit arcu. Suspendisse vulputate magna eu velit. Aenean venenatis nulla eget urna. Fusce diam orci, tincidunt ac, auctor et, condimentum sit amet, elit. Vivamus mollis. Nam sagittis odio vel lectus. Nam faucibus arcu in magna. Maecenas eget mauris vel justo feugiat iaculis. Suspendisse ut massa. Integer nulla magna, interdum ut, fringilla quis, ultrices malesuada, purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam iaculis sagittis eros. Nam nec tellus. Donec aliquam tortor ut metus. Aenean ligula ligula, auctor nec, luctus sed, sodales id, ante. Ut nec tellus vitae elit tristique vulputate. Cras suscipit tortor et diam. Phasellus vestibulum. Phasellus vestibulum eros sit amet ante.
</p><p>
Donec sodales pharetra ligula. Ut porta. Nulla facilisi. Donec nunc libero, nonummy sit amet, dapibus ut, eleifend sit amet, tellus. Donec blandit, lorem vitae malesuada pulvinar, massa nunc pharetra lacus, non lobortis tellus sem a odio. Ut sed leo. Etiam gravida mi nec nunc. Vivamus scelerisque lorem id magna. Aliquam ipsum est, aliquam eu, tristique a, fermentum nec, eros. Curabitur sed orci. Mauris orci nisl, molestie eu, rhoncus quis, condimentum a, nibh. In hac habitasse platea dictumst.
</p><p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque rhoncus metus eget purus pellentesque auctor. Aenean dui mauris, eleifend sed, ultricies eget, commodo in, neque. Integer quis orci. Vivamus a diam sit amet nisl adipiscing aliquet. Nullam nisl justo, accumsan eu, blandit at, vehicula ut, leo. Sed porttitor tellus auctor lectus. Curabitur congue libero. Proin suscipit quam id felis. Aliquam hendrerit ligula in mauris. Quisque non eros a velit dictum ornare. Donec viverra dolor eu felis. In hac habitasse platea dictumst. Suspendisse tristique accumsan justo. Sed faucibus elit quis lacus.
</p><p>
Nullam commodo. Vivamus lobortis nibh nec dui gravida pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis posuere, metus et porta dictum, felis quam ullamcorper quam, ac ultrices mauris nisi et odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc interdum bibendum velit. Integer viverra laoreet justo. Vestibulum bibendum ante nec dui. Nunc congue iaculis enim. Proin suscipit, lacus dignissim tempus sagittis, lacus libero bibendum velit, lacinia porttitor turpis ante sit amet neque. Nulla facilisi. Quisque rhoncus leo eu sem. Aenean sed tellus. Pellentesque pellentesque mollis diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc feugiat est at nunc.
</p><p>
Donec hendrerit sapien. Donec sodales, mauris eu gravida eleifend, nisi nunc elementum augue, vel ullamcorper augue dolor vel lorem. Donec hendrerit ante non nisi. Proin feugiat, eros sit amet scelerisque cursus, tortor eros viverra nunc, vel tincidunt sem erat nec nisi. Sed adipiscing nisl vitae enim. Nulla odio mauris, eleifend ut, dictum ac, tristique et, felis. Donec nec eros. Suspendisse potenti. Integer ac orci. Nunc sapien nisl, fringilla at, elementum at, mattis vel, magna. Vestibulum congue. Sed at mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec metus vel lorem vulputate sagittis. Aliquam leo ipsum, semper vitae, malesuada id, suscipit quis, odio.
</p><p>
Maecenas semper hendrerit arcu. Suspendisse vulputate magna eu velit. Aenean venenatis nulla eget urna. Fusce diam orci, tincidunt ac, auctor et, condimentum sit amet, elit. Vivamus mollis. Nam sagittis odio vel lectus. Nam faucibus arcu in magna. Maecenas eget mauris vel justo feugiat iaculis. Suspendisse ut massa. Integer nulla magna, interdum ut, fringilla quis, ultrices malesuada, purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam iaculis sagittis eros. Nam nec tellus. Donec aliquam tortor ut metus. Aenean ligula ligula, auctor nec, luctus sed, sodales id, ante. Ut nec tellus vitae elit tristique vulputate. Cras suscipit tortor et diam. Phasellus vestibulum. Phasellus vestibulum eros sit amet ante.
</p><p>
Donec sodales pharetra ligula. Ut porta. Nulla facilisi. Donec nunc libero, nonummy sit amet, dapibus ut, eleifend sit amet, tellus. Donec blandit, lorem vitae malesuada pulvinar, massa nunc pharetra lacus, non lobortis tellus sem a odio. Ut sed leo. Etiam gravida mi nec nunc. Vivamus scelerisque lorem id magna. Aliquam ipsum est, aliquam eu, tristique a, fermentum nec, eros. Curabitur sed orci. Mauris orci nisl, molestie eu, rhoncus quis, condimentum a, nibh. In hac habitasse platea dictumst.
</p>
</div>
</body>
</html>
Hi, does anyone know the CSS to change the font and background colour on a select box. My code doesn't work and ive tried without luck searching the net for the solution. This must be really simple. Hydroderm hi guys, newbie here. first of all I am no master in HTML or CSS, my main background are non-web, but I've been thrown in at my work to help with this problem they have had for a while, I've progressed it further than most have, but right now I am stuck. I've been handed a half done task and asked to fix it, obviously some of you may know the problems of trying to fix other peoples problems but I hope you can do it for me. More or less, what I have is a stylesheet to help output invoice data, all of the data is being output correctly, apart from the one table in the invoice which has multiple records to go into it For example; QUANTITY ----------- 2 3 4 etc. What I am currently getting, is the code is pulling all the records, and displaying them in the one cell of the table, getting QUANTITY ---------- 234 I need some way to split it up, I'll show you the code I have. ORIGINAL CODE I WAS GIVEN Code:
<xsl:for-each select="key('DATA',C[6])">
<tr class="style16">
<td class="style16"> <xsl:value-of select="C[27]"/></td>
<td class="style16"> <xsl:value-of select="C[28]"/></td>
<td class="style16"> <xsl:value-of select="C[29]"/></td>
<td class="style16"> <xsl:value-of select="C[30]"/></td>
<td class="style16"> <xsl:value-of select="C[31]"/></td>
<td class="style16"> <xsl:value-of select="C[32]"/></td>
<td class="style16"> <xsl:value-of select="C[33]"/></td>
<td class="style16"> <xsl:value-of select="C[34]"/></td>
<td class="style16"> <xsl:value-of select="C[35]"/></td>
</tr>
I've seen made it more consise Code:
<xsl:for-each select="key('DATA',C[6])">
<tr class="style16">
<xsl:for-each select="C[position() >= 27 and position() <= 35]">
<td class="style16"> <xsl:value-of select="."/></td>
</xsl:for-each>
</tr>
does anyone have any ideas as to how I can take the seperate records from the database, and output them into rows each? Apoligies if this is vague... Hello, I am trying to style my form inputs, textareas and selects as follows: input, select, textarea { border: solid 6px #ECF0F9; color: #252525; font: normal 0.75em Verdana, Geneva, sans-serif; padding: 0.25em; width: 520px; } I am having a few problems: Firefox 3: 1. The select is narrow than the inputs and textareas; 2. When I click the select the dropdown borders look different ... some are thinner than others. IE 7: 1. The select is narrow than the inputs and textareas; 2. The border of the select is not changed. What am I doing wrong and how can I make the appearance of a Select look the same across various browsers? Can I do this with JQuery? Thanks, Miguel how can a ouline be drawn around a select /dropdown box? i tried the following code n it dint seem to work.Any other solution for drawing a border/outline around select box. <select name="sample" style="font-size:9px;font-face:verdana;width:130px;margin-left: 2cm;border: 2px solid red"> Hi all, I've got a drop down box (select box) inside an element in a table. How can I get the width of the drop down to expand to fill the size of the table element? i.e. I have: | <DROP DOWN> | but want | < DROP DOWN > | Also, is it possible to change the height of a drop down? Thanks, John. Hi am looking for help changing a form select box with css. I am trying to get the select box in line with the rest of the scroll boxes and arrows on my site.... http://www.peteromoore.com/site3/brochure.htm is there any way to change the select box arrow to match the arrow beside it??? any help would be appreciated. I am trying to set a background image to the select tag of a form, but its not working in IE, here is my css code: Code:
select {
width:116px;
background:url(../images/inputDropdown.jpg) no-repeat left top #333333;
}
any ideas on a fix for this??? thanks in advance! Hi, I am trying to create a combo box with horizontal scroller. i.e. Combo box will have a fixed width, if any of its options have higher text, then horizontal scroller should appear automatically. I also tried placing a <div> around <SELECT>. But not getting how to apply styles on it. Any suggestions will be helpful. Thanks Hello! I have a little bit of a problem. I'm trying to create a drop down with a fixed width, but have the options be a flexible width (in other words, it flexes with the content. It works just fine in Firefox and Chrome, but surprise, surprise, IE cuts it off. Is there anyway to trigger word break or something in IE? I tried a line break and that didn't work either. Thanks for any input! In my website (geotool.flagfox.net) I have a drop-down menu which allows people to change to locale of the website. If you look at this menu you can see that I have placed flags next to each country, but as I now have 35 different languages I don't really want to load 35 separate images (especially as most visitors never even look at this menu). Is there a way of using CSS sprites for this? I've made a small test website to make it easier to look at this: test.rleeden.no-ip.com. You can see that I can successfully use a CSS sprite image in the main body, but I've not been able to achieve the same affect in the select menu. Or alternatively somehow make it that the images are only downloaded if the menu is shown?? Any advice or help most welcome. Richard Hi, On all select drop down menus there is some padding around the text, if you go to www.a1-megastore.com you will see what I mean on the search at the top. Do you know how I can get rid of this? Ian I decided to remove all outlines from my website, so I added the following statement to my CSS file: Code: *
{
outline: none
}
However, in Firefox 2 (but not in IE7), the outline still surrounds the content of a <select> dropdown after a new option is selected. Is there any way to get rid of this outline? I know dropdowns are often part of the operating system so that there are additional restrictions on styling them, but I assume Firefox's dropdowns are not. I've already checked, and the outline property is not being set elsewhere in my code. Thanks for your help! Hello, I am trying to make a select box (align:left) with link text (align:right) inline. I don't know what the best method would be to do this. I tried using li but it doesn't seem to be working. It looks like it should be simple but for the love of me... it's not working. Can you please show me how? Hi all, I'm trying to get a pop up css based box (onClick is from an image) to display="none" when a user selects a value from a select box. I have a close link in the pop up, but I've been told that's not good enough..... I have been trying to get the onChange handler to work, but I can't seem to find the right way to access it properly.. If anyone has done something similar, can you please send me your code snippet or direct me to a tutorial that explains how to do this? I'm new to javascript so please be gentle. Oh I guess I should mention that there are around 100 of these boxes and the div id is being created dynamically with ColdFusion.... Thanks! Dave Hi. I have a form in a php script where among other fields the visitor picks a color from a select tag. I can manage the select list with the following code: <option style={background:red;} value=1>red</option> <option style={background:yellow;} value=1>yellow</option> ...and so on... but when I use the select to pick a color the browser highlights my selection using blue color. The problem is that this blue overwrites my color so the visitor can see all the other colors but not the one he is choosing ... Is there a way to control the highlighting color of the select tag? Sorry if this has been answered before... i couldn't find an answer... is there anyway to get the arrow out of the select box? so it just displays the text options and the pull down menu. the arrow sucks. i know you can adjust properties of the arrow, like color, but that does not interest me. any ideas? Hi, Is it possible to remove the border from a select box? Many thanks |
|||||||