Using 'border-radius' for the first time (with predictably crude results lol)

Okay so, what I’m trying to do is draw a little tab that needs to appear in the middle of a line with data surrounding on each side. Here’s a graphic of what it should look like . . .

And here is the disaster it renders as, although I will say in my defense I was extremely pleased to have been able to generate a tab in the first place!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <meta content="text/html; charset=us-ascii"
          http-equiv="Content-Type">

    <title>Oh RATS!</title>
    <style type="text/css">

    #TAB-A {
    padding: 4px 18px 3px 18px;
    color: BLACK;
    background: #D8D8D8;
    width: 165px;
    height: 24px;
    border-radius: 20px 20px 0px 0px;
    }

    .CITE {
    font-family: CenturySchoolbook BT, Serif;
    font-weight: BOLD;
    color: #A7A7A7;
    font-size: 13px;
    line-height: 16px;
    }

    a.BLUE:hover {color: RED;}
    a.BLUE:link {color: BLUE;}
    a.BLUE:active {color: INDIGO;}
    a.BLUE:visited {color: DODGERBLUE;}

    H1 {margin: 0 0 10px 0;}
    H2 {margin: 0 0 10px 0;}
    H3 {margin: 0 0 10px 0;}
    H4 {margin: 0 0 10px 0;}
    H5 {margin: 0 0 10px 0;}

    </style>
</head>
<!-- ============================TOP RIGHT BOTTOM LEFT============================== -->

<body style=
"font-family: HELVETICA, Sans-Serif; text-align: left; font-size: 18px; line-height: 24px; margin: 30px;">
<div style=
"background-color: #FFFFF9; border: 15px GROOVE LIGHTGREY; padding: 30px; margin-top: 30px;">
    <h2><span style=
    "text-decoration: underline;">LEARN</span></h2>Advocacy
             <a href="http://saferodentcontrol.org"
             class="BLUE"
             onclick=
             "window.open(this.href, '_blank');return false;">SAFE
             RODENT CONTROL</a><br>

        <p class="CITE">The &ldquo;SRC&rdquo;&nbsp;Alliance is a
        coalition of Scientists, Non-Profit Organizations,
        Municipalities, and others dedicated to safeguarding your
        Family, Pets, and Vulnerable Wildlife through safe rodent
        control measures.</p><br>
         Academic <a href=
        "http://edis.ifas.ufl.edu/topic_book_piash"
             class="BLUE"
             onclick=
             "window.open(this.href, '_blank');return false;">DATABASE</a>&nbsp;Use
             the &#9654;

        <p id="TAB-A">Type/Form/SigWord</p>TAB &#9654;[Product
        Types] Field &#9655;Search on &ldquo;RODENTICIDE&rdquo;<br>

        <p class="CITE">Oregon State University <span style=
        "font-style: italic;">National Pesticide Information
        Center</span> (&ldquo;NPIC&rdquo;)</p><br>
         Academic <a href=
        "http://edis.ifas.ufl.edu/topic_book_piash"
             class="BLUE"
             onclick=
             "window.open(this.href, '_blank');return false;">PAPERS</a><br>


        <p class="CITE">University of Florida <span style=
        "font-style: italic;">Institute of Food and Agricultural
        Sciences</span> (&ldquo;IFAS&rdquo;)</p><br>
         Wikipedia <span style="font-weight: BOLD;">Category</span>
        <a href=
        "https://en.wikipedia.org/wiki/Category:Rodenticides"
             class="BLUE"
             onclick=
             "window.open(this.href, '_blank');return false;">RODENTICIDES</a><br>

        Wikipedia <a href=
        "http://en.wikipedia.org/wiki/Rodenticide"
             class="BLUE"
             onclick=
             "window.open(this.href, '_blank');return false;">RODENTICIDES</a><br>

        Veterinarian <a href=
        "http://veterinarynews.dvm360.com/new-rodenticide-without-antidote-alarms-pet-toxicology-experts"
             class="BLUE"
             onclick=
             "window.open(this.href, '_blank');return false;">Bromethalin</a>
             Has No Antidote, Alarms Veterinarians &amp; Pet
             Toxicology Experts
    </div>
</body>
</html>

Hi,

If you want an element to behave as a block but to be inline with content then you use inline-block. This allows it to have dimensions but still to remain in the same line.

e.g.

 #TAB-A {
    padding: 4px 18px 3px 18px;
    color: BLACK;
    background: #D8D8D8;
    width: 165px;
    height: 24px;
    border-radius: 20px 20px 0px 0px;
   display:inline-block;
    }

Your html structure does leave a little to be desired but that’s a question for another day.:slight_smile:

1 Like

[quote=“PaulOB, post:2, topic:228191, full:true”]
If you want an element to behave as a block but to be inline with content then you use inline-block. This allows it to have dimensions but still to remain in the same line. Your html structure does leave a little to be desired but that’s a question for another day.[/quote]

