I'm experiencing trouble trying to implement drop-cap using pseudo-element ::first-letter. The thing is, since we're building a CMS, I can't know in advance the structure of the DOM. So we could have to display a layout like this:
<div>
First letter should be bigger
</div>
or this
<div>
<div>
First letter should be bigger
</div>
</div>
We support mainly Chrome, Safari, and Firefox. The problem is showing with the latter, if you try to run this HTML snippet with it :
<html>
<style>
.first::first-letter {
font-size: 100px;
}
</style>
<body>
<div class="first">
<div>
Hello
<div>
</div>
</body>
</html>
You get this display for Chrome and Safari
And this one for Firefox
So my questions are, is this a known issue with Firefox ? Have you also experienced this and if so did you manage to find a workaround ?
Thanks in advance
Tried to implement a drop cap using ::first-letter pseudo-element on nested div, I expected to have the same behavior on Chrome Safari and Firefox, but Firefox seems to behave differently.
Related
.show-ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
<div class="container">
<div class="row show-ellipsis">
{{record.bodyName}}
</div>
</div>
I have an application that support IE 9 to IE 11. The ellipsis style that I have applied at level is given in the below snippet. This is inside an ng-repeat. The ellipsis shows up for some of the rows and does not show for some. I also checked in database to see if the text coming from database has any html tags like br inside it, but it does not. I have also attached a screenshot for more clarity. Please help please click to see screenshot
You are working in murky waters here. After checking Caniuse.com for text-overflow it seems that text-overflow is not fully supported by IE versions under 11.
Also, the section of caniuse labeled "known issues" may help you as well:
Does not work in IE8 and IE9 on <input type="text">
Some Samsung-based browsers, have a bug with overflowing text when ellipsis is set and if text-rendering is not auto.
Does not work on select elements work in Chrome and IE, only Firefox.
Not sure whats causing the text-overflow:ellipsis not work in IE11 for some of text. I am now using ng-class to load the same style and it works. the HTMl looks like this now
record.showEllipsis = 'show-ellipsis';
<div class="container">
<div ng-class="record.showEllipsis">
{{record.bodyName}}
</div>
</div>
IMPORTANT NOTE! I have only recreated this bug on a 1st generation iPhone running Safari 4.0 (528.16), but as I'm trying to make my site as widely compatible as possible this is still a potential issue...
The problem: floated elements in lists are not appearing on screen. I have narrowed the issue down to the following combination of rules:
<html>
<head>
<style>
p {
float: left;
overflow: hidden;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<ul>
<li><p>hello</p></li>
</ul>
</body>
If I place a non-floated element inside the <li> tag following the <p>, then the text in the <p> becomes visible.
So far I have tested this on the latest versions of Chrome/IE/Firefox on Windows 7, Safari on an iPhone 4, and Chrome/Firefox/Opera on Android (4.2.1 ) and the problem described has not occurred
I repeat: I have ONLY seen it occur on Safari 4.0, but as I can't test every platform/browser version combination out there, I am concerned this issue may be more widespread.
Thanks
I am also encountering this issue, however I am seeing it in Safari 5.1.7 in Windows 7.
My current hot-fix is unfortunately JavaScript-based:
$('.listContainer').hide();
$('.somethingElse').hide();
$('.listContainer').show();
I don't exactly understand why this works, but as long as .somethingElse is a valid selector, the hide/show operation shouldn't get optimized away and will actually force Safari to render the list. Someone who actually understands the nuts and bolts of this could probably lend a more graceful solution, but that's the hack I'm using right now.
EDIT
The weird thing is that if I place the dynamically-generated HTML statically into the .html file I'm working in, there is no rendering problem in Safari. There's something lower-level going on here with how the DOM is constructed in Safari that's breaking this. It's also quite possible that I'm not following some standards for how new elements should be added to the DOM in real time.
Any help? Maybe I should add a question of my own.
FINAL EDIT
Alright, I got it working through CSS, now.
The solution is to give the list-items overflow:hidden.
I don't know why, but that solved my problem. Hope it solves yours. Give it a shot.
I think the problem here is that you've got overflow:hidden which is why your element move out of range. Actually, if you have any element with some width specified and overflow: hidden then you are trying to hide some internal tags
for eg:
<div style='width:200px'>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
</div>
Then you are actually trying to hide anything that goes out of given 200px width Provided you have the inner divs float so that all of them are in same line/ section or div
When there's a bunch of float elements, the parent element will not be able to calculate its height properly.
After all your float elements include an empty element as follows
<div class="break"></div>
. break{
height: 1px;
width: 100%;
clear: both;
float: none;
}
I would like to give some kind of indication to the user when text has overflowed and is too large for a container.
I'm using overflow:hidden so, there is a chance that some text will not be visible and I want to find a way to let the user know when/if this happens.
The text-overflow style would work for this but FireFox does not support it.
Update:
Credit to #Galled for this link: text-overflow:ellipsis in Firefox 4? (and FF5) which shows how to emulate text-overflow:ellipsis in older versions of FireFox.
Looks like text-overflow:ellipsis is working in the more recent version of FireFox as explained here: https://developer.mozilla.org/en/CSS/text-overflow#Browser_compatibility
Update:
I really like this JavaScript solution ( Determine if an HTML element's content overflows ). Of course, using JavaScript will give you a lot more control over how overflowed content is displayed though I was looking for a pure HTML/CSS solution.
According to this, Firefox has support to text-overflow (but in version 7.0).
I make a simple test, and in Firefox 6.0 works flawed:
<html>
<head>
<style>
p {
white-space: nowrap;
width: 100%;
overflow: hidden; /* "overflow" value must be different from "visible" */
text-overflow: ellipsis;
}
div{
width:30px;
}
</style>
</head>
<body >
<div>
<p>Hello, hello, hello, hello, hello, hello, hello, hello, hello, hello</p>
</div>
</body>
</html>
I think the CSS property you're looking for is overflow.
[But since you don't say exactly what you're trying to do I can't be positive.]
In webkit browsers this page renders fine:
http://www.ryanhaywood.com/s/film.html
But in the updated firefox it is spaced horribly. I have messed around in firebug for days, I have no idea how to even fix this in firefox.
I apologize for the archaic solution (tables) deployed in aforementioned page
Can anyone spot the problem?
Thanks in advance
Ryan
You had indicated creating layouts with tables is dated, I'd definitely agree. Here's a solution using <div>'s that should work in all browsers
example here: http://jsfiddle.net/pxfunc/hjgQm/
I've classed the films in a left-orientation and right-orientation alternating pattern of div's like so:
<div class="left-orientation">
<img src="http://placehold.it/250x175/ff0" alt="Director's Reel" />
<p class="title">Director's Reel</p>
</div>
<div class="right-orientation">
<img src="http://placehold.it/250x175/f00" alt="Nobody's Off The Hook" />
<p class="title">Nobody's Off The Hook</p>
</div>
and I used margins to control where the films show up within the parent div
#films div {width:46%;margin-top:-100px;}
#films .left-orientation {text-align:right;}
#films .right-orientation {margin-left:54%}
you can adjust the #films div {margin-top:-100px;} up or down to fit your desired height for offsetting the films
In Google Chrome (And I think firefox?) a page renders correctly
But in IE, the page appears to be "transparent", see This image.
<div style="margin-left:-10px;float:left;width:130px;height:30px; background-image:url('/gc_mycoinamount_display.png');">
<div id="mygoldamount" style="margin-top:7px;">5 Coins</div>
I believe this div causes the issue, when I remove it, the page looks correct. Is the CSS on it incorrect?
I needed to close a div, silly me.
<div style="margin-left:-10px;float:left;width:130px;height:30px; background-image:url('/gc_mycoinamount_display.png');">
<div id="mygoldamount" style="margin-top:7px;">5 Coins</div></div>