CSS - Radio Button Sizes Ie Vs. Firefox

How can I set the color inside a radio button. background-color won't work. it sets color around radio buttons. I tested color, it is not working for this as well.

I styled my form elements with codes below but I am having trouble with styling my radio buttons. I tried fieldset div input.radio, fieldset div radio, fieldset div radioarea none worked.

Code:

fieldset div input	{
	width:150px;
	border-top:1px solid #000000;
	border-left:1px solid #000000;
	border-bottom:1px solid #aaaaaa;
	border-right:1px solid #aaaaaa;
	padding:1px;
}
fieldset div textarea	{
	width:300px;
	border-top:1px solid #000000;
	border-left:1px solid #000000;
	border-bottom:1px solid #aaaaaa;
	border-right:1px solid #aaaaaa;
	padding:1px;

I'm working on a proof of concept, to be able to create a rounded edge button that will expand with the text on it. To do this I've been using a button tag with a span inside it, such as:

Code:

<form onsubmit="return doSomething()">
	<input type="text" name="textfield" /><br />
	<button type="submit"><span>Button Tag and a really long blah</span></button>
</form>

Unfortunately, IE and Firefox put some default padding on their buttons which is hard to get rid of. With some fiddling, I got this:

Code:

BUTTON {
	background:url(btn_right.jpg) no-repeat top right;
	padding: 0px;
	border: none;
	width: auto;
	overflow: visible;
}
BUTTON SPAN {
	background:url(btn_left.jpg) no-repeat top left;
	display: block;
	padding: 15px 25px 25px 20px;
	margin: 0px -3px;
	white-space: nowrap;
	position: relative;
	top: -1px; /* for Firefox */
}
* HTML BUTTON SPAN { margin: 0px; top: -2px;} /* for IE */

Looking at it in Opera 9, the same top: -1px that makes it work in Firefox is what breaks it in Opera. Past browser detection and serving different stylesheets, is there an easy way to make this work for both Opera and Firefox?

Hey any idea why submit button at this page is not working???

http://www.ajilanyureq.com

http://m-i-x.net/beta

basicly i want the 2 sides heights to be the same as the height of the content...how can i do it?

Hi, I'm new to CSS and am trying to deign a navigation bar for a website. The problem that i face is trying to size the headings a little larger than the sub catagories.
The code is as follows for the style sheet i have tried this:
body{
font-family: Arial,sans-serif;
color: #FFFFFF;
line-height: 1.1;
margin: 0px;
padding: 0px;
}

a{
color: #FFFFFF;
text-decoration: none;
}

a:link{
color: #FFFFFF;
text-decoration: none;
}

a:visited{
color: #FFFFFF;
text-decoration: none;
}

a:hover{
color: #FFFFFF;
text-decoration: underline;
}
b{
color: #FFFFFF;
text-decoration: none;
}
b:link{
color: #FFFFFF;
text-decoration: none;
}

b:visited{
color: #FFFFFF;
text-decoration: none;
}

b:hover{
color: #FFFFFF;
text-decoration: underline;
}
#navBar ul b:link, #navBar ul b:visited {display: block;}
#navBar ul a:link, #navBar ul a:visited {display: block;}

#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}




/*********** #sectionLinks styles ***********/

#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #0033CC;
font-size: 70%;
background-color: #112059;
}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
}

#sectionLinks a {
display: block;
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;

}

#sectionLinks a:hover{
background-color: #0033CC;
}

#sectionLinks2{
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #0033CC;
font-size: 130%;
background-color: #112059;
}


#sectionLinks b {
display: block;
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;
/*font-size: 130%;*/
}

#sectionLinks b:hover{
background-color: #0033CC;

}

and i have the following code in the htm page:


