CSS rounded corner problem

Another question regarding my site which I'm working on.
I have used a tutorial on a css corners website and put the code on the tutorial on my site to test it out.
The url is http://www.lindendesign.co.uk/test/templates/header2.html
In the bit under my navigation menu, there is block with the rounded corners, which appears correctly.
I have added the exact same code further down, but in the content div, but it appears incorrect.
Does anyone know why this is happening?
Also, if anyone could help with the gap between web hosting header (with the green background), and the bit below it (with the borders on the side), that would be great too.
I've tried everything and I'm really struggling so would really appreciate any help.

Just to clarify, CSS won't round off the corners on images.  CSS will produce rounded borders around the images.
CSS:
img {
float: left;
margin: 45px;
border: 2px solid #999;
padding: 25px;
background: #FFF;
/**ROUNDED BORDERS FOR MOZILLA,
WEBKIT, LINUX, IE9, OPERA**/
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
-khtml-border-radius: 16px;
-ms-border-radius: 16px;
border-radius: 16px;
HTML:
<img src="some-image.jpg" width="100" height="100" />
<img src="some-image.jpg" width="100" height="100" />
<img src="some-image.jpg" width="100" height="100" />
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists 
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

  • (CSS) Rounded corner divs with shadows...

    Hi,
    It appears that with IE9, it's now safe to use CSS-generated rounded corner divs.
    What about rounded corner divs with shadows?
    Is this now do-able? (and by do-able, I mean viewable in IE9 and FF4)
    Thanks!

    Most modern browsers support CSS Border-Radius.  However, you will need some webkit and mozilla specific rules for Firefox 3, Safari/Chrome.
    BORDER-RADIUS
    #Your-Div-Name{
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    /**NOTICE THE SYNTAX DIFFERENCES FOR MOZILLA**/
    #Complex-Borders {
    background: #FFF;
    color: #000;
    border: 9px solid red;
    /**MOZILLA**/
    -moz-border-radius-topright: 55px;
    -moz-border-radius-bottomright:8px;
    -moz-border-radius-bottomleft: 0;
    -moz-border-radius-topleft: 22px;
    /**WEBKIT**/
    -webkit-border-top-right-radius: 55px;
    -webkit-border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius:0;
    -webkit-border-top-left-radius:22px;
    /**OPERA, OTHERS**/
    border-top-right-radius: 55px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius:0;
    border-top-left-radius:22px;
    BOX-SHADOWS:
    #Your-Div-Name {
    -moz-box-shadow: 5px 5px 5px #000;
    -webkit-box-shadow: 5px 5px 5px #000;
    box-shadow: 5px 5px 5px #000;
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

  • Rounded Corner Text Box in iWeb 2.0 - just like this site

    As you can see on this very apple site the corners of its main boxes are rounded. In iWeb you can't make your text box rounded unless you place your text in a rounded corner shaped box. However for formatting purposes the shaped box won't expand or contract as you see your site on different browsers because it is saved as either an image.
    1. If you place text directly in a shape it publishes as an image with the text not able to be highlighted or searched.
    2. If you place a text box over a shape. The text will not adapt to the boundaries of the box. So if you view you site on the web it is possible for your text to go outside the boundaries of the box. This is not good.
    3. I tried creating a rounded png box with transparency that I then made as the background image for a text box. The corners showed properly on iWeb but once published the rounded corners showed properly when there was no drop shadow applied to the text box. With a drop shadow the corner squared off to display some of the background corner. I know this is not the clearest -- forgive me.
    4. You can add a picture frame to a text box which expands and contracts so why not simply be able to add a rounded corned picture frame to a text box.
    Finally, the simple solution to me should be that the text box should be capable of being rounded. I know why iWeb doesn't do this because rounded corners are complex. I know because I've designed sites with Dreamweaver and GoLive.
    I hope they add this to the iWeb in an update. You'd think they'd have a template similar to their own site which has rounded corners.

    The rounded corners are images.
    [TopLeft|http://discussions.apple.com/images/header.gif] & [Topright|http://discussions.apple.com/images/header_rightcap.gif]
    [BottomLeft|http://discussions.apple.com/images/bottom.gif] & [Bottomright|http://discussions.apple.com/images/bottom_rightcap.gif]
    You want prefab solutions.
    Web design is also about finding solutions yourself. It's part of the creative process.
    The textboxes are <div> elements in the final result. W3 CSS does not specify rounded corners, but [it is possible in CSS3|http://www.w3.org/TR/css3-background/#the-border-radius].
    Safari supports the +-webkit-border-radius: 10px;+ style.
    You can see it on [my custom webpage|http://myworld.webhop.org].
    So, if you have the knowlegde, you can apply what you want with a HTML snippet.

  • Question of 'round corner' effects. Can't get it to work.

    Hi there. I am new to Adobe Illustrator and I have a basic question. I can't seem to get the 'round corner' effect to work as seen in this tutorial:
    http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/skate-deck/Picture-6.png
    I have used the 'Pen' tool to draw a line, and I have applied my saved brush type to the line and it works fine. The problem arises when I attempt to implement the "round corner' effect on the line, such that it bends the way it does in the screenshot above. After implementing the effect, I do not see any visible changes even when I set the radius to over 200px. The line remains straight.
    Any idea what I'm doing wrong?
    Thanks a million
    Josh

    They have this al wrong.
    The effect makes round corners but do not distort or change the path in any other way.
    If you add a point in the middle of the line and apply a round corner it will indeed make that point into a round corner but you will not be able to see it because the path is straight.
    here is a video and the paths do not have to 90º (perpendicular) to each other.
    http://mysite.verizon.net/wzphoto/round.mov

  • Tabbed Panel Rounded Corner

    Hi,
    I've been looking all over to use the custom rounded corner
    with the TABBED PANEL. I've tried many techiques and still
    unsucessful. BUT recently, I've figured it out how to easily
    achieve the ROUNDED TABS in the Tabbed Panels.
    I hope this will help someone.
    Here's how:
    Create the rounded button.
    Crop the button about 75% from left to right and save it.
    Now save the other 25% on the right side.
    For the right corner of the button.
    Create CSS class...Be sure to adjust accordingly the padding.
    .TabbedCornerRight{
    padding: 10px;
    background: url(right_corner.png) no-repeat right 70%;
    Left corner...add background into the TabbedPanels CSS...be
    sure to adjust to fit your specification
    .TabbedPanelsTab {
    position: relative;
    top: 1px;
    height: 13px;
    float: left;
    padding: 5px 0px 8px 0px;
    margin: 0px 2px 0px 0px;
    list-style: none;
    background-image: url(left_corner.png);
    border-left: solid 0px #7197c3;
    border-top: solid 0px #7197c3;
    border-right: solid 0px #7197c3;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    font-size: 0.9em;
    Finally, add the <span> into your tab...like this:
    <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0"><span
    class="TabbedCornerRight"> Tab One </span></li>
    <li class="TabbedPanelsTab" tabindex="0"><span
    class="TabbedCornerRight"> Tab Two</span></li>
    </ul>
    Note: My right corner is just the outline and background
    tranparent
    That's it. I hope it helps.
    S

    It works the same way. I have mine done in 3 colors ( Silver,
    Dark Grey, Light Grey). The trick is to keep the outline of your
    tab the same color.
    It's very important to just use the outline of the RIGHT
    CORNER..that is no background color is in use. This way, when you
    hover over the button, the outline is till there regardless of what
    color you have.
    The hardest part is getting the right corner graphic done
    right and adjusting the padding and margin in the CSS.
    .TabbedPanelsTabHover {
    background-image: url(tab_hover.png);
    .TabbedPanelsTabSelected {
    background-image: url(tab_selected.png);
    font-weight: bold;
    font-size: 0.9em;
    color: #004785;

  • Turning the rounded corner's filter off

    I'm working in Illustrator CS3. Recently the program has begun to do something I have never notice before. If I use the round corner's filter: Filter>Stylize>Round Cornors then every box I create after using it has rounded corners that I cannot get rid of. Things drawn with the pen tool also have rounded corners I cannot get rid of. The only way to stop the problem seems to be to open a new document and then the tools are set back to their default without automatically rounding corners.
    Who do I use the rounded corners filter on a single object at a time and not get to automatically be applied to all subsequent objects created.

    Thank you.
    For anyone else who may have this issue, the appearance panel is under the WINDOW drop down menu: choose WINDOW>APPEARANCE. Resetting to default seems to be a case of opening the appeariance window (it's one of those palette things), and clicking on the upper right corner will create a drop down menu. Choose "NEW ART HAS BASIC APPEARANCE" and it should stop applying the special parameters to new elements added to the art board.
    This is such an arcane program.

  • Trouble With Rounded Corner Divs

    Hi. This is the code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">.products_page_container {width:48%; background-color:#FFCCFF; margin-bottom:20px; }
    #main .products_page_container p {color:#000000; padding:20px}
    .float_left {float:left;}
    .products_page_container .tl {background:url(images/ProductsContainerTL.gif) no-repeat top left; }
    .products_page_container .tr {background:url(images/ProductsContainerTR.gif) no-repeat top right; }
    .products_page_container .bl {background:url(images/ProductsContainerBL.gif) no-repeat bottom left; }
    .products_page_container .br {background:url(images/ProductsContainerBR.gif) no-repeat bottom right; }</style>
    </head>
    <body>
    <div class="products_page_container float_left ">
    <div class="tr">
    <div class="tl">
    <div class="br">
    <div class="bl">
            <p> 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 <strong>autem vel eum</strong> 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 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, <strong>sed diam nonummy nibh euismod tincidunt</strong> ut laoreet dolore magna aliquam erat volutpat. </p>
      </div>  </div></div></div></div>    
    </body>
    the rounded corners appear inside the div as if theres some sort of top and bottom padding. If i remove p tags the rounded corner box works...but then there are paragraph tags for my text. am I missing something here? Thanks.
    also i should add that I have removed padding from p but still rounded corners appear inside div with background appearing above and below.

    Hi
    Try moving the divs for the rounded corners outside your product div.
    An alternative solution would be to use the propriety browser rounded corners for FF and Safari and the jQuery rounded corners for IE.
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    PZ

  • DW-CS6 Does it support css rounded corners?

    Anyone know if the new release of DWCS6 will support CSS rounded corners in Design View?
    Thanks
    Os.

    David_Powers wrote:
    Dreamweaver CS5.5 wasn't an intermediate upgrade. It contained a whole swathe of excellent features, and was fully deserving of being called CS6. The problem was that Photoshop and Illustrator weren't ready for an upgrade, and they didn't want the numbers to go out of sync. Bad marketing decision, but what's new? ;-)
    Yeah, most don't upgrade for 2 versions. I'm still on 4 but will upgrade to 6. Not many will upgrade from 5 to 5.5 as even if it wasn't an intermediate upgrade it reads, on the face of it, the hell like it.
    David_Powers wrote:
    No, I'm not in charge of the forums. Never have been. I think what's needed is a stronger horizontal rule between posts, but I suspect that will take about 12 months to implement.
    A stronger keyline between the posts would help, that can't be too difficult to incorporate.

  • How to get radius of round corner of rectangle in solidfill layer?

    Is there any way to calulate the radius of round corner of roundRect in solidfill layer ?? help please!

    Then it should not be hard to identify the PathPoints that for the straight parts and then evaluate the coordinates.
    What’s giving you problems?

  • Flex is ignoring the rounded corner style for my last button

    Flex is ignoring the rounded corner style for my last button
    in a <mx:ToggleButtonBar> control.
    Any way round this?
    <mx:ToggleButtonBar id="toggle" x="164.5" y="31.4"
    dataProvider="viewstack1" width="870.90906" height="55"
    styleName="togglebar">
    </mx:ToggleButtonBar>

    I'm not sure I understood you correctly.
    If I did, you need to change:
    var inlines = doc.stories.everyItem().pageItems.everyItem().getElements();
    to:
    var inlines = doc.stories.everyItem().textFrames.everyItem().getElements();
    Harbs

  • Can I edit the rounded corner preset in LR3, or how to make my own?

    Although I'm pretty much a LR newbie, I think I understand how presets are created. But I can't figure out how the rounded corner presets were done. I would like to have a much deeper rounded corner and I've made them in PS with the rounded corner marquee tool.
    But in LR3?
    Is there a way to display the "contents" of a develop preset?
    Robin in Short Pump

    Is there a way to display the "contents" of a develop preset?
    Yes, you can open it in a text editor. Right-click a preset in Develop and choose "Show in Explorer".
    A rounded corner like this?
    Set Feather to 0. Adjust Roundness for radius and Midpoint for inset amount.

  • Web Overlay with rounded corner

    Hello,
    I would like to embed a YouTube video in my iPad app via the web overlay panel (is that even still possible since iOS8???).
    The editorial design guideline requires the left bottom corner of the video to be rounded, the other corners are normal. Please see this picture for reference:
    I tried several workarounds but nothing worked. Can somebody please tell me how I can play a Youtube video in the app (outside of the In-App Browser!) with that dolphin poster picture and the video playing inside the rounded-corner-frame?

    Thanks Bob, that works great. I've heard somewhere that embedding Youtube videos does not work anymore with iOS8. Is that true?
    Also, do you know an answer to this question (as it has been unanswered for a while): image sequence: pixelation of placeholder image

  • CSS rounded border issue

    I've got a CSS rounded border issue. Safari (4.0.3) is drawing a slight white artifact on the rounded corners. Look at the comparison between the Safari screenshot and the Firefox (3.5.x) screenshot (look at the border on the Watch button):
    http://www.prototypos.com/screenshots/safariroundedborder.png
    http://www.prototypos.com/screenshots/firefoxroundedborder.png
    Do folks on the Apple Safari dev team read this site? If so, I'd appreciate it if they take a look at this issue.
    thanks, Chuck
    Message was edited by: Dr. Chuck
    Message was edited by: Dr. Chuck

    Are you doing this with CSS3 ? If your using CSS 3 you know it hasn't really been fully implemented in all browsers, (even if they say so). Even tho CSS 3 is out and running, I myself tend to shy away from stuff like round corners.
    No Apple won't see this.

  • Where is rounded corner rectangular marquee tool?

    Hi,
    I've just upgraded from PSE 9 to 11 on my Window's pc.
    I can't find the rounded corner rectangle marquee tool in the tool box, which only seems to have two options - the regular rectangle and the elliptical marquee. But I know PSE 11 should have rounded edge option from viewing videos online, etc.
    Where is it hiding?
    Thanks,

    The rounded rectangle is only in the shape tool, always has been. However, you can get a sort of rounded corner effect with the rectangular marquee if you apply a fairly high feather. Maybe that's what you were remembering?

  • TS3988 When I try to sign in to my iCloud account, I get a message saying that The maximum number of free accounts has bee activated on this iPad. Can I get round this problem ?

    When I try to sign into my iCloud.i get a massage saying that The maximum number of free accounts has been activated on this I pad. Please can you tell me how to get round this problem ?

    All you can do is re-use on of the accounts previously created on your device, or create an account to use on another iOS device or Mac (running OS X 10.7.2 or later), if you have one.

Maybe you are looking for