CSS - Can't Get Rid Of Outline In <select> In Firefox

Hi all,

I've tried both the "shorthand" and regular version of BORDER attribute, and neither works, Yet outline works fine (but I don't want to use that since IE7 doesn't support it).

Anyone able to troubleshoot this? Here's part of the CSS code (the ".thumb" class at the end is what's not working) and below that is the url.

CSS Code:
Original - CSS Code .gallerycontainer{ position: relative; text-align:right; margin-left: 0em auto; margin-right: 0em auto; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } #thumbBox{ /*Outermost DIV for thumbnail viewer*/ position: absolute; left: 2.5em; top: -4em; width: auto; height: auto; padding: .5em; padding-bottom: 0em; background: #313131; visibility: hidden; z-index: 5; cursor: hand; cursor: pointer; } #thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */ font: bold 1em arial; line-height: 1.1em; color: white; padding: .5em 0; text-align: right; } #thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */ background-color: #CCC; } #thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/ position: absolute; visibility: hidden; border: .125em solid black; background-color: #EFEFEF; padding: .5em; z-index: 6; } .thumb { margin: .5em .5em .5em .5em; height: 8.5em; width: 8.5em; border-style: dashed; border-color:#CCC; border-width:.125em; }

  

 .gallerycontainer{


 position: relative;


 text-align:right;


 margin-left: 0em auto;


 margin-right: 0em auto;


 /*Add a height attribute and set to largest image's height to prevent overlaying*/


 }


  


 #thumbBox{ /*Outermost DIV for thumbnail viewer*/


 position: absolute;


 left: 2.5em;


 top: -4em;


 width: auto;


 height: auto;


 padding: .5em;


 padding-bottom: 0em;


 background: #313131;


 visibility: hidden;


 z-index: 5;


 cursor: hand;


 cursor: pointer;


 }


  


 #thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */


 font: bold 1em arial;


 line-height: 1.1em;


 color: white;


 padding: .5em 0;


 text-align: right;


 }


  


 #thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */


 background-color: #CCC;


 }


  


 #thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/


 position: absolute;


 visibility: hidden;


 border: .125em solid black;


 background-color: #EFEFEF;


 padding: .5em;


 z-index: 6;


 }


  


 .thumb {


 margin: .5em .5em .5em .5em;


 height: 8.5em;


 width: 8.5em;


 border-style: dashed;


 border-color:#CCC;


 border-width:.125em;


 } 

I don't think I have the 5 requisite posts, so here's the url in question (# = .) & (| = /)

http:||www#bauerbuiltmfg#com|db-series-planters#html


Thanks in advance for any help!

I tried everything I can think of in Opera, and no matter what I try, when I focus on a link I get selected highlight on the text. Is there some CSS way of hiding the highlight?
I've also posted in the JavaScript forum.

heys all,

in FF, I can get rid of that dreaded link outline via a { outline: none; } but IE7 isn't obeying. Funny enough, it's buggy, sometimes the outline is there, othertimes not.

Does anyone know a sure-fire way to fix this issue, hopefully not resorting to apply this.blur() to all the links?

Thanks.

Hi all

I'm working on the following XHTML/CSS2 page:

http://www.josh.ch/files/temp/strange_ff_effect

It's very clean XHTML and CSS2 in my opinion, and it's displayed correctly in Firefox, Opera and Safari.
However, I experience a very strange bug in Firefox2/OSX! When single clicking with the mouse somewhere on the white ground in the header area, all text on the page is selected! Try it! Click on the "Kanton Aargau" logo or anywhere in the same area, and tell me if you experience this, too.

I never had an error like this, and I have no idea what could cause the problem. Any ideas?

Thanks a lot
Josh

I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it.

The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox?

You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html).

css Code:
Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; }

  

 #main-nav


 {


     background-color: black;


     height: 40px;


 }


 #nav


 {


     position: relative;


     margin: 0;


     padding: 0;


 }


 #nav li


 {


     position: relative;


     float: left;


     display: table;


     width: 99px;


     height: 40px;


     border-right: 1px solid white;


     text-align: center;


     font-size: 10px;


 }


 #nav li:hover


 {


     background-color: darkred;


 }


 #nav a


 {


     display: table-cell;


     vertical-align: middle;


     line-height: 11px;


     font-weight: bold;


     text-decoration: none;


     color: #fff;


 }


 #nav li ul


 {


     position: absolute;


     padding: 0;


     background-color: gray;


     top: 40px;


     left: 0px;


 }


 #nav li ul li


 {


     width: 98px;


     border: 0;


     border-top: 1px solid white;


 } 

html4strict Code:
Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div>

  

 <div id="main-nav">


     <ul id="nav">


         <li id="m1"><a href="#1">Main Menu 1</a></li>


         <li>


             <a href="#2">Main Menu 2</a>


             <ul>


                 <li><a href="#2a">Sub-Category 1</a></li>


                 <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li>


             </ul>


         </li>


         <li>


             <a href="#3">Main Menu 3 with multiple lines</a>


             <ul>


                 <li><a href="#3a">Sub-Category 2</a></li>


             </ul>


         </li>


         <li><a href="#4">Main Menu item which has a really long name on it</a></li>


     </ul>


 </div> 

The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers.

Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem.

Hi

I'm putting together help documentation for an application and I would like the structure of the document to have all headings and sub headings to be dynamically numbered, for example:

1. Main
1.1. Sub1
1.2. Sub2
2. Main
2.1 Sub1
etc

I've read about the pseudo class :before, but understand that this isn't supported by Explorer, or else I could use:

BODY {
counter-reset: chapter; /* Create a chapter counter scope */
font-family:Arial, Helvetica, sans-serif;
}
H1:before {
content: "Chapter " counter(chapter) ". ";
counter-increment: chapter; /* Add 1 to chapter */
}
H1 {
counter-reset: section; /* Set section to 0 */
}
H2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}

Could anyone help with any suggestions as to how I could do this please?


Thanks
Sophie

I'm having an issue where a website is showing up a few pixels off in Mac Firefox than it is in PC firefox. Anyone have a quick fix for this?

Mac Screenshots: http://graffetto.com/chops/clairus_screens.pdf

PC Firefox Screenshot:


Firefox, IE, and Netscape all look identical on PC, while firefox, IE and safari look identical on Mac, but different from PC (except safari - messed up text)

Any help is greatly appreciated

Edit: after reviewing my post I realized I was quite vague. What I'm looking for is a way to filter CSS so that only Mac Firefox users will receive one CSS file, and PC users will receive another.

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

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?

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.

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

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

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