Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6

Thread: Borders in CSS

  1. #1
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    402
    Member #
    751
    Liked
    2 times
    I trying to put a border around a paragraph but I'm not sure what's the correct rule in the browser I'm using. I have IE 6.0 and the rule I'm using (based on the tutorial I copied it from) is :

    p { border-color: green; border-width: 3px; color: green }

    Is this the correct rule? Maybe I better include the code that precedes it as well for I'm new to html and CSS and I think the rule I'm using should work so it must be my mark up. So here's some more:

    table a:link, a:visited, a:active {text-decoration: none;}
    a:link {color:white;}
    a:visited {color:white; text-decoration: none}
    a:hover {color:white; background:blue; text-decoration: none}
    a:active {color:green; background:red; text-decoration: none}
    H1 { color: white; font-size: 37pt; font-family: impact }
    H2 { text-indent: 1cm; color: white; font-size: 20pt; font-weight: bold; font-family: impact; }
    p { border-color: green; border-width: 3px; color: yellow }
    -->

    I wanted to use a border in H2 as well but it wouldn't work in there either.

  2.  

  3. #2
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    Everything's there except for a border-style, so:
    Code:
    p {border-style:3px solid green; color:green}
    Will make all paragraphs have a 3-pixel-thick green border and green text.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  4. #3
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    402
    Member #
    751
    Liked
    2 times
    Originally posted by filburt1
    Everything's there except for a border-style, so:
    Code:
    p {border-style:3px solid green; color:green}
    Will make all paragraphs have a 3-pixel-thick green border and green text.
    Oddly, it doesn't work. These are the kind of problems that drive you nuts. Everything looks good and still it won't cooperate. Here's the entire code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <HTML>
    <HEAD>
    <TITLE>My First Stylesheet</TITLE>
    <STYLE TYPE="text/css">
    <!--
    table a:link, a:visited, a:active {text-decoration: none;}
    a:link {color:white;}
    a:visited {color:white; text-decoration: none}
    a:hover {color:white; background:blue; text-decoration: none}
    a:active {color:white; background:red; text-decoration: none}
    H1 { color: white; font-size: 37pt; font-family: impact }
    H2 { text-indent: 1cm; color: white; font-size: 15pt; font-weight: bold; font-family: impact; }
    p { color: yellow; border-style: 3px solid yellow; border-width: 3px; }
    -->
    </STYLE></HEAD>
    <BODY BGCOLOR="#000000">
    <H1><a href="C:/MyDocuments/locallink.html">NAME.COM</H1>
    <H2><a href="link">TEXTLINK</a></H2>
    <p>TEXT THAT SHOULD GET BORDER</p>
    </BODY>
    </HTML>

  5. #4
    Senior Member Delerium's Avatar
    Join Date
    Jan 2003
    Location
    Toronto, Ontario, Canada
    Posts
    193
    Member #
    462
    It should be just:

    Code:
    p {border: 3px solid green; color: green}
    color: green is only required of you want the text in that color also.

  6. #5
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    402
    Member #
    751
    Liked
    2 times
    Delerium,

    Worked instantly. Thanks!

    Any idea why the webmonkey website would say to use "border-style" instead of just "border"? The tutorial I read there by Steve Moulder seemed pretty up-to-date. I'm I correct in assuming the free CSS tutorials available online will never be entirely up-to-date because they want to sell downloadable tutorials for the latest versions?

  7. #6
    Senior Member Delerium's Avatar
    Join Date
    Jan 2003
    Location
    Toronto, Ontario, Canada
    Posts
    193
    Member #
    462
    "border-style" would only be used if it was coded this way:

    Code:
    p {border: green; border-style: solid; border-width: 3px;}
    which is the long-form coding method. The code I gave earlier is the short form method (and most commonly used, I believe). They both give you the same result.

    border-style refers only to one element of the border, so coding it this way:

    Code:
    p {border-style: 3px solid green;}
    essentially means that the 3px and green are ignored, since they aren't elements of border-style.

    Why Webmonkey would state it that way, I don't know, but I suspect a typo, perhaps.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:00 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com