<STYLE>
BODY {
scrollbar-arrow-color:094588;
scrollbar-shadow-color:f0f0f0;
scrollbar-face-color:f0f0f0;
scrollbar-highlight-color:094588;
scrollbar-darkshadow-color:094588;
.style1 {font-size: 16px; background-color: #112059;
background-color: #FFFFFF;
}
a:hover {
color: #FFFFFF;
}
.style1 {color: #FFFFFF}
b:hover {
color: #FFFFFF;
}.style1 {color: #FFFFFF}
</STYLE>

<div id="navBar">
<div id="sectionLinks">
<div id="sectionLinks2">

<h3 class="style1">Menu</h3>
<ul>
<li><b href="index.htm">Home</b></li>
<li><b href="product.htm">Products</b></li>
<li><a href="index.htm">Computer Systems</a></li>
<li><a href="products.htm">Components/Peripherals</a></li>
<li><a href="#">Laptops</a></li>
<li><a href="#">Refurbished</a></li>
<li><b href="services.htm">Services</b></li>
<li><a href="#">PC Repairs</a></li>
<li><a href="#">Upgrades</a></li>
<li><a href="#">Home Networking</a></li>
<li><a href="#">In-home training</a></li>
</ul>
</div>
</div>
</div>

However this only allows hyper links to work that are defined under a href not the larger b href as I so want,
I know this is complicated and long winded but can anyone lend some usefull solution to my problem?
Yours greatfully.

I have an absolutely positioned login form that I am having some troubles with...

On IE7 and the latest version of Fx it looks great.

In some older versions of Fx (1.04 is what I have to test with...), the input size is off compared to the width of the div... And in IE6, the email input is actually wider than the password input (which is really weird since the inputs are set to a size of 25)

Is there a better way to do this... What I want is to have the input fields the same width, with the submit button aligned along the right edge and to have the labels of the input fields aligned left. Or, if I am doing it the right way, what's the deal with IE6?

I'm not too worried about the older Fx versions since it doesn't look all that bad, but on some computers with IE6, the box actually starts to push too far to the right for some reason...

I'm trying to write a website at the moment and I want to use <h1>/<h2> etc for the headings. Problem is though, the heading is going in to a blue bar and the font needs to be the right size. And naturally, IE and FF display the font in different sizes

How would I fix this problem so that the font renders the same size?

Could I make a hacked CSS class that only IE can see that I can apply to the <h1> tag to change the font-size to make it the same size as FF displays it as?

I have used this in my CSS:

p { margin-top: 0.5em;}

But it renders differently in IE6 and Netscape 7.

Is there a method to get this equal in both ?

Thanks.

This is an old subject, and sore spot with everyone, I know. But I like to do a "check-up" from time to time, to see if there are better ways to do this ....

When implementing a tight design, where I cannot afford much deviation in font size from the original design, I find the differences in browsers/versions/OS to be... well... rediculous.

Some time ago I went about normalizing this by specifying font sizes in CSS with the em specification. i.e. font-family: serif; font-size: 0.6em;

I then have a piece of javascript included in every page that detects the OS, OS version, browser and browser version.... and writes the CSS <LINK REL=stylesheet statement to use a particular CSS file.

I started out with three CSS files: Mac, Windows MSIE7 and Windows MSIE6. Now, expecially with Vista, I'm up to 7 different CSS files in all.

This controls fonts very well. And it's not really that much trouble, since you just create the first CSS as you design, then copy that to the other 6 files, and just make font size adjustments.

HOWEVER - is this sane? Is there a better way? (keep in mind that our designs require tight control.)

Any thoughts much appreciated.

I've recoded my previous version which fixes a span problem, but end up with the rows not being able to use different widths & the image spanning the column width from the first row...

div.bg_tp_lt = row 1 @ 105px
div.bg_ct_lt = row 2 @ 53px
div.bg_bt_lt = row 3 @ 68px

So if you can either see what I'm doing wrong or provide a more reliable method it would be greatly appreciated.

Thanks in advance.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 	<head>
  		<title>$var</title>
  		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  		<link rel="stylesheet" type="text/css"  href="styles/styles2.css" media="screen" />
 	</head>
 	<body scroll="no">
<div class="table">
  <div class="tbody">
    <div class="tr">
      <div class="td bg_tp_lt"></div>
      <div class="td bg_tp_ct"></div>
      <div class="td bg_tp_rt"></div>
    </div>
    <div class="tr">
      <div class="td bg_ct_lt"></div>
      <div class="td bg_ct_ct"><div class="content">$content</div></div>
      <div class="td bg_ct_rt"></div>
    </div>
    <div class="tr">
      <div class="td bg_bt_lt"></div>
      <div class="td bg_bt_ct"></div>
      <div class="td bg_bt_rt"></div>
    </div>
  </div>
</div>
 	</body>
</html>

Code:

div.table {
  display: table;
  border: 1px solid #DDDDDD;
  padding: 0px;
  width: 404px;
}
div.thead {
  display: table-header-group;
}
div.tbody {
  display: table-row-group;
}
div.tr {
  display: table-row;
}
div.td {
  display: table-cell;
  border: 0px solid #DDDDDD;
  padding: 0px;
}

div.bg_tp_lt {
  width: 105px;
  height: 60px;
  background-image:url(images/stl.jpg); no-repeat;
  background-color: #000000;
}
div.bg_tp_ct {
  width: auto;
  height: 60px;
  background-image: url(images/st.jpg); repeat-x;
  background-color: #000000;
}

div.bg_tp_rt {
  width: 105px;
  height: 60px;
  background-image: url(images/str.jpg); no-repeat;
  background-color: #000000;
}

div.bg_ct_lt {
  width: 53px;
  height: 150px;
  background-image: url(images/sl.jpg); repeat-y;
  background-color: #000000;
}
div.bg_ct_ct {
  width: auto;
  height: auto;
  background-color: #000000;
}

div.bg_ct_rt {
  width: 53px;
  height: 150px;
  background-image: url(images/sr.jpg); repeat-y;
  background-color: #000000;
}

div.bg_bt_lt {
  width: 68px;
  height: 64px;
  background-image:url(images/sbl.jpg); no-repeat;
  background-color: #000000;
}
div.bg_bt_ct {
  width: auto;
  height: 64px;
  background-image: url(images/sb.jpg); repeat-x;
  background-color: #000000;
}

div.bg_bt_rt {
  width: 68px;
  height: 64px;
  background-image: url(images/sbr.jpg); no-repeat;
  background-color: #000000;
}

/* Little hack for IE */
* html div.td { display: inline; }

I have been doing this joomla site for someone here

The problem is he says when its viewed on a 22" screen with a screen resolution of 1200x800 it does not view right in IE, check images on this post.

I have not seen any of the problems on a 15, 17 , 19 and 42 " screens

Can anyone else see any problems could you also check load times he said it was slow.

An help would be great as i can't see the problem

I was in a meeting today talking about relative font sizes and how they can be problematic, because nesting elements may increase or decrease their font size.

A co-worker said that I could use !important in my CSS to override/ignore the font-sizes of any nested elements. He seems to be way off. The W3C says that !important is really just about user versus author stylesheets, and apparently declaring !important in an author stylesheet doesn't do anything.

So first question -- am I right about !important? It's only about user and author stylesheets, yes?

Second question -- When dealing with relative fonts and nested elements, you have to start writing pretty complex rules, right?

Is there any easy way in CSS without writing multiple rules to say "regardless of what element I place you in, always be x% font size..."?

Here is some code I've started for a project. It is for IE 5+ and uses filters.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body id="bodyid" bgcolor="f3f3f7" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" scroll="no">

<script language="JavaScript1.1">
function resizePage(){
windowHeight = (document.getElementById('bodyid').clientHeight - 60);
document.getElementById("bottomTable").style.height = windowHeight ;
}
</script>

<style type="text/css">
.tddrop {
filter: progid:DXImageTransform.Microsoft.dropShadow(Color=DDDDDD,offX=3,offY=3,positive=true);
border: solid #c0c0c0 1px;
background-color: #ffffff;
}

.spacer{width:15px}
</style>




<table border="0" bgcolor="#34487E" style="width=100%" cellpadding="0" cellspacing="0" >
<tr valign="top">
<td style="height:50" valign="middle" >
<!--- Top bar including left image --->
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;height:100%" >
<tr>
<td>
&nbsp; <!---- image here... ---->
</td>
<td style="width:100%;filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=1, StartColorStr='#34487E', EndColorStr='#C5D1E1')"></td>
</tr>
</table>
</td>
</tr>
<tr><td style="height:1" bgcolor="#7c7c94"></td></tr>
<tr>
<td style="height:10;filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=0, StartColorStr='#f3f4fa', EndColorStr='#9997b5')">
</td>
</tr>
<tr><td style="height:1" bgcolor="#7c7c94"></td></tr>
</table>

<table id="bottomTable" border="0" style="width:100%;height:300" cellpadding="0" cellspacing="12" >
<tr>
<td class="tddrop" style="width:180;">&nbsp;</td>

<td class="tddrop">&nbsp;</td>
</tr>


<script>resizePage();</script>

</body>
</html>


Notice that between the two colums, the <td>'s are not lining up at the bottom. If you remove the shadow filter they line up fine. Anyone have an idea why this might be so?

Thanks

Hi All

I have been contacted by a visitor to one of my sites to let me know that the fonts on a menu are too large but only on Chrome and Safari.

I'm struggling to figure out why the web-kit browsers are enlarging the fonts so much any help that I can get from you guys would be gratefully received.

Font size is fine FF3.5 and IE8

Site is http://www.pwfs.co.uk and its the horizontal navigation menu that the issue occurs.

Hoping someone can help

John