I am trying to resolve an issue in IE7.
My text area has a background image behind it which then scrolls with the text when the text exceeds the height of the text area and begins to scroll with the text.
Anyone know why this is happening and what the solution this would be?
Thanks,
James
This is a problem that only happens with IE 6 and 7, which has been resolved in IE8.
To fix the problem, try wrapping the <textarea> in a <div>. Apply the background and border properties of the <textarea> to the <div>, then set the border and background of the <textarea> to none.
You'll probably still need to tweak the margin and padding of both the <div> and the <textarea> to get it look just right, but now you should be pointed in the right direction.
Have you tried setting the background-position to background-position: top center;?
(Or something like background-position: 50px center;.)
Using:
textarea { background: transparent url(/images/test-bg.jpg) no-repeat top left; width: 500px; height: 230px; }
should give you a background image that is fixed to the top left of the textarea box that is fixed when the text exceeds the initial dimensions.
Related
I am somewhat new to CSS and I have a problem that I can't seem to solve. I would like to have a series of divs on my page (stacked one on top of the other) and each of them should contain some text, and one or more images.
In particular, I would like the text to be left aligned, and vertically aligned in the middle, and the images should be right aligned, and the height of the div should be based upon the height of the images (which can be variable).
Basically each of the divs should look like so:
So far I have been able to get one or more of the requirements listed above, but never all of them at the same time. Is this actually possible with pure CSS, or should I just quit wasting my time and use a table?
Hi i have a solution for you chek this link http://jsfiddle.net/8mQc4/15/.
It's based use some properties like:
float and vertical-align.
This code allows flexible height and width of img, and also his container center vertically de text.Just try with more large texts or images.
Oh man I got a fun solution for you that may work but none the less is a solid idea!
If you set the image as the background you can avoid floating or positioning.
.section {
background: url(http://jpowell43.mydevryportfolio.com/flatDesign/images/tab-2.svg) no-repeat rgba(255, 255, 0, 0.4);
background-position: center right;
background-size: contain;
width: 100%;
}
The only thing that I may find to be a problem is the image size is based on the content inside of the div.
JSFIDDLE
This will allow the image to have a fixed size but! it does run into the problem of relying on the text for size over the image. :/
background-size: 80px 60px;
Fixed size
With the use of min-height: whatever; You can still achieve the desired result but not 100% the best.
min-height
I have the following HTML & CSS: http://jsfiddle.net/j8aFS/1/
When you decrease the window size, the red box and the text expands over the grey area because of the word wrap.
What can I do to prevent this? Can I prevent this?
What I have tried so far:
using the CSS white-space: nowrap; property, but it seems that this
isn't the best solution.
simply leaving space below the red box, but this really influences the design too much.
What I want to achieve: The grey box should grow so the red box never expands over the grey box. The text inside the red box should not be cut off.
What do you want to happen instead?
If you make the gray box position relative and set it's overflow to hidden, the red box gets cut off.
.div1 {
height: 62%;
background-color: grey;
overflow: hidden;
position: relative;
}
DEMO
Unless you specify a set width for the red box, making the window smaller will cause it to get taller and overflow. You can hide it (my solution), let it overflow (current behavior) or not do the position absolute and let it make the gray box bigger. In your question it isn't clear at all what you want it to do.
Updated demo
You could set a width: 180px for your red box
The viewport for smaller screens.
If you would'nt position your box absolute, the box below would float down as well
I want to set a background image in a div class, and want to add some text on the image, with 5px padding but my text is overflowing, please see my css and demo here http://jsfiddle.net/LcQzG/ and help me with it. Thanks.
You should set a width and add
word-wrap:break-word;
example : http://jsfiddle.net/LcQzG/6/
Either make the background image higher, make the text smaller, make the box wider or add this to add a scroll bar:
overflow: auto;
or to hide the overflowing text:
overflow: hidden;
You need to set a width on the containing div. The width would be the width of the image - 10px (the sum of the left and right padding).
The web site is here.
See that blue bar behind the menu items? It's 40 pixels high and one pixel wide, and used as a repeating background - so, why does it look strange after the right-most menu item?
The image is here, if anyone needs it.
The image is used thusly:
.menu_bar
{
background-image: url("http://leonixsolutions.com/images/menu_background.jpg");
background-repeat: repeat-x;
font-size: large;
padding-left: 160px;
padding-top: 5px;
text-align: center;
}
Nothing is wrong with it,
Your menu container div.pd_menu_01 has a background color #ffffff remove it and you'll be fine...
The real problem here is that .pd_menu_01 extends too far to the right (and with its white background, covers the gradient). Try making it inline-block with an auto width, or something similar, so that it doesn't extend further to the right than it has to. You could also set its background color to transparent (but in my browser, .pd_menu_01 makes the page too wide and thus introduces unnecessary and ugly horizontal scrollbars, so the width solution is still relevant).
.pd_menu_01 has a background color of white declared, and is a div. Since divs are block level elements, they have a default width of 100%.
Either declare the div to be display:inline, wrap the menu in a span instead of a div, or make the background color transparent instead of white.
on my homepage I display images in a 100px tall DIV.
The images are all over 100px+ so I use a div with the CSS property of overflow:hidden
to easily trim off the extra pixels.
But the images don't look so good.
Is there a way for me the center them vertically?
This would make the "trim off" be the same for top and bottom.
http://billetagent.eweb703.discountasp.net/Arrangementer.aspx
thanks!
You could put the image as a background-image on the <a> element with background-position: 50% 50% (centered vertical and horizontal).
<a ... style="background: url() no-repeat 50% 50%;"></a>
(Provided that the images are at least 100px tall. Otherwise they will not align to top top.) (Oh, you've already stated this. Great.)
On the now empty <a> element you can furthermore add display: block; height: 100px to have a clickable area of the same size as the (visible) image.