...

View Full Version : Why TF is this happening?



Democrazy
09-16-2011, 07:17 PM
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


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>

alykins
09-16-2011, 07:22 PM
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

Democrazy
09-16-2011, 07:34 PM
The full code is exactly same in regards to the <TD>'s, just for other products.. thats why I included just 1.

Democrazy
09-16-2011, 07:36 PM
What do you mean inside the cell space? Doesn't the cell space refer to the space between each cell?

teedoff
09-16-2011, 07:46 PM
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?? :thumbsup:

Democrazy
09-17-2011, 04:15 AM
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. :D

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

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>

teedoff
09-17-2011, 04:21 AM
Is this your complete document?

Democrazy
09-17-2011, 04:24 AM
No, I have stripped off everything outside DIV.main to keep it easy to understand,

Democrazy
09-17-2011, 04:28 AM
I am just going to paste the entire code in 1 go. Here it is:

body.css:

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:

<!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>

teedoff
09-17-2011, 05:08 AM
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:


<!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 (http://www.w3schools.com) and start working through the html/css tutorials there to better understand correct coding practices.

You should also validate (http://validator.w3.org)your code often throughout the development phase.

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

Democrazy
09-17-2011, 06:29 AM
Wrong mate, the doctype is valid.
http://www.w3.org/TR/1999/REC-html401-19991224/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?

teedoff
09-17-2011, 06:36 AM
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.

Democrazy
09-17-2011, 06:52 AM
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.

teedoff
09-17-2011, 07:07 AM
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

alykins
09-17-2011, 05:58 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum