I've got a fiddle with the data here:
http://jsfiddle.net/ktpmm5/Z5z8n/
and page is staged here:
http://steppingstonez.com/daretorepair/magazines.php
Basically my paging element gets shoved to the left and lays over top of my heading. This happens only in IE 8 - works fine in Chrome, FF and Opera. I'm going crazy trying to figure out what is wrong. html validates fine.
Any ideas?
Quick solution:
To make it roughly work, change the paging wrapper to have the position: relative, and float the ul.paging right (remove the position).
You'll need to add height into the head_text to include the paging wrapper (as paging_wrapper is now positioned out of the flow, so its height does not count).
Longer solution:
Even with the fix above, you still have the problem that a long title will overlap regardless, so I would define the area/width of the header (making it wrap if too long) and also restrict the area of the paging device (by limiting number of buttons that show).
Another quick solution: Specify the correct width for your .paging CSS class (UL). For example a width of 220px seems correct.
.paging {
...
...
width: 220px; /* new */
}
I think it seems more of an issue with utilizing negative margins. You have both a margin-top on the paging_wrapper and the paging li a. This is probably causing some weirdness for support in IE.
Related
i need to show one row's words vertically, for that i've created a class in my stylesheet containing text-orientation:sideways then applied it on the tr , but it won't seem to work, i'm a bit new to CSS so maybe someone could help please
this it the table row
echo "<tr class='vert'>";
and this is the stylesheet
table tr.vert{
text-orientation: sideways;
}
You seem to be missing the writing-mode property..
The text-orientation CSS property sets the orientation of the text characters in a line. It only affects text in vertical mode (when writing-mode is not horizontal-tb). It is useful for controlling the display of languages that use vertical script, and also for making vertical table headers.
MDN
span {
writing-mode: vertical-rl;
text-orientation:sideways;
}
<span>Writing Mode</span>
So I'm stuck! I'm looking for any solution that is simple enough for a novice coder.
Currently I have the following code which adds an ellipsis to an echo
<?php echo ucwords($query->name = (strlen($query->name) > 15) ? substr($query->name,0,13).'...' : $query->name); ?>
This works just fine but I have it set on an iPhone 5 screen size to keep the text clean and not disrupt the screen layout. However, on a larger device this looks odd because there is extra space. So is there another way to make the ellipsis show depending on the screen size?
Thanks!
Just style the element that contains that output (without server-side truncation) with
overflow: hidden;
text-overflow: ellipsis;
I need to quickly add prefixes to all of of my classes and ID's and it's quite a large CSS file. I was thinking a quick regex string but so far I've failed. Any ideas?
I've tried simple things like:
\#([A-z0-9]+) {
Which will let me replace with #prefix_$1 but it doesn't take into account:
#id {
#id.class
#id,
etc. I can't just replace all #[a-z0-9] because it will attempt to grab background-colors and so on.
I also need to replace all the classes, which is even more confusing for me.
You could search:
\.(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)[^}]+{
\#(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)[^}]+{
Should find all your class names and id names
With RegExr, use this:
(?<=#|\.)(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)(?=[^}]+{)
Edit:
Here's a link to a test on google's CSS
http://regexr.com?2ugv1
You could try this [#|\.][\w]+\.?([\w\-]+\s?) it worked on these
#id {
#id.class {
#id, #otherId {
#class-dashed
#class_dashed
ul li:after {content: " #id.class { ";}
.class {background-color: #fff250}
#id.class {color:#ff}
Also found a good tool to play around with different options. There will still be a problem with the colors, but you can't really get rid of that since they follow the same rules as the ids.
update
excluding the : from the results to not match colours.
(?<![: ])[#\.][\w]+\.?([\w-]+\s?) you'll need a regex engine that supports negative lookbehind, not that familiar with php so don't know if it has it, but I would imagine it does.
It works for me in my stylesheet with all the cases i have;
Find
([\.])([^\d][a-z0-9-_]+[^{])
Replace
$1prefix .$2
I'd go with something like this:
/([#\.])([^\d][a-z0-9-_]+)/ Replace with
$1PREFIX_$2
However beware that it would catch colors as well, (if done with lowercase letters) I'm working on a workaround right now.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
text-overflow:ellipsis in Firefox 4?
I have the same issue mentioned in Truncating long strings with CSS: feasible yet?. It's been nearly two years since that post, and Firefox still ignores the text-overflow: ellipsis; property.
My current solution is to truncate long strings in PHP like so:
if(strlen($some_string) > 30)
$some_string = substr($some_string,0,30)."...";
That more or less works, but it doesn't look as nice or as accurate as text-overflow: ellipsis; in browsers that support it. The actual width of thirty characters varies since I'm not using a monospace font. The XML fix and jQuery plugins posted in the other thread appear to no longer work in Firefox either.
Is there currently a way to do this in CSS that is browser independent? If not, is there a way to measure the width of a string given a font and font size in PHP so that I might more accurately place my ellipsis?
This answer might be useful for getting your output truncated to the nearest word, and then simply append a … (…) HTML entity onto the end of the output to get your final output.
As you've noticed there's not sufficiently wide browser support yet the CSS solution yet, and you've still got to worry about old browsers too.
It is a shame that all browsers don't handle the same CSS features. However, you could always do something like this using JavaScript (with help from jQuery).
Here's an example of how such a thing might look: http://jsfiddle.net/VFucm/
The basic idea is to turn your string into an array of words, like so:
var words = full.split(/\s+/g);
Loop through them and take the first N (in this case I chose 24) and push them into another array:
for (var i = 0; i < 24; i++) {
short.push(words[i]);
}
Throw them back into the HTML element they came from:
$('.snip').html(short.join(" ") + ' <span class="expand">...</span>');
... here I added a "link" to expand the shortend text. It's made to look and act like a link using CSS. I also provided a function to replace the shortened text with the foll text again:
$('.expand').click(function() {
$('.snip').html(full);
});
I'm trying to wrap text in some big nice double quotes. I looked at this tutorial, but seems a little more complicated than I thought it should be. My gut tells me someone here in SO knows a smarter way. I'm open to anything: CSS, or PHP or Javascript, or Jquery (but preferably not JS/Jquery)
The tutorial doesn't look too complicated to me—I think their method is quite a good one.
If you don't like specifying one of the background images in :first-letter, you could use CSS3's support for multiple background images:
blockquote {
background: url("open-quote.gif") top left no-repeat,
url("close-quote.gif") bottom right no-repeat;
/* Other rules... */
}
...but this will only work in some browsers.
If I were you, I'd use the method described in the tutorial.
I'd recommend following the method they suggest: just add some styling on a blockquote element to give it a background image of your large quotes.
If you wanted a pure CSS solution, you can use something like this:
blockquote:before, blockquote:after {
content: '"';
font-size: 400%;
}
Of course, you'll have to play with the line heights and margins to get it looking ok, but even then, it's not gonna work in IE.