CSS - Remove Select Box Border
Hi,
Is it possible to remove the border from a select box? Many thanks Similar TutorialsIs 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 Thanks for taking the time to read my question. I'm having a bit of a brain stall here. I want to get rid of the border around the href image, using css. How???? Code: <div class="Valid"> <p> <a class="ValidLink" href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a> </p> </div> Thanks, Brad When I allow scripts and active x to run in IE I get a dotted border around each letter of hyperlinked text. It looks fine in other browsers and also in IE if I block scripts. Does anybody have any ideas how to fix this or if it really is a CSS problem? Thanks I have a CSS menu. How to I remove the RIGHT border for that last link item? I tried a bunch of stuff, I can change the colour of it but I can't seem to get rid of it. Quote: /* ------------------------------------ PVII Menu CSS Express Drop-Down Menu by Project Seven Development www.projectseven.com ------------------------------------ */ /*body { font-family: "Trebuchet MS", Arial, sans-serif; font-size: 100%; background-color: #FFFFFF; margin: 24px 0; padding: 0; background-image: url(images/p7exp_pbg.jpg); background-repeat: repeat-x; }*/ /* Container for the menu. We set top and bottom borders only because the menu container stretches the entire window width. Note that this container can go inside a fixed width element that is centered on the page, if you so desire. It can even go inside a table cell. It carries a background image for aesthetics. */ #menuwrapper { border-top: 1px solid #000; border-bottom: 1px solid #333; background-color: #FFFFFF; background-image: url(../images/menu_bg.gif); background-repeat: repeat-x; } /*Clears the floated menu items. Assigned to a BR tag placed just before menuwrapper's closing DIV tag*/ .clearit { clear: both; height: 0; line-height: 0.0; font-size: 0; } /* p7menubar is the root UL and p7menubar ul applies to all the sub-menu ULs. We set padding and margin to zero to eliminate all indentation, turn bullets off, and set a font-family different from the global font-family declared for the body element above. This sets font for just the menu. Do not add a font-size here. */ #p7menubar, #p7menubar ul { padding: 0; margin: 0; list-style: none; font-family: Arial, Helvetica, sans-serif; } /* Root-Level Links. Do not change the first two properties. Adjust padding values to make the root links taller and to offset them from the left and right edges of the link box. The border right creates a separator between links. Font-size is set here and will apply to all menu levels. Font color is set to light gray. */ #p7menubar a { display: block; text-decoration: none; border-right: 1px solid #333; font-size: 1em; color: #FFFFFF; padding-top: 5px; padding-right: 14px; padding-bottom: 5px; padding-left: 14px; } /* Class assigned to those Root-Level links that have associated Sub-Menus. The top and bottom padding assigned this element must be the same as that assigned to the p7menubar a element. The right padding is increased to accomodate the display of background image depicting a downward pointing arrow. */ #p7menubar a.trigger { padding: 5px 16px 5px 10px; background-image: url(../images/p7PM_dark_south.gif); background-repeat: no-repeat; background-position: right center; } /* The Root-Level list items. Floating left allows them to appear horizontally. Width is for IE5 Mac. The last rule in this style sheet will set the width for this element to auto for all other browsers - hiding it from IE5 Mac. The width is proportional. As you add and edit root menu items, you will need to test this width to ensure it is wide enough to accomodate all text. */ #p7menubar li { float: left; width: 9em; } /* Sets width for Sub-Menu box and the List Items inside - in proportional em units. This allows the sub-menu width to expand if users resize the text in their browsers. */ #p7menubar li ul, #p7menubar ul li { width: 12em; } /* The sub-menu links. We set color and turn off the right border, which would otherwise be inherited from the root link rule. We set top and bottom padding less than the root items and increas the left padding to indent the sub-menu links a small amount in from the root links. */ #p7menubar ul li a { color: #666666; border-right: 0; padding-top: 3px; padding-right: 12px; padding-bottom: 3px; padding-left: 16px; } /* Sub-Menu Unordered Lists describes each dropdown sub-menu grouping. Positioned Absolutely to allow them to appear below their root trigger. Set to display none to hide them until trigger is moused over. Background Color must be set or problems will be encountered in MSIE. Right and bottom borders are set to simulate a raised look. A gradient background image is assigned. */ #p7menubar li ul { position: absolute; display: none; background-color: #FFFFFF; border-right: 1px solid #333333; border-bottom: 1px solid #333333; background-image: url(../images/menu_bg_pulldown.gif); background-repeat: repeat-x; } /* Changes the Text color and background color when the Root-Level menu items are moused over. The second selector sets color and background when Root-Level items are accessed with the keyboard tab key. The third selector sets an active state to support keyboard access in MSIE. The fourth selector is assigned to IE5 and IE6 Windows via the P7_ExpMenu script. Note that IE7 supports hover on elements other than links and so behaves like Firefox, Opera, and Safari - making the menu operable even if JavaScript is not enabled. */ #p7menubar li:hover a, #p7menubar a:focus, #p7menubar a:active, #p7menubar li.p7hvr a { color: #000000; background-color: #999999; } /* Set the Sub-Menu UL to be visible when its associated Root-Level link is moused over. The second selector is assigned to IE5 and IE6 via the P7_ExpMenu script. */ #p7menubar li:hover ul, #p7menubar li.p7hvr ul { display: block; } /* Sets the Text color of the Sub-Level links when the Root-Level menu items are moused over. The second selector is assigned to IE5 and IE6 via the P7_ExpMenu script. The color set should march the normal Sub-Level link color in the rule: #p7menubar ul li a. The background color must be transparent to allow the underlying gradient background on the UL to show through. */ #p7menubar li:hover ul a, #p7menubar li.p7hvr ul a { color: #000000; background-color: transparent; } /* The normal hover class for Sub-Level links. The Important directive is required for older browsers. We set a background color, which shows over the gradient background. We set text color to white. */ #p7menubar ul a:hover { background-color: #606060!important; color: #FFFFFF!important; } /* The single backslash \ character inside this comment causes IE5 Mac to ignore the following rule, which allows other browsers to render top-level menu items to their natural width. Do not edit this rule in any way. */ #p7menubar li {width: auto;} I just don't know how to get rid of the border around my image links... When you go to the site, everything looks okay, but when you press the link ("blog"), a border appears around it. And if you click it and then return back, the border is there all the time. Why? I have written "border: none;" pretty much everywhere in my css I can think of! I'm running out of ideas... This is probably something really simple so please help me out, I'm not much of a programmer as you can see.. The same border-problem repeats also on that blog-page which is a wordpress layout and should have nothing to do with my css!? The site is he http://prettydisturbed.com/ And my css around the problem looks like this: Code: #blog { display: block; float: left; width: 96px; height: 62px; background: url('../img/blog_mo.jpg') no-repeat 0 0; border: none; } a #blog img { border: none; text-decoration: none; } #blog:hover { background-position: 0 -62px; border: none; } #blog:visited { border: none; } #blog span { display: none; border: none; } p { font-family: Tahoma, Arial, sans-serif; font-size: 13px; color: #000000; margin: 0; padding: 0; border: none; text-decoration: none; } a:link { text-decoration: none; color: #ffffff; font-size: 13px; border: none; } a:visited { text-decoration: none; color: #ffffff; font-size: 13px; border: none; } a:hover { text-decoration: none; color: #ff39da; font-size: 13px; border: none; } a:active { text-decoration: none; border: none; } 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"> hey i have applied a style to a select tag which should be displaying a red border... but it doesn't work....however THIS WORKS IN OPERA 7 but doesn't work in IE and Mozilla :S go to the site and click submit straight away...as you can see there is no border applied to the second drop down box! does anyone no how to apply a border to a select tag site is located at http://studentwork.qantm.com.au/pking/website/feedback.cfm cheers Hi, I have created a component which is wrapped inside a div element. Is it possible to set the border of the div element similar to the borders shown by default for a select drop down? thanks and regards, Sim085 I have an image I am using for my submit button, it has this "Link Box" around it that I want to go away. I just want the image shown and not the border or whatever is happening here. I assume it is because it is a link. I use an external style sheet for the rest of the page, so if there is a suggestion for me to reference a style from the style sheet, this would be a huge help. I have read about everything I could and still cannot find my answer. Is there a way to get rid of the box around my image using CSS? Here is what I have: <input name="imageField" type="image" onClick="return valLoginForm(frmLogin)" src="images/b_login.gif" width="60" height="18" > Thank you for your help. Hi. Have created some simple tabs using table cells. Active tab should have bottom-border color equal to page background-color. Non-active tabs should have bottom-border=black. Works fine in IE, but does not work very well in Firefox. If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell. So is there a way to make this work in both IE and Firefox... and hopefully most other browsers... See code below: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <style type="text/css"> a.menu_top:link {color: #000000; text-decoration: none;} a.menu_top:visited {color: #000000; text-decoration: none;} a.menu_top:hover {color: #000000; text-decoration: none;} a.menu_top:active {color: #000000; text-decoration: none;} td.menu_top_passive { background-color: #777; border-left: 1px #000000 solid; border-right: 1px #000000 solid; border-top: 1px #000000 solid; border-bottom: 1px #000000 solid; text-align: center; cursor:pointer; font-weight: bold; padding: 5px 20px 5px 20px; margin: 0; } td.menu_top_active { background-color: #bbb; border-left: 1px #000000 solid; border-right: 1px #000000 solid; border-top: 1px #000000 solid; border-bottom: 1px #bbb solid; text-align: center; cursor:pointer; font-weight: bold; padding: 5px 20px 5px 20px; margin: 0; } </style> <script language="JavaScript"> function change(id, url) { for (i=1; i<6; i++){ eval("document.getElementById("+i+").className='menu_top_passive'"); } eval("document.getElementById("+id+").className='menu_top_active'"); } </script> </head> <body style="margin:0; padding:0; background-color:#bbb;"> <br><br> <center> 1. Load the page.<br> 2. Click Item 4.<br> 3. Click Item 2.<br><br> Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br> None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br> Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br> If I remove border-collapse, then there is no strange behaviour in Firefox.<br> Any way to get this working in Firefox without breaking it in IE? </center> <br><br><br> <table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;"> <tr> <td id="1" nowrap class="menu_top_active" onClick="change('1');"><a href="javascript:;" class="menu_top">Item 1</a></td> <td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td> <td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a href="javascript:;" class="menu_top">Item 3</a></td> <td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a href="javascript:;" class="menu_top">Item 4</a></td> <td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a href="javascript:;" class="menu_top">Item 5</a></td> </tr> </table> </body> </html> I'm a little puzzled by this weird display bug by IE7, this bug doesn't occur in IE6. It had to do with the DIV's CSS's border-style. If you set it to double then you notice some random bugs with it. Some of the time, the border is displayed without a problem. Some of the time, it is displayed with some gaps in the line as if it is not being drawn upon. Some of the other time, it is not displayed at all. I noticed if I switch from one tab to another then back, the border appeared as if nothing had happened. I also noticed that if I open the view source that overlapp the web browser then closed it, the border appeared as if nothing had happened. How do you fix that problem? Thanks... I would like to set up a table with a different border than the cells inside it. Here's my code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> TABLE {border: 1px solid black; border-collapse: collapse; width: 200px} TD {border: 1px solid #ccc} </style> </head> <body> <table> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html> That's all hunky dory in (gasp!) IE, but good browsers...they only show the lighter gray color. How do I get the table border to be different? Hi, This used to be my solution: Code: <table border=1 bordercolorlight='#CCCCCC' Bordercolordark='#FFFFFF'> But this only works well on IE - not Mozilla Now I want to use CSS: Code: .results { border: 1px solid #CCCCCC ; } Code: <table class='results'> --------------- The problem is, with CSS, only the TABLE acquires the border property. The cells within it don't. If I specify Code: <td class='results'> for all the cells in the table, this also won't work, because the cell borders overlap each other and some border lines seem thicker than others (because of overlapping). Is there any simple way I can specify the border property for the table - in ONE declaration? I want the table and td borders all to be a simple 1px width ...is that possible in one declaration? Thanks a lot! How do you create an inner border around a table in css, rather than a "solid" border which creates a border line around the table on the outer half. The border needs to butt up against an image, rather than leaving a pixel space. This is the coder I have so far. Nothing big: Code: .solid { border: solid 1px #000000; } Thanks. I'm working on a custom MovableType site for a sports news company, and after including FCKeditor into the backend to allow for more freedom in styling, etc, I've found that the css styles for the blog entries and the output from the editor just don't mix. Is there some way I can clear all the inherited css definitions and just let the text display as itself? How can I remove the space between an image bottom and a td in Mozilla? <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> <head><title></title> <style type='text/css'> td,img { padding:0px; border-width:0px; margin:0px; } </style> <script type='text/javascript'> </script> </head><body> <table border='1'><tr><td> <img src='http://www.kallery.net/Q_strg/kallery/85_153_1_1155924038.jpg' /> </td></tr></table> </body></html> Hi, I remember reading that there is a css attribute for removing all browser-specific formatting from an element, for example forms, H tags and divs (which are pre-formatted differently in ie and firefox) but I can't recall what it was! Does anyone know how this is achieved as I find it very laborious when creating stylesheets to have to remember to reset all of these elements' formats. - before anyone says it, I know I could set up a generic, cross-browser-ready stylesheet for use with all my sites, and this is a system I already employ, I am simply concerned with saving bytesize and achieveing smaller stylesheets that are more easy to work with. I remember it was something like this: instead of: form{ margin:0px; padding:0px; } I'm sure you can do something like: form{ preformatting:none; } Does anyone know what I'm talking about? Or did I dream it?... cheers in advance Hello. There is a small gap between my input and image, see attached screenshot. i thought it might be the image dimensions but it isn't; and I've removed margins, padding, etc. What property should I be looking for please? Here's some css: Code: html, body, div, p, form, fieldset, input, img { margin: 0; border: 0; padding: 0; line-height: 1; } input { border: 1px solid gray; } . txtImage { vertical-align: text-bottom; } #frmCourse { width: 500px; height: 500px; margin: 5px; padding: 5px; outline: 1px solid gray; } #fldCourse { width: 80%; padding: 5px; margin: 0 auto; border: 1px solid #808080; } # inpCourse { height: 20px; border: 1px solid #808080; vertical-align: text-bottom; } I'd like to be able to remove all unused css styles on a website and the FireFox add-on "Dust-me Selectors" is highly recommended, only that it doesnt support FireFox 4 which is what is installed for me at the moment, can you please confirm if I can have more than 1 instance/version of a web browser/FireFox on my machine, or if you could recommend another way of finding unused css on the whole of a website, and not just one page, thanks plenty in advance.. |