I am having an issue with the font causing a "text overflow" on input elements in Chrome. Here is a JSFiddle I have created:
http://jsfiddle.net/13e5q8Lf/2/
I have tried using overflow-x properties and whatnot but it doesn't seem to affect it. Is there a way I can stop those extra tails from appearing, or is this just a Chrome bug that has yet to be fixed?
Try removing the margin from the input and give overflow:hidden to the enclosing div http://jsfiddle.net/dvjkh7xs/
<div style="overflow:hidden">
<input style="padding: 0; margin:0; font-size: 100px;" type="text" />
</div>
This is not a perfect solution. It will need you to surround the input with a div. You might as well surround it with a span with display:inline-block.
<span style="overflow:hidden; display:inline-block">
<input style="padding: 0; margin:0; font-size: 100px;" type="text" />
</span>
It looks like a chrome bug. As of version 37 they have changed the text rendering engine so this could be a bug. In the mean time add padding to the input
I'd venture to guess that it is related to the font too. Try entering "Lj" uppercase L lowercase j into the box. The left curl of the 'j' also goes underneath the 'L'.
I would just add:
text-indent: .2em;
to the input box. It would make non-'j' characters indented slightly from the left, but I doubt a user would stop using your site just because there is some left whitespace in the input box :)
Related
I've been stuck on a float issue for a little while so I am hoping the community can help me again. I have a new webform here. As usual it looks fine in everything but IE7 (or IE8 in compatibility).
For some reason some of the containers are ending up with the form field on a new line below the form text. CSS is not my strong point, otherwise I'd be able to fix this I am sure. Can anyone tell me what I am missing here?
I tried adding float: left to the form text but that ended up with a whole other mess.
Try to small change markup: place items with a float before items without it (from the same row). It should help.
I know it's been a long time since this was posted, but I found a solution that I like for this. The gist is using 'expression' tag in your CSS for IE7 only to move the floated element to be the first element of the parent in the DOM. It will be semantically correct for all other browsers, but for IE7 we modify the DOM to move the floated element.
In my case, I have:
<div>
<h1></h1>...<p>any other content...</p>
<small class="pull-right"></small>
</div>
In my CSS for pull-right, I use:
.pull-right {
float:right;
*zoom: ~"expression( this.runtimeStyle.zoom='1',parentNode.insertBefore( this,parentNode.firstChild ))";
}
The result is that IE7 moves my <small> to be the first element of <div> but all other browsers leave the markup alone.
This might not work for everyone. Technically, it is modifying the markup but only in the DOM for IE7 and it's also a javascript solution.
Also, I understand there may be some performance issues with expression (it's slow), so perhaps it's not ideal there are a lot of floats like this. In my case, it worked well and allowed me to keep semantically correct HTML.
If you float your .formText left, float your span.required left, and then float your inputs left as well you should be able to line them up on the same line.
I'd modify your markup a bit. your <span class="formText"> should really be a <label>
For example:
<P class=formRow>
<label for="FirstName">First Name<SPAN style="FLOAT: left" class=required>*</SPAN></label>
<INPUT id=FirstName class=formTextbox name=FirstName>
</P>
and your css would be something like this:
.formRow {
clear: both;
}
.formRow label {
float: left;
width: 150px;
}
.formRow input {
float: left;
}
You could try to make the span tags you have for the text a fixed width, float them left, and do the same for the input field you want to correspond with. I'd also recommend using a label tag instead of a span tag on forms. No real solid reason for it, it's just that a label was meant for exactly what you have the span tag doing.
What you want to do is add a clear:both as the last sibling of your floated elements.
So something like:
<div style="float:left;">
<!-- children of div here -->
</div>
<div style="clear:both;">
<!-- leave empty -->
</div>
As shown in the picture above, if you have a textbox with padding, the initial cursor size at least on my Mac is the full specified height with padding. Of course, when you start typing, it goes back to normal text sizes (see that 'Password' watermark).
Is there a way to make the initial cursor the right size, aside from simply resizing the actual textbox? (It works on Webkit browsers fine.)
Example:
<input type="textbox" style="height: 40px" />
sudo work's fix didn't work for me. But here's how mozilla does it on their website (not a fix) : http://support.mozilla.com/en-US/home They just wrap it in a span and add padding.
<span class="wrap">
<input type="text" required="required" placeholder="Search Firefox Help" name="q" class="text">
</span>
After some experimentation (in Firefox), I found that the only way is to manually set the padding. If it's set to auto or left undefined, then it will create an over-sized cursor. As you stated, this behavior is not present in webkit-based browsers. This is most likely a Firefox bug.
Unideal fix:
<input type="textbox" style="height: 40px; padding: 10px 0;" />
Legend tags are always a nuisance as they don't adhere to a lot of CSS rules.
I'm trying to get the text within a LEGEND tag to wrap using the typical solution of wrapping the text in the LEGEND with a span and setting the width and display: block.
<legend>
<span style="border: 1px solid blue; width: 250px; display: block">
This text should wrap if it gets longer than 250px in width
</span>
</legend>
I thought this used to work In Firefox, but does not appear to work anymore in 3.6. Sample:
http://jsbin.com/exeno/5
It still works in IE.
Has anyone found a fix for this or is it just a matter of forgoing LEGEND tags and go back to H# tags?
Was trying to get the same thing to work. In my scenario Firefox needed
legend {white-space:normal;}
Is it a requirement to use the <span> tag? I was able to get this working in Firefox 3.6.2 using a <div> tag and removing the dislay: block; element (as it is not needed in that case) as follows.
<legend>
<div style="border: 1px solid blue; width: 250px;">
This text should wrap if it gets longer than 250px in width
</div>
</legend>
It is at least an alternative unless you must use the <span> tag.
Any ideas how I get rid of white space on my IE browser. It is caused by a hidden div. When I remove the div the white space goes. Works fine in FF.
Here is the DIV:
<div class="hidden" id="popup">
<div>
<H1 class="center" id="popupTitle"></H2><br/><br/><br/>
<div style="position:relative; display:inline;">
<p id="popupText" style="float: left"></p>
<img id="popupImage" style="float: right"></img>
</div>
</div>
</div>
Here are the styles associated with it:
.ofCommunications .hidden { display:none; visibility: hidden; }
I am also trying to get the p and the img inside the third div to display on the same line but that doesn't seem to be working either.
Thanks in advance
Caroline
The spacing problem is most likely caused by your improperly closed tag ("") as well as using both display: none; and visibility: hidden;
Visibility will cause the element to still take up space so you need to get rid of that style.
If you make those adjustments it should work unless you have other issues not seen in the code provided (for example: your parent container to .hidden having a misspelled class name).
Tips:
Never create space with < br/ > tags. They're only used for breaking text.
Get rid of display: inline; and position: relative; on your other < div > as it doesn't make sense to have it there (relative positioning is default).
Lowercase all of your tags. Uppercase tags are a thing of the distant past and not ideal.
A couple of comments. Once you clean this up it might help to resolve this and other future headaches:
Remove your inline styles and put them in a stylesheet.
What is that second div doing under the hidden div? It looks redundant and unnecessary to me. Remove it.
If you're floating elements then you'll need to clear them down the track. This could be why you have things floating in the wrong spots.
Have you display:block'ed the p element next to the image and given it a width? Otherwise it's not going to float anyway.
Your h1 should not be uppercase.
Hope those few suggestions help out a bit.
Try this to get the <p> and <img> lined up:
<div>
<p id="popupText" style="float: left"></p>
<p style="float: right"><img id="popupImage" /></p>
</div>
I removed the position: relative because it's not needed with the code you provided, and the display: inline because it doesn't make sense to make the div inline.
Have you checked the widths of the parent elements? If a width is set too small on a parent element there will not be enough space to render your paragraph and image on the same line. This could cause your paragraph and image to render on different lines.
After a bunch of googling and searching, I can't seem to find any info on this.
The problem:
In ie6 and ie7, the text entered into a styled input is displayed "cut in half", with some of the text clipped off in the middle and the remainder hidden underneath the bottom of the input.
Picture the word FOOBAR inside the input. You would only be able to see the top-half of the word, with the bottom-half hidden by the bottom-part of the input.
The input element:
<input name="email" size="40" type="text" id="email" class="input" />
The styling:
input, select, textarea {
font: 13px Verdana, Geneva, sans-serif;
}
input.input, textarea.textarea {
padding: 10px;
}
When I adjust the padding between 0-2px, everything is fine. Increasing the padding pushes the text further south.
All other mainstream browsers work fine, just ie6 and ie7 are giving me headaches.
There are no other styles in play.
This only happens in Quirks mode, so fix your doctype.
It looks like IE isn't able to change the height of an input in quirks mode, causing the padding to just move the text out of view due to the top padding.