SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast Dr. Corvinus's Avatar
    Join Date
    Oct 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help padding IE/FF and your opinion please...

    Hi,

    I have a problem with padding...

    I am developing a page that has 3 columns, though only 2 have content in them, in general the page looks fine in its early stages, but the middle column shows some padding in IE 6 and in FF it has none. I have read here that different browsers apply different defaults on paddings and margins, so I use the following:

    Code:
    *  
    {
        margin: 0;
        padding: 0;
    }
    but I do not know what is wrong here, I was thinking maybe the box model but I am confused...

    This is the padding differences I talk about,





    you can see the web page here:
    site


    Right now is just the skeleton to use as a base, here is the code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>AVS</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <style>
        *  
        {
            margin: 0;
            padding: 0;
        }
    
    body
    {
        color: #ffffff;
        background: #ECECEC url(diagonals.gif);
        font: small Arial, Helvetica, Verdana, sans-serif;
    }
    
    #wrapper
    {
        background: #ffffff;
        margin: 30px 40px 30px 40px;
        padding: 10px;    
        border: 1px solid #F1EFE2;
    }
    
    #header p.right {
    	float:right;
    	padding:25px 0 15px 20px;
    	margin:-27px 0 0 0;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:11px;
    	color:#666666;
    }
    
    #header-bottom
    {
        margin-top: 20px;
        border-top: 1px solid #b9d2e3;
        border-bottom: 1px solid #b9d2e3;    
        background-color: #2d5988;
        background-image: url(nav1.gif);
        background-repeat: repeat-x;
        padding: 5px 0 5px 20px; 
    }
    
    #header-bottom ul
    {
        margin:0;
        padding: 0 0 0 0; 
    }
    
    #header-bottom li
    {
        display: inline;    
        color: #ffffff;
    }
    
    #header-bottom a:Link, #header-bottom a:visited
    {
        text-decoration: none;
        color: #ffffff;
    }
    
    #header-bottom a:hover
    {
        text-decoration: none;
        color: #ffac43;
    }
    
    #main
    {
        margin-top: 0px;
        height: 1%;   
        background-image: url(side.gif);
        background-position:left;
        background-repeat:repeat-y;
    }
    
    #main2
    {
        /*margin-top: 0px;
        height: 1%;   */
        background-image: url(side2.gif);
        background-position:right;
        background-repeat:repeat-y;
    }
    
    #content
    {
        margin: 0 0 0 201px;
        color: black;
    }
    
    #sidebar
    {
        float: left;
        width: 200px;
        background-color: #fcfcff;
        border-left:  1px solid #b9d2e3;
        color: black;
    }
    
    #sidebar .inner
    {
        padding: 5px;
    }
    
    #sidebar2
    {
        float: right;
        width: 1px;    
    }
    
    #footer
    {
        border: 1px solid #b9d2e3;
        border-left: none;
        border-right: none;
        margin: 0 0 0 0;
        background-image: url(nav1.gif);
        background-repeat: repeat-x;
        padding: 5px 0 5px 20px; 
    }
    
    #footer p
    {
        font-size: 90%;
        color: #ffffff;
    }
    
    #clearsides
    {
        clear: both;
    }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <p class="right">
                    Welcome to AVS Sign in | Join | Help</p>
            </div>
            <img src="azulAVS.JPG" alt="avs" height="150" width="600" />
            <div id="header-bottom">
                <ul>
                    <li><a href="">Contact Us</a> | </li>
                    <li><a href="">About Us</a> | </li>
                    <li><a href="">Privacy Policy</a> | </li>
                    <li><a href="">Sitemap</a></li>
                </ul>
            </div>
            <div id="main">
                <div id="main2">
                    <div id="sidebar">
                        <div class="inner">
                            <p>This goes here</p>
                            <p>This goes here</p>
                        </div>
                    </div><!-- sidebar -->
                    <div id="sidebar2"></div><!-- sidebar2 -->
                    <div id="content">
                        <div id="mainfeature">
                            <h2>AVS Global</h2>
                        </div>
                        <!-- mainfeature -->
                        <div class="inner">
                            <h2>Recent Images</h2>
                            <br />
                            <br />
                            <br />
                        </div>
                    </div>
                    <div id="clearsides">
                    </div>
                </div>
                <div id="footer">
                    <p>Copyright 2007</p>
                </div>
            </div><!-- main2 -->
        </div><!-- main -->
    </body>
    </html>
    I want to understand this problem to learn how to fix it, so any help will be appreciated!

    As I am new in web design I would also like your opinion on the site design, colors, etc, just what you think...

    Thank you

  2. #2
    SitePoint Enthusiast Dr. Corvinus's Avatar
    Join Date
    Oct 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Awesome!

    Read the posts and got it.

    Thank you Ben!

    Corvinus
    Fortune favors the bold...!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •