Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Styles automatically adding radio border 2

Status
Not open for further replies.

Ito2233

MIS
Sep 2, 2003
77
US
I added a linked stylesheet defining font colors, font type and font size for a form. For some reason, though, my form's radio buttons now have borders around them. The text field, which before had a standard shadowed border, is now a plain rectangle. So my question is "Why have the form objects' borders been modified, if I did not specify anything"?
Thanks
 
Can we see this in action? It is clear that your stylesheet must also define borders for input elements. It should look something like:
input {
border: 1px solid black;
}
 
That's what's so strange...I have no references to borders in the class I'm calling. See below:

.helpFile {
color: #000088;
font-family: arial;
font-size: 11px;
line-height: 14px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 8px;
margin-top: 8px;
}

So I'm not sure why the browser is automatically adding borders when I call this class....
 
How does your entire html document look like? Are you sure there are no other references to stylesheets or inline styles? If you remove the class declaration, do the borders go away?
 
The page looks as it should, in terms of font color, size, etc. The only things that aren't right are the box borders around the radio buttons, and a non-shadowed looking text field border.

There is indeed an embedded stylesheet that I just noticed (and which, surprisingly, was being overridden by my linked stylesheet). However, it too has no references to borders....only to text size and font.

When you talk about removing the class declaration, what do you mean?

Thanks
 
You have the above mentioned class in an external .css file or between <style> tags in the document head. Since it is a class, you need to apply it to any element within your page in order to work. That means your code must look like this:

<input type="text" class="helpFile" name="text" />

If you remove this class reference from the input, do the borders go away? Again, I ask you to post entire html code or even better to put it online somewhere for us to test it.
 
Vragabond, here is the code. As it is right now, the class is being applied to <BODY>. However, I have moved the style around to different tags, to no avail.
I think it's important for me to say that FireFox and Netscape are rendering the page correctly, without borders. It is Internet Explorer that's messing it up. But because it is Explorer that our clients use, I have to figure this problem out.
Below is the code...it looks messed up here because of wrapping. Perhaps if you pasted it into a text editor it would look correct??

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="mimes/shared/style/stylesheet.css" rel="stylesheet" type="text/css">
</head>

