I have been searching the web for a solution for 3 hours without success. I want to set overflow: auto to tag as follows:
td {
overflow:auto!important;
}
It works fine in chrome but not in Firefox. I checked my entire css file by w3c css validator.
There is no error too. Any idea please? I am sorry if it is very silly question but everyone have to learn this first to be expert.
Try wrapping it in a <div>. The overflow attribute is not defined for a <td> element.
See here
Try to put your overflow:auto to the wrapper like this,
pre, div {
width:100%;
overflow: auto !important;
}
See demo
Try this
td {
height: 20px; // mention a height
overflow:auto!important;
}
Related
Forgive me if I've worded the question wrongly. I'll try to explain my question briefly and accurately. First of all I am using an online website builder for my website called PortfolioBox.
What I am trying to do is clip an image within a container without the image automatically re-sizing itself to fit to the width of the container. The code I used is simple:
HTML:
<div id="imageContainer">
<img src="http://www.kirupa.com/html5/images/circle_colorful.png">
</div>
CSS:
#imageContainer {
background-color: #333;
width: 350px;
height: 200px;
border-radius: 5px;
overflow: hidden;
}
The following code should result in something that looks like this:
http://www.kirupa.com/html5/examples/clipping_content.htm
However, if you check the result of the same code on my website you will see that the image being clipped is shrinking to fit the width of the container:
http://roryhammoud.com/test-new
Because I am using a webhost/builder, the pages come prebuilt with CSS code. There must be something in the preloaded CSS that is causing this. I however don't have access to that CSS code.
The Question
So my question is, is there anything that I can do to override this issue?? I do have the ability to add CSS code to pages, so I am hoping I can override it somehow. I would greatly appreciate any help..
Here is the page on JSFIDDLE http://jsfiddle.net/0e5nda2b/ (Please note I cannot remove CSS code, I can only ADD)
Thank you in advance.
You have a CSS rule in your file that sets the max-width to 100%. Remove it.
.textContent object, .textContent embed, .textContent video, .textContent img, .textContent table {
max-width: 100%;
width: auto;
}
If you can't simply remove that rule, create your own that sets the max-width to initial and make your rule more specific, or use !important (not recommended). For example, #imageContainer img {max-width:initial;}
Because you are not able to modify the existing CSS, you must override it.
You need to be more specific with your selectors to target the element in question like so:
#imageContainer img {
max-width: inherit;
}
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
I have a line of code ( which is to long to be displayed in one line ) to be displayed on a web page in one line, just like above.
I don't it to be wrapped into two lines.
Can I accomplish this only using css?
To actually make this happen when you use words with spaces in between them overflow:auto is not enough, you'll also need text-overflow: nowrap.
http://jsfiddle.net/kZV3j/
Here's how SO's code block looks:
<pre>
<code>
<span>...</span>
</code>
</pre>
And the CSS:
pre {
overflow: auto;
}
Demo: http://jsfiddle.net/TfeLm/
I think you're looking for overflow:auto:
<div style="overflow:auto; width:200px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
Create a containing element (e.g. a div), then set some basic CSS properties on it that define a width, and handle the overflow. Like this:
HTML
<div class="short">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
CSS:
.short {
width:400px;
padding: 10px;
overflow-x:scroll;
}
jsFiddle example. Works in all modern browsers and IE8.
I think you are looking for the overflow property with a auto value:
<style>pre { width: 200px; overflow: auto; }</style>
<pre><code><p>Some tooooo long text on one line</></code></pre>
Live example: http://jsbin.com/uhuveg/
I believe that you should use the following CSS
#id {
width: 400px;
padding: 5px;
background: #C3C3C3;
overflow-x: scroll
}
See this live example
I've got a puzzling problem in that a certain bit of HTML displays fine in all modern browsers and IE7, but completely fails in IE8. I've racked my mind as to which CSS could remedy this problem but I've come up short every time.
If you look at this link in chrome, near the bottom you'll notice FB/Twitter share buttons, but if you look at the corresponding space in IE8, there's nothing. Could someone please check it out and let me know, I'm stumped...
The CSS code is:
body div.mr_social_sharing_wrapper {
clear: both !important;
overflow: hidden !important;
height: 40px !important;
width: 960px !important;
z-index: 2000 !important;
line-height: 30px !important;
float: left;
}
span.mr_social_sharing,
span.mr_social_sharing_top {
float: left;
}
And yes, I know using !important is poor form; it was inherited and not by choice :)
Seems to be solved by removing the display styles (you had both display: inline-block and display:block) and float: left from span.mr_social_sharing_top.
If there was a good reason for needing the display styles (trouble in other browsers?) you could also add fixed widths to these spans to solve the problem.
Usually <legend> text is pretty short so I had no idea this was a problem until I ran into it yesterday. I was trying and failing to set a 50% width on a <fieldset>, but it wouldn't work due to long legend text. Either the fieldset won't be smaller than the legend, or the legend's width exceeds that of the fieldset.
This doesn't seem to be an issue in IE8, Chrome, Safari, Opera, and maybe others. It is an issue in Firefox, IE6, and IE7.
Goal: Get text to wrap in a <legend> cross-browser
Without setting any fixed widths
Hopefully without extra markup
Without javascript
Any way we can if the above are impossible
Without giving up and using a different tag
I've seen this post: Getting LEGEND tags to wrap text properly
...But there is only a single answer that uses a <div> with a fixed width inside the legend tag, I can't actually get it to work (see fiddle), and OP closed with the comment "in the end we gave up". Googling this subject turns up a whole lot of "not much" as well.
I put up a jsfiddle demo with some CSS I've tried. As I said, I've never run into this before so I'm baffled that this is so difficult, and I can't seem to get anything to work. Is it really just impossible?
Adding white-space: normal; to the legend works fine except in IE7 and IE6. Please see this jsfiddle demo
After playing around a bit with the CSS, I got it work on IE7, IE8, IE9, FF3-4, and Chrome11 by adding a <span> inside the <legend> with the below CSS:
legend {
white-space: normal;
width: 100%;
*margin-left: -7px;
}
legend span {
display:block;
width: 100%;
}
Please have a look at this jsfiddle
It's been a while since the question was posted, but now IE10 is here for some time and still sux while beeing so 'modern'. additionally one has no ability to use conditional comment. Here's what does the trick:
legend {
white-space: normal;
display: table; /* IE10 */
}
Add white-space:normal to your legend to force the text to wrap.
legend{
color:green;
white-space:normal;
}
For more read this article: http://beckism.com/2008/12/display_block_legend/
Try this simpler approach:
legend{
color:green;
white-space: normal;
}
That should sort your legend out. Your next problem becomes the background color of your fieldset, but that's easily solved by wrapping the whole thing in a div and styling that.
In case somebody needs a fix that works for Microsoft Internet Explorer 11 and Edge while not interfering with Chrome/Firefox/Safari:
legend {
display: table;
max-width: 100%;
}
http://dl.dropbox.com/u/18795563/BLOGDESIGNNEW/index.html
In FireFox, Why is there no margin on the left of the hgroup in the header? It works fine in Chrome and Safari. How do i make it work in FireFox?
I believe the problem is that the hgroup's default display setting is inline. Setting it to block will fix your problem with the margin.
#topheader hgroup {
display:block;
}
This looks like a margin to me.
after inspecting the html code of your page, I figured out the following issue in #topheader hgroup css:
overflow: visible:; Remove the column from the end of visible. i.e. overflow: visible;
Which version of Firefox? Firefox4 DOES show the margin but FF3.x may not because it does not have built-in styles for the new HTML5 elements. You must add 'display:block' for proper rendering.
Margin does not work in most case. and that is becaus it should calculate distance with elements outside. and this is dificult.
you should try padding instead of margin:
#topheader hgroup {
padding: 1em;
overflow: visible;
}
also change : to ; ;)
this will work in every browsers.