CSS - Need Css Box To Close On Select Box Onchange

I've looked at other threads to figure out my problem. However, I didn't really find one that matched my tiny problem. But anyways...

I made this markup where the div tags change css attributes. Works nicely in Opera and Firefox (and other mozilla based browsers), but the evil IE yet ruinz my dreams.

The link to the problem is he

http://www.shockcannon.com/beta_test/fb/imagefx.php

Here is PART of the region where i want the effect to happen:

Code:

<div id="ToC">

<table width="390" border="0" cellspacing="0" cellpadding="0"><tr>
<td width="195 align="left valign="top">

<table width="195" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="2" valign="top" height="16">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="head1">Photoshop</span>
&nbsp;&nbsp;<a href="javascript: idget_alt('photoshop','show');">Show</a> | <a href="javascript: idget_alt('photoshop','hide');">Hide</a>

</td>
</tr>
<tr>
<td height="10" width="10">
<img src="../images/subheading/ball_01.gif" width="10" height="10" alt="">
</td>
<td height="10">
<img src="../images/subheading/ball_02.gif" width="100%" height="1" alt=""></td>
</tr>
<tr id="photoshop">
<td colspan="2" valign="top" class="sub_indent">

<a href="imagefx.php?file=PS_lightning"><div class="toc_sizer"><img src="imagefx/image_display/PS_lightning.gif" width="40" height="40" alt="" align="left" border="1" hspace="3"><strong>Storm Sky</strong><br>Create a electric storm in 5 easy steps.</div></a>

<div class="toc_sizer"><img src="imagefx/image_display/blank.gif" width="40" height="40" alt="" align="left" border="1" hspace="3"><strong>TV Scanlines</strong><br>Enhance your image by adding a TV-feel to it (FW version, as well).</div>

...and here is the css region:

Code:

/* Sub Atttributes */
.sub_indent {
   padding-left: 10px;
}
.toc_sizer {
   width: 195px;
   height: 55px;
}
#ToC strong { /* Table of content mini title colorer */
   color: #999966;
   font-size: 11px;
}
#ToC div { /* Table of content mini title colorer */
   color: #CCCCCC;
   border: 1px solid #333333;
   padding: 1px 1px 1px 1px;
}
#ToC div:hover, #ToC div.sfhover a { /* Table of content mini title colorer */
   background-color: #444444;
   border: 1px dotted #666666;
}

Any guesses? Thankz!

I need a popup auto close in 3 second to show result is true.
I try it in javascript,but no border is impossible in my ie8. I need it in css. Send me some solutions. THank all

I am using the code shown he http://webdesign.about.com/od/css/a/aa072406.htm

Code:

.container {background:#ccc; color:#fff; margin:0 15px;}
.rtop, .rbottom{
display:block;
background:#fff;
}
.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden;
background:#ccc;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{
margin: 0 1px;
height: 2px
}

Code:

<div class="container">
<b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b>
CONTENTS GOES HERE
<b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
</div>

the code works ok, but i would like it tweaked so the text is not so close the the egdes, the top and bottom seems ok but it is the left and right margins that are too close to the edges, can these inner margins be increased so the text is not so close?

thanks in advance for your help

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

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

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

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.

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

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?

hello guys! i have a form that contains a listbox, and am using IE6, and i put up a link to my external css file, but the appearance of listbox scroll bars didn't change, only the size of the font was changed, do i am missing something? or this is not possible to change the appearance of scrollbars for the listbox?

below is my HTML code:
PHP Code:
<html>

<head>
<title>Test Page</title>
<LINK href="styles.css" type=text/css rel=StyleSheet>
</head>

<body>

<form method="POST" action="test.htm">
    <p><select size="5" name="test">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
    <option value="4">four</option>
    <option value="5">five</option>
    <option value="6">six</option>
    <option value="7">seven</option>
    <option value="8">eight</option>
    <option value="9">nine</option>
    <option value="10">ten</option>
    </select><input type="button" value="Submit" name="B1"></p>
</form>
</body>
</html> 




and below is my stylesheet:
PHP Code:
 BODY
{
    FONT: 8pt verdana, arial;
    COLOR: navy
}
TD
{
    FONT: 8pt verdana, arial;
    COLOR: darkslateblue
}
.helphead
{
    FONT: bold 16pt verdana, arial;
    COLOR: navy;
    TEXT-ALIGN: center
}
H2
{
    FONT-SIZE: 11px; FONT-FAMILY: verdana, arial
    COLOR: white
}
A:link
{
    COLOR: navy
}
A:visited
{
    COLOR: navy
}
A:hover
{
    COLOR: #ff9900
}
.funhead
{
    FONT: 10pt Arial,Helvetica;
    COLOR: navy
}
.deschead
{
    FONT: 600 10pt Arial,Helvetica;
    TEXT-ALIGN: center
}
.clsDescTab
{
    BORDER-RIGHT: lightsteelblue 1px solid;
    BORDER-TOP: lightsteelblue 1px solid;
    BORDER-LEFT: lightsteelblue 1px solid;
    BORDER-BOTTOM: lightsteelblue 1px solid;
    BACKGROUND-COLOR: aliceblue
}
INPUT
{
    BORDER-RIGHT: lightsteelblue 1px solid;
    BORDER-TOP: lightsteelblue 1px solid;
    BORDER-LEFT: lightsteelblue 1px solid;
    COLOR: navy;
    BORDER-BOTTOM: lightsteelblue 1px solid;
    FONT-SIZE: 11px; 
    FONT-FAMILY: verdana, arial
    TEXT-ALIGN: left
}
SELECT
{
    BORDER-RIGHT: lightsteelblue 1px solid;
    BORDER-TOP: lightsteelblue 1px solid;
    BORDER-LEFT: lightsteelblue 1px solid;
    COLOR: navy;
    BORDER-BOTTOM: lightsteelblue 1px solid;
    FONT-SIZE: 11px;  
    FONT-FAMILY: verdana, arial
}
.button {
    BORDER-RIGHT: lightsteelblue 1px solid; 
    BORDER-TOP: lightsteelblue 1px solid;
    FONT-SIZE: 8pt; 
    BORDER-LEFT: lightsteelblue 1px solid; 
    WIDTH: 70px; COLOR: #000000; 
    COLOR: navy;
    BORDER-BOTTOM: lightsteelblue 1px solid; 
    FONT-FAMILY: verdana, arial; 
}
TEXTAREA
{
    BORDER-RIGHT: lightsteelblue 1pt solid;
    BORDER-TOP: lightsteelblue 1pt solid;
    BORDER-LEFT: lightsteelblue 1pt solid;
    COLOR: navy;
    BORDER-BOTTOM: lightsteelblue 1pt solid;
    FONT-SIZE: 11px; 
    FONT-FAMILY: verdana, arial
} 

I need to know how to format a selection list, what I want to do is change the color of the arrow how do I do this?

Tim

Is this possible?
I know how to change the width & font size but not height.

Thanks.

Is it possible to remove the embossed bored from a select box. That is just destroying the whole look of my page and i there is a way please let me know.

Nick

Hi,
Is it possible to remove the border from a select box?

Many thanks