|
CSS - Getting Rounded Edges To Div Not Working In Some Browsers
styles.css
Code:
.allRoundedCorners {
border-radius-topleft: 18px; -moz-border-radius-topleft: 18px; -webkit-border-top-left-radius: 18px;
border-radius-topright: 18px; -moz-border-radius-topright: 18px; -webkit-border-top-right-radius: 18px;
border-radius-bottomleft: 18px; -moz-border-radius-bottomleft: 18px; -webkit-border-bottom-left-radius: 18px;
border-radius-bottomright: 18px; -moz-border-radius-bottomright: 18px; -webkit-border-bottom-right-radius: 18px;
}
index.php Code: <div class="allRoundedCorners"> my text </div> This works ok in Firefox, Google Chrome and Safari. But fails to work in IE 9, Avant Browser 2012 build 8 and Opera 11.60 Can anyone suggest a possible fix or know how I can code it so the rounded edges of the DIV's have the rounded edge and not a boxed area. Similar TutorialsI am using the code shown he http://webdesign.about.com/od/css/a/aa072406.htm Code:
.container {background:#ccc; color:#fff; margin:0 15px;}
.rtop, .rbottom{
display:block;
background:#fff;
}
.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden;
background:#ccc;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{
margin: 0 1px;
height: 2px
}
Code: <div class="container"> <b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b> CONTENTS GOES HERE <b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b> </div> the code works ok, but i would like it tweaked so the text is not so close the the egdes, the top and bottom seems ok but it is the left and right margins that are too close to the edges, can these inner margins be increased so the text is not so close? thanks in advance for your help Hey all, the test page is here. Notice when you expand the "view more details" in IE8 to the point where it is supposed to push the page down, it doesn't! But it does in FF/Safari. HTML CSS Potentially relevant CSS: Code: body {
margin: 0;
padding: 0;
min-height:0;
}
div.container {
width:100px;
}
div.outerBody {
width:100%;
min-height:0;
}
div.innerBody {
width:100%;
background-image:url("../../images/artist_center/body_bg.jpg");
background-repeat:repeat-x;
min-height:0px;
height:auto !important;
background-color:#cedce5;
text-align:center;
margin: 0;
position:absolute;
}
div.tabContent {
width:945px;
min-height:596px;
border:solid 1px #cccccc;
float:left;
position:relative;
margin-left:14px;
padding-bottom:14px;
margin-bottom:14px;
}
I'm using clearfix to make things work in IE7, but clearly there's some kind of other problem going on. Thanks for any help! The state titles are nice and bold on my mac browsers -- however, pc browsers won't make them bold. Here is a link to a windows xp screenshot: http://www.browsercam.com/projects/199027/3899787.jpg Any ideas? I'm trying to set the background image of my header and for some reason its not being applied at all. CSS: Code: #header
{
background: url('../Images/Master/Header_Background.jpg');
color: White;
width: 1000px;
height: 150px;
position: relative;
}
The image is the same height and width of the header. I know the image is there because I can use the same url in an <img> tag and it shows up fine. The header is inside a container which I'm not setting any background attributes at all. I'm not setting any for the body either. I don't know why the image isn't showing. Thanks. I've been searching this for about 4 hours today, and have yet to come across a good answer. Right now my site looks fine in Firefox, IE6, IE7, and Opera. However, it does not validate because I'm using the _margin-top and .margin-top tricks to force the bottom line of links in IE. My site can be viewed at startdesigning.net (not allowed to post link because I new, I guess) and the css in question can be found at startdesigning.net/style.css - again, can't post a link. If anyone has any suggestions to validate without changing the appearance, I would love to hear them. Thanks, Andrea Is there any way to use multi level drop down menus that work on all browswers(IE 6 and 7, firefox, safari) without using .htc file or javascript included? This is nice, but the css in too messy. http://www.bluescopesteel.com If you have any betterones please tell me. Cheers Hello, I'm working on some really simple CSS and it's giving me wildly different results in Firefox and in IE. Here is the stylesheet: PHP Code: body { background-color: #DECFEF; } .example { background-image: url("images/example.gif"); border-width: thin; border-color: white; border-style: solid; padding: 35px 35px 35px 35px; } And here is the HTML file: PHP Code: <html> <head> <title>Chatterbox</title> <link rel="stylesheet" type="text/css" href="/teststyle.css"> </head> <body> <table class='example'><tr><td> hello </td></tr></table> </body> </html> All of this works (the image in the background, the white border, etc.) except the padding! In IE there is no padding at all, but in Firefox there is 35px padding, as specified in the stylesheet. You may see this yourself if you go to this URL in the two different browsers: http://www.chatterboxletters.com/test3.html Any help is greatly appreciated ~j. i have my CSS and it wont fit to the very edges of the page - i have tried using Position:absolution, but that screws my alignment - any ideas? http://wakefieldfhs.co.uk/stu/ - The location of the page CSS Location I'm making a menu with buttons that have curved edges. I can make the edges and everything fine, but how can I make it so if I hover over the whole <li>, it changes the background of the 3 <span> tags underneath it? You'll understand when you see the demo. The menu I'm talking about is the orange bar. It won't work in IE, check it in Firefox, Safari, Opera, or Chrome. Try hovering over the menu items that aren't highlighted, and they don't light up. itsjareds.leadhoster.com/spogg/phoenix.html Sorry about the non-clickable link, user restrictions.. Post if you need any clarification (I know it's not clear). Is there anyway on CSS or javascript to do "smooth edges on screen fonts" for every user to view my web? Hi, I'm trying to make a table that will hold a bunch of thumbnail images - three columns and however many rows are necessary. I would like this table to have a border on of the cells EXCEPT for any border on the outside of the table, so it should look like this: Code:
| |
----------------------
| |
----------------------
| |
Is there some nice little CSS code that will do this for me? I know that I can set the top right box's left and top border to 0, top right box's right and top border to 0 etc but I will be generating the table dynamically so it makes it harder to do the bottom three cells (still possible though, so I'll do it if I have to). Thanks Okay, so I've been trying to figure out the easiest way to make a layer with rounded corners in CSS. I used the 4 corner image way (as opposed to using JavaScript, or a single scalable image). The problem isn't my "main" layer, it's that I have two layers within that "main" layer that need to be positioned correctly (a "navbar" and "content"). The "navbar" I have as float: left, and the same for the "content." Long story short, the "content" window (that also has rounded corners) goes all the way to the right of the "main" layer. I want there to be a margin on the right, but if I put one, the "main" layer messes up big time and goes past the original width it was at. Anyone got an answer to my problem (unlikely, since I didn't explain it very well I don't think) or a simple tutorial I can do? Here's what I want (LINK). Am having a problem with turning a design into a tableless layout. I've attached the part of the layout I'm trying to code and this is the code I'm using: xhtml Code: Original - xhtml Code <div class="content"> <div class="bar">Devshed Rocks the socks of oneself</div> <div class="leftcon">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent lu ptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div> <div class="rightcon">Hey</div> </div> <div class="content"> <div class="bar">Devshed Rocks the socks of oneself</div> <div class="leftcon">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent lu ptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div> <div class="rightcon">Hey</div> </div> And here is the css: css Code: Original - css Code .content { width:570px; float:right; margin-top:20px; background-color:#CCCCCC; font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif; } .leftcon { width:450px; padding:5px; float:left; border-right:1px solid black; background-color:#FFFFFF; padding-left:15px; background-image:url(images/cornerbot.jpg); background-repeat:no-repeat; } .bar { background-color:#66CC00; font-size:12pt; padding:10px; padding-left:15px; background-image:url(images/corner.jpg); background-repeat:repeat-y; }
.content {
The corner image simply won't line up with the bottom half of the corner which I have as the left floated background image. Anyone able to point out what I'm doing wrong or perhaps offer another solution? Thanks Hi, Does anyone know of a way to do the effect of rounding corners (see attached image) in CSS? As you'll see in the image, I just want 1 pixel to be offset and be in a different colour for each corner of my box. Hello every one, Am sameer pandurangi and new to web development. I wanted to create a css for SCROLLBAR with rounded corners . Actually i dont know if there is any such property for this in scroll bar. Am able to change the color through css but am not getting the rounded corners for that. So i hope there is someone out there with some good idea. Thanks in advance. How all the divs are rounded in this css ???? I am looking at the images and none f them has any image of a rounded corner ? Code:
body {
margin: 10px 0;
padding: 0;
background: #FFFFFF url(images/img00.gif) repeat-x;
font: normal small Georgia, "Times New Roman", Times, serif;
color: #6B6B6B;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-weight: normal;
color: #3787DE;
}
h1, h2, h3 {
}
h4, h5, h6 {
}
p, ul, ol, blockquote {
margin-top: 0;
line-height: 160%;
}
blockquote {
font-style: italic;
}
a {
text-decoration: none;
color: #3787DE;
}
a:hover {
text-decoration: underline;
color: #990000;
}
img {
border: none;
}
/* Header */
#header {
width: 760px;
height: 101px;
margin: 0 auto;
background: url(images/img01.gif) no-repeat;
}
#header h1 {
float: left;
padding: 25px 0 0 20px;
letter-spacing: -3px;
font-size: 3.4em;
}
#header h2 {
float: right;
padding: 43px 20px 0 0;
letter-spacing: -1px;
font-size: 2em;
}
#header a {
text-decoration: none;
}
/* Content */
#content {
width: 720px;
margin: 0 auto;
padding: 20px;
background: url(images/img02.gif) no-repeat;
}
/* Posts */
#posts {
float: left;
width: 320px;
}
.post {
}
.post .title {
letter-spacing: -1px;
font-size: 2em;
}
.post .posted {
margin-bottom: 20px;
font-size: .8em;
}
.post .story {
}
.post .meta {
height: 50px;
padding: 8px 0 0 10px;
background: url(images/img09.gif) no-repeat;
font-size: .8em;
}
/* Archives */
#archives {
float: left;
width: 180px;
padding: 0 0 0 20px;
}
/* Search */
#search {
float: right;
width: 180px;
}
#search form {
margin: 0 0 12px 0;
padding: 0;
}
#search #textfield1 {
width: 155px;
}
#search #submit1 {
display: none;
}
/* Pages */
#pages {
float: right;
width: 180px;
}
/* Categories */
#categories {
float: right;
width: 180px;
}
/* Blog Roll */
#blogroll {
float: right;
width: 180px;
}
/* Orange Box */
.obox {
}
.obox .heading {
height: 27px;
padding: 4px 0 0 10px;
background: url(images/img03.gif) no-repeat;
letter-spacing: -1px;
font-size: 1.4em;
color: #FF6500;
}
.obox .content {
padding: 10px;
background: url(images/img04.gif) no-repeat;
}
.obox ul {
margin: 0;
padding: 0;
list-style: none;
}
.obox li {
padding-left: 15px;
background: url(images/img05.gif) no-repeat left center;
}
.obox a {
color: #FF6500;
}
/* Green Box */
.gbox {
}
.gbox .heading {
height: 27px;
padding: 4px 0 0 10px;
background: url(images/img06.gif) no-repeat;
letter-spacing: -1px;
font-size: 1.4em;
color: #09881C;
}
.gbox .content {
padding: 10px;
background: url(images/img07.gif) no-repeat;
}
.gbox ul {
margin: 0;
padding: 0;
list-style: none;
}
.gbox li {
padding-left: 15px;
background: url(images/img08.gif) no-repeat left center;
}
.gbox a {
color: #09881C;
}
/* Footer */
#footer {
width: 760px;
margin: 0 auto;
padding: 60px 0 0 0;
background: url(images/img10.gif) no-repeat;
}
#footer p {
margin: 0;
padding: 0;
text-align: center;
font-size: x-small;
}
Thanks for reading my question Here is the link to the two pages in question. http://www.pierced.ca/Kelly/cardsRound.htm http://www.pierced.ca/Kelly/indexRound.htm I know my images for the rounded corners aren't round, that's not the problem. My problem is the positioning of the images. When I view the pages using IE, the "Menu" images line up perfectly, and it's just the bl.jpg and br.jpg images on the "Info" section that don't. When I view the pages using FireFox, the bl.jpg and br.jpg images on the "Menu" section are off. Any words of wisdom to get both to work? Thanks again, Brad Simple question but I'm curious if anyone can work out how the 'Browse' buttons are done on this page, they have rounded corners yet looking through the css I can't see any images that account for them... http://www.haveamint.com/forum/ Hey, searched so don't give me crap. I have 2 images, searchleft.jpg (looks like { ) and searchright.jpg (looks like } ) I only posted the Doc type just incase, I validated my webpage(www.gameyin.com) and nothing that could hurt this has happened. Anyway I want the rounded borders on the left center, for searchleft.jpg and a roundedborder for searchright.jpg on the right center. I hope I have been very clear. All the searches need 4 images...anyway... PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style type="text/css"> html { height: 100%; overflow: scroll; } body { font-family: tahoma, arial, sans-serif; font-size: 11px; background: #DEDEBA; margin: 0px 0px 0px 0px; color: #DEDEBA; } input, option, select, textarea { font-family: verdana, tahoma, arial, sans-serif; font-size: 11px; } .search { margin: 0px; padding: 5px 5px 5px 7px; width: 366px; height: 24px; float: right; } .input-search { width: 259px; margin: 0px 5px 0px 0px; padding: 5px; background: #DEDEBA; border-color: #666666; float: left; text-shadow: 808080; color: #808080; } </style> <script type="text/javascript" src="webfunctions.js"></script> </head> <body> <div class="search"> <form action="search.php" method="post" style="display:inline;"> <div> <input type="text" name="search" class="input-search" value="Enter your Search Query" onblur="if(this.value=='') this.value='Enter your Search Query';" onfocus="if(this.value=='Enter your Search Query') this.value='';" /> <input type="image" src="images/search.gif" /></div> </form> </div> What is the best way to make your element corners rounded with CSS? I'm kind of looking for a good tutorial. |
|||||||