Hi, Experts,
I am new to css/dhml. I wrote a piece of css/dhml code which works ok with IE (not perfectly, though), but not work at all with firefox.
Here is my css file – mystyle.css:
Here is my dhtml file:
Here are my questions.
1)As I said before, the above code only works ok with IE, but not with Firefox. I appreciate your help in making it work with help. And please also tell me in future, how I can deal with this kind problem? I have found out that sometimes my css file works with IE, but not Firefox. And sometimes it is the other way around. This really drives me nuts. Is there any documentation talking about this issue, i.e. css specs with different browsers?
2)As you may noticed, I added lots of white spaces (actually 21 white spaces) in the first row/right column to make the check boxes evenly spread out. Apparently, it is a dumb way to implement this. And it only works with IE. With Firefox, I only need 14 white spaces. Could someone please show me the correct way to implement this? I'd guess I should make some changes in label.r5 class in the css file. But I don't know how.
3)As you may notice, the left column (an input area) is slightly shorter than the right column (a label area). Is there any fine tuning can be done to make them look the exactly same hight?
Thank you so very much for your help.
I am new to css/dhml. I wrote a piece of css/dhml code which works ok with IE (not perfectly, though), but not work at all with firefox.
Here is my css file – mystyle.css:
Code:
.outterRow {
background: #996600;
text-align: center;
width: 96%;
margin: 0 auto; /* to center it */
}
DIV.base-layer {
font-size: 12pt;
font-weight: bold;
vertical-align:middle;
margin: 0.5em 12px;
padding: 0.5em;
text-align: left;
background: transparent;
}
DIV.table-row {
background: none #ffffcc;
font-size: 10pt;
text-align: left;
padding: 4px 0;
height: 1.5em;
clear: both;
background: transparent;
}
.submitButtons input{
text-align: center;
font-weight: bold;
width: 25%;
}
label.r5 {
vertical-align: center;
font-family: arial;
font-weight: bold;
font-size: 10pt;
text-align: center;
background: transparent;
width: 20%;
}
.l-container_dark, .l-container_light, .r-container {
border: none;
margin: 0;
padding: 0;
font-weight: bold;
width: 49.95%;
float: left;
}
input.upload_dark, input.upload_light {
border: solid #cccc66 1px;
width: 80%;
}
.l-container_dark, input.upload_dark {
background-color: #777777;
}
.l-container_light, input.upload_light {
background-color: #AAAAAA;
}
.r-container {
text-align: center;
background: #cccc66;
}
Code:
<html><head>
<link rel="stylesheet" type="text/css" href="./mystyle.css" />
</head><body>
<form method="post" action="#" enctype="multipart/form-data" name="msf">
<div class="outterRow">
<div class="base-layer">
<div class="table-row" id="myid2">
<div>
<input name="ml1" class="l-container_dark" type="text" id="ml1ID" />
<label class="r-container">
<input name="mkocr1" type="checkbox" value="no" id="mkocr1ID" />
[COLOR=red]
[/color]
<input name="native1" type="checkbox" value="no" id="native1ID" />
[COLOR=red]
[/color]
<input name="tiff1" type="checkbox" value="no" id="tiff1ID" />
[COLOR=red]
[/color]
<input name="ocr1" type="checkbox" value="no" id="ocr1ID" />
[COLOR=red]
[/color]
<input name="data1" type="checkbox" value="no" id="data1ID" />
</label>
</div>
<div>
<input name="fname1" class="upload_dark" type="file" id="fnamel1ID" />
</div>
<div>
<input name="ml2" class="l-container_light" type="text" id="ml2ID" />
<label class="r-container">
<input name="mkocr1" type="checkbox" value="no" id="mkocr1ID" />
<input name="native1" type="checkbox" value="no" id="native1ID" />
<input name="tiff1" type="checkbox" value="no" id="tiff1ID" />
<input name="ocr1" type="checkbox" value="no" id="ocr1ID" />
<input name="data1" type="checkbox" value="no" id="data1ID" />
</label>
</div>
<div>
<input name="fname2" class="upload_light" type="file" id="fname21ID" />
</div>
</div>
</div>
</div>
<div class="outterRow">
<div class="submitButtons">
<input type="submit" name=".submit" value="Submit" /> <input type="reset" name=".reset" value="Cancel" />
</div>
</div>
<div></div>
</form></body></html>Here are my questions.
1)As I said before, the above code only works ok with IE, but not with Firefox. I appreciate your help in making it work with help. And please also tell me in future, how I can deal with this kind problem? I have found out that sometimes my css file works with IE, but not Firefox. And sometimes it is the other way around. This really drives me nuts. Is there any documentation talking about this issue, i.e. css specs with different browsers?
2)As you may noticed, I added lots of white spaces (actually 21 white spaces) in the first row/right column to make the check boxes evenly spread out. Apparently, it is a dumb way to implement this. And it only works with IE. With Firefox, I only need 14 white spaces. Could someone please show me the correct way to implement this? I'd guess I should make some changes in label.r5 class in the css file. But I don't know how.
3)As you may notice, the left column (an input area) is slightly shorter than the right column (a label area). Is there any fine tuning can be done to make them look the exactly same hight?
Thank you so very much for your help.
retty.pm. The relevant perl code is like this: