tags:

views:

210

answers:

4
Q: 

Not able to set border for DIV

Below is my code. I have defined border style, still when the page renders, it disappears in some browsers. How to set the border?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../Lib/view.js"></script>
<script type="text/javascript" src="../Lib/ajaxhandler.js"></script>
<script type="text/javascript" src="../Lib/wysiwyg.js"></script>
<script type="text/javascript" src="../Lib/wysiwyg-settings.js"></script>
<link rel="stylesheet" href="../stylesheets/wysiwyg.css" type="text/css">
<link rel="stylesheet" type="text/css" href="../stylesheets/view.css" media="all">

<title>Political Profile</title>
</head>
<body id="main_body" >
<script type="text/javascript">
    WYSIWYG.attach('all', full);
</script>   
    <img id="top" src="../Images/top.png" alt="">
    <div id="form_container">

        <h1><a>Political Profile</a></h1>
        <form id="form_159151" class="appnitro" method="post" action="politicalprofiledbcode.php">
                    <div class="form_description">
            <h2>Political Profile</h2>
            <p>Enter candidate's political profile below.</p>
        </div>                        
            <ul >
                    <li id="li_1" >
        <label class="description" for="inCandidate">Candidate</label>
        <div id="divCandidate" name="divCandidate">
            <select id="inCandidate" name="inCandidate" " onclick="MakeRequest('divCandidate', 'inCandidate', 'SELECT memberid, name FROM candidate_db_personal');">
                <option value="">Click and wait while the list fills</option>
            </select> 
        </div> 
        </li>         
                    <li id="li_2" >
        <label class="description" for="inActivities">Activities (Paste below)
 </label>
        <div id="divActivites" name="divActivites" style="border:thin">
            <textarea id="inActivities" name="inActivities" style="border:solid"></textarea> 
        </div> 
        </li>
                    <li class="buttons">
                <input type="hidden" name="form_id" value="159151" />

                <input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
        </li>
            </ul>
        </form>   
    </div>
    <img id="bottom" src="../Images/bottom.png" alt="">
    </body>
</html>
+5  A: 

Try being explicit about all the border properties. For example:

border:1px solid black;

See Border shorthand property. Although the other bits are optional some browsers don't set the width or colour to a default you'd expect. In your case I'd bet that it's the width that's zero unless specified.

Paolo  2010-01-07 13:18:29
Great. It worked. Thanks.
RPK  2010-01-07 13:28:03
+1  A: 

Like Paolo mentioned you need to set more fields then just border-width. The style basically puts the border on the page. Width controls the thickness, and color tells it what color to make the border.

border-style: solid; border-width:thin; border-color: #FFFFFF;

Jason Too Cool Webs  2010-01-07 13:25:43
+1  A: 

I guess this is where you are pointing at ..

    <div id="divActivites" name="divActivites" style="border:thin">
        <textarea id="inActivities" name="inActivities" style="border:solid"></textarea> 
    </div>

Well. it must be written as border-width:thin

Here you go with the link (click here) check out the different types of Border-styles ..

you can also set the border width by writing the width in terms of pixels.. (like border-width:1px), minimum width is 1px.

infant programmer  2010-01-07 13:26:15
Sorry this is just wrong. The spec says thin, medium and thick are acceptable values: http://www.w3.org/TR/CSS21/box.html#border-properties
DisgruntledGoat  2010-01-07 13:38:39
@DG ::ok .. I was only following w3schools .. Never had W3C in mind .. SO the mistake happened .. I have edited accordingly ..
infant programmer  2010-01-07 18:41:28
A: 

As per the W3C:

Since the initial value of the border styles is 'none', no borders will be visible unless the border style is set.

In other words, you need to set a border style (e.g. solid) for the border to show up. border:thin only sets the width. Also, the color will by default be the same as the text color (which normally doesn't look good).

I recommend setting all three styles:

style="border: thin solid black"
DisgruntledGoat  2010-01-07 13:37:35

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?