|
HTML - Gradient In Div Area Extends Past Radius In Ie9
I am using a css gradient background in a header and footer <div> area that have a border radius set. The problem is that in IE9 the gradient background is squared off and extends past the border radius. Now in FF 4.0 this does not happen, it is only happening in IE9. Here is the coding for the area in css:
Code: .footer {
padding: 10px ;
background:#000000;
background: -webkit-gradient(linear, left top, left bottome, from(#000000), to(#666666));
background: -moz-linear-gradient(top, #000000, #666666);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#666666)";
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#666666);
border:2px solid #cccccc;
border-radius:10px 10px 10px 10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
position: relative;
clear: both;
}
I know that Firefox renders html pages more efficiently than IE, but unfortunately not everyone is as smart to use FF. Similar TutorialsHi there, I am relatively new to wordpress and have just created undertaken a pro-bono project for a company in Iowa. The site is up and running, however I have noticed a pretty big issue when viewing in IE. The background seems to keep going after the content has finished and tiles the texture far down the page. You can see it online he http://www.localfoodsconnection.org/ I am using a bit of css trickery to get two images displaying in the background and think this might have something to do with it. This is the css I am using to do it: Code: html {
background: #a79584 url(images/bg.jpg) center top;
height: 100%;
font-family: "Palatino", Georgia, "Times New Roman", Times, serif;
}
body {
background: url(images/bg_grad.png) repeat-y center top;
min-height: 100%;
}
#wrap {
width:920px;
margin:0 auto;
min-height: 100%;
padding: 0;
}
The site looks great in FF, Safari etc, so I guess it must be an issue with IE I would appreciate any help I can get on this one. Please feel free to let me know if you need any other info. Thanks in advance. James Problem solved. This can be deleted. Hi guys I have this code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>help</title>
<style>
body {
background-color:#515151;
font-size:100%;
}
#container {
width:780px;
margin:auto;
background-color:#fff;
overflow:hidden;
}
#left {
float:left;
width:370px;
padding:10px;
}
#right {
float:left;
width:370px;
padding:10px;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
</div> <!-- Left end -->
<div id="right">
</div> <!-- Right end -->
</div> <!-- Container end -->
</body>
</html>
but i want the background to be like the picture i have linket: (Dont understand what I mean?? The Gradient background) Thank U for Ur time and Ur help Hi Well the title spoke for me I have the gradient colours I want, except there going sideways. How do I make them go downwards? Cheers [EDIT:] This is my code: <body style="filter:progidXImageTransform.Microsoft.Gradient(endColorstr='#C1CFE4', startColorstr='#ffFFFF', gradientType='1');"> Hello community! AM learning HTML and am new on this forum. I was wondering how can someone make a background with gradient effect and oblique lines (or transparent squares sometimes) as on this webpage: http://www.brandeis.edu/learning/arts.html. Thank you all! Hi, Can anyone help me with some code. I have a gradient image and I need it to completely fill the page, without any border 100% height and width. Whenever I try it it does something strange! Thanks... How to display gradient text effects without using image in html. Hi guys, I'm trying to chop a template that has a drop shadow on top of a gradient background. I've attached a picture (not the template, but same principle) to explain the problem. I haven't done chops for a few years, and I'm wondering if this sort of thing is possible. The content area has a dynamic height, so just a big background image isn't a possibility. The 'bottom' of the drop shadow also raises problems: on some pages it will extend below the end of the gradient, on other pages it won't. I'm guessing this is impossible without transparency, which brings me to IE6. Has anyone found a way to do 24-bit transparency in IE6 these days, or is it still 8-bit only with pngfix.js? ...Any other possible solutions? Any suggestions most appreciated. Cheers, - The Plonk Hello - I'm currently in the early stages of putting together a new website, and I'm trying to have a top-bottom color gradient (in the "header" area of the page) with a background image (i.e. picture) as well. I can do each individually no problem (gradient with a 1px repeat-x image in css; and the image quite obvious), but I want to keep the gradient consistent across the entire top of the screen, regardless of the viewer's screen resolution, and the picture centered. Anyway to de-couple the two? You can see the current one-big-image solution here (and I want to see the gradient continuing on forever): http://tomatomountain.com/738/ I could just make the background image really wide, but it seems a waste of space and file size. i want to be able to make a gradient left to right on my page background color, but am having no luck finding a reference page. what attributes would i add to my CSS file? thanks! The FlyerFly First Hi. I am new to this forum and quite newbie in HTML...I looked around the web, but info can be messy sometimes and I remain stucked...so here am I hoping I will solve this. Thanks to you in advance :-) SO : The problem is recurrent and simple : I HAVE A PSD BACKGROUND THAT I WANT TO STRECH ALL ALONG MY HTML PAGE...BUT WHATEVER I DO IT DOES NOT WORK , it repeats but does not strech. I am working with D8. Somebody could guide on this ? I have a gradient image I'm trying to use as a background for a <div>, but I'm having a bit of a problem in that I can't get the image to stretch properly to fit the <div>. The thing is the </div> can change size, and the image needs to be able to change size with it. I've managed to get it working to the point where the image will TILE to fit the <div>, but that doesn't create the look I want. I need it to STRETCH, not tile. I have also managed to get the image to stretch to the browser window, but like I already said, it needs to stretch to fit the <div> while ignoring the size of the browser window. Just in case you have trouble visualizing exactly what I'm talking about, I have already uploaded two different versions of the partially finished website at the following URLs: http://www.finalfreak.greatnow.com/neo_index.html http://www.finalfreak.greatnow.com/neo_index2.html Notice how in the second link the gradient continues past the footer to the bottom of the window? That's what I'm trying to fix. What I want is for the image to conform to the size of the <div> like in the first link, but without tiling like the first link. Also, the page currently only works properly in Firefox. I'm planning on fixing it to work right with Internet Explorer as well, but I'd like to get the gradient problem resolved first. I've been trying to get this to work for days now and it's driving me crazy! Any help would be greatly appreciated. Hi, How can I set a background gradient for a cell in a table? (i.e., start colour:#222222; end colour:#000000) The size of the cell may vary so a tiled image wouldn't work. Thanks. Ok im pulling my hair out, im trying to make a small text area scrollbox. How od I change the font face, color and background color? Thank you, this is what I have so far please help. Quote: <html> <head> <title>Page title</title> </head> <body> <textarea rows="3" cols="10"> </textarea> </body> </html> I have made a layout for guild in an online game i play im new to html because im 14 so im not very good. The text at the top i want as one blog area but i want a second blog area underneath thats under a spaer here is the code i used for the first blog area <div style="position:absolute;left:450;top:330;width:375;height:304;overflow:auto"> But when i use the same code to make a second area but change the pixels to place it elsewere it just keeps messing up please could someone help me with this i need it soon I am looking to have an area beside my nav bar that is titled "Whats New". This would be a small square beside the nav bar with a few links under it that would link to new additions of the site or current events. I want this section to be included on all 9 pages of my website, but when I change these items I dont want to have to change the links and text on all 9 pages. How can I make it so I alter just one page and it will change on all 9 to save me time? Could I use CSS to do this? If so how? Also I thought of using an iFrame. Not sure if that would work either. Please let me know of a way to do this Thanks, PizzaStick Hello, I have a site with a big picture that use <area> and <map> tags. How can I replace piece of the big picture, by other image using OnMouseOver or by other way? (The image is defined by coords) Thank You! Big Image, and the image that I need to replace. So the issue in question is located at Deejay Octane I am wanting the links DIV to float to the right that much is happening, however the content DIV is not stretching to contain it. Any suggestions? Thanks Hi, I don't know if this is the best board to post on so if not please move. I'm looking to offer a members area on my new website im developing at the moment. The main goal is for my customers to have a username and password which they can then log into the personal member area. I don't think i want anything too complicated but this is my ideas so far of what i would want: Inovices: I want to make invoices available as PDF's for the customers, at the moment i don't mind if this has to be a manual upload but some way of manageing it would be nice. Monthly reports: My customers receive monthly reports on teh support they used during that month, i would like to make this available on the website, again i don't mind if i have to manually upload the files but some way to manage it. Subscriptions: I want my members to be able to activate additional services which will have recurring monthly payments. Either using paypal or another trusted payment gateway. The member will need to have a list of teh additional services i offer and then the ability to either subcribe to an additional service or unsubscribe aswell from within there member area. Tutorials: All of my members require tutorials to be created for them every now adn again. At the moment i would send this by email and after a month or 2 the custoemr deletes the email to find they need the tutorial again. I would like to store tutorials in there member areas so they have access to them all teh time. Is there any software out there i can take a look at to manage something like what i'm after? If there are any Open source ones available i would prefer that as i find open source not only to be free but also easier to edit and build on in the future. Any suggestions or ideas to where i can find something to handle this would be really appreciated. If one doesnt exist then anyone interested in doing some programming for me? Send me a PM and we can discuss my requirements in more detail and also discuss price. CC_DESIGN |
|||||||