<body class="helpFile"><IMG src="mimes/images/belimo_logo.gif">
<FORM name=surveyForm onsubmit="return validateForm(this)"
action=/cgi-bin/belimo-surveyproc.cgi method=post>&nbsp;&nbsp;&nbsp;&nbsp;<SPAN>Usability Survey</SPAN>
<OL>
<LI><STRONG>What is the username that was assigned to you via email?</STRONG>
<INPUT name=username><BR><BR>
<LI><STRONG>Overall, did you enjoy the look and feel of the site?</STRONG><BR>
(not at all) 1<INPUT type=radio value=1 name=lookfeel> 2<INPUT type=radio value=2 name=lookfeel> 3<INPUT
type=radio value=3 name=lookfeel> 4<INPUT type=radio value=4 name=lookfeel>
5<INPUT type=radio value=5 name=lookfeel> 6<INPUT type=radio value=6
name=lookfeel> 7<INPUT type=radio value=7 name=lookfeel> 8<INPUT type=radio
value=8 name=lookfeel> 9<INPUT type=radio value=9 name=lookfeel> 10<INPUT
type=radio value=10 name=lookfeel></DIV> (very much)<BR><BR>
<LI><STRONG>Did you find the site straightforward to navigate?</STRONG><BR>
(not at all) 1<INPUT type=radio value=1 name=navigate> 2<INPUT type=radio value=2 name=navigate> 3<INPUT
type=radio value=3 name=navigate> 4<INPUT type=radio value=4 name=navigate>
5<INPUT type=radio value=5 name=navigate> 6<INPUT type=radio value=6
name=navigate> 7<INPUT type=radio value=7 name=navigate> 8<INPUT type=radio
value=8 name=navigate> 9<INPUT type=radio value=9 name=navigate> 10<INPUT
type=radio value=10 name=navigate> (very much)<BR><BR>
<LI><STRONG>How easily were you able to search the product
catalog?</STRONG><BR>(not easily) 1<INPUT type=radio value=1 name=catalog>
2<INPUT type=radio value=2 name=catalog> 3<INPUT type=radio value=3
name=catalog> 4<INPUT type=radio value=4 name=catalog> 5<INPUT type=radio
value=5 name=catalog> 6<INPUT type=radio value=6 name=catalog> 7<INPUT
type=radio value=7 name=catalog> 8<INPUT type=radio value=8 name=catalog>
9<INPUT type=radio value=9 name=catalog> 10<INPUT type=radio value=10
name=catalog> (very easily)<BR><BR>
<LI><STRONG>Was it easy to find information on an individual
product?</STRONG><BR>
(very hard) 1<INPUT type=radio value=1 name=product>
2<INPUT type=radio value=2 name=product> 3<INPUT type=radio value=3
name=product> 4<INPUT type=radio value=4 name=product> 5<INPUT type=radio
value=5 name=product> 6<INPUT type=radio value=6 name=product> 7<INPUT
type=radio value=7 name=product> 8<INPUT type=radio value=8 name=product>
9<INPUT type=radio value=9 name=product> 10<INPUT type=radio value=10
name=product> (very easy)<BR><BR>
<LI><STRONG>How easy was the process of placing an order?</STRONG><BR>
(very hard) 1<INPUT type=radio value=1 name=ordering> 2<INPUT type=radio value=2
name=ordering> 3<INPUT type=radio value=3 name=ordering> 4<INPUT type=radio
value=4 name=ordering> 5<INPUT type=radio value=5 name=ordering> 6<INPUT
type=radio value=6 name=ordering> 7<INPUT type=radio value=7 name=ordering>
8<INPUT type=radio value=8 name=ordering> 9<INPUT type=radio value=9
name=ordering> 10<INPUT type=radio value=10 name=ordering> (very easy)<BR><BR>
<LI><STRONG>Did you find the transaction detail information easy to
browse?</STRONG><BR>
(very hard) 1<INPUT type=radio value=1 name=detail> 2<INPUT
type=radio value=2 name=detail> 3<INPUT type=radio value=3 name=detail>
4<INPUT type=radio value=4 name=detail> 5<INPUT type=radio value=5
name=detail> 6<INPUT type=radio value=6 name=detail> 7<INPUT type=radio
value=7 name=detail> 8<INPUT type=radio value=8 name=detail> 9<INPUT
type=radio value=9 name=detail> 10<INPUT type=radio value=10 name=detail>
(very easy)<BR><BR>
<LI><STRONG>Were any aspects of the site confusing to you? Would you change
anything?</STRONG><BR><TEXTAREA name=comments rows=7 cols=50></TEXTAREA>
</LI></OL>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <INPUT type=submit value="Submit Survey"> &nbsp; <INPUT type=reset value="Reset Survey"> </FORM></BODY></HTML>

</body>
</html>
 
My IE does not render any specific borders with this code. But then again, you did not enclose your .css file so it is hard for me to say. Please post that as well. Is the problem appearing in all IE browsers or just yours?
 
My CSS file - stylesheet.css - is huge. The only class that I call from within the HTML document is helpFile, which I have pasted in one of the threads above.
It's not only on my computer that this happens. I looked at the page from other computers here in the office that run IE, and the borders were visible on them. The version of IE we run here is 6.0.2800.
 
I tried it on IE6 and it seems to work, could you post your CSS file too?

One thing to try would be to use a full DOCTYPE:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
as your current one maybe throwing IE into "quirks" mode.

You should also run your page through the validator at - you'll find lots to fix including unclosed <LI> tags, 2 </body> and </html> tags, and a </DIV> that isn't opened. It probably won't do anything for your border problem, but does stop silly errors creeping in. You might think about giving <li> some margin-bottom in CSS, instead of those <BR><BR>s too.

-- Chris Hunt
 
