12 {{ upvoteCount | shortNum }}
12 {{ upvoteCount | shortNum }}

Messed up HTML code now I have a black line. Help needed.

by Alan Petersen
9 replies
  • WEB DESIGN
    • |
Hello,

Messed up the HTML for my mini-site template. I don't see anything in the code but I'm not a coder.

Any suggestions on how I can remove this line:



Thanks!
#black #code #html #line #messed #needed
  • Profile picture of the author jgalty
    What's the website address for i can take a look at it.
    {{ DiscussionBoard.errors[1081497].message }}
  • Profile picture of the author TristanPerry
    Yeah, you'll need to provide a website address. Either that, or the (X)HTML and CSS used. Also, what changes did you make?
    Signature
    Plagiarism Guard - Protect Against Content Theft
    {{ DiscussionBoard.errors[1081558].message }}
    • Profile picture of the author nontemplates
      Well without seeing the site I'll just take my best shot. Either

      A) A slicing problem. (view background image)
      B) A border is being put around your image (set img and base border properties to 0 )
      C) background is black and theres a margin/padding issue. (check values in that div)

      Could be a few other things as well. Like the others have said Its extremely hard to hit it without seeing the page. Don't even know if its designed with Divs and CSS or old school tables.
      {{ DiscussionBoard.errors[1081859].message }}
  • Profile picture of the author stoco
    non templates is on the right track. Also, if you are using tables for the image splits, you can look for 'cellspacing' and 'cellpadding' settings, should be set to 0.

    But of course, without seeing the site and the code, we are all shooting in the dark.
    {{ DiscussionBoard.errors[1082167].message }}
  • Profile picture of the author TristanPerry
    Okay, it's a tabled design so it does make it a bit harder to de-bug.

    But I *think* that this is because the height of the:

    Code:
    <tr>
      <td background="images/template_01.jpg">
      <div align="center">
      <table id="table2" width="760" border="0" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td> <img src="images/template_02.jpg" height="266" width="761" border="0"></td>
          </tr>
        </tbody>
      </table>
      </div>
      </td>
    </tr>
    bit is taller than the background image

    images/template_01.jpg

    And so the background now repeats. I *think* this is the cause, anywhoo. The problem seems to be that the height is becoming too tall, hence why the background image is repeating. Insert try the following.

    Find:

    Code:
    <table id="table2" border="0" cellpadding="0"
 cellspacing="0" width="760">
        <tbody>
          <tr>
            <td> <img src="images/template_02.jpg"
 border="0" height="266" width="761"></td>
          </tr>

        </tbody>
    Replace with:

    Code:
    <table id="table2" border="0" cellpadding="0"
 cellspacing="0" width="760" height="266" style="max-height: 266px; padding: 0;">
        <tbody>
          <tr>
            <td height="266" style="max-height: 266px; padding: 0;"> <img src="images/template_02.jpg"
 border="0" height="266" width="761"></td>
          </tr>
        </tbody>
      </table>
    The above should fix it on second thoughts. Let us know if it doesn't.

    You can also make the background image not repeat, but this wouldn't fix the main issue (i.e. the fact that the table is too tall)

    P.S. I've had to edit our the <img src=""> URLs since I have less than 15 posts. It wasn't letting me post. I trust you can see the difference find though
    Signature
    Plagiarism Guard - Protect Against Content Theft
    {{ DiscussionBoard.errors[1083100].message }}
    • Profile picture of the author Alan Petersen
      Originally Posted by TristanPerry View Post

      Okay, it's a tabled design so it does make it a bit harder to de-bug.

      But I *think* that this is because the height of the:

      Code:
      <tr>
      <td background="images/template_01.jpg">
      <div align="center">
      <table id="table2" width="760" border="0" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td> <img src="images/template_02.jpg" height="266" width="761" border="0"></td>
          </tr>
        </tbody>
      </table>
      </div>
      </td>
    </tr>
      bit is taller than the background image

      images/template_01.jpg

      And so the background now repeats. I *think* this is the cause, anywhoo. The problem seems to be that the height is becoming too tall, hence why the background image is repeating. Insert try the following.

      Find:

      Code:
      <table id="table2" border="0" cellpadding="0"
 cellspacing="0" width="760">
        <tbody>
          <tr>
            <td> <img src="images/template_02.jpg"
 border="0" height="266" width="761"></td>
          </tr>

        </tbody>
      Replace with:

      Code:
      <table id="table2" border="0" cellpadding="0"
 cellspacing="0" width="760" height="266" style="max-height: 266px; padding: 0;">
        <tbody>
          <tr>
            <td height="266" style="max-height: 266px; padding: 0;"> <img src="images/template_02.jpg"
 border="0" height="266" width="761"></td>
          </tr>
        </tbody>
      </table>
      The above should fix it on second thoughts. Let us know if it doesn't.

      You can also make the background image not repeat, but this wouldn't fix the main issue (i.e. the fact that the table is too tall)

      P.S. I've had to edit our the <img src=""> URLs since I have less than 15 posts. It wasn't letting me post. I trust you can see the difference find though
      The new code didn't work--black line was still there but you did point me in the right direction of where to look. I ended up dropping the height size down from 266 to 260 and the black line is gone but now there is a blue break in the header. Any suggestions on that?

      Download Niche Stores Unleashed FREE!

      Thanks a lot for your help!

      Alan
      Signature
      {{ DiscussionBoard.errors[1086782].message }}
  • Profile picture of the author TristanPerry
    Hmm that's odd. It's the same sort of issue as before - the table cell containing your header image is still larger than the header image itself, hence why a background image is showing through.

    If this was <divs> it'd just be a case of putting a negative margin-bottom CSS style on it.

    What I'm wondering is whether or not this is due to the "<div align="center">" code you have.

    Perhaps try finding:

    Code:
    <td background="http://www.warriorforum.com/images/template_04.jpg">
      <div align="center">
      <table id="table3" border="0" cellpadding="0"
    and

    Code:
    </tbody>
      </table>
      </div>
      </td>
    And replacing with:

    Code:
    <td background="http://www.warriorforum.com/images/template_04.jpg">
      <table id="table3" border="0" cellpadding="0"
    and

    Code:
    </tbody>
      </table>
      </td>
    It might be that it's this <div> which is causing the padding/margin issues.

    If you don't wish to remove that <div>, instead try this:

    Find:

    Code:
    <td background="http://www.warriorforum.com/images/template_01.jpg">
      <div align="center">
      <table id="table2" border="0" cellpadding="0"
 cellspacing="0" width="760">
    Replace with:

    Code:
    <td background="http://www.warriorforum.com/images/template_01.jpg">
      <div align="center" style="margin:0; padding:0;">
      <table id="table2" border="0" cellpadding="0"
 cellspacing="0" width="760">
    Let me know if any of that works. It's always difficult to track down, especially with a tabled layout, although it's just a case of some margin or padding (from one of the table cells or <div>s) creating that gap.

    Apologies I can't think of an exact cause; as above, it's always more difficult when there's lots of table cells and <div>s which could be the issue. If you use Firefox, left click whilst holding "Ctrl" to the left of the header image. This will highlight the top table cell - which shows that the top table cell is, for some reason, still coming out taller than the template_02.jpg image for some reason.
    Signature
    Plagiarism Guard - Protect Against Content Theft
    {{ DiscussionBoard.errors[1086817].message }}
  • Profile picture of the author nontemplates
    Yeah tables within tables are a pain. Quite honestly the time it takes to hunt down the problem you could rebuild the whole page in modern compliant XHTML and CSS and never have any of those headaches. I could reproduce that site in 15-20 minutes.

    Thing is if the OP is using something like frontpage before the page is finished there will probably be more problems.
    {{ DiscussionBoard.errors[1087129].message }}

Trending Topics