http://dhrumin.com/uploads/index.html
Link above is my page I have been working on. I am using border top bottom as a background image. It looks great on Chrome and FF. But on IE it will just show one solid color background image wont show up.
Can someone help me with what I am missing out?
Thanks!
IE doesn't support the border-image property as you can see here. A workaround would be to create two divs, above and under and give them the desired background-image :
HTML :
<div class="myborder"></div>
<ul id="blockquote">
<li>Completely formulate parallel customer service rather than B2C initiatives.</li>
<li>Compellingly target efficient experiences whereas seamless partnerships.</li>
<li> Seamlessly transition customer directed applications whereas intuitive.</li>
<li> Holisticly mesh team building "outside the box" thinking.</li>
</ul>
<div class="myborder"></div>
CSS :
.myborder {
width: 600px;
height: 13px;
background: url('quote-border.png') repeat-x;
}
Don't accept this has the answer, i just moved content from 'comments'.
border-image is not supported in any version of IE currently - caniuse.com/#search=border-image – Nick
Indeed, you will have to split your html to make a top and a bottom div with background-image – Brewal
#Brewal, those are answers IMHO. – aldux
From my own, i would use :before and :after to create what you want.
You want something better ?
<div class="container with THE-texture and padding">
<div>Your content</div>
</div>
This way, the outter container would act like an image background-border. Here is a working example.
it is to be IDENTICAL in visual result than what you wish. In html, you added 1 extra container. That's a difference.
Oh, let me guess, there are 'simili' borders on the sides ? --> remove side's padding : http://jsfiddle.net/8puJf/1/
Related
I have a button that, when hovered over, I would like the background image to display also. (It is an arrow an explanation of the button). There are quite a few questions similar, but I couldn't quite tweak the answers to work for me.
The HTML looks like
<div id="header_feedback">
<a href="#contactForm">
<img title="Add an Event" src="./img/header_feedback.png" alt="Give us your Feedback"/>
</a>
</div>
the CSS then is
#header_feedback
{margin-left:730px;
margin-top:-135px;
position:absolute;}
#header_feedback:hover
{
background: url ('./img/addevent_tip.png');
}
Any ideas hugely welcome!
The main problem here is not with your CSS. Itagi's answer correctly identified the minor issue that you can't have a space between url and the parens/address.
But there are two other bigger issues:
Invalid image url: when applied, background: url('./img/addevent_tip.png'); fails to find a valid image. To fix this, you either need two periods or zero. So either background: url('/img/addevent_tip.png'); or background: url('../img/addevent_tip.png');
Backgrounds applied to opaque images aren't visible: Since the entire content of the div is an image and that image has no transparency, you will not be able to see the on-hover change even when it happens correctly. You can adjust for this by making part of the image transparent (and, perhaps, setting a background for the non-hover state that leads it to look the way it normally does), or by abandoning the image in favor of CSS spriting.
you just need to change it the following way:
#header_feedback:hover
{
background: url('./img/addevent_tip.png');
}
no whitespace between 'url' and the actual url
#header_feedback a img{ display:none;}
#header_feedback a:hover img{display:block}
I know that I have to use images in this case, one per corner.
For example if I need a solid blue 4px border with 8px border radius around a given element,
and I have designed four images accordingly,
top-left-corner.png
top-right-corner.png
bottom-left-corner.png
bottom-right-corner.png
How should I implement this, if possible without using a table?
Have you tried http://css3pie.com/about/ ? You don't have to use images in such a case...
I would not use the css workarounds/hacks others have suggested here, I would keep to using images. Yes it's more fiddly to set up but it is cross-browser and robust. I have tried a number of these css workarounds and have found them to be unpredictable at best. They might work fine on some IE installs, but not on others (e.g completely crashing the browser). And worse we were unable to isolate why it worked fine on some installs, and not on others (and this is for the same IE version).
I would either: live without curved corners on IE, or use images. You can use nested divs:
<div class="top-left">
<div class="top-right">
<div class="bottom-left">
<div class="bottom-right">
... content ...
</div>
</div>
<div>
</div>
and in css you set the appropriated background-image for each class, something like this:
div.top-left { background: url('/top-left-corner.png') left top no-repeat; }
and set the border style for one of the divs too, e.g:
border: 4px solid #f00;
There are so many links to this on google, just type rounded corners css and you should find something to help. Older techniques involved using something like a set of b tags above and below the box you want to round off and stting the margins to produce the radius you need, but it gets a bit involved and there are better antialiased solutions available.
If you allow tables and some code, you can do it without images and easily switch colors:
http://spruce.flint.umich.edu/~jalarie/jaa_kcm.htm
What I want to achieve is something like this.
::::::::::
...hi....
..........
..........
The hi is in the middle of the 2 colors.
I have it working for 1 color, and another color underneath, but would like the colors to split up in the middle of the text. (I'll be using button images if no one can come up with a solution using css (Trying to avoid using images)
EDIT: Of course the css result has to be across browsers (ie 7+, FF3.0+, chrome, opera (newest))
Thanks
HTML:
<div class="fancyButton">
<div class="background top"></div>
<div class="background bottom"></div>
<p>hi</p>
</div>
CSS:
.fancyButton
{
width:100px;
position:relative;
}
.fancyButton .background
{
width:100%;
height:50%;
position:absolute;
}
.fancyButton .background.top
{
top:0;
background-color:red;
}
.fancyButton .background.bottom
{
bottom:0;
background-color:blue;
}
.fancyButton p
{
position:relative;
text-align:center;
}
Tested, and hopefully copy-pasted correctly. It uses a div that takes it's height from the <p> inside of it. The two backgrounds are set to the top and the bottom of the button div and are 50% of it's height so they meet nicely in the middle, no matter what height the button is. You can take out the fixed width and replace it with a left-right padding declaration for the button div if you want, so that the width is determined by the <p> too. (just realizing this and don't want to retest)
Nothing fancy; just solid, robust css!
You can achieve this with multiple nested elements, although your mark-up will be less semantic.
Alternatively you can use gradients; this is a good resource for generating cross-browser CSS - http://www.colorzilla.com/gradient-editor/
Or you can use the CSS3 multiple background property, which is obviously not yet cross browser compliant. See this link for more info - http://www.zenelements.com/blog/css3-background-images/
If none of these help please show us the code for what you've achieved so far and it'll be easier to advise.
You could create a css gradient with two stops really close to each other: firefox css gradients. It won't be cross browser yet. The second example on this page is pretty close to what you want: webkit simple gradients (only in webkit).
Probably the only option here is to use CSS3 gradients as other answers have mentioned. However, if you do decide to use images (because some browsers don't support CSS3 for instanct), this tutorial about transparent sprites is very useful.
I have an href in HTML that I dynamically produce from a server. I have designed a nice rounded corner gif image that I would like to use as the background i.e. put the text (in white) over the gif image and have it still linkable.
The current html looks like:
<h2>
<!--img src="images/greenback.gif"-->
<a id="site-title0" class="titletext" href="#">
Alligator Creek, Bowling Green Bay National Park
</a>
</h2>
<div id="descrip0" class='description'>
20km S of Townsville. $4.85/night. Gates close...
What is the best way to do this with CSS? It seems I could either use relative positioning to move the text over the background image, but in early experiments, this affects the rest of the flow on the page.
Or, maybe using CSS background-image is the best way?
As Daniel says, really:
a.particular-link {display: block; /* or inline-block; I think IE would respect it since a link is an inline-element */
background: #fff url(path/to/image.gif) top left no-repeat;
text-align: center;
line-height: 50px; } /* line height should be equal to the height of the image to vertically center using this technique */
I'd also -and this may simply be personal habit, affectation and received 'wisdom'- suggest using .png rather than .gif. But, as noted, it's likely a personal and subjective thing.
Answer edited in response to timbo's comment.
Also, and this ain't particularly pretty, there's a code demo here: http://davidrhysthomas.co.uk/so/a-img-bg.html
You have to set the link to display: block
display: block on the a or attach the background image to the h2. Either way, be sure to set a background color on the a or the h2 if you're using white text. If some one has CSS on and images off, they wont see your link. Means you may need to fill in the corners of your rounded corner image to the bg color of the page.
It often works out great that the CSS backgrounds don't print, however, sometimes I use them to convey contextual information. What is the best way for getting around CSS backgrounds that don't print but you really want to display. The example, I'm currently working on is a table that displays financial information. Different background colors are used to indicate how "good" a number is (e.g. very profitable, profitable, neutral, negative, very negative).
I've used borders to simulate backgrounds when I really need a background color. Something like this will work (but I apologize for not having tested this):
div.must-have-background-for-print {
position: relative;
width: 400px;
}
div.must-have-background-for-print div.background {
position: absolute;
top: 0;
left: 0;
height: 100%;
border-left: 400px solid #999;
}
In response to #Steve Quezadas' comment, the idea is that rather than using a background, you insert an element into the element that needs the background and apply an extremely wide border to it so that it fills the outer element. This will most likely require that the contents of that element also are inside of another wrapper so that they appear above the new background element...
If you started with this:
<div class="has-background">Some stuff in here</div>
You might use this:
<div class="has-background">
<div class="background" />
<div class="content">Some stuff in here</div>
</div>
This is extremely ugly, but I've used it in the past and it does solve the issue of background colors not printing. And, before you ask, you'll have to adapt the css to your specific case. I'm simply describing the concept of using borders to replace backgrounds. Your implementation will depend on how your page is structured and this is extremely difficult to do if you don't have either fixed widths or heights on your elements.
Two suggestions:
Color-code text in the table rows
Add color-coded icons to the beginning or end of the table rows
You could even incorporate these into the normal view with your background colors.
I ran into the same problem color coding tabular data in html, eventually I just switched to pdf generation for color printouts and only made black and white available in html
It's a browser setting. Turn on background printing in IE. So, you can either change the browser settings (possible if on an intranet) OR just export your report to Excel or some other format for printing.
You could make the font bigger and/or bold and/or italic and/or colorful.