Small po=roblem (why content doesn't go to the top)

Discussion in 'HTML & Website Design' started by Ashley Davis, Jul 27, 2008.

  1. #1
    Hi,
    I have a small problem on a website i am making; have a look at it here. I don't understand why the image doesn't go all the way to the top of the page. Instead theres a bit of white space at the top...

    Any ideas as to why this is and how to fix it?

    Thanks.
     
    Ashley Davis, Jul 27, 2008 IP
  2. Boxerman

    Boxerman Peon

    Messages:
    306
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    show me the html code from the bottom of the image to the very top of the page
     
    Boxerman, Jul 27, 2008 IP
  3. Ashley Davis

    Ashley Davis Banned

    Messages:
    43
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    <!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>ABS Workout</title>
    <link href="main.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body background="images/blue-pixels-abstract-thumbnail.jpg" bgcolor="#ffffff">
    <table width="800" border="25" align="center" cellpadding="1" cellspacing="1" bordercolor="#006699" bgcolor="#FFFFFF">
    <tr>
          <td><div align="center">
            <img align="top" src="images/banner.jpg" alt="Fitness Abs DVD" width="700" height="470" />
    HTML:
     
    Ashley Davis, Jul 27, 2008 IP
  4. Boxerman

    Boxerman Peon

    Messages:
    306
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    <!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>ABS Workout</title><link href="main.css" rel="stylesheet" type="text/css" /></head><body background="images/blue-pixels-abstract-thumbnail.jpg" bgcolor="#ffffff"><table width="800" border="25" align="center" cellpadding="1" cellspacing="1" bordercolor="#006699" bgcolor="#FFFFFF"><tr>      <td><div align="center"><img align="top" src="images/banner.jpg" alt="Fitness Abs DVD" width="700" height="470" />
    HTML:
    try this?
     
    Boxerman, Jul 27, 2008 IP
  5. Ashley Davis

    Ashley Davis Banned

    Messages:
    43
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Ashley Davis, Jul 28, 2008 IP
  6. Boxerman

    Boxerman Peon

    Messages:
    306
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    looks like you got it in a table, try changing table lengh etc..
     
    Boxerman, Jul 28, 2008 IP
  7. saky

    saky Well-Known Member

    Messages:
    266
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    108
    #7
    replace
    <body background="images/blue-pixels-abstract-thumbnail.jpg" bgcolor="#ffffff">
    Code (markup):
    By
    <BODY TOPMARGIN=0 LEFTMARGIN=0 MARGINHEIGHT=0 MARGINWIDTH=0 background="images/blue-pixels-abstract-thumbnail.jpg" bgcolor="#ffffff">
    Code (markup):
     
    saky, Jul 28, 2008 IP
  8. Le4rner

    Le4rner Active Member

    Messages:
    80
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    93
    #8
    Forget all the html attributes. YOur table default to 100px top padding for some reason. Check this
    replace your table tag
    
    <table width="800" bordercolor="#006699" border="25" bgcolor="#ffffff" align="center">
    
    HTML:
    With this
    
    <table class="mainTbl">
    
    HTML:
    Now open up main.css and add this.
    
    /*
     * Style for main table  align is not set in table but rather in the TD tag
     * Check out other border style types here:
     * http://www.w3schools.com/css/pr_border-style.asp
     */
    table.mainTbl {
         color:#FFFFFF;
         padding-top:0px;
         width:800px;
         border:outset #006699 25px;
        
    }
    
    HTML:

    That should do it
     
    Le4rner, Jul 28, 2008 IP
  9. skript

    skript Active Member

    Messages:
    81
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    93
    #9
    Your problem is in main.css (line 30) :
    table {
    color:#FFFFFF;
    padding-top:100px;
    }
    Code (markup):
    The padding-top:100px; is causing you problems :p .. remove it
     
    skript, Jul 28, 2008 IP