|
HTML - How To Get A Rounded Corner Effect In Ie7
Hi All,
Iv been browsing and browsing the internet to try and figure this one out and sadly i cant find a solution, Im trying to do a rounded corners effect in CSS for a button and im using IE7(due to where i work) and the rounded corners effect doesnt seem to wanna happen, can anyone tell me or link me to a document on the net that will give me the effect below is the main button you can see i have put a mox border radius and webkit border radius but doesnt seem to work in IE7 HTML Code: .BtnRaiseTask
{
-moz-box-shadow:inset 0px 1px 16px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 16px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8f002b), color-stop(1, #b20939) );
background:-moz-linear-gradient( center top, #8f002b 5%, #b20939 100% );
background-color:#8f002b;
-moz-border-radius:19px;
-webkit-border-radius:19px;
border:2px solid #c2c2c2;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:21px;
font-weight:bold;
padding:10px 28px;
text-decoration:none;
}
Can some one please help me its driving me insane. Similar TutorialsHi, how can I design a red cross object to remove the image from the box (see image) http://dl.getdropbox.com/u/72686/closeIcon.png My idea is to position it with css on the top-right corner of a box, and it should be done easily. Am I correct ? thanks I would like an image that has the name of site displayed on the top left corner of each page diagonally. (This direction -> /) How can I do this exactly? Am I overcomplicating this? Hi All, if there a way of adding two images with a title in the middle. For example "Image" This is a example "Image2" With both images flush against the borders. Because at the moment mine looks daft lol!! The RightTopImage needs to be obviously Top right of the webpage, and then there will be an image to the left of the webpage with the title in the middle... I cant figure out the structure of CSS Html HTML Code: <div class="page">
This will be where the Left Image will be.
<div class="header">
<div class="title">
"Text as an example......"
</div>
</div>
<div class="RightTopImage">
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
<div class="clear">
</div>
</div>
Css HTML Code: .RightTopImage
{
background-image:url(../Images/RightTopSmoke.gif);
background-repeat: no-repeat;
background-position: top right;
width: 292px;
height: 222px;
}
.page
{
width: 100%;
background-color: #fff;
margin: 0px;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
}
I havent added the left image yet, but if any one can help me or maybe have a code snippet i could use it would be highly appreciated. P.s this will be in the site master. Thank you. Quick update. Am i right in saying this is how you define a title with two images and a text area. .Query { background-image:url(../Images/RightTopSmoke.gif); background-repeat: no-repeat; background-position: top right; Text Details go here background-image:url(../Images/RightTopSmoke.gif); background-repeat: no-repeat; background-position: top left; } hmmmmm Hi all, I want to have a banner image in the top-left corner basically reading "50% OFF ALL PRICES". I want it to overlap the other images/table/text as not to move it about. Just wondering if anybody can point me in the right direction to do this in HTML? Thanks Hello guru's of the WWW realm... Is it possible to position an object, e.g. <div> by its bottom-right corner as apposed to its top-left? I've got a web page where i need to align alot of differently sized <div> tags so the right side is 300px in from the page. I'm aware that i could manually specify the width of each, then deduct the width from the margin and use that for the left position, but i'd have to do that for each div. but if i can position all the divs by the bottom-right, i can just attach a simple css statement to all divs. Incase my babble didn't make any sense, which this wouldn't be the first, I've drawn an equally nonsensical picture. Thanks in advanced for any help Matthew Millar Hey, i am currently working on a site and trying to position a image of a leaf on the corner of a div. The site is: http://luminaskincare.ca/new/ I want it to look like this: http://luminaskincare.ca/new/whatiwant.png Any help would be appreciated thanks. Hi all ; Does anyone know how to make a rounded rectangle fields like here in htmlforums . (look at the sponsored ads ) . I can make it via background tags but there is a problem when the size of the table changes the picture repeats itself In some sites there are nicely rounded borders. How do they make them? With images of course, but is there any easier way? Hi Was wondering if there was a way of doing rounded corners for buttons etc using CSS/HTML. Any ideas? Is there a more effective way for accessibility? I'm new to CSS/HTML so please go slow Thanx Hi I have made a rounded corners box with images, but the bottom line doesn't connect with the two side lines. Thanks for any help: <html><body dir=rtl> <Table CELLPADDING="0" CELLSPACING="0" > <TR> <TD valign=top align=right><IMG SRC="http://www.bkesher.co.il/bkesher/images/tr.png" WIDTH="16" HEIGHT="16"></TD> <TD><img src="http://www.bkesher.co.il/bkesher/images/hline200.png"></TD> <TD align=left valign=top><IMG SRC=" http://www.bkesher.co.il/bkesher/images/tl.png" WIDTH="16" HEIGHT="16"></TD> </TR> <TR style="margin-top:0px;margin-bottom:0px;"> <TD align=center> <IMG SRC="http://www.bkesher.co.il/bkesher/images/vline130.png" border="0" alt="" > </TD> <TD> <TABLE align=center border=2 style="font-size:10pt; border: 2px solid ;border-collapse:collapse;border-color:black"> <TH colspan=2>DDD</TH> <TR><TD width=70%> </TD><TD width=30%></TD></TR> <TR><TD> </TD><TD>AA</TD></TR> <TR><TD>BB </TD><TD>CC</TD></TR> <TR><TD>DD </TD><TD>EE</TD></TR> <TR><TD> FF</TD> <TD>GG</TD></TR> </TABLE> </TD> <TD align=center> <IMG SRC="http://www.bkesher.co.il/bkesher/images/vline130.png" border="0" alt="" > </TD></TR> <TR valign=top style="margin-top:0px;margin-bottom:0px;"> <TD valign=top align=right><IMG SRC=" http://www.bkesher.co.il/bkesher/images/bottr.png" WIDTH="16" HEIGHT="16"></TD> <TD valign=top><img src=" http://www.bkesher.co.il/bkesher/images/hline200.png"></TD> <TD align=left valign=top><IMG SRC=" http://www.bkesher.co.il/bkesher/images/bl.png" WIDTH="16" HEIGHT="16"></TD> </TR> </TABLE> </body></html> Hi, I am trying to create a page with a large text box that has rounded corners. What do you suggest is the best way to accomplish this? 1) Using CSS and by: -moz-border-radius-topleft / -webkit-border-top-left-radius -moz-border-radius-topright / -webkit-border-top-right-radius -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius -moz-border-radius-bottomright / -webkit-border-bottom-right-radius 2) Using DIV tags on the top-left, top-right, bottom-left, bottom-right and css to add the image as a background? Best, E Hi, Just wondered if anyone has any opinions on this Rounded corners can be achieved either by using JavaScript on one div or by using a couple of nested html tags and CSS, Forgetting about cross browser issues and support for a minute, which way should be used when considering standards? Scott Well, I finally applied my layout I've been designing for my site to my forums. ALl was going well until I tried to make rounded corners for the head of my tables. I was attempting this effect with nested divs, but instead of doing like it should (creating rounded corners), it went all over the place. Any help? Link to problem Link to CSS By the way, both the template HTML and CSS validates fine. Hi, I'am newbe to this forum and I serach all arround but didn't find a solution. I created some html in order to create a box with rounded corners with <div>. The problem is that the result is ok in Firefox, but everything is scrambled up in IE. Can somebody help me in order to make this code work in IE and Firefox? Code: <!-- left-side -->
<div>
<div style="width:100%;margin:0px auto;background: url(http://localhost/test_xtypo/plugins/content/xtypo/rounded2/left.gif) repeat-y left top ".$roundtxtbg2.";">
<!-- top + topleft_corner-->
<div style=" width:100%;height:20px;background:url(http://localhost/test_xtypo/plugins/content/xtypo/rounded2/topleft.gif) no-repeat left top;">
<!-- top-right -->
<span style=" display:block;position:relative; height:20px;background:url(http://localhost/test_xtypo/plugins/content/xtypo/rounded2/topright.gif) no-repeat right top;"> </span>
</div>
<div style=" position:relative;background:url(http://localhost/test_xtypo/plugins/content/xtypo/rounded2/right.gif) repeat-y right top; padding:1px 20px 1px 25px; margin:-1px 0 0 0;">
<div style=\" color:".$roundtxtcolor2.";\">***code***</div>
</div>
<div style=" width:100%;height:20px;background:url(http://localhost/test_xtypo/plugins/content/xtypo/rounded2/bottomleft.gif) no-repeat left bottom;">
<span style=" display:block;position:relative;height:20px;background:url(http://localhost/test_xtypo/plugins/content/xtypo/rounded2/bottomright.gif) no-repeat right top;"> </span></div></div>
</div>
Many thanks hello , i have been trying to create a sort of image slideshow. the problem is that in firefox it displays correctly with rounded corners , but in chrome the rounded corners ( using css3 ) are being 'hidden' at the back although it is there . here's a demo of my work : http://anisa.me/work/ Any help would be highly appreciated . Hi! Is it possible to tile a .png image in a table cell, and is it possible to make the illusion of rounded corners in a table cell? I want to make a webpage with a bg image, and have semi transparent textbox on top of this layer with rounded corners and have a text layer on top of the text box. I use Google sites, so my table content will be variable depending on the content put inside of the blog etc. I want to make a site that looks like a poster and not a website, without using Flash. Thanx, Knut Nordvik Hello HTML Forum, I've been looking everywhere for some solution to making a normal jump menu, like the one below: HTML Code: <form name="form1">
<select name="menu1" onChange="MM_jumpMenu('parent',this,0)">
<option value="#">unnamed1</option>
<option value="#">unnamed2</option>
<option value="#">unnamed3</option>
<option value="#">unnamed4</option>
</select>
</form>
- into something more attractive, with rounded corners for example. I've seen enough Nifty Corners Cubes and the sorts. Please help me out with some CSS. I'm stumped! By the way... I might've posted this in the wrong section, but there were more readers here.. I just realised that too... Sorry. Hi everyone Can you please help. I need to create a 3 column table, left column, content column and right column. I want the left column to have rounded corners. I am having a tough time doing this. Any help is appreciated Thanks I want to make a transparent rectangle with rounded edges to be where I put my text. I already found this: http://www.spacedust.com/scripts/rounded_table/ but I don't know if it'll work. is it possible to do a mouseover where the button flips? I mean I want it to flip like in a game show, when they say "show me the answer" the questions flip horizontally and the answer is there. I believe I would have to have two images. the "question" and the "answer", but how would I achieve that flip. TIA |
|||||||