Rounded Corners - Help! - CSS-Tricks

This topic is empty.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts

April 25, 2014 at 2:21 am #168655

Participant

I’m a n00b at css and am having trouble with getting rounded corners to work – unless I omit the closing “>” of the tag stating the css.

my css is: #wrapper { border-radius: 3em; }

HTML is <div id="rounded">

But this doesn’t work, unless I remove the ending “>” in the DIV.
<div id="rounded" then it works. Weird.

I’ve checked I have the same number of “DIV” as “/DIV”, and I can’t see anything else that might influence this. As far as I see, all my “<” are matched by the same number of “>”.

I tried google for about two hours tonight, and looked at a lot of sites, but nothing about my specific problem.

This is my complete css file, which resides in the same folder as the referencing html file…

body {
    background: url(13.jpg);
}
.content {
    font-family: Calibri, "Comic Sans";
    font-size: 16px;
    color: #fff;
}
a:link {
    font-size: 12pt;
    color: darkgrey;
    text-decoration: none;        
}
a:hover {
    font-family: Ravie;
    color: aqua;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
#rounded {
    border-radius: 2em;
}
#shadow {
    box-shadow: 15px 15px 3px;
         color:  #666666;
 }

and here is the html file …

<html>
<head>
<title>
Movie Synopsis - Dail M For Murder
</title>
<link REL="stylesheet" TYPE="text/css" HREF="syn_style.css">
</head>
<body>
<a name="TOP"></a>
<div id="rounded"
    <div class="shadow" style="width: 750px; margin-left: auto; margin-right: auto; background-color: #fff; padding-top: 20px; ">

        <p align="left" style="margin-left: 15px;">
        <a href="index.html">Home Page</a>&nbsp; | &nbsp;<a href="movies2.html">Movie Titles M - Z</a>
        </p>
        <hr width="100%">

        <h1 style="margin-left: 15px;">
            Dial M For Murder
        </h1>

        <h3>Cast</h3>

        <table align="center" border="0" width="700px">
            <tr>
                <td><b><u>Actor's Name</u></b></td><td><b><u>Film Character</u></b></td>
                <td><img src="spacer.gif" alt="spacer"></td>
                <td><b><u>Actor's Name</u></b></td><td><b><u>Film Character</u></b></td>
            </tr>
            <tr>
                <td>Ray Milland</td><td>Tony Wendice</td>
                <td><img src="spacer.gif" alt="spacer"></td>
                <td>Grace Kelly</td><td>Margot Mary Wendice</td>
            </tr>
            <tr>
                <td>Robert Cummings</td><td>Mark Halliday</td>
                <td><img src="spacer.gif" alt="spacer"></td>
                <td>John Williams</td><td>Chief Inspector Hubbard</td>
            </tr>
            <tr>
                <td>Anthony Dawson</td><td>Captain Lesgate (Swann)</td>
                <td><img src="spacer.gif" alt="spacer"></td>
                <td>Leo Britt</td><td>The Storyteller</td>
            </tr>
            <tr>
                <td>Patrick Allen</td><td>Detective Pearson</td>
                <td><img src="spacer.gif" alt="spacer"></td>
                <td>George Leigh</td><td>Detective Williams</td>
            </tr>
            <tr>
                <td>George Alderson</td><td>First Detective</td>
                <td><img src="spacer.gif" alt="spacer"></td>
                <td>Robin Hughes</td><td>Police Sergeant O'Brien</td>
            </tr>
        </table>

    <br><br>
    <h3>Synopsis</h3>

    <div style="float:left; margin-right: 20px;">
            <img src="poster_dm4m.jpg" alt="poster for Dial M for Murder">
    </div>

        <p>Content goes here - removed for size purposes</p>
    
        <br>
        <h3 class="content">Scenes From The Film</h3>

        <p class="content" style="margin-left: 15px;">
            Click <a href="scenes/dm4m.html" target="_new"> HERE </a> for images from the movie.  Page will open in a new window.
        </p>
        <br><br>

        <p align="left" style="margin-left: 15px;">
        <a href="index.html">Home Page</a>&nbsp; | &nbsp;<a href="#TOP">Back to Top</a>&nbsp; | &nbsp;<a href="movies2.html">Movie Titles M - Z</a>
        </p>
        <hr width="100%">
        <p style="font-size: 10pt; font-weight: bold; text-align: center;">
            All Rights Reserved; Some Non Rights Are Also Reserved, and Some Reservations are Not Right.<br>
            See the extraordinarily, excessively fine print for details - there might be one there, somewhere; if it hasn't been removed.
        </p>
        <br>

    </div>
</div>

<br><br>
</body>
</html>

Many thanks for any advice …

I am official tired, unhappy and frustrated. Can anyone help please?

April 25, 2014 at 7:27 am #168682

Paulie_D

Member

Oh…and UGH (shudders)

<td><img src="spacer.gif" alt="spacer"></td>

and

<br>

for spacing.

http://bit.ly/1tKzycy

April 25, 2014 at 12:00 pm #168703

irjc

Participant

@wolfcry911:
Tried on a new page taking your advice – I see what you mean.

Thank you very much for your help, now I have to figure out how to make it work on the original page – that’s today gone. :))

@Paulie_D:
Your avatar’s great – just how I feel sometimes. Wish you’d given an example of how to create a space in the table, as I’ve found with searches it’s how the question is phrased that returns the correct answer, and I haven’t got the question right yet.

I know the spacer is as you say “Oh…and UGH (shudders)”, but when there’s no sugar left in the house you use what’s available. Give me some sugar, please. :)

April 26, 2014 at 9:38 am #168730

Participant

You use CSS, as you did on some other elements. margins, padding, and so forth.

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

The forum ‘CSS’ is closed to new topics and replies.