And please don't make me defy you, people...cus I will if I have to.
Now, Here is today's assignment. Why is the password box in this form smaller than the username? This only happens in IE. And also, why are the colors darker in IE. I love the way they look in FF, but in IE...me say yucky.
<tr>
<td width="134" colspan="2">Username:</td>
</tr>
<tr>
<td width="134" colspan="2"><input type="text" name="txtUsername" size="17" maxlength="30" style="font-size:7pt; border: inset 1px #808080;"></td>
</tr>
<tr>
<td width="134" colspan="2">Password:</td>
</tr>
<tr>
<td width="134" colspan="2"><input type="password" name="txtPassword" size="17" maxlength="30" style="font-size:7pt; border: inset 1px #808080;"></td>
</tr>
There is a 2nd part to this quiz, but let's just see how you "so called" xperts deal with this quagmire, before moving along to larger & more important issues.
Thank you.IE6 is very buggy. You might be able to use CSS to get the two elements to be the same width.
Different browsers render the inset, outset, ridge, and groove border styles differently.The lengths of text and password boxes have always been slightly off, though I've never known why. Regardless, you would use CSS to specify their widths in pixels.
<input type="whichever" style="width: 150px">Hey,
Great. Thanks for the tips...here's the other thing...the input buttons are also off in IE, plus the text seems off center. Well, I just tried to apply some css to these as well, and while it did fix the issue in IE, now the text on the input buttons in FF has lowered like a pixel or two. Arghhhh. Always something. Now, everything looks right in IE, the buttons, boxes and text are all right, but the only problem I have left is the text in FF. The buttons are the same exact size as they were before I specified the width,height in css. I can click back and forward from an old page with no css on the buttons to a new page with the css applied, and they are identical in size. Nothing moves except the text, which goes down like 1 or 2 pixels. WHY OH WHY......GODS OF CROSS BROWSER CAPATIBILITIES?!?!?!Use IE5+/Win's conditional comments to give it a stylesheet that contains fixes for them.
About Conditional Comments (<!-- m --><a class="postlink" href="http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp">http://msdn.microsoft.com/workshop/auth ... nt_ovw.asp</a><!-- m -->)
Some more information on conditional comments can be found on this page. (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/articles/multiIE.html">http://www.positioniseverything.net/art ... ltiIE.html</a><!-- m -->)
QuirksMode.org : Conditional comments (<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/condcom.html">http://www.quirksmode.org/css/condcom.html</a><!-- m -->)
<!-- m --><a class="postlink" href="http://www.google.com/search?q=IE+conditional+commentWhy">http://www.google.com/search?q=IE+condi ... commentWhy</a><!-- m --> is the text off in FF? It happened because I specified the width, height. The text is now lined up in IE like it was in FF before I applied css to the input buttons. What is teh proper way of fixing this, and please be specific if you are gonna answer...I wouldn't be asking if I knew how to speak cobal.
Thankseasy, i divised this yesterday, it is not w3c compliant but it works greatinput,
textarea {
width: 125px;
}
select {
width: 125px;
_width: 131px;
max-width: 125px;
min-width: 129px;
}
.small {
width: 100px !important;
}
select.small {
width: 100px !important;
_width: 106px !important;
max-width: 100px !important;
min-width: 104px !important;
}
.large {
width: 200px !important;
}
select.large {
width: 200px !important;
_width: 206px !important;
max-width: 200px !important;
min-width: 204px !important;
}Why? There is no good reason to use the underscore hack. There are other hacks that are valid CSS and also there are IE's conditional comments.
Why is the text off in FF? It happened because I specified the width, height. The text is now lined up in IE like it was in FF before I applied css to the input buttons. What is teh proper way of fixing this, and please be specific if you are gonna answer...I wouldn't be asking if I knew how to speak cobal.
IE is buggy. *shrugs* If you showed us all of the actual code you are using we might be able to figure out what's causing it.
What does cobal have to do with this?Hey Yall,
Thanks for replying. Ok, I was just fumbling around with things, and I added a lil:
padding-bottom: 5px;
And this brought the text up to perfectly match the way it was before I specified the height,width with css. I went to IE, and it didn't affect the text. Am I just imagining things? Or does the padding not affect IE? God, everything looks exactly the same in FF and IE...could this actually be possible? The padding affected the FF perfectly but somehow didn't move the IE text which was already centered. Miracle? or just cool science.
ThanksWhat element did you add the padding to? The input element(s)? If so, it's probably one of the properties that IE does not support on them..small {
width: 54px;
}
[class~="small"] {
width: 60px;
min-width: 64px;
max-width: 60px;
}
select.small {
width: 60px;
}
.medium {
width: 119px;
}
[class~="medium"] {
width: 125px;
min-width: 129px;
max-width: 125px;
}
select.medium {
width: 125px;
}
.large {
width: 194px;
}
[class~="large"] {
width: 200px;
min-width: 196px;
max-width: 200px;
}
select.large {
width: 200px;
}Hey,
Shrine, thanks for your input, but I am not seeing how it relates to my situation.
Also, here is the code for the padding:
<input type="submit" value="Login" name="btnLogin" class="btn" onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'" style="font-size:7pt; padding-bottom: 2px; width: 46px; height: 19px;">
I added 2px padding-bottom on this button, and it moved the text up in FF perfectly, however, it didn't move the text in IE, which was already centered. I'm so glad that worked out.
Thanks.
Now, Here is today's assignment. Why is the password box in this form smaller than the username? This only happens in IE. And also, why are the colors darker in IE. I love the way they look in FF, but in IE...me say yucky.
<tr>
<td width="134" colspan="2">Username:</td>
</tr>
<tr>
<td width="134" colspan="2"><input type="text" name="txtUsername" size="17" maxlength="30" style="font-size:7pt; border: inset 1px #808080;"></td>
</tr>
<tr>
<td width="134" colspan="2">Password:</td>
</tr>
<tr>
<td width="134" colspan="2"><input type="password" name="txtPassword" size="17" maxlength="30" style="font-size:7pt; border: inset 1px #808080;"></td>
</tr>
There is a 2nd part to this quiz, but let's just see how you "so called" xperts deal with this quagmire, before moving along to larger & more important issues.
Thank you.IE6 is very buggy. You might be able to use CSS to get the two elements to be the same width.
Different browsers render the inset, outset, ridge, and groove border styles differently.The lengths of text and password boxes have always been slightly off, though I've never known why. Regardless, you would use CSS to specify their widths in pixels.
<input type="whichever" style="width: 150px">Hey,
Great. Thanks for the tips...here's the other thing...the input buttons are also off in IE, plus the text seems off center. Well, I just tried to apply some css to these as well, and while it did fix the issue in IE, now the text on the input buttons in FF has lowered like a pixel or two. Arghhhh. Always something. Now, everything looks right in IE, the buttons, boxes and text are all right, but the only problem I have left is the text in FF. The buttons are the same exact size as they were before I specified the width,height in css. I can click back and forward from an old page with no css on the buttons to a new page with the css applied, and they are identical in size. Nothing moves except the text, which goes down like 1 or 2 pixels. WHY OH WHY......GODS OF CROSS BROWSER CAPATIBILITIES?!?!?!Use IE5+/Win's conditional comments to give it a stylesheet that contains fixes for them.
About Conditional Comments (<!-- m --><a class="postlink" href="http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp">http://msdn.microsoft.com/workshop/auth ... nt_ovw.asp</a><!-- m -->)
Some more information on conditional comments can be found on this page. (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/articles/multiIE.html">http://www.positioniseverything.net/art ... ltiIE.html</a><!-- m -->)
QuirksMode.org : Conditional comments (<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/condcom.html">http://www.quirksmode.org/css/condcom.html</a><!-- m -->)
<!-- m --><a class="postlink" href="http://www.google.com/search?q=IE+conditional+commentWhy">http://www.google.com/search?q=IE+condi ... commentWhy</a><!-- m --> is the text off in FF? It happened because I specified the width, height. The text is now lined up in IE like it was in FF before I applied css to the input buttons. What is teh proper way of fixing this, and please be specific if you are gonna answer...I wouldn't be asking if I knew how to speak cobal.
Thankseasy, i divised this yesterday, it is not w3c compliant but it works greatinput,
textarea {
width: 125px;
}
select {
width: 125px;
_width: 131px;
max-width: 125px;
min-width: 129px;
}
.small {
width: 100px !important;
}
select.small {
width: 100px !important;
_width: 106px !important;
max-width: 100px !important;
min-width: 104px !important;
}
.large {
width: 200px !important;
}
select.large {
width: 200px !important;
_width: 206px !important;
max-width: 200px !important;
min-width: 204px !important;
}Why? There is no good reason to use the underscore hack. There are other hacks that are valid CSS and also there are IE's conditional comments.
Why is the text off in FF? It happened because I specified the width, height. The text is now lined up in IE like it was in FF before I applied css to the input buttons. What is teh proper way of fixing this, and please be specific if you are gonna answer...I wouldn't be asking if I knew how to speak cobal.
IE is buggy. *shrugs* If you showed us all of the actual code you are using we might be able to figure out what's causing it.
What does cobal have to do with this?Hey Yall,
Thanks for replying. Ok, I was just fumbling around with things, and I added a lil:
padding-bottom: 5px;
And this brought the text up to perfectly match the way it was before I specified the height,width with css. I went to IE, and it didn't affect the text. Am I just imagining things? Or does the padding not affect IE? God, everything looks exactly the same in FF and IE...could this actually be possible? The padding affected the FF perfectly but somehow didn't move the IE text which was already centered. Miracle? or just cool science.
ThanksWhat element did you add the padding to? The input element(s)? If so, it's probably one of the properties that IE does not support on them..small {
width: 54px;
}
[class~="small"] {
width: 60px;
min-width: 64px;
max-width: 60px;
}
select.small {
width: 60px;
}
.medium {
width: 119px;
}
[class~="medium"] {
width: 125px;
min-width: 129px;
max-width: 125px;
}
select.medium {
width: 125px;
}
.large {
width: 194px;
}
[class~="large"] {
width: 200px;
min-width: 196px;
max-width: 200px;
}
select.large {
width: 200px;
}Hey,
Shrine, thanks for your input, but I am not seeing how it relates to my situation.
Also, here is the code for the padding:<input type="submit" value="Login" name="btnLogin" class="btn" onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'" style="font-size:7pt; padding-bottom: 2px; width: 46px; height: 19px;">
I added 2px padding-bottom on this button, and it moved the text up in FF perfectly, however, it didn't move the text in IE, which was already centered.
I'm so glad that worked out.Thanks.