Trying to make a rounded box in html_问答_开发者

开发者 https://www.devze.com 2023-02-10 06:46 出处：网络

For some reason I keep getting rectangles under my tables. Is there some way to test html without just meticulously scanning through?

相关专题：

For some reason I keep getting rectangles under my tables. Is there some way to test html without just meticulously scanning through?

<?xml version="1.0" encoding="iso-8859-1" ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="./style.css" />
    </head>
    <body>
        <table width="600" cellpadding="0" cellspacing="5" border="0">
            <tr>
                <td>
                    <table width="200" cellpadding="0" cellspacing="0" border="0"     style="background-color: #0C990A">
                       开发者_运维知识库 <tr>
                            <td width="14"><img src="./images/layout/rounded_corner1.gif" width="14" height="14" border="0" alt="..." /></td>
                        <td width="172"></td>
                        <td width="14"><img src="./images/layout/rounded_corner2.gif" width="14" height="14" border="0" alt="..." /></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td align="center" width = "14" height = "150">Blarzed.Thecom</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td><img src="./images/layout/rounded_corner3.gif" width="14" height="14"border="0" /></td>
                        <td></td>
                        <td><img src="./images/layout/rounded_corner4.gif" width="14" height="14"border="0" /></td>
                    </tr>
                </table>
            </td>
            <td>
                <table width="200" cellpadding="0" cellspacing="0" border="0" style="background-color: #0C990A">
                    <tr>
                        <td width="14"><img src="./images/layout/rounded_corner1.gif" width="14" height="14" border="0" alt="..." /></td>
                        <td width="172"></td>
                        <td width="14"><img src="./images/layout/rounded_corner2.gif" width="14" height="14" border="0" alt="..." /></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td align="center"><img src="./images/layout/blarzedbanner.gif" width="600" height="150" border="0"/></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td><img src="./images/layout/rounded_corner3.gif" width="14" height="14"border="0" /></td>
                        <td></td>
                        <td><img src="./images/layout/rounded_corner4.gif" width="14" height="14"border="0" /></td>
                    </tr>
                </table>
            </td>
        </tr>
</body>

You are missing an ending "table" tag on the main wrapping table. One way to quickly figure out if you've got some type of typo or whatever would be to validate the HTML/XHTML via some type of tool. For instance:

http://validator.w3.org/

There are tools that will plugin to your browser like FireBug and Web Developer that help in validation and debugging of HTML, CSS, and Javascript.

As a side note, I would forget doing tables and go with DIV tags and then apply the following CSS to any given DIV tag that you want rounded corners on. Here is your design re-done using DIV's and CSS.

<!DOCTYPE html>
<html>
    <head>
        <title>Rounded Corners Example</title>

        <style type="text/css">
            .roundedContainer {
                background-color: #0c990a;
                border-radius: 10px;
                -moz-border-radius: 10px;
                float: left;
                height: 200px;
                padding: 0 20px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="roundedContainer" style="line-height: 200px;">Blarzed.Thecom</div>
        <div class="roundedContainer"><img src="/images/layout/blarzedbanner.gif" alt="Blarzed Banner"></div>
    </body>
</html>

The code may require some tweaking, but that will get you half way there.

You could try Firebug Firefox extension.

There are plenty of ways to use it. In your case, to see if the corners images are really loaded and rendered where you think they are, you can fire up firebug, navigate the DOM tree or even click on an area of your page to see what HTML elements are behind.