Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Banned
    Join Date
    Sep 2011
    Posts
    140
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Why TF is this happening?

    I've set cellspacing to 19px, yet on two different pages using the same code, the cells have different spacing. Its really Fn annoying! Does anyone know why?

    http://i54.tinypic.com/351si81.png
    http://i52.tinypic.com/2u7tw8j.png

    Code:
     TABLE.categorylist {
    
    height: 606px;
    
    margin-left:16px;
    
    margin-top: -288px;
    
    overflow: hidden;
    
    position: absolute;
    
    top: 50%;
    
    width: 1254px
    
    }
    
    <TABLE cellpadding="0px" cellspacing="19px" class="categorylist">
    
    <TR>
    
    <TD align="center">
    <A class="gold" href="./belts">Belts</A><A href="./belts"><IMG alt="" src="belts.png" style="border: 0px; margin-top: 5px">
    </TD>
    
    </TR>
    </TABLE>
    Last edited by VIPStephan; 09-17-2011 at 09:51 AM. Reason: restored original post

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,722
    Thanks
    41
    Thanked 191 Times in 190 Posts
    need more code... specifically those elements inside the cells... my guess is the children (the cells) are probably becoming too large to fit inside with the 19px cell-spacing

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #3
    Banned
    Join Date
    Sep 2011
    Posts
    140
    Thanks
    17
    Thanked 0 Times in 0 Posts
    The full code is exactly same in regards to the <TD>'s, just for other products.. thats why I included just 1.
    Last edited by VIPStephan; 09-17-2011 at 09:53 AM. Reason: restored original post

  • #4
    Banned
    Join Date
    Sep 2011
    Posts
    140
    Thanks
    17
    Thanked 0 Times in 0 Posts
    What do you mean inside the cell space? Doesn't the cell space refer to the space between each cell?
    Last edited by VIPStephan; 09-17-2011 at 09:53 AM. Reason: restored original post

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Democrazy View Post
    The full code is exactly same in regards to the <TD>'s, just for other products.. thats why I included just 1.
    Sometimes other page elements and other style rules might affect issues in which you're describing. Its good practice to post ALL code including CSS when you're having...well code issues. Personally, I'd much rather have a link to a live test site. I know you said you didn't have one as of yet in your other post, but its a great idea to get one up and running EARLY in development stages. There are many free hosting options.

    On a side note, I thought you were converting your table layout to a div based??
    Last edited by teedoff; 09-16-2011 at 06:49 PM.
    Teed

  • #6
    Banned
    Join Date
    Sep 2011
    Posts
    140
    Thanks
    17
    Thanked 0 Times in 0 Posts
    On your note. I am converting all 1 table tables to DIV's... Tables that will actually have tableS will stay as tables, such as this one.

    Here is a screen shot (note: black box is DIV.main):
    http://i52.tinypic.com/10nb40p.png

    Code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    
    "http://www.w3.org/TR/html4/strict.dtd">
    
    <TITLE></TITLE>
    
    <META content="charset=windows-1252;text/html" http-equiv="content-type">
    
    <LINK href="../../body.css" rel="stylesheet" type="text/css">
    
    <STYLE type="text/css">
    
    A.gold {
    
    color: gold;
    
    }
    
    DIV.pagedescriptor {
    
    left: 50%;
    
    margin-left: -73px;
    
    margin-top: -313px;
    
    position: absolute;
    
    top: 50%
    
    }
    
    TABLE.categorylist {
    
    height: 606px;
    
    margin-left:16px;
    
    margin-top: -288px;
    
    overflow: hidden;
    
    position: absolute;
    
    top: 50%;
    
    width: 1254px
    
    }
    
    A.search {
    
    color: gold;
    
    left:50%;
    
    margin-left: 193px;
    
    margin-top: 225px;
    
    position: absolute;
    
    top: 50%
    
    }
    
    </STYLE>
    
    <DIV>
    
    <DIV class="main">
    
    <DIV class="pagedescriptor">Products for men:</DIV>
    
    <TABLE cellpadding="0px" cellspacing="19px" class="categorylist">
    
    <TR>
    
    <TD align="center"><A class="gold" href="./belts">Belts</A><A href="./belts"><IMG alt="" src="belts.png" style="border: 0px; margin-top: 5px"></TD>
    
    <TD align="center"><A class="gold" href="./cufflinks">Cufflinks</A><A href="./cufflinks"><IMG alt="" src="cufflinks.png" style="border: 0px; margin-top: 5px"></A></TD>
    
    <TD align="center"><A class="gold" href="./eyewear">Eyewear</A><A href="./eyewear"><IMG alt="" src="eyewear.png" style="border: 0px; margin-top: 5px"></A></TD>
    
    <TD align="center"><A class="gold" href="./fragrances">Fragrances</A><A href="./fragrances"><IMG alt="" src="fragrances.png" style="border: 0px; margin-top: 5px"></A></TD>
    
    <TD align="center"><A class="gold" href="./gloves">Gloves</A><A href="./gloves"><IMG alt="" src="gloves.png" style="border: 0px; margin-top: 5px"></A></TD>
    
    <TD align="center"><A class="gold" href="./hats">Hats</A><A href="./hats"><IMG alt="" src="hats.png" style="border: 0px; margin-top: 5px"></A></TD>
    
    <TD align="center"><A class="gold" href="./jackets">Jackets</A><A href="./jackets"><IMG alt="" src="jackets.png" style="border: 0px; margin-top: 5px"></A></TD>
    
    </TR>
    
    <TR>
    
    <TD align="center"><A class="gold" href="./pants">Pants</A><A href="./pants"><IMG alt="" src="pants.png" style="border: 0px; margin-top: 5px"></A></TD>
    
    <TD align="center"><A class="gold" href="./poloshirt">Polo shirts</A><A href="./poloshirt"><IMG alt="" src="pants.png" style="border: 0px; margin-top: 5px"></A></TD>
    
    <TD align="center"><A class="gold" href="./scalves">Scalves</A><A href="./scalves"><IMG alt="" src="scalves.png" style="border: 0px; margin-top: 5px"></A></TD>
    
    <TD align="center"><A class="gold" href="./shirts">Shirts</A><A href="./shirts"><IMG alt="" src="shirts.png" style="border: 0px; margin-top: 5px"></A></TD>
    
    <TD align="center"><A class="gold" href="./shoes">Shoes</A><A href="./shoes"><IMG alt="" src="shoes.png" style="border: 0px; margin-top: 5px"></A></TD>
    
    <TD align="center"><A class="gold" href="./socks">Socks</A><A href="./socks"><IMG alt="" src="socks.png" style="border: 0px; margin-top: 5px"></A></TD>
    
    <TD align="center"><A class="gold" href="./ties">Ties</A><A href="./ties"><IMG alt="" src="ties.png" style="border: 0px; margin-top: 5px"></A></TD>
    
    </TR>
    
    <TR>
    
    <TD align="center"><A class="gold" href="./tops">Tops</A><A href="./tops"><IMG alt="" src="tops.png" style="border: 0px; margin-top: 5px"></A></TD>
    
    <TD align="center"><A class="gold" href="./t-shirts">T-shirts</A><A href="./t-shirts"><IMG alt="" src="t-shirts.png" style="border: 0px; margin-top: 5px"></A></TD>
    
    <TD align="center"><A class="gold" href="./umbrellas">Umbrellas</A><A href="./umbrellas"><IMG alt="" src="umbrellas.png" style="border: 0px; margin-top: 5px"></A></TD>
    
    <TD align="center"><A class="gold" href="./wallets">Wallets</A><A href="./wallets"><IMG alt="" src="wallets.png" style="border: 0px; margin-top: 5px"></A></TD>
    
    </TR>
    
    </TABLE>
    
    <A class="search" href="./search">Search</A>
    
    </DIV>
    
    </DIV>
    Last edited by VIPStephan; 09-17-2011 at 09:54 AM. Reason: restored original post

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Is this your complete document?
    Teed

  • #8
    Banned
    Join Date
    Sep 2011
    Posts
    140
    Thanks
    17
    Thanked 0 Times in 0 Posts
    No, I have stripped off everything outside DIV.main to keep it easy to understand,
    Last edited by VIPStephan; 09-17-2011 at 09:55 AM. Reason: restored original post

  • #9
    Banned
    Join Date
    Sep 2011
    Posts
    140
    Thanks
    17
    Thanked 0 Times in 0 Posts
    I am just going to paste the entire code in 1 go. Here it is:

    body.css:
    Code:
     A.silver {
    
    color: silver;
    
    }
    
    BODY {
    
    background-attachment: fixed;
    
    background-image: url("bodybackground.png");
    
    background-position: center;
    
    background-repeat: no-repeat;
    
    color: gold;
    
    font-family: verdana
    
    }
    
    SPAN.mainmenu {
    
    left: 50%;
    
    margin-left: 371px;
    
    margin-top: -331px;
    
    position: absolute;
    
    top: 50%
    
    }
    
    DIV.main {
    
    background-color: black;
    
    height: 636px;
    
    left: 50%;
    
    margin-left: -635px;
    
    margin-top: -307px;
    
    position: absolute;
    
    top: 50%;
    
    width: 1270px
    
    }
    index.html:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <TITLE></TITLE>
    <META content="charset=windows-1252;text/html" http-equiv="content-type">
    <LINK href="../../body.css" rel="stylesheet" type="text/css">
    <STYLE type="text/css">
    A.gold {
    color: gold;
    }
    DIV.pagedescriptor {
    left: 50%;
    margin-left: -73px;
    margin-top: -313px;
    position: absolute;
    top: 50%
    }
    TABLE.categorylist {
    height: 606px;
    margin-left:16px;
    margin-top: -288px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    width: 1254px
    }
    A.search {
    color: gold;
    left:50%;
    margin-left: 193px;
    margin-top: 225px;
    position: absolute;
    top: 50%
    }
    </STYLE>
    <DIV>
    <SPAN class="mainmenu">| <A class="silver" href="/newsletters">NEWSLETTERS</A> | <A class="gold" href="/products">PRODUCTS</A> |</SPAN>
    <DIV class="main">
    <DIV class="pagedescriptor">Products for men:</DIV>
    <TABLE cellpadding="0px" cellspacing="19px" class="categorylist">
    <TR>
    <TD align="center"><A class="gold" href="./belts">Belts</A><A href="./belts"><IMG alt="" src="belts.png" style="border: 0px; margin-top: 5px"></TD>
    <TD align="center"><A class="gold" href="./cufflinks">Cufflinks</A><A href="./cufflinks"><IMG alt="" src="cufflinks.png" style="border: 0px; margin-top: 5px"></A></TD>
    <TD align="center"><A class="gold" href="./eyewear">Eyewear</A><A href="./eyewear"><IMG alt="" src="eyewear.png" style="border: 0px; margin-top: 5px"></A></TD>
    <TD align="center"><A class="gold" href="./fragrances">Fragrances</A><A href="./fragrances"><IMG alt="" src="fragrances.png" style="border: 0px; margin-top: 5px"></A></TD>
    <TD align="center"><A class="gold" href="./gloves">Gloves</A><A href="./gloves"><IMG alt="" src="gloves.png" style="border: 0px; margin-top: 5px"></A></TD>
    <TD align="center"><A class="gold" href="./hats">Hats</A><A href="./hats"><IMG alt="" src="hats.png" style="border: 0px; margin-top: 5px"></A></TD>
    <TD align="center"><A class="gold" href="./jackets">Jackets</A><A href="./jackets"><IMG alt="" src="jackets.png" style="border: 0px; margin-top: 5px"></A></TD>
    </TR>
    <TR>
    <TD align="center"><A class="gold" href="./pants">Pants</A><A href="./pants"><IMG alt="" src="pants.png" style="border: 0px; margin-top: 5px"></A></TD>
    <TD align="center"><A class="gold" href="./poloshirt">Polo shirts</A><A href="./poloshirt"><IMG alt="" src="pants.png" style="border: 0px; margin-top: 5px"></A></TD>
    <TD align="center"><A class="gold" href="./scalves">Scalves</A><A href="./scalves"><IMG alt="" src="scalves.png" style="border: 0px; margin-top: 5px"></A></TD>
    <TD align="center"><A class="gold" href="./shirts">Shirts</A><A href="./shirts"><IMG alt="" src="shirts.png" style="border: 0px; margin-top: 5px"></A></TD>
    <TD align="center"><A class="gold" href="./shoes">Shoes</A><A href="./shoes"><IMG alt="" src="shoes.png" style="border: 0px; margin-top: 5px"></A></TD>
    <TD align="center"><A class="gold" href="./socks">Socks</A><A href="./socks"><IMG alt="" src="socks.png" style="border: 0px; margin-top: 5px"></A></TD>
    <TD align="center"><A class="gold" href="./ties">Ties</A><A href="./ties"><IMG alt="" src="ties.png" style="border: 0px; margin-top: 5px"></A></TD>
    </TR>
    <TR>
    <TD align="center"><A class="gold" href="./tops">Tops</A><A href="./tops"><IMG alt="" src="tops.png" style="border: 0px; margin-top: 5px"></A></TD>
    <TD align="center"><A class="gold" href="./t-shirts">T-shirts</A><A href="./t-shirts"><IMG alt="" src="t-shirts.png" style="border: 0px; margin-top: 5px"></A></TD>
    <TD align="center"><A class="gold" href="./umbrellas">Umbrellas</A><A href="./umbrellas"><IMG alt="" src="umbrellas.png" style="border: 0px; margin-top: 5px"></A></TD>
    <TD align="center"><A class="gold" href="./wallets">Wallets</A><A href="./wallets"><IMG alt="" src="wallets.png" style="border: 0px; margin-top: 5px"></A></TD>
    </TR>
    </TABLE>
    <A class="search" href="./search">Search</A>
    </DIV>
    Last edited by VIPStephan; 09-17-2011 at 09:57 AM. Reason: restored original post

  • #10
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Finally...please, from now on when someone asks for your complete code, lol provide it.

    You document structure is incorrect, which is the first thing I see.

    Every web document must have the same basic structure, which begins with of course a valid doctype:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Page Title</title>
    All meta tags and css links and styles go in the head section
    </head>
    
    <body>
    
    All Content Here.
    </body>
    </html>
    I think you should go to w3schools.com and start working through the html/css tutorials there to better understand correct coding practices.

    You should also validate your code often throughout the development phase.

    Clean up your code then see if your issue still exist.
    Teed

  • #11
    Banned
    Join Date
    Sep 2011
    Posts
    140
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Wrong mate, the doctype is valid.
    http://www.w3.org/TR/1999/REC-html40.../sgml/dtd.html

    Here is a first hand look at my issue:
    http://qfs.mobi/f31351

    As you can see in index.html, cellspacing is set to 19px, yet cell spacing is being rendered between 20px-25px.

    Why?
    Last edited by VIPStephan; 09-17-2011 at 09:58 AM. Reason: restored original post

  • #12
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I didnt say your doctype was not valid. You PAGE is not valid. You dont have <head> tags. You dont have <body tags, and you dont have <html> tags. Read my previous post again and look at the code I posted carefully to see what YOU are missing in YOUR code.

    I cant help you any further, nor I doubt anyone else can until you have valid code, which may resolve your issue.
    Last edited by teedoff; 09-17-2011 at 05:39 AM.
    Teed

  • #13
    Banned
    Join Date
    Sep 2011
    Posts
    140
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Why don't you validate the code in the file I have uploaded, moron, and you will see it passes both HTML4 strict and CSS 2.1.

    Perhaps you should jump on w3.org Instead of trashing peoples threads preaching about w3schools.com with invalid arguments that do not apply to the problem that is being discussed in the thread.
    Last edited by Democrazy; 09-17-2011 at 05:57 AM.

  • #14
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Democrazy View Post
    Why don't you validate the code in the file I have uploaded, moron, and you will see it passes both HTML4 strict and CSS 2.1.

    Perhaps you should jump on w3.org Instead of trashing peoples threads preaching about w3schools.com with invalid arguments that do not apply to the problem that is being discussed in the thread.
    Moron huh...well I'm not the one with code issues am I? I was trying to help you with your problem. Good luck
    Teed

  • #15
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,722
    Thanks
    41
    Thanked 191 Times in 190 Posts
    Quote Originally Posted by Democrazy View Post
    Why don't you validate the code in the file I have uploaded, moron, and you will see it passes both HTML4 strict and CSS 2.1.

    Perhaps you should jump on w3.org Instead of trashing peoples threads preaching about w3schools.com with invalid arguments that do not apply to the problem that is being discussed in the thread.
    well for all of us morons; your code doesn't validate... cheers!

    FYI:
    I got it to validate, after adding in the things that you omitted that Teed graciously pointed out. Also you have an element (no clues as to which) that isn't closed. Furthermore you are using extra divs for no reason whatsoever... If you come to a place looking for help, it's generally BAD PRACTICE to insult those who are willing to help

    Don't bite the hand that feeds

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE


  •  

    Posting Permissions

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