|
CSS - Text Next To Radio Buttons In Ie
Hey,
In Firefox, Safari and Chrome etc, the poll in the sidebar on my website looks perfect: Lil Wayne HQ But in Internet Explorer, it displays the text underneath the radio button, instead of to the right of the button. This is what the poll currently looks like in IE: But this is what I would like it look like, and what it already looks like in other browsers: Anyone know how I can fix this with css? And I am using a IE specific style sheet. Thanks Similar TutorialsHi all! I'm wondering for quite a while now... when you put text or a label next to a radiobutton, it never lines up nicely. The (label) text is always a bit lower then the radiobutton. A common solution to this is using tables. But I don't want to use this "hack". I've also tried CSS margins and padding, but these don't seem to help. Is there any elegant way out there to get the text nicely lined up with a radiobutton? Thanks! I am attempting to create a form to collect data from users. Basically it is just a series of yes/no/not applicable answers. I have been attempting to format the form to look like this link http://www.nateandstephie.com/php/mrrc/test.php As you can see the fieldset is nicely arranged. The problem arises when I attempt to change one of the text inputs into three seperate radio buttons. The buttons end up vertical or right on top of one another. I am guessing there has to be a way by adjusting margins or something but I cannot seem to find it. Below is the code for the link above. Any help on solving this problem or if you have a better suggestion for how to create the type of form I am looking for is greatly appreciate. Thanks!! Code: <style type="text/css">
form, label, input {
font-size : 1em;
}
fieldset {
width: 700px; margin: 0 auto; padding: 10px 20px;
}
legend
{border: 1px solid #000; padding: 5px;
}
label {
position: relative; /* makes this the 'containing block' for the Absolutely Positoned input element */
width: 330px; /* see 20px left margin on input to center with 'cellspacing' */
display: block; /* required because label is an inline element by default */
text-align: right; /* right align text in label */
margin: 20px 0;
background: #ffd;
}
label input {
position: absolute;
top: 0;
left: 100%; /* position at right side of label */
margin-left: 20px; /* adds a gap between label and input */
width: 350px;
}
br {
display : none;
}
</style>
<p>This page is based entirely on <a href="http://www.webmasterworld.com/forum83/3758.htm">Wertigons css forms thread</a></p>
<form method="post" action="">
<fieldset id="qanda">
<legend>questions & answers</legend>
<label for="a1">Please enter your name:<input type="text" name="a1" id="a1" /></label><br />
<label for"a2">Would you like to share your email?:<input type="text" name="a2" id="a2" /></label><br />
<label for="a3">What is the nature of your question:<input type="text" name="tel" id="a3" /></label><br />
</fieldset>
</form>
Other than changing the background color behind the radio button, does anyone know if it is possible to change the color inside the button to anyhing but white? More specificaly, when a button is disabled, anyway to change the grey color on the inside? Thanks guys! Hello, I have been reading through this message board for a few days now and have found great information that has helped me more than you could realize. I am here with my own problem now though and hoping somebody will be able to help me. When I took on this project I never would have imagined I would be spending this much time on trying to get radio buttons in a form to display correctly. The client wants four buttons listed horizontal, but for the life of me I can not get it to work. I have tried putting them in an unordered list, separate floating divs but nothing has worked. If anyone is able to point me in the right direction on how to get the radio buttons to list horizontal in css I would really appreciate it. The site I am working on has approximately ten different forms that all need the buttons listed this way. Thank You in advance for any help..I look forward to spending time on this site in the future. Adam Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> </head> <body> <div style="background-color: red;"><input type="radio" id="radio"></div> </body> </html> Viewing this simple test page in a broswer shows that IE and Mozilla both vertically align the radio button differently within its "box" as well as giving it a different number of pixels of padding and/or margin on all 4 sides. Are there any tricks to getting consistency? Is there a way to make text flow through to a new line if there is too much text to fit in the defined width of a button? I need to get away from "text-graphics" as much as possible because I am writing multilingual apps where the translator configures the translations of all the control words that appear on the menus. Besides it causes downloading lots of little images and this is not good. I would like to do a submit button in a form with a rollover, using the background-image property. Any text on that button is just superimposed on the image via html form. This will be bandwidth friendly as well as easier to make a translation, as I can use the same background image for all the buttons and if the user wants to reskin it all he has to do is put a different bg grc in the css file and resize it. Here is what I have to mess with right now: Code:
#button_btn1 {
font-family: Tahoma, sans-serif;
text-align: center;
font-weight: bold;
font-size: 12pt;
background-image: url(http://localhost/~me/testing/img/BlurMetalLa7.gif);
color: #003300;
border: none;
height: 24px;
width: 126px;
cursor: help;
}
Code: <form action="foo.php"> <input type='submit' id='button_btn1' name='submit' value='Click me' /> </form> It displays the image all right, now I want to rollover. It seems like I need to write a javascript invoked onMouseover to alter the background-image property. I don't know how to do this. I've looked at rollovers that fool with the visibility property and I've even messed with them myself, but they seem very dicey and with each new brower version they break in yet another novel way. Hi, I'm having issues trying to get text to center on a few buttons. Here's the site: http://www.highspeeddirtcheap.com The buttons I'm having problems with are located near the top right, labeled as: Current Deal, How We Roll, and More Deals Moreover, the buttons don't even show up in IE6 or 7. Any ideas of what I'm doing wrong? Thank you. My vertical CSS navigation menu buttons overflow when adding 10 or more buttons. The new buttons end up to the right side of the top buttons. If I change the html format for paragraph format it stops this, but in IE there becomes big space between the buttons. Here is the site: http:// bradleyrose . net / WaterStreetRestaurant I want to get buttons like these with my CSS: http://members.cox.net/npalmi188/test.jpg how do I do this? (don't worry about the color codes) everytime I try to get something near it I get this gay gray extra bevel to my button, anybody know how to fix that? here's the code I was using that had the gray bevel: Code: input.button
{
font-family: MS Sans Serif;
font-weight: none;
font-size: 10px;
color: #ffffff;
background: #4C5844;
}
So what I want is to have 2 forms with buttons aligned horizontally. <form><input type="submit"></form> <form><input type="submit"></form> They should be like this: [Button 1] [Button 2] But instead, they go like this: [Button 1] [Button 2] And I don't know the CSS for it, so thanks in advance. Hi, Im just learning css and notice that alot of elements such as navigation can be done using bullet points. Im wanting to make the .nav div into a button so i need to to be 30 pixels high and have a have a 1pixel white line underneath it, also is there a way to stop the indent? my second question is when i add an image as a bullet point its aligned to the bottom of the text, can you change the position of it so its in the middle of it? Code: .nav {
height:30px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
line-height:30px;
}
.bul-sec {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
list-style-position: outside;
list-style-image:url(images/bullets/sec.gif);
line-height:30px
}
or is there a better way to do this? Thanks! I am currently working on a project for which I am considering using either Flash or CSS. Basically, what I need to do is draw a button, say a simple circle, on top of another image. Alternatively, I could also use an image of the circle if need be. Either way, what I need to do is be able to position that image in a specific spot over the other image. I was able to get this to work in IE, but not Firefox. Is there a way that I can place the image on top of the other image and keep it relative to the original, larger, image? To give you a better idea of what I'm trying to do, think about putting pointers on a map like google maps. Are there any tutorials or examples of this that anyone can suggest? Brent I've created navigation buttons in Photoshop by making an 818px wide document, spacing out the words, then slicing them up. My navigation division is 818px wide but when I insert the buttons I created, they don't fit. I do not have any borders around them that I can tell. Why would this happen? http://www.oharenoise.org/new/2009_news_releases.htm Hi, Im trying to style the button tags, mainly to obtain rounded corners, using images. I can't use '<a>' links to style, which would be simpler, as the button is being used for a program written specifically to use button tags. I have the button working in IE 5, 8 and 9 and firefox but other incarnations do not. body { behavior:url( hover.htc ); } Code: /* REQUIRED BUTTON STYLES: */
button {
position: relative;
color:#000000;
border: 0;
padding: 0;
cursor: pointer;
overflow: visible; /* removes extra side padding in IE */
outline: 0;
}
button::-moz-focus-inner {
border: none; /* overrides extra padding in Firefox */
}
button span {
position: relative;
display: block;
white-space: nowrap;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Google Chrome only - fix margins */
button span {
margin-top: -1px;
}
}
/* OPTIONAL BUTTON STYLES for applying custom look and feel: */
button.submitBtn {
padding: 0 15px 0 0;
margin-right:5px;
font: normal 12px Tahoma;
color:#000000;
text-align: center;
background: transparent url(btn_sprite2.gif) no-repeat right -140px;
}
button.submitBtn span {
padding: 3px 0 7px 15px;
height:15px;
background: transparent url(btn_sprite2.gif) no-repeat left top;
color:#000;
}
button.submitBtn:hover, button.submitBtnHover { /* the redundant class is used to apply the hover state with a script */
background-position: right -210px;
}
button.submitBtn:hover span, button.submitBtnHover span {
background-position: 0 -70px;
}
button.submitBtn:active, button.submitBtnActive { /* the redundant class is used to apply the hover state with a script */
background-position: right -140px;
}
button.submitBtn:active span, button.submitBtnActive span {
background-position: left top;
}
Code: <button value="submit" class="submitBtn"><span>Submit</span> The above is the method i have used so far. Does anyone know how i could improve on this, or another method that maybe beneficial? Any help will be appreciated. Cheers. Okay so I have a basic CSS navigation panel on the left-hand side of my webpage. Basically I surrounded an <li> tag with a solid border so it's a rectangle with some text in the middle (ie. about, home, contact us, articles, etc) and I linked it using an <a> tag: Example: Code: <ul> <a href="home.html" class="button"><li>HOME</li></a> <a href="about.html" class="button"><li>ABOUT</li></a> ... </ul> Then for CSS: Code: #navigation ul {
width: 128px;
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
background: #CCC;
padding-left: 5px;
margin-top: 5px;
border: 1px solid #000;
border-left: 10px solid #336699;
}
#navigation a.button {
color: #333;
text-decoration: none;
}
#navigation a.button:hover {
color: #FFF;
}
The url is: Wolfenzon Schulman It's a website for a firm I work for. So basically, on the FF edition, the buttons work as intended, the entire <li> tag is linked (<a>'ed) and you can click on any part of it to activate the :hover and follow the link. The IE version, you can only hover over the text and anywhere before that (probably because of the padding-left: 5px associated with it). No matter what I've seemed to come up with, the IE version will just not cooperate. Is there a way to create oval buttons with CSS? I have an image of the button, and if I slice the image up in three sections, for example with two ends and a middle section for text, it becomes a mess if you go over a certain length. Is there a better way using CSS? Was working on a new design for one of my sites today and when I inadvertently discovered using buttons as tabs, however... I am more of a programmer than I am a designer. The tabs look differently in Firefox than they do in IE. In IE, I give the currently tab more padding than the other buttons and those other buttons stay attached to the <div> below them. In Firefox/Mozilla, the other buttons are raised up. See here* *You will notice that the Home page has rounded corners, while the About page does not; can't decide which one I like better The other issue I have in IE is that when I button is being clicked/activated, it detaches itself from the <div> below. -- Maybe a good time to also ask how I can accomplish something using div's or span's that I used to do with table's: How would I have a 700px wide box, with a div at the top, split 50/50 so that I could have a small logo at the top left and a search box (on the same row) at the top right? I have always: Code: <table width="700"> <tr> <td width="50%">logo</td> <td width="50%" align="right">search box</td> </tr> </table> -- One mo If I am using HTML 4.01 strict, can I still use: Code: <td align="center" valign="middle"> or do I have to: Code: <td style="text-align:center;vertical-align:middle"> Cheers! The problem that I am having is that my nav buttons will not show up unless you click on the the space first than they are there. This is the code it is done is html, css and php help would be great thanks.
PHP Code: <?php ?> <html> <head> <title>CSS</title> <style type="text/css"> a.menu , a.menu:link { font-family:Arial, Helvetica, sans-serif; font-weight : bold; font-size:12px; line-height : 30px; text-align : center; text-decoration:none; color : #ffffff; } a.menu:visited { background : url('Images/Untitled-1.png') no-repeat 0% 0%; width: 160; height: 35; color : #ff0000; } a.menu:hover { background : url('Images/Untitled-2.png') no-repeat 0% 0%; color : #ffffff; font-weight : bold; } a.menu:active , body { background : url('Images/Untitled-2.png') repeat; font-weight : bold; line-height : 30px; text-decoration : none; text-align : center; color : #ffffff; } body { background-image : url(Images/brushedmetallighter.jpg); } </style> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head> <body> <table width="199" height="210" border="0" align="left" bordercolor="#666666"> <tr> <td width="187" height="80" align="left" valign="top" background="brushedmetallighter.jpg"> <?php $hostname = "xxxx"; $database = "xxxx"; $username = "xxxx"; $password = "xxxx"; $connpt = mysql_pconnect($hostname, $username, $password) or trigger_error(mysql_error(),E_USER_ERROR); mysql_select_db($database, $connpt); $sql = "SELECT * FROM mega ORDER BY productsID"; $result = mysql_query($sql, $connpt) or die(mysql_error()); if (mysql_num_rows($result) < 1) { print "There are no items to display."; } else { while($row = mysql_fetch_array($result, MYSQL_ASSOC)) { $Name = $row['productsName']; $productsID = $row['productsID']; $LeftBanner = $row['LeftBanner']; $BottomBanner1 = $row['BottomBanner1']; $BottomBanner2 = $row['BottomBanner2']; $BottomBanner3 = $row ['BottomBanner3']; $UpperLeftImage = $row ['UpperLeftImage']; $UpperRightImage = $row ['UpperRightImage']; $LowerLeftImage = $row ['LowerLeftImage']; $LowerRightImage = $row ['LowerRightImage']; $Label = $row['Label']; echo "<a href=\"mg_frame3.php?productsID=".$productsID."\"target=\"mainFrame\" class=\"menu\">".$Label."</a> "; } } ?> </td> </tr> <tr> <td height="50" align="left" valign="top" background="brushedmetallighter.jpg"><p><br> <br> </p> </td> </tr> <tr> <td height="71" align="left" valign="top" bordercolor="#000000" background="brushedmetallighter.jpg></td> </tr> </table> </body> </html> |
|||||||