I went to Settings > Edit Theme > Advanced and added this to it, under <style type="text/css">, but it doesn't work:
pre { overflow: auto; }
code { background-color: LightGrey; padding: 1px 3px; }
The first statement doesn't take effect when accessed with Chromium (I expect a horizontal scroll to appear). The second one, which I added for demonstration purposes, works well.
Here's the page you can look at to see how well it doesn't work.
I've tested with these browsers:
Chromium and Epiphany works not
Firefox and Konqueror works
update:
Following a suggestion, I've tried all these whitespace properties inside the <pre> tag: normal, nowrap, pre, pre-line, and pre-wrap. The problem remains.
If you float .code left then it will work:
.code {float: left;}
pre { white-space: pre;}
To have a horizontal scroll bar show up, you need to add:
pre { white-space: nowrap; }
On the actual page you have the css:
pre { overflow: auto; white-space: pre-line; }
This is overwriting any other white-space declaration and therefore it will not have horizontal scroll. Changing this to white-space: nowrap fixes the problem.
Related
Internet explorer keeps on splitting my words. Chrome and Firefox are working fine.
Here is my code and the link to the website: http://www.hgsainc.com/about/
Thanks for your help!
.page #main .entry-content {
width: 100%;
padding-right: 0;
word-wrap: normal;
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
table-layout: fixed;
}
.page #main .entry-content p,
.page #main .entry-content span {
font-size: 16px;
line-height: 30px;
text-align: right;
}
I haven't looked at your site, but it looks like you need to add the -ms-hyphens prefix to your css. You have the -webkit and -moz but no -ms:
-ms-hyphens: none;
See here for more info: http://msdn.microsoft.com/en-us/library/ie/hh771871(v=vs.85).aspx
Also, after looking into it a bit more, it looks like Opera doesn't support this, and neither do most mobile browsers: http://caniuse.com/css-hyphens - Just a heads up in case you come across that down the road.
After checking the developer tools in Internet Explorer, inspecting the paragraph that was having this problem showed a -ms-hyphens:auto; style in your code. You should probably add a style with -ms-hyphens:auto; to your block of styles to prevent this from happening.
The style that causes this is placed in http://www.hgsainc.com/wp-content/themes/twentythirteen/style.css, at the * 5.3 Entry Content part. You can also remove the hyphens styles from there to prevent having to do this.
I have the following situation (I express with images):
1st situation: In the image below has a small text, and already meet the first problem. The edge of my list is not obeying the picture too: (. Wish she always fell short of my message, regardless of message size.
2nd situation: When we have a very long text, it does not obey he ends up falling (not getting to the side of the image)
The result I expect is the following:
Must be some alignment in my css as'm no expert on the subject just know my way around with some things. Someone manages to come help me? Follow my file jsFiddle. Already very grateful for the time invested it :) HERE JSFIDDLE DEMO
li {
border-bottom:1px solid gray;
text-align: left;
display:block;
}
.chat-window-user-img > img {
height:50px;
width:50px;
float:left;
padding:5px;
}
.chat-window-user-message{
direction: ltr;
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera <7 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
border-collapse: collapse;
border-spacing: 0;
}
Both problems can be solved with overflow: auto, a useful trick I only recently picked up:
Add to .chat-window-user-message:
display: block;
overflow: auto;
(A <div> would also have worked, instead of display: block)
And to li:
overflow: auto;
Example: http://jsfiddle.net/L6Pwq/14/
See also: CSS: Clearing Floats with Overflow
im trying to ellipsis a h2 tag with text-overflow. It works fine i all browsers but on Android.
The three dots jumps behind the clipped text so you can't actually see the ellipsis.
The css for the h2 is:
h2 {
font-size: 20px;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 40%;
}
I have a lot of other styles but can't figure out what will affect this.
I did a dummy test which works fine, so i was wondering if someone experienced this behaviour before?
So i managed to figure it out, by running through the css line by line. It turns out that text-rendering: optimizeLegibility;
causes the bug!
Removed it and now it works perfectly!
this worked for me
Basically add text-rendering: auto; to your css that has the ellipsis
https://github.com/driftyco/ionic/issues/663
In the following page http://ada.kiexpro.com/test2/map.html
I added:
white-space: normal;
to wrap the copyright text that is coming our from the Google map API.
It works in FF and IE but Chrome seems to ignore the CSS selector:
global.css:
#cm_map span {
white-space: normal !important;
}
Google has an anonymous div with inline styles surrounding the copyright content. Only hook I can see is that it's a sibling of the "logocontrol" div. To override, try something like the following:
#cm_map #logocontrol + div[style] {
left: auto !important;
line-height: 13px;
right: 5px;
bottom: 6px !important;
white-space: normal;
width: 95%;
}
Not thoroughly tested but something like this should work.
This may also be a bug in Chrome: white-space normal !important doesn't override nowrap.
I've reported this bug at http://code.google.com/p/chromium/issues/detail?id=89573, but based on how they have been completely ignoring a more important issue since 2009, I have little hope of this being fixed.
Here is another example of chrome ignoring the important. This time its on the position. Unclicking the "position: relative" does bring the absolute into the picture. So the style is valid.
Something seems to be breaking the display of lists (ul and ol) in IE7. They work fine in IE8, FF, Safari etc but not IE7 and IE6.
I just want them to be displayed normally: ul lists should show bullet points and ol lists should show numbers.
I've narrowed it down to the first 1000 lines of code in styles_layout.css... ;)
Actually, I believe it has something to do with the following styles:
* { margin: 0; }
html, body { height: 100%; }
.wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -39px;
}
Have a look here: http://www.olvarwood.com.au/olvarwoodonline/mod/forum/discuss.php?d=2, login as a guest
IE7 and below style ul elements like this:
ul {
margin-left: 40px
}
Good browsers style ul elements like this:
ul {
padding-left: 40px
}
It's better explained by Eric Meyer here:
https://developer.mozilla.org/en/Consistent_List_Indentation
and the section "Finding Consistency" will tell you what you do.
This is because the ul/li elements have inherited the zero-margin property.
I solved it myself through trial and error:
* {
margin: 0;
}
This stops Ol's and Ul's from displaying properly in IE7 and IE6. I have no idea why...
I won't even pretend to be an expert on css, I get my butt kicked by it all the time, but I just happened to run into this, although my situation was a bit different.
I ended up having to specify a class tied to ul and set the list-type.
.classname ul { list-style disc inside }
Try that and see if it helps.