My CSS file - stylesheet.css - is huge. The only class that I call from within the HTML document is helpFile, which I have pasted in one of the threads above.
If it is huge there is more a reason something is wrong there. CSS stylesheets do not set only classes but can change the default appearance of certain elements. If you enclose it in [code][/code] tags, we will be able to read it and point you to any possible errors.
 
I thought that the only styles that would be applied would be those called from within the HTML document....
Anyway, here goes:

/* CSS Document */

.helpFile {
color: #000088;
font-family: arial;
font-size: 11px;
line-height: 14px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 8px;
margin-top: 8px;
}

.helpFile H5 {
font-size: 14px;
font-weight: bold;
}


.firstPage {
color: #000088;
font-size:12px;
font-family:arial;
}

.firstPage a:link, .firstPage a:visited, .firstPage a:active, {
color: #000088;
text-decoration: none;
font-weight: normal;
}

.firstPage a:hover {
color: #000088;
text-decoration: underline;
font-weight: normal;
}

.firstPage td {
color: #000088;
font-size:12px;
font-family:arial;
}

body {
background: #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}

body a { font-weight: bold; text-decoration: underline; }

body, table {
color: #000000;
font-weight: normal;
font-family: Arial Roman, Arial, sans-serif;
font-size: 11px;
line-height: 14px;
}

body.blueBack-normal {
background: #8AB7FF;
}

body.title {
font-weight: bold;
}

body.blueBack-title {
background: #8AB7FF;
font-weight: boldl;
}

.navigation-bar { background: #FF6600; font-weight: bold; font-size: 12px; line-height: 20px; padding-left: 14px; color: #ffffff; }
.navigation-bar a:link, .navigation-bar a:visited { color: #FFFFFF; text-decoration: none; font-size: 12px; line-height: 20px; font-weight: bold;}
.navigation-bar a:hover, .navigation-bar a:active { color: #FFFFFF; text-decoration: underline; font-size: 12px; line-height: 20px; font-weight: bold;}

.navigation-transactionSelection { background: #8AB7FF; color: #000000; font-weight: normal; font-family: Arial; }

.navigation-catalogSearch { background: #000088; color: #FFFFFF; font-weight: bold; font-size: 12px; line-height: 20px; padding-left: 14px;}
.navigation-catalogSearch a:link, .navigation-catalogSearch a:visited { color: #FFFFFF; text-decoration: none; }
.navigation-catalogSearch a:hover, .navigation-catalogSearch a:active { color: #FFFFFF; text-decoration: underline; }

.navigation-catalogSearch-unbolded {font-weight: normal;}
.navigation-catalogSearch-unbolded a:link, .navigation-catalogSearch-unbolded a:visited { color: #FFFFFF; text-decoration: none; }
.navigation-catalogSearch-unbolded a:hover, .navigation-catalogSearch-unbolded a:active { color: #FFFFFF; text-decoration: underline; }

.navigation-welcomeMessage { background: #2323C2; color: #FFFFFF; text-align: center; font-weight: bold; font-size: 12px; line-height: 20px; padding-left: 14px;}
.navigation-welcomeMessage a:link, .navigation-welcomeMessage a:visited { color: #FFFFFF; text-decoration: none; }
.navigation-welcomeMessage a:hover, .navigation-welcomeMessage a:active { color: #FFFFFF; text-decoration: underline; }

.navigation-topUnselectedBackground { background: #00006B; color: #FFFFFF; text-align: center; font-weight: bold; font-size: 12px; line-height: 20px; }
.navigation-topUnselectedBackground a:link, .navigation-topUnselectedBackground a:visited { color: #FFFFFF; text-decoration: none; }
.navigation-topUnselectedBackground a:hover, .navigation-topUnselectedBackground a:active { color: #FFFFFF; text-decoration: underline; }


/* copied */

form { margin: 0; }
input {
font-family: Arial, sans-serif;
font-size: 9px;
text-align: left;
border: 1px solid Gray;
}

select {
font-family: Arial, sans-serif;
font-size: 11px;
text-align: left;
border: 1px solid Gray;
}

input.button {
background-color: #AACCFF;
font-size: 9px;
font-family: arial;
color: #336699;
border-color: #235388;
border: solid 1px;
text-align: center;
vertical-align: middle;
}

.showcase { color: #000088; background: #AACCFF; font-weight: bold; letter-spacing: 3px; text-align: center; }
.showcase a:link, .showcase a:visited, .showcase a:hover, .showcase a:active { font-weight: bold; text-decoration: underline; }

/* table */

.table-padding {
padding-left: 14px;
}

.categoryDetailList {
color: #000088;
font-size: 11px;
font-family: arial,helvetica;
line-height: 14px;
border-bottom: dotted 1px #A5A5D5;
}
.categoryDetailList td {
border-top: dotted 1px #A5A5D5;
}

.categoryDetailList td.even{ background: #DAECFE; padding: 14px; }
.categoryDetailList td.odd{ background: #E9F4FF; padding: 14px; }

.categoryDetailList a:link,
.categoryDetailList a:visited,
.categoryDetailList a:link,
.categoryDetailList a:visited {
color: #000088;
font-weight: bold;
text-decoration: underline;
}

.categoryBreadCrumbs {
color: #000088;
font-size: 11px;
font-family: arial,helvetica;
line-height: 14px;
font-weight: bold;
padding-left: 14px;
}

.categoryBreadCrumbs a:link,
.categoryBreadCrumbs a:visited,
.categoryBreadCrumbs a:link,
.categoryBreadCrumbs a:visited {
color: #000088;
font-weight: normal;
text-decoration: underline;
}

.bottomButtons {
padding-left: 14px;
vertical-align: middle;
}

.documentNavigation {
background: #9BC2FF;
color: #000000;
font-size: 11px;
font-family: arial,helvetica;
line-height: 20px;
padding-left: 7px;
}

.documentNavigation a:link,
.documentNavigation a:visited,
.documentNavigation a:hover,
.documentNavigation a:active,{
background: #9BC2FF;
color: #000000;
font-weight: bold;
text-decoration: underline;
}


.ordermain, .ordermain table {
color: #000088;
}


.ordermain {
margin-top: 14px;
margin-left: 14px;
margin-bottom: 0px;
margin-right: 0px;
}

.ordermain, .ordermain table {
color: #000088;
}

.ordermain table {
padding-bottom: 5px;
}

th.orderHeader {
color: #000088;
font-weight: bold;
text-align: right;
padding: 2px;
background: #AACCFF;
border-top: solid 1px #000088;
border-left: solid 1px #000088;
border-right: solid 1px #000088;
vertical-align: middle;
}

td.orderHeader {
color: #000088;
font-weight: normal;
text-align: left;
padding: 2px;
background: #FFFFFF;
border-top: solid 1px #000088;
border-right: solid 1px #000088;
vertical-align: middle;
}

td.orderHeader a:link,
td.orderHeader a:visited,
td.orderHeader a:hover,
td.orderHeader a:active {
color: #000088;
font-weight: bold;
text-align: left;
vertical-align: middle;
text-decoration: underline;
font-size: 9px;
}

th.orderPrice {
color: #000088;
font-weight: bold;
text-align: right;
padding: 2px;
vertical-align: middle;
}

td.orderPrice {
color: #000088;
font-weight: normal;
text-align: right;
padding: 2px;
vertical-align: middle;
}

td.orderMessageLine{
color: red;
font-weight: bold;
padding: 10px;
}

.orderItemList {
padding: 2px;
text-align: left;
vertical-align: middle;
}

.orderItemList th {
background: #AACCFF;
border-top: solid 1px #000088;
font-weight: bold;
text-decoration: none;
}

.orderItemList tr.even { background: #DDEEFF; }
.orderItemList tr.odd { background: #FFFFFF; }

.orderItemList td.topRow {
border-top: solid 1px #000088;
}

.orderItemList a:link,
.orderItemList a:visited,
.orderItemList a:hover,
.orderItemList a:active {
color: #000088;
font-weight: normal;
text-decoration: underline;
}

.orderItemConfiguration {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 2px;
padding-right: 2px;
}

.orderItemConfiguration th {
font-size: 10px;
background: none;
border: none;
font-weight: bold;
text-decoration: none;
}

.orderItemList td.orderMessageLine{
padding: 2px;
}


.actualDetailsTab {
font-weight: bold;
color: #FF6600;
vertical-align: middle;
text-align: center;
}

.DetailsTab {
font-weight: bold;
color: #000088;
vertical-align: middle;
text-align: center;
}

.DetailsTab a:link,
.DetailsTab a:visited,
.DetailsTab a:hover,
.DetailsTab a:active {
font-weight: bold;
color: #000088;
vertical-align: middle;
text-align: center;
text-decoration: underline;
}

.itemDetailTab, .itemDetailTab table, .itemDetailTab textarea {
font-weight: normal;
color: #000088;
vertical-align: middle;
text-align: left;
margin-left: 14px;
font-size: 11px;
}


.error {
font-weight: bold;
color: red;
}

.ship {
color: #000088;
}

.registration { color: #000088; font-family: arial; font-weight: bold; }

.logonTable { font-family: arial; font-size: 11px; line-height: 14px; color: #000088; font-weight: bold; margin-left: 10px; margin-top: 10px; }
.logonTable a:link,
.logonTable a:visited,
.logonTable a:hover,
.logonTable a:active {
color: #000088;
font-weight: bold;
text-decoration: underline;
}


.accessoryHeader {
color: #000088;
font-size: 12px;
font-family: arial,helvetica;
line-height: 14px;
font-weight: bold;
border-bottom: solid 1px #AACCFF;
padding-top: 5px;
padding-left: 14px;
text-align: left;
vertical-align: middle;
}

.accessoryList td {
border-bottom: solid 1px #FF6600;
padding: 2px;
text-align: left;
vertical-align: middle;
}

.accessoryList a:link,
.accessoryList a:visited,
.accessoryList a:hover,
.accessoryList a:active {
color: #000088;
text-decoration: underline;
font-weight: bold;
}


.accessoryCloser {
vertical-align: middle;
}


.itemTitle {
color: #000088;
font-size: 12px;
font-family: arial,helvetica;
line-height: 14px;
font-weight: bold;
}

.itemImageTable {
border: #F89434 dotted 1px;
text-align: center;
vertical-align: middle;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
}

.itemTable th {
border-bottom: solid 1px #AACCFF;
text-align: left;
vertical-align: bottom;
font-weight: bold;
}

.attributeList th {
border-bottom: solid 1px #AACCFF;
text-align: left;
vertical-align: bottom;
font-weight: bold;
}

.attributeList td {
border-bottom: solid 1px #FF6600;
padding: 2px;
text-align: left;
vertical-align: middle;
}

.attributeList a:link,
.attributeList a:visited,
.attributeList a:hover,
.attributeList a:active {
color: #000088;
text-decoration: underline;
}

.pdfLinks a:link,
.pdfLinks a:visited,
.pdfLinks a:hover,
.pdfLinks a:active {
color: #000088;
text-decoration: underline;
}

.areaTitle {
color: #000088;
font-size: 12px;
font-family: arial,helvetica;
line-height: 14px;
font-weight: bold;
}

.areaImageTable {
border: #F89434 dotted 1px;
text-align: center;
vertical-align: middle;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
}

.catalogList th {
border-bottom: solid 1px #AACCFF;
text-align: left;
vertical-align: bottom;
font-weight: bold;
}

.catalogList td {
border-bottom: solid 1px #FF6600;
padding: 2px;
text-align: left;
vertical-align: middle;
}

.catalogList a:link,
.catalogList a:visited,
.catalogList a:hover,
.catalogList a:active {
color: #000088;
text-decoration: underline;
}

.pdfLinks a:link,
.pdfLinks a:visited,
.pdfLinks a:hover,
.pdfLinks a:active {
color: #000088;
text-decoration: underline;
}



/*----------------------------------------------------*/
/* modules */
/*----------------------------------------------------*/
div.module-name {
background-color: White;
color: Teal;
text-align: left;
font-weight: normal;
display: inline; /* use switch in web-xml to disable the ouput */
font-size : xx-small;
}

div.module-name-new {
color: #0066cc;
text-align: right;
font-weight: bold;
display: inline; /* use switch in web-xml to disable the ouput */
}

/*-----------------------------------------------------*/
/* Old ones copied */
/*-----------------------------------------------------*/

.bigCatalogInput { width: 155px;}

.bigCatalogInput, .textInput, textarea {
border: 1px solid Gray;
}

.middleCatalogInput { width: 131px; }

.selectInput {
border: #036;
}

/* organizer-list */
table.organizer-list {
font-size: 11px;
line-height: 14px;
color: #000088;
}
table.organizer-list th {
font-weight: bold;
border: none;
text-align: left;
background: none #aaccff;
color: #000088;
}
table.organizer-list tr.odd { background: none #FFFFFF; }
table.organizer-list tr.even { background: none #DDEEFF; }
table.organizer-list td { border-bottom: 1px solid #000088; }

table.organizer-list a:link,
table.organizer-list a:active,
table.organizer-list a:hover,
table.organizer-list a:visited {
color: #000088;
text-decoration: underline;
}
table.organizer-list td.organizer-opener {
border-top: 1px solid #fff;
text-align: left;
background: none #f60;
color: #fff;
border: none;
}

.headSalesDocName {
background: none #acf;
color: #009;
font-weight: bold;
vertical-align: middle;
text-align: left;
border-left: 1px solid #036;
border-top: 1px solid #036;
border-right: 1px solid #036;
}

.headSalesDocInput {
color: #009;
vertical-align: middle;
text-align: left;
border-left: 1px solid #fff;
border-top: 1px solid #036;
border-right: 1px solid #036;
padding: 1px;
}

td.orderHeadPrice {
background: none;
color: #009;
}

td.orderHeadPriceSeparator {
border-top: 1px solid #036;
color: #009;
}

td.orderHeadSeparator {
border-top: 1px solid #036;
color: #009;
}

table.list input, table.list select {
color: #009;
}

.headSalesDocInput input, .headSalesDocInput select {
color: #009;
}

.confirmOrder {
color: #009;
}

table.list {
border-collapse: collapse;
border-top: 1px solid #036;
background: none #fff;
}
table.list th {
font-family: Verdana, Geneva, sans-serif;
width: auto;
color: #009;
border-top: 1px solid #036;
border-bottom: 1px solid #036;
text-align: center;
background: none #acf;
}
table.list tr.odd {background: none #fff;}
table.list tr.even {background: none #fff; }
table.list tr.odd td {
font-family: Verdana, Geneva, sans-serif;
background: none #fff;
border-bottom: 1px solid #036;
}
table.list tr.even td {
font-family: Verdana, Geneva, sans-serif;
background: none #fff;
border-bottom: 1px solid #036;
}
table.list td {
font-family: Verdana, Geneva, sans-serif;
color: #009;
}
 
At this point the question is why Mozilla doesn't show the border, but I don't have time to scan through your css that thoroughly. Anyway, here is the incriminating code.
Code:
/* copied  */

form { margin: 0; }
[COLOR=red]input {
    font-family: Arial, sans-serif;
    font-size: 9px;
    text-align: left;
    [b]border: 1px solid Gray;[/b]
}[/color]

select {
    font-family: Arial, sans-serif;
    font-size: 11px;
    text-align: left;
    border: 1px solid Gray;
}
Most important part for you is the input. That means all input elements on the page will have this font, this alignment and this border. Either remove the border or this item completely and it should work.
 
Vragabond:
Thanks, it worked!!!
Apparently, I had a gap in my understanding of stylesheets. I thought that styles defined for common tags like TABLE or INPUT would only apply to an HTML page if the stylesheet were embedded, and not linked. I didn't realize all of my CSS styles were being applied when the stylesheet file was linked to the HTML file.

ChrisHunt: Thanks for the tip about the redundant, unclosed and unopened tags in the code. I inherited this page from a co-worker, and those errors slipped right past me as I made modifications to the page.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top