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.
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;
}
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 have some task to make a carousel, that would holds several elements with not defined width. So, the easiest way — to make all elements in row by CSS and then do all JS calculations and so on. All was going well before testing it in (bug producer) IE6.
Here the sample what is going on in browsers:
Safari (5.1.2), Firefox (10.0.2), Opera (11.62)
Internet Explorer (9.1)
Internet Explorer (6) (Text in span bump li box)
DebugBar about LI, it's ignoring preset rule white-space: normal — Internet Explorer 6
DebugBar about SPAN, it's ignoring inheritance preset rule white-space: normal — Internet Explorer 6
Here sample of HTML:
<div class="carousel">
<div class="box">
<ul>
<li>
<span>Some text</span>
</li>
<li>
<span>Some longer text</span>
</li>
<li>
…
</li>
</ul>
</div>
</div>
Here part of CSS that manage it:
div.carousel {
width: 700px; height:200px;
}
div.carousel div.box {
width: 100%; height: 100%;
overflow: hidden;
}
div.carousel div.box ul {
display: block;
white-space: nowrap; /* to make all inside elements lay in row */
}
div.carousel div.box ul li {
margin-left: 23px;
width: 130px; height: 150px;
display: inline-block;
vertical-align: bottom;
white-space: normal;
}
box correction for IE6 and earlier:
div.carousel div.box ul li {
display: inline;
zoom: 1;
}
Live example in jsFiddle
See this url: http://cos.livejournal.com/36490.html
The answer, it seems it our old favourite, Quirks Mode. In Quirks Mode, IE does not recognise the white-space:normal style, but does recognise the other white-space styles, hence your cascading problem.
The solution is to stop IE going into quirks mode. This is as simple as adding a valid Doctype to the start of your page.
Quirks mode will likely introduce other layout glitches to your page as well, so this one fix should solve others problems you may have too.
Html Structure
<a>
<span> <!-- Span has width & height -->
<img>
</span>
<span> Some text <span>
</a>
Anchor is not clickable only in IE7, I know the issue happens because of hasLayout, if we remove height & width of the span, it will work fine.
But I need to make it work with out removing height & width.
EDIT: You can fiddle with an example here: http://jsfiddle.net/rxcAb
CSS Only Solution
Tomas-I modified your fiddle into a working example. I changed your code to use a span inside the a tag because it is invalid to have a standard block level element (a div) in an inline element (an a tag). Giving the a tag layout (I used inline-block) and then setting a position:relative on that span with a z-index: -1 pushes the span "below" the a tag and makes IE7 recognize the a tag as active again. Below is the modified code used in my fiddle. You might want to set up a more generic class name than my ie7AFix (you probably will also want to just target IE7 for those CSS properties that are necessary for it only). I assume you are varying the width and height by images, and hence why you have those as inline styling.
HTML
<a href="http://www.google.com/" class="ie7AFix">
<span style="width:222px; height: 150px;">
<img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" style="width:220px; height: 148px;">
</span>
</a>
CSS
a.ie7AFix {
display: inline-block; /*needs to set hasLayout; zoom: 1, etc.*/
}
.ie7AFix span {
border: solid #666 4px;
display: block;
position: relative;
z-index: -1;
line-height: 0; /*this made it "cross browser" eliminating extra bottom space*/
}
.ie7AFix img { border: 1px solid red; }
Updated Fiddle with line-height added to make "cross browser" if one does not want to target IE7 only. I kept the width and height in the span html above, only because the original question (by both gviswanathan and Tomas) requested it. If you don't need to set the dimensions on the span for some reason, but are simply trying to do a double border on the image, then thirtydot's answer given in the comment's below is much simpler.
With jQuery, the following will force all links to work, and have the 'pointer' cursor:
$(document).ready(function () {
$('a')
.click(function () {
window.location = $(this).attr('href');
})
.hover(function () {
$(this).css('cursor', 'pointer');
});
});
I've tested this simulating IE7 with IE8 in compatibility view mode, but can't guarantee it will for IE7 on its own.
You may want to apply this more selectively -- I suspect that, as is, this might slow down older browser performance -- in which case apply a class (like <a href='myClass'>) to all links that are broken this way, and just change $('a') to $('.myClass')
Have you tried using the HTML5 shim? It helps a lot with issues that are caused by hasLayout.
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Just take out the SPAN from the IMG. The IMG element can be styled with a class just like any other element, therefore you don't need a span around it.
give the following CSS rules to the a element:
{
display:block;
overflow:hidden;
}
Ah another hasLayout quirk
it's not possible to achieve in IE7 and still retain the width of the span, if you could show what you're trying to achieve in a JS fiddle perhaps we could help, find a way around it e.g. and this is only a guess, putting the width on the anchor with some padding would help create a completely clickable area and still allow a "caption" span to be restrained if that's what you're after..
Example workaround not a fix
CSS:
a {
display: inline-block;
background: #ff0;
max-width: 50px;
padding: 10px;
text-align: center;
}
img {border: 0; display: block; margin-bottom: 10px;}
span {line-height: 1.5;}
HTML:
<a href="#">
<img width="50" height="50" src="http://dummyimage.com/50x50/000/fff" alt="">
<span>Some text and even longer</span>
</a>
The above is only a thought, and if it's not what you're after, then please provide a sample jsfiddle.net
May be it's a problem is that because you didn't define href="#" inside your <a> TAG So, put href="#" inside your <a> TAG. Write like this:
<a href="#">
<span> <!-- Span has width & height -->
<img>
</span>
<span> Some text <span>
</a>
Just wrap anchor tag inside Div or Span. Its working in IE7.
This way is wrong..?
From your post I think u wanted a clickable image with span info text !! I hope this will help u ;)
http://jsfiddle.net/ajinkyax/v5KH5/3/
<a href="http://www.google.com/" class="imgLink">
<img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" />
<span>Info text about image</span> </a>
CSS:
.imgLink {display: block; width: 200px; text-align: center;}
See fiddle for code and demo
Fiddle: http://jsfiddle.net/rxcAb/29/
Demo: http://jsfiddle.net/rxcAb/29/embedded/result/
Perfectly working in IE7, IE8, FF, Chrome, Safari.
No changes in code: See below
<a href=http://www.google.com/>
<div class="gal_image" style="width:222px; height: 150px;">
<img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" style="width:220px; height: 148px;">
</div>
</a>
An easy way to do this is:
<p>
<span><img></span>
<span> Some text <span>
<a></a>
<p>
p { display: block; width: 100px; height: 100px; position: relative; }
a { display: block; width: 100px; height: 100px; position: absolute; top: 0; left: 0; background: #fff; opacity: .0; filter: alpha(opacity=0); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }`
If you have something like:
<a name="link1" href="somelink.php">
<div class="somediv"><img src="image.jpg" class="somestyle"></div>
</a>
Simply add a style property to the anchor like this:
<a name="link1" href="somelink.php" style="display: block; overflow: hidden;">
This will make the div and everything inside of it clickable in IE7+ and firefox & chrome.