Tried in linux chrome 27.0.1453.93 and windows chrome 27.0.1453.94. Example at http://jsfiddle.net/SruNd/4/.
CSS
.main {
width : 100px;
border : 1px solid #000;
word-wrap: break-word;
}
HTML
<div class='main'>
<fieldset>
<div>
http://www.aaa.com/bbb/ccc/ddd/eee/fff/ggg
</div>
</fieldset>
</div>
I've also tried this where the word-wrap property is applied directly to the inner div and the fieldset is a block element.
It seems to me like a chrome bug as I've also tried this in FireFox and it wraps as it should on the slashes, and without the fieldset it also does this correctly in Chrome.
I tried to submit a chrome bug report however the page is not accepting my submission right now due to a malformed HTTP request error.
If someone has any insight please help. Thank you.
Use this on fieldset tag:
fieldset
{
min-width: auto;
}
In fact, this is due to the chrome's default property for fieldset :
min-width: -webkit-min-content;
You need to set a min-width and a max-width to the div. Example:
JSFiddle
HTML Code
<div class='main'>
<fieldset>
<div class="content">
http://www.aaa.com/bbb/ccc/ddd/eee/fff/ggg
</div>
</fieldset>
</div>
Css code
.content{
width : 100%;
border : 1px solid #000;
word-wrap: break-word;
}
Related
I am facing a strange problem. I prepared an html page in jsfiddle and putting same code in one html in below method.
<html>
<style>
jsfiddle css
</style>
jsfiddle html code
</html>
my jsfiddle: jsfiddle
having this as test.html and opening in chrome. It shows perfect in jsfiddle but shows an extra tab (or maybe some whitespaces) before the second item ("Comments:") in div. I am not able to figure out the reason. Please help.
I would suggest you to enhance your code a little to get fields show up they way you desire.
<div class="dtl">
<div>
<b> Name:</b><span class="input"><input class="inputtxt" type="text"></span>
</div>
<div style="clear:both;"></div>
<div>
<b> Comments:</b><span class="input"><input class="inputtxt" type="text"></span>
</div>
</div>
JSFiddle: JSFiddle
Just use this small reset to remove any built-in styles from the browser. This removed any and all built-in spacing in your fiddle.
* { margin: 0; padding: 0; box-sizing: border-box }
Make this changes to your CSS and see if it solves the problem:
/* add these lines */
label {
display:block;
float: left;
}
span.input {
display: block;
float:right; /* ADD THIS LINE */
overflow: hidden;
padding-right: 1px;
padding-left: 1px;
}
and then:
span > input.inputtxt{ /* CHANGE THIS AS WELL */ width: 290px; height:12px; border:none;}
And apply a <label></label> for each input.
<div class="dtl">
<b><label>Name:</label></b>
<span class="input"><input class="inputtxt" type="text" /></span>
<b><label>Comments:</label></b>
<span class="input"><input class="inputtxt" type="text" /></span>
</div>
It seems to get better in the JSFiddle. Try it out.
Check the results: JSFiddle Result
It looks like the jsfiddle has line-height:normal as default and the local html has line-height:1.
The tab comes from the different heights of the input elements, and since you are floating, the second label floats after the first horizontally because there is still vertical space before a new line is needed.
add span.input { line:height:1 } to see consistent results.
I have created a scrollbar and it works perfectly fine in google chrome and firefox but not in IE. I have a feeling it has to do with the line-height property.
My Code:
Html:
<div id="scrollbar"><br /></div>
Css:
#scrollbar {
margin-top: 10px;
height: 220px;
float: right;
overflow-y: scroll;
line-height: 403px;
}
Here is my jsfiddle.
Anyway to get this to work in IE?
Change the <br/> to a . IE picks up the non-breaking space a bit better than just a <br> tag.
http://jsfiddle.net/s9sycey1/3/
I figured it out. Instead of <br /> I used <span class="hidden">/</span> and I set my css to .hidden { visibility: hidden }. Here is my updated jsfiddle.
I have a textarea that needs to be able to be sized using the Rows attribute. I also want to be able to adjust the line-height of the text within the textarea. However, this causes a scrollbar in IE9 and IE10. Is there a way around this that doesn't involve javascript?
The problem is illustrated in this JSFiddle: http://jsfiddle.net/JYkAX/6/
Here is the html:
<textarea rows="3" class="textbox">No line-height
2
3</textarea>
<div class="separator"></div>
<textarea rows="3" class="textbox2">Lineheight = 20px
2
3</textarea>
And here is the css:
.textbox
{
overflow: auto;
}
.textbox2
{
overflow: auto;
line-height: 20px;
}
.separator
{
display: block;
height: 10px;
}
your css is fine but to make this work add Jquery:
$(document).ready(function() {
var textArea = $('textarea'),
lineHeight = parseFloat(textArea.css('lineHeight'));
textArea.height(lineHeight * textArea.attr('rows'))
});
This will define line-height and its auto height.
I know you mentioned no JS but jquery was my only solution when I had to deal with something similar to this
Zeke
Create an additional css file for ie and set line-height to e.g. 13px;
use this line-height: 15px\9; in css
It is a css IE9 hack for modern browsers. it will work. i check it on IE9. You check it on IE10. As i do not have IE10.
Its a good question. I iike it as replied correctly :)
I'm having a problem with input elements:
Even though in that picture their css is
margin: 0;
padding: 0;
They still have that slight margin I can't get rid of. I had to use a negative margin of -4px to get the button to stay close to the text field.
Also, when doing further styling I end up with a problem between Firefox and Chrome:
submit buttons seem to not have the same height. Setting an height which makes the submit button fit together with the input bar on Chrome breaks it on Firefox and vice-versa. There seems to be no apparent solution.
1px difference between buttons http://gabrielecirulli.com/p/20110702-170721.png
In the image you can see that where in Chrome (right) the button and input field fit perfectly, in Firefox they'll have a height difference of 1px.
Is there a solution to these 2 problems (the persistent margin and the 1px difference)?
EDIT: I've fixed the first problem, it was caused by the fact that the two elements were separated by a newline in the html code.
The second problem persists, though, as you can see here:
by highlighting the shape of the two elements, you can see that in Firefox (left) the button is 2px taller than in Chrome (right)
Try this one: demo fiddle.
HTML:
<span><input type="text" /><input type="submit" /></span>
CSS:
span, input {
margin: 0;
padding: 0;
}
span {
display: inline-block;
border: 1px solid black;
height: 25px;
overflow: hidden;
}
input {
border: none;
height: 100%;
}
input[type="submit"] {
border-left: 1px solid black;
}
Tested on Win7 in IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0. Only IE7 fails since it obstinately shows a normal button-like submit input.
Seems to me that your CSS is interfering, somewhere, with your inputs layout.
As you can see here http://jsfiddle.net/F3hfD/1/ what you're asking is doable without any problem.
For your second issue, see How to reset default button style in Firefox 4 +
For a similar issue where I an image used as the button type="submit" and it wasn't exactly the same height as the input adjacent to it, I simply added this to the container of the two said inputs:
padding-bottom:1px;
I had a glyphicon in a span next to input, which was inserting top:1px.
So I set top:0px on span and the issue was fixed.
But actual answer for the thread is totally problem specific and user needs to better understand the elements and css to fix it.
I have the following css and html (drilled down to the essentials. The full code with additional styles can be found here: I have this css I pasted on jsfiddle: http://jsfiddle.net/BwhvX/ , this is however enough to reproduce the problem)
css:
* {
margin: 0px;
padding: 0px;
font-size: 13px;
line-height: 15px;
border: none;
}
input[type="submit"]::-moz-focus-inner {
border: 0;
}
#search .text, #search .button {
border: 1px solid red;
}
html:
<form method="post" id="search" action="">
<p><input type="text" class="text" value="" name="suche"><input type="submit" class="button" value="Suchen"></p>
</form>
this is how firefox renders:
this is how chrome renders:
i want the two form elements to have the same height in all browsers. looks to me like some default style is applied, that i manually need to reset like i did for firefox in this example.
in chrome developer tools one has height 16 and one height 17 px but i am not able to see where it comes from, its just calculated. the applied styles (that are shown to me) are the same.
change:
*{
line-height: normal !important;
}
or add something like:
input[type="submit"], input[type="text"] {
line-height:normal !important;
}
don't ask why)
and. safari need special fixes. but looks well
I found this in normalize.css that solved it for me:
// Removes inner padding and border in Firefox 4+.
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
Try By giving
.text{
border:0px;
}
Usually one of these below has worked for me in the past using firefox browser.
vertical-align: bottom;
vertical-align: top;
If you specify height instead of line-height, they will render correctly. height behaves well cross-browser; line-height does not.
Had the same issue with firefox, setting line-height:normal didn’t help. Setting identitcal padding values on both, the input and button element, helped me out.
CSS3 has the box-sizing property. Setting it's value to border-box, you tell the browser that the element's border-width and padding should be included into element's height, and then may easily set the height itself:
input {
box-sizing: border-box;
height: 15px;
}
This works for html select elements as well.