Skip navigation
dulcinea1
Currently Being Moderated

<caption align="left"> for table not working in browser

Nov 18, 2012 5:10 PM

Hi,

 

I am using Dreamweaver CS6.  I have placed two tables on my page and am using <caption align="left"> to left-justify the captions.  This looks fine in Design View, but when I bring the page up in a browser, the captions are still centered.  I have tested this in I.E. 9 and Chrome, which are the only two browsers I have installed, and the result is the same in both.

 

Any ideas?  I am fairly new to Dreamweaver, and have taken classes in basic Dreamweaver and HTML/CSS.  I have searched online help, and could find nothing about this issue.

 

TIA!

Denise

 
Replies
  • Currently Being Moderated
    Nov 18, 2012 7:01 PM   in reply to dulcinea1

    Welcome to the Forum -

     

    Please upload page and associated files to your server and post a link here.

    We'll be glad to take a look

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 19, 2012 10:42 AM   in reply to dulcinea1

    Validate your code and fix any reported errors.  Code errors are responsible for 98% of browser rendering problems.

     

         Code Validation Tools

         ------------------------------------

         CSS - http://jigsaw.w3.org/css-validator/

         HTML - http://validator.w3.org/

     

    Align is deprecated code.  Use CSS to style your captions.  Inline styles shown here for expediency.  Ideally, you would put CSS code into your external style sheet.

     

    <caption style="text-align:left">

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 19, 2012 3:52 PM   in reply to dulcinea1

    I had had another issue with changing the color of a horizontal rule, but my reference manual and plenty of online posts mentioned that that was deprecated.

    I don't know what method(s) you tried, but the HR tag can definitely be styled with CSS.   Understanding which properties to use is a bit confusing.  Here's why:

     

    • Internet Explorer 7 and lower use the color property to effect line color.
    • Most other modern browsers use the background-color property.
    • All HR tags have borders which, if applied, could make your line look strange.

     

    hr {

    color: red; 

    background-color:red;

    height: 1px;

    width: 100%; 

    border: none;

    margin-top: 20px;

    }

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 19, 2012 5:25 PM   in reply to dulcinea1

    Not meaning to beat a dead horse but I want to assure you that the <hr> or <hr /> tag is NOT deprecated in HTML or XHTML doc types. 

     

    However, the HTML attributes for it: align, noshade, size and width are all deprecated in HTML 4.01 and not supported  in HTML5.  This is why you must use CSS to style it.

     

    As for IE not displaying correctly, something else is amiss in your code.

     

    As an example, this code has no errors & tests fine in IE7, 8, 9, current Chrome, Opera & Firefox. 

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HR Test</title>
    
    <style type="text/css">
    hr {
    color: #900; 
    background-color:#900;
    height: 1px;
    width: 75%; 
    border: none;
    margin-top: 20px;
    }
    </style>
    </head>
    
    <body>
    
    <h3>Horizontal Rule styled with CSS</h3>
    <hr />
    
    </body>
    </html>

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points