CSS - Textfield Style
notice difference between first two txt fields and the third one. first two have only background color changed, but in IE they have become bigger, in Moziila/Netscape their border is chaged.. I would like to have background color changed, but size, color and border width stay same, like in third textfield.. please use following code for refference:
Code: <html> <head> <style> .boxA { background-color:#CCCCCC; } .boxB { background-color:#999999; } </style> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> </head> <body> <input type="text" id="text1" class="boxB" onFocus="makeLight(this)" onBlur="makeDark(this)"><br><br> <input type="text" id="text2" class="boxB" onFocus="makeLight(this)" onBlur="makeDark(this)"><br><br> <input type="text" id="text3"> <br><br> <script> function makeLight(obj){ obj.className="boxA"; } function makeDark(obj){ obj.className="boxB"; } </script> </body> </html> Similar TutorialsI am trying to construct a site using a complete de-coupled design. My problem concerns some absolute positioned textfields. I do not wish to use a table to display the form, as this would defeat the whole purpose of the project. The page in question can be found here The CSS is as follows (exmaple of the name header and text field Code: /* Contact Form Positioning */ .NameFormTitle { position: absolute; left: 15px; top: 110px; display: inline; } #NameFormField { position: absolute; left: 120px; top: 110px; display: inline; font-family: Arial, sans-serif; color: #999999; font-weight: bold; line-height: 100px; } In IE 6 all is well. The textfield is the same height as the header, in Firefox and Netscape the textfields are to high. I have tried line height, but as the elements are absoluted positioned this has no effect (I think). Please help My problem is with 2 textfields that I am using css to text attributes, all is well in IE, but in netscape and firefox the letters q,y,p the bottoms get cut off. Any suggestions greatly appreciated. here is a link to the page i am working on http://www.cfwilson.com/365c/index.htm Charles 1) I want to change the margin around the textfield, right now it looks like a 2px border but i want to change it to 1 or 0 as I will use my css of the parent div to space the items. Is this possible? if so how? Thanks there is a picture attached, as you can see it has a margin, i highlighted it, otherwise it would be snug with the bright green border ps: borders are only there to see the sections 2) Can i change what the <br> tag does? can I make my own class? I would like to make a <br class"mybr"> that would have a 10px space, or something like that. Is this possible? 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 Hi there, I have a text field which I would like to change colour on hover. Any ideas how I would do this? I tried using a class with a:hover but it didn't work. Thanks! 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! Hi Everyone, I have a problem trying to position a submit button on a search form. The button is an image saying "go" and I am trying to move the button down by a few pixels using CSS. Whenever I use margin-top:3px; the textfield is also moved down although I am using a class on the button of "goButton" (see code below). I want to be able to move the button only. CSS code: Code: #searchField {display:inline;} #goButton {display:inline; margin-top:3px;} .goButton {margin-top:3px;} HTML/PHP code: Code: $output = '<div id="searchField"><span class="white">Search</span><input name="searchword" id="mod_search_searchword" maxlength="20" alt="search" class="inputbox'. $moduleclass_sfx .'" type="text" size="'. $width .'" value="'. $text .'" onblur="if(this.value==\'\') this.value=\''. $text .'\';" onfocus="if(this.value==\''. $text .'\') this.value=\'\';" /></div>'; if ( $button ) { $button = '<div id="goButton"><A HREF="javascript:document.searchForm.submit()" onmouseover="document.searchForm.go_but.src=\'/silence/templates/rhuk_solarflare_ii/images/goOver.gif\'" onmouseout="document.searchForm.go_but.src=\'/silence/templates/rhuk_solarflare_ii/images/go.gif\'" onclick="return val_form_this_page()"> <IMG SRC="/silence/templates/rhuk_solarflare_ii/images/go.gif" WIDTH="19" HEIGHT="19" BORDER="0" ALT="Go" NAME="go_but" class="goButton"></A></div>'; } Full CSS code: Code: html, body {margin: 0; padding: 0; border: 0;} html { height: 100%; } body { color: #5f5c5c; background-color: #8091b4; font-family: verdana, sans-serif; font-size: 80%; text-align: center; margin: 10px 0; line-height: 130%; height: 100%; margin-bottom: 1px; font-size:10px; /*added to change all font sizes*/ } .clr { clear: both; } .outline { border: 1px solid #cccccc; background: #ffffff; padding: 2px; } #buttons_outer { width: 635px; margin-bottom: 2px; margin-right: 2px; float: left; } #buttons_inner { border: 1px solid #cccccc; height: 21px !important; height: 23px; } #pathway_text { overflow: hidden; display: block; height: 25px; line-height: 25px !important; line-height: 22px; padding-left: 4px; border: 1px solid #ccc; margin-bottom: 2px; } #pathway_text img { margin-left: 5px; margin-right: 5px; margin-top: 6px; } #buttons { float: left; margin: 0px; padding: 0px; width: auto; } ul#mainlevel-nav { list-style: none; padding: 0; margin: 0; font-size: 0.8em; } ul#mainlevel-nav li { background-image: none; padding-left: 0px; padding-right: 0px; float: left; margin: 0; font-size: 11px; line-height: 21px; white-space: nowrap; border-right: 1px solid #cccccc; } ul#mainlevel-nav li a { display: block; padding-left: 15px; padding-right: 15px; text-decoration: none; color: #333333; background: transparent; } #buttons>ul#mainlevel-nav li a { width: auto; } ul#mainlevel-nav li a:hover { color: #fff; background: #c64934; } #search_outer { float: left; width: 165px; } #search_inner { border: 1px solid #cccccc; padding: 0px; height: 21px !important; height: 23px; overflow: hidden; } #search_inner form { padding: 0; margin: 0; } #search_inner .inputbox { border: 0px; padding: 3px 3px 3px 5px; font-family: arial, helvetica, sans-serif; font-size: 11px; color: #c64934; margin-top:3px; } #header_outer { text-align: left; border: 0px; margin: 0px; } #header { float: left; padding: 0px; margin-right: 2px; width: 635px; height: 150px; background: url(../images/header_short.jpg) no-repeat; } #top_outer{ float: left; width: 165px; } #top_inner { border: 1px solid #cccccc; padding: 2px; height: 144px !important; height: 150px; overflow: hidden; float: none !important; float: left; } #left_outer { float: left; margin-top: 2px; width: 165px; } #left_inner { border: 1px solid #cccccc; padding: 2px; float: none !important; float: left; } #content_outer { padding: 0px; margin-top: 0px; margin-left: 2px; /** border: 1px solid #cccccc; **/ float: left; width: 635px; } #content_inner{ float: none !important; float: left; padding: 0; padding-top: 2px; margin: 0; } table.content_table { width: 100%; padding: 0px; margin: 0px; } table.content_table td { padding: 0px; margin: 0px; } #banner_inner { float: left; padding: 0px; height: 70px; } #poweredby_inner { float: right; padding: 0px; margin-left: 0px; height: 70px; } #right_outer { margin-left: 2px; width: 165px; } #right_inner { float: none !important; float: left; border: 1px solid #cccccc; padding: 2px; } .user1_inner { border: 1px solid #cccccc; float: none !important; float: left; margin: 0px; padding: 2px; } .user2_inner { border: 1px solid #cccccc; float: none !important; float: left; margin: 0px; padding: 2px; } table td.body_outer { padding: 2px; border: 1px solid #cccccc; } .maintitle { color: #ffffff; font-size: 40px; padding-left: 15px; padding-top: 20px; } .error { font-style: italic; text-transform: uppercase; padding: 5px; color: #cccccc; font-size: 14px; font-weight: bold; } /** old stuff **/ .back_button { float: left; text-align: center; font-size: 11px; font-weight: bold; border: 3px double #cccccc; width: auto; background: url(../images/button_bg.png) repeat-x; padding: 0px 10px; line-height: 20px; margin: 1px; } .pagenav { text-align: center; font-size: 11px; font-weight: bold; border: 3px double #cccccc; width: auto; background: url(../images/button_bg.png) repeat-x; padding: 0px 10px; line-height: 20px; margin: 1px; } .pagenavbar { margin-right: 10px; float: right; } #footer { text-align: center; padding: 3px; } #footerNew { font-size:12px; padding: 3px; margin-left:20px; margin-right:8px; border-top:1px solid #7f91b4; padding-bottom:400px; } #footerLeft { float:left; margin-left:0px; color:#5f5c5c; font-size:10px; padding-left:0; } #footerRight { margin-top:-15px; float:right; margin-right:0px; padding-right:0; } .contactRollover { margin-right:0px; display:inline; float:right; width:52px; height:13px; background: url(/silence/templates/rhuk_solarflare_ii/images/footerContactDual.gif) no-repeat; text-indent:-9999px; } a{ outline:none;} a.contactRollover:link, a.contactRollover:visited, a.contactRollover:active { background: url(/silence/templates/rhuk_solarflare_ii/images/footerContactDual.gif) no-repeat; } a.contactRollover:hover {background-position:-52px 0;} .legalRollover { display:inline; float:right; width:93px; height:13px; background: url(/silence/templates/rhuk_solarflare_ii/images/footerLegalDual.gif) no-repeat; text-indent:-9999px; } a.legalRollover:link, a.legalRollover:visited, a.legalRollover:active { background: url(/silence/templates/rhuk_solarflare_ii/images/footerLegalDual.gif) no-repeat; } a.legalRollover:hover {background-position:-93px 0;} #searchField {display:inline;} #goButton {display:inline;} .goButton {margin-top:3px;} .goRollover { display:inline; float:left; width:19px; height:19px; background: url(/silence/templates/rhuk_solarflare_ii/images/goDual.gif) no-repeat; text-indent:-9999px; } a.goRollover:link, a.goRollover:visited, a.goRollover:active { background: url(/silence/templates/rhuk_solarflare_ii/images/goDual.gif) no-repeat; } a.goRollover:hover {background-position:-19px 0;} ul { margin: 0; padding: 0; list-style: none; } li { line-height: 15px; padding-left: 15px; padding-top: 0px; background-image: url(../images/arrow.png); background-repeat: no-repeat; background-position: 0px 2px; } td { text-align: left; font-size: 11px; } /* Joomla core stuff */ a:link, a:visited { color: #c64934; text-decoration: none; font-weight: bold; } a:hover { color: #900; text-decoration: none; font-weight: bold; } table.contentpaneopen { width: 100%; padding: 0px; border-collapse: collapse; border-spacing: 0px; margin: 0px; } table.contentpaneopen td { padding-right: 5px; } p.contentpaneopen { padding-right: 5px; } table.contentpaneopen td.componentheading { padding-left: 4px; } table.contentpane { width: 100%; padding: 0px; border-collapse: collapse; border-spacing: 0px; margin: 0px; } table.contentpane td { margin: 0px; padding: 0px; } table.contentpane td.componentheading { padding-left: 4px; } table.contentpaneopen fieldset { border: 0px; border-bottom: 1px solid #eee; } .button { color: #c64934; font-family: Arial, Hevlvetica, sans-serif; text-align: center; font-size: 11px; font-weight: bold; border: 3px double #cccccc; width: auto; background: url(../images/button_bg.png) repeat-x; padding: 0px 5px; line-height: 18px !important; line-height: 16px; height: 26px !important; height: 24px; margin: 1px; } .inputbox { padding: 2px; border:solid 1px #cccccc; background-color: #ffffff; } .componentheading { background: url(../images/subhead_bg.png) repeat-x; color: #666666; text-align: left; padding-top: 4px; padding-left: 4px; height: 21px; font-weight: bold; font-size: 10px; text-transform: uppercase; } .contentcolumn { padding-right: 5px; } .contentheading { height: 30px; color: #002469; font-weight: normal; font-size: 16px; white-space: nowrap; padding-left:2px; } .contentpagetitle { font-size: 13px; font-weight: bold; color: #cccccc; text-align:left; } table.searchinto { width: 100%; } table.searchintro td { font-weight: bold; } table.moduletable { width: 100%; margin-bottom: 5px; padding: 0px; border-spacing: 0px; border-collapse: collapse; } div.moduletable { padding: 0; margin-bottom: 2px; } table.moduletable th, div.moduletable h3 { background: url(../images/subhead_bg.png) repeat-x; color: #666666; text-align: left; padding-left: 4px; height: 21px; line-height: 21px; font-weight: bold; font-size: 10px; text-transform: uppercase; margin: 0 0 2px 0; } table.moduletable td { font-size: 11px; padding: 0px; margin: 0px; font-weight: normal; } table.pollstableborder td { padding: 2px; } .sectiontableheader { font-weight: bold; background: #f0f0f0; padding: 4px; } .sectiontablefooter { } .sectiontableentry1 { background-color : #ffffff; } .sectiontableentry2 { background-color : #f9f9f9; } .small { color: #999999; font-size: 11px; } .createdate { height: 15px; padding-bottom: 10px; color: #999999; font-size: 11px; } .modifydate { height: 15px; padding-top: 10px; color: #999999; font-size: 11px; } table.contenttoc { border: 1px solid #cccccc; padding: 2px; margin-left: 2px; margin-bottom: 2px; } table.contenttoc td { padding: 2px; } table.contenttoc th { background: url(../images/subhead_bg.png) repeat-x; color: #666666; text-align: left; padding-top: 2px; padding-left: 4px; height: 21px; font-weight: bold; font-size: 10px; text-transform: uppercase; } a.mainlevel:link, a.mainlevel:visited { display: block; background: url(../images/menu_bg.png) no-repeat; vertical-align: middle; font-size: 11px; font-weight: bold; color: #ccc; text-align: left; padding-top: 5px; padding-left: 18px; height: 20px !important; height: 25px; width: 100%; text-decoration: none; } a.mainlevel:hover { background-position: 0px -25px; text-decoration: none; color: #fff; } a.mainlevel#active_menu { color:#fff; font-weight: bold; } a.mainlevel#active_menu:hover { color: #fff; } a.sublevel:link, a.sublevel:visited { padding-left: 1px; vertical-align: middle; font-size: 11px; font-weight: bold; color: #c64934; text-align: left; } a.sublevel:hover { color: #900; text-decoration: none; } a.sublevel#active_menu { color: #333; } .highlight { background-color: Yellow; color: Blue; padding: 0; } .code { background-color: #ddd; border: 1px solid #bbb; } form { /* removes space below form elements */ margin: 0; padding: 0; } div.mosimage { border: 1px solid #ccc; } .mosimage { border: 1px solid #cccccc; margin: 5px } .mosimage_caption { margin-top: 2px; background: #efefef; padding: 1px 2px; color: #666; font-size: 10px; border-top: 1px solid #cccccc; } span.article_seperator { display: block; height: 1.5em; } /*added styles*/ #search { height:30px; width:190px; background-color:#4c6696; margin-top:0px; } .white { color:#fff; padding:5px; font-size:11px; } /*Added from 3 col layout*/ p {margin: 0; padding: 8px;} h2 {font-size: 1.2em; text-align: center; padding: 10px;} .clear { clear: both; } a {text-decoration: underline; font-weight: bold; color: #000;} .alignright {margin-top: 0; text-align: right;} .small {font-size: .9em;} .wrapper { margin: 0 auto; width: 768px; text-align: left; /*background: #add8e6;*/ background: #ffffff; border: 0px solid #000; color:#5f5c5c; } /*** Below is the Tan hack, needed because the decorative side borders (thin black) on .wrapper. It fixes the box model of IE5.x/win, making it display the same as other browsers. ***/ * html .wrapper { width: 771px; w\idth: 768px; } .outer { border-left: 150px solid #ffffff; border-right: 190px solid #ccd3e1; background: url(images/blackline.gif) 100% 0 repeat-y; } /*** These are the visible side col BG's. The image BG is needed to replace a side border on div.inner, which can't be used because of problems in Mozilla. The image substitutes for the thin black divider between the right green col and the center col. If the black divider is not wanted, the BG image may be removed. The Tan hack below feeds a IE a different BG location, due to a BG placement variation. ***/ * html .outer { background: url(images/blackline.gif) 565px 0 repeat-y; } .inner { margin-left: -2px; /*** This fixes a small overlap problem in IE6. ***/ width: 620px; /*** This width is for non-IE browsers. Mozilla makes this necessary. ***/ border: 0px solid #000; border-width: 0 0 0 0px; } /*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid blowing the layout apart. IE gets the original 100% width as in the Livingstone layout. It blows my mind that all this hacking is being caused by the mighty Gecko engine! (shakes head ruefully) ***/ * html .inner { width: 100%; } .float-wrap { float: left; width: 567px; margin-left: -150px; /*** Same length as left column width ***/ } /*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, div.left is carried over into the proper position. ***/ .left { margin-top:25px; } #line { border-right:1px solid #000000; height:100%; } .right { float: right; width: 190px; position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/ background-color:#ccd3e1; } * html .right { margin: 0 -190px 0 0; /*** IE gets this margin. ***/ } .center { margin-top:23px; float: right; width: 415px; background: url(/silence/templates/rhuk_solarflare_ii/images/navBlueLine.gif) repeat-y 0 0; } .leftCenter { width:2px; } .wide { background-color: #002469; /* header and footer colours */ width: 100%; border: 2px solid #000; font-size: 1.4em; font-weight: bold; } .wide p {padding: 5px;} .top {border-width: 0 0 0px; overflow:hidden;} .bottom {border-width: 2px 0 0;} /* Mozilla bug fixes */ html>body .inner, html>body .float-wrap { border-bottom: 1px solid transparent; } .grey { color:#5f5c5c; } .newsflash { padding: 15px 10px; width:175px; color:#5f5c5c; font-size: 10px; } .newsflashTitle { color:#4c6696; font-weight:bold; margin-left: -7px; font-size: 11px; } a.readon { color:#002469; background: url(/silence/templates/rhuk_solarflare_ii/images/redArrow.gif) no-repeat left; font-size: 10px; } a.readon:hover { color:#002469; background: url(/silence/templates/rhuk_solarflare_ii/images/redArrow.gif) no-repeat left; font-size: 10px; } a.readon:visited { color:#002469; background: url(/silence/templates/rhuk_solarflare_ii/images/redArrow.gif) no-repeat left; font-size: 10px; } Any help would be greatly appreciated. Thanks. P.s. How do I post links to the site on here?...I tried but it removed the URL saying (URL address blocked: See forum rules) 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?) 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 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; } 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? 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 Or can it be within the body tag? What is the standard? TIA So for an example: if I have this in the html: Code: <div id="box" style="width:100px;">123</div> and this is the CSS Code: #box{width: 200px;} What is the outcome? Will it always use the css or always use the style element? Or does it depend? Could someone please help me work this one out, been at it from last night and still can't figure it out? I have 2 styles, button and tips. I have 5 buttons total and the first 4 are fine as is opening a linked page. I need help to make the last one which uses the tips style to open a mouse-over message to also be displayed with the same button style. Thanks a bunch, the forum won't let me post the text so here is a link to it. lastborns.tripod.com quick question: not sure if this is possible. I want to know if it is possible to create one style with set properties. Then a second style, set it equal to the first one, instead of copying the properties to the second. theoretically: .style1 { prop:1; prop:2; prop:3; } .style2 = .style1 if it can't be done, then let me know, I know how to copy and paste. I was just curious it if was I have not done much web designing lately and have forgoten a number of things. Right now i cannot remember if it is possible to specify link styles for a specific class for a cell in a table. I have this code for the entire page: a:link,a:active,a:visited,a:hover { color : #FFFFFF; text-decoration: underline; } However, I want to have it different in only a specific cell of a table. Is there a way to put it in the following code? td.newshead { background-color: #013501; border-style: solid; border-color: #FFFFFF; border-bottom-width: 1px; border-top-width: 1px; border-left-width: 1px; border-right-width: 1px; font-family: verdana; font size: 125%; font-variant: small-caps; font-weight: bold; color: #FFFFFF; text-align: center; } I can't do something like making another link class like this either a.class:link,a.class:active,a.class:visited,a.class:hover { color : #013501; text-decoration: underline; } I have the information comming from another page and I am not able to the <a class="class" href="url">. I need to put it in the style for the cell. Anyone able to help me out here? heya! sorry if this is a real stupid quiestion/in the wrong area, im a bit new to css and this forum! Im wondering if there is any way to have a border only apply for part of a box... ie only the first/last 50% or 250px of the top and bottom borders. Hope this makes sence. Any help appriciated, even if it is to say it cant be done. |