[web] DIV padding not working?

I SUCK at (X)HTML/CSS, so I usually let someone else do it for me. However, in this little pet project, that doesn't work out, so I took a standard template from somewhere else and used that. However, I was trying to make an image popup appear(Ie, a popup showing an image, comments for the image and perhaps some ads). So I took a standard lout from the Layout Gala and tried to modify it. However, it is not using the padding(I'm using FF), and i have no idea what I'm doing wrong here. Any ideas? This is what I have:


<%--<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.master" CodeFile="viewphoto.aspx.cs" Inherits="photos_viewphoto" Title="View Photo" %>
<asp:Content ID="ViewPhoto" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
    <asp:Image ID="imgPhoto" runat="server"/> 

    <asp:Label ID="lblPostedBy" runat="server">Posted By: </asp:Label><asp:HyperLink ID="urlPostedBy" runat="server" /> on <asp:Label ID="lblPostedOn" Font-Italic="true" runat="server" />
</asp:Content>--%>

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="viewphoto.aspx.cs" Inherits="photos_viewphoto" %>

<script type="text/javascript">
    function showprofile(url)
    {
        opener.location = url;
    }
</script>
<!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 id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Description of your web page goes here." />
<meta name="keywords" content="Keywords for you web page go here. Each keyword or group of keyword phrases are separated by a comma. Keep this keyword list short and relevant to the content of this specific page and also relevant to the tile of the specific page." />
<title>LOL WEBSITE~!</title>
<link rel="shortcut icon" href="~/css/images/favicon.ico" />
<!-- <link href="~/css/view.css" rel="stylesheet" type="text/css"/> --> 
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #006;padding:10px}
div#header{position:relative}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#header a{position:absolute;right:0;top:23px}
div#content p{line-height:1.4;padding: 20px 20px 20px 20px}
div#navigation{background:#FFFFFF}

div#wrapper{float:left;width:100%;margin-left:-200px}
div#content{margin-left:200px}
div#navigation{float:right;width:200px}
div#extra{float:right;clear:right;width:200px}
div#footer{clear:both;width:100%}
</style>
</head>
<body>
    <form id="form1" runat="server">
    
        
            <asp:Image ID="imgPhoto" runat="server"/> 

            <asp:Label ID="lblPostedBy" runat="server">Posted By: </asp:Label><asp:HyperLink ID="urlPostedBy" runat="server" /> on <asp:Label ID="lblPostedOn" Font-Italic="true" runat="server" />


            <asp:Label ID="lblDesc" Font-Italic="true" runat="server"></asp:Label>
            
            <asp:LoginView ID="loginView" runat="server">
                <LoggedInTemplate>
                    <form>
                        <table>
                        <tr><td><asp:TextBox Columns="30" Rows="5" runat="server" ID="txtComment"></asp:TextBox></td></tr>
                        <tr><td><asp:Button Id="btnSubmitComment" Text="Post Comment" OnClick="btnSubmitComment_Click" runat="server" /></td></tr>
                        </table>
                    </form>
                </LoggedInTemplate>
            </asp:LoginView>
        
        
        
            lulz

</form> </body> </html> If you could shine some light on this, tell me! Oh, any idea how I can force a DIV tag to grow larger when the size of data in it doesn't fit on the screen? So far I only see the image overflow over other tags, which is ugly. Toolmaker

Topic Locked