Thanks Paul. Gee, and here I placed it into Tidy and thought you’d approve. :pensive:

I think the main objection would be the use of in-line style attributes. :mask:
As for <p class="CITE">
There is a html element for that: <cite> :wink:

1 Like

The code itself was nicely formatted :smile:

I was referring to structures like this.

.. res.</p><br>
  Academic <a href=

A break should rarely appear immediately after a closing p tag like that and is never meant just to make space. Use margins or padding to make space.

The word ‘academic’ is orphaned and has no local container. It actually looks like it is a heading for the next paragraph and should be in a suitable heading tag at proper level.

e.g.

<h3>Academic Papers</h3>
<p>University of Florida etc....................</p>

That would get rid of the need for the break and give you some structure. Indeed it looks as though that section may be a prime candidate for using a definition list instead (dl).

Don’t confuse the way you want something to look with the tags that you use. Most text content has an inherent structure that is usually easily defined. You can then use css to move it around visually as you like.

5 Likes

[quote=“PaulOB, post:5, topic:228191, full:true”]
The code itself was nicely formatted :smile:[/quote]

Wahooo! :rocket:

[quote=“PaulOB, post:5, topic:228191, full:true”]
I was referring to structures like this.

.. res.</p><br>
  Academic <a href=

A break should rarely appear immediately after a closing p tag like that and is never meant just to make space. Use margins or padding to make space.[/quote]
It’s funny you mentioned that Paul because a couple of days ago I had an epiphany regarding line breaks. For years now I have been avoiding using the <P> tag: It isn’t that I have some aversion to it, but I could never control the letting“line-height” to those of you (unlike me) born post Ice-Age Archaic Hominins.

A couple of days ago, by sheer chance, I stumbled upon someone’s CSS and noticed this:

P {
     margin: 0;
    padding: 0;
}

WTF!?!? An entire universe of options have opened for me since discovering that I am at long last paroled from the tyranny of inserting <BR> codes after every line – a burden I assure you that has made formatting HTML an exercise in punishment. How this escaped me all these years is just inconceivable (I mean it’s not like I started to learn HTML last month for chrissakes). Anyway, just wanted to share that. I have some further questions about this project but I’ll put them in a separate reply. Thanks again Paul, you’re just awesome as usual.

3 Likes

Hi again friends. Alright, the following might not look beautiful as code, but every Tidy generator I visited left my CSS intact, but took my body – the bit I’m almost always in violation of here at Sitepoint (sorry!!) – and ran everything together. I dropped it into NVu and what you see below is the most alteration of my original code I could achieve without making it unreadable (I do have some standards).

This validates, and by some miracle it actually looks good in Chrome. What I’m hoping you experts might do is take a look specifically at my first venture into using Web Fonts with @font-face styling. For the uninitiated, Web Fonts allow you to use specific fonts, weights, glyphs etc. hosted on someone else’s server in order to guarantee the fonts in question will render precisely the way you intended them to. The reason this is critical for this little project is that I am using the border-radius property to digitally render a tab effect, and have to be very precise the font appearing “inside it” is the one, and the only one that will display. In the example below you can see I’m using ParaType’s

I’m not entirely clear whether I have bits and pieces in the right place (or am even using them correctly). The lines 11-18 in the header I am completely uncertain about. It can’t be correct because I’ve gotten completely different output in different HTML editors I use. It’s good in Chrome Ver. 49 (I’m still on XP); everywhere else it’s . . . bizarre. Thank you for all comments and suggestions.

semi-faced

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Oh RATS!</title>

<style type="text/css">

@font-face {
     font-family: 'PT Sans Narrow', SANS-SERIF;
     <link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel="stylesheet">
    src: URL(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
    src: URL('PT_Sans-Narrow.eot');                                    /* IE9 Compatible Modes */
    src: URL('PT_Sans-Narrow.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     URL('PT_Sans-Narrow.woff2') format('woff2'),                      /* Super Modern Browsers */
     URL('PT_Sans-Narrow.woff') format('woff'),                        /* Pretty Modern Browsers */
     URL('PT_Sans-Narrow.ttf') format('truetype'),                     /* Safari, Android, iOS */
     URL('PT_Sans-Narrow.svg#svgFontName') format('svg');              /* Legacy iOS */
}

P {
     padding: 0;
     margin: 0;
}

#TAB-A {
     display: inline-block;
     padding: 4px 17px 3px 12px; /* TOP RIGHT BOTTOM LEFT */
     color: #0080FD;
     background: #D8D8D8;
     width: 194px;
     height: 30px;
     border-radius: 20px 20px 0px 0px;
     border: 2px SOLID BLACK; /* #0080FD */
     font-family: 'PT SANS NARROW', SANS-SERIF;
     font-size: 28px;
     line-height: 30px;
     font-weight: BOLD;
     font-style: NORMAL;
     font-variant: NORMAL;
}

.REF {
     font-family: CenturySchoolbook BT, Serif;
     font-weight: BOLD;
     color: #A7A7A7;
     font-size: 13px;
     line-height: 16px;
     margin-bottom: 10px
}

.DSPACE {
     margin-bottom: 20px;
}

    a.BLUE:hover {color: RED;}
    a.BLUE:link {color: BLUE;}
    a.BLUE:active {color: INDIGO;}
    a.BLUE:visited {color: DODGERBLUE;}

    H1 {margin: 0 0 10px 0;}
    H2 {margin: 0 0 10px 0;}
    H3 {margin: 0 0 10px 0;}
    H4 {margin: 0 0 10px 0;}
    H5 {margin: 0 0 10px 0;}

</style>
</head>

<!-- ============================TOP RIGHT BOTTOM LEFT============================== -->
<body style=
"font-family: HELVETICA, Sans-Serif; text-align: left; font-size: 18px; line-height: 24px; margin: 30px;">
<div style=
"background-color: #FFFFF9; border: 15px GROOVE LIGHTGREY; padding: 30px; margin-top: 30px;">
    <h2><span style="text-decoration: underline;">LEARN</span></h2>
        <p>Advocacy <a class="BLUE" href="http://saferodentcontrol.org"
        onclick="window.open(this.href, '_blank');return false;">SAFE RODENT
        CONTROL</a></p>
        <p class="REF">The &ldquo;SRC&rdquo;&nbsp;Alliance is a coalition of
        Scientists, Non-Profit Organizations, Municipalities, and others
        dedicated to safeguarding your Family, Pets, and Vulnerable Wildlife
        through safe rodent control measures.</p>
        <p>Academic <a class="BLUE" href=
        "http://edis.ifas.ufl.edu/topic_book_piash" onclick=
        "window.open(this.href, '_blank');return false;">DATABASE</a>&nbsp;Use
        the &#9654; <span id="TAB-A">Type/Form/SigWord</span> TAB
        &#9654;[Product Types] Field &#9654;Search on
        &ldquo;RODENTICIDE&rdquo;</p>
        <p class="REF">Oregon State University <span style=
        "font-style: italic;">National Pesticide Information Center</span>
        (&ldquo;NPIC&rdquo;)</p>
        <p>Academic <a class="BLUE" href=
        "http://edis.ifas.ufl.edu/topic_book_piash" onclick=
        "window.open(this.href, '_blank');return false;">PAPERS</a></p>
        <p class="REF">University of Florida <span style=
        "font-style: italic;">Institute of Food and Agricultural
        Sciences</span> (&ldquo;IFAS&rdquo;)</p>
        <p>Wikipedia <span style="font-weight: BOLD;">Category</span> <a class=
        "BLUE" href="https://en.wikipedia.org/wiki/Category:Rodenticides"
        onclick=
        "window.open(this.href, '_blank');return false;">RODENTICIDES</a></p>Wikipedia
        <a class="BLUE" href="http://en.wikipedia.org/wiki/Rodenticide"
        onclick="window.open(this.href, '_blank');return false;">RODENTICIDES</a><br>

        <p>Veterinarian <a class="BLUE" href=
        "http://veterinarynews.dvm360.com/new-rodenticide-without-antidote-alarms-pet-toxicology-experts"
        onclick=
        "window.open(this.href, '_blank');return false;">Bromethalin</a> Has No
        Antidote, Alarms Veterinarians &amp; Pet Toxicology Experts</p>
    </div>
</body>
</html>

Egads I almost missed that one. :scream: Er . . . renamed to “REF” (discreetly leaves the building).

What an earth are you doing there:)

The link element is html and you stuck it in a css file!

Only css can go in a css file. The link element should be in the head above that css.

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Oh RATS!</title>
 <link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel="stylesheet"> 

Have you never heard of a CSS reset and what it is meant for? :slight_smile:

One of the first things you should have learned is that various html elements come with a variety of pre-defined rules applied by the UA (user agent i.e. the browser) and in most cases you need to redefine these and use the ones that suit your own design. These predefined rules also vary by browser so it is even more important to take control of them.

For example heading elements and p elements come with a default top and bottom margin which produces the gaps between successive elements. Older version of IE only used a bottom margin and at a different value to others. The ul and ol element not only has default top or bottom margin it also has a default left margin in order to cater for the bullet to show (some browsers use left padding instead).

The html and body elements may come with default margin/padding and borders in some browsers while others may not have the same set up.

Forms have default margins in some browsers and not others. Fieldsets have their own rules in most browsers and the list goes on.

It is your job to look at the element you are using and control its settings to best suit your layout. If you look in your dev tools you can see the rules that the UA applies and then you can make a choice to accept them or set your own but remember that the default in one browser is not the same as another so you are better off setting them explicitly anyway.

4 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.