HTML Tables Width Problem

liunx

Guest
I just released a new layout for my web site:<br />
<br />
<!-- m --><a class="postlink" href="http://www.nitrox.uni.cc">http://www.nitrox.uni.cc</a><!-- m --><br />
<br />
My problem is when you read news, it expands the table. I had to changes the template width in the news script to 491 because for some reason the width of the content table is 491 (even though I said 500). So can someone please help me get it to 500 width? I specified 500 there, the width of the navigation is 150, and the total table width is 650, so I don't know the problem. Please take a look. Thanks,<br />
<br />
Michael<!--content-->it looks OK to me. The cells appear to be the correct width (IE6).<!--content-->I don't see anyhting wrong either. but I have 1 question. why are you using font tags when you are using span tags?<!--content-->Yeah thats looks good to me.<!--content-->I guess you have the problem here...<br />
<br />
<table border="1" ... cellpadding="3"...<br />
<br />
These are not added to the width of the table (650px), but seen as a part of it. A width specified to a table always overrides a width specified to a cell inside it. That's why I recommend you to leave all specified widths from the table tags and only specify them in table cells.<!--content-->The coding isn't to pretty though, 70 errors when ran through the validator...<br />
<br />
<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.nitrox.uni.cc%2F">http://validator.w3.org/check?uri=http% ... .uni.cc%2F</a><!-- m --><!--content-->Why has each line of code got an embedded style? This is serious code bloat.<br />
<br />
(<font style="font-family:verdana, arial, sans-serif; font-size:9;"><a href=http://www.htmlforums.com/archive/index.php/"/index.php?subaction=showfull&id=1062283432&archive=&start_from=&ucat=2&">Read</a>)</font></a><br>30 Aug 2003 - <b>Technical Difficulties Resolved</b><br />
<br />
(You also have two </a> tags where only one is needed)<br />
<br />
<br />
Put this in external stylesheet file:<br />
<br />
.link {font-family:verdana, arial, sans-serif; font-size:9;}<br />
<br />
Then use class="link" on each <a> anchor instead.<br />
<br />
You can also get rid of the <b> tags and replace with CSS too.<br />
<br />
Additionally ALL <font> tags can go.<!--content-->it looks OK to me. The cells appear to be the correct width (IE6).<br />
<br />
Are you actually viewing an article? I can get a screenshot if you want.<br />
<br />
I don't see anyhting wrong either. but I have 1 question. why are you using font tags when you are using span tags?<br />
<br />
I'm using a news script, I'm working on fixing the visible problems before I worry about that, but I'm well aware of that. I will fix it if I ever get this resolved :)<br />
<br />
The coding isn't to pretty though, 70 errors when ran through the validator...<br />
<br />
<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=h...itrox.uni.cc%2F">http://validator.w3.org/check?uri=h...itrox.uni.cc%2F</a><!-- m --><br />
<br />
Wow, thanks for pointing that out. I knew the code had a few bugs as far as bordercolor and ALT, but I thought the reason was because CuteNEWS' little URL system doesn't work with W3, but I guess the upgrade does. Thanks.<br />
<br />
Why has each line of code got an embedded style? This is serious code bloat.<br />
<br />
(<font style="font-family:verdana, arial, sans-serif; font-size:9;"><a href=http://www.htmlforums.com/archive/index.php/"/index.php?subaction=showfull&id=1062283432&archive=&start_from=&ucat=2&">Read</a> )</font></a><br>30 Aug 2003 - <b>Technical Difficulties Resolved</b><br />
<br />
(You also have two </a> tags where only one is needed)<br />
<br />
<br />
Put this in external stylesheet file:<br />
<br />
.link {font-family:verdana, arial, sans-serif; font-size:9;}<br />
<br />
Then use class="link" on each <a> anchor instead.<br />
<br />
You can also get rid of the <b> tags and replace with CSS too.<br />
<br />
Additionally ALL <font> tags can go.<br />
<br />
I used to use a different template for the news system, then I created this one and forgot about that. Anyway, I got that fixed :) I'll work on the CSS thing while im waiting for a response.<br />
<br />
I guess you have the problem here...<br />
<br />
<table border="1" ... cellpadding="3"...<br />
<br />
These are not added to the width of the table (650px), but seen as a part of it. A width specified to a table always overrides a width specified to a cell inside it. That's why I recommend you to leave all specified widths from the table tags and only specify them in table cells.<br />
<br />
So on the table cells I should put 650px but on all of the other tags inside the table, leave it out? What's the difference? It's still telling 650 on the table tag, even if it overrides the tags inside the table. Please explain further if I'm not seeing what you mean.<br />
<br />
Thanks for the quick response. I really appreciate it. I attatched an image of the problem when I am viewing an article. I'm not sure what it looks like in Mozilla, I know the front page looks fine in it, that I tested.<br />
<br />
Please Help!<br />
<br />
-Michael<!--content-->Ok agent, I tried taking out the tag. You were right, it works fine now, but all my text is against the line! I tried putting it on the TD tag, but that didn't work very well, lol. So how do I fix this? Should I just make ANOTHER layout *yawn*<br />
<br />
Technel<!--content-->Originally posted by technel <br />
So on the table cells I should put 650px but on all of the other tags inside the table, leave it out? What's the difference? It's still telling 650 on the table tag, even if it overrides the tags inside the table. Please explain further if I'm not seeing what you mean. <br />
if you first table is 650 then just add width="100%" to all tables under it. that way it will be 100% of 650 all the time.<!--content-->Ok, I don't know if you got it figured out yet or not, but here is my try at explaining it. You want your table to be 650px, and you have a column that is 150px, so you do 650-150=500. BUT, what happens if you have cellpadding=3? now you start with 650, and subtract the 150, and get 500. Then you subtract 3 for the left hand padding in the left column, 3 for the right hand padding in the right column, 3 for the left hand padding in the right column, and 3 for the right hand padding in the right column. so... 500-3-3-3-3=488. You are off by 12 pixels.<br />
<br />
Aaron<!--content-->Got it, thanks. I tried doing it but I only subtracted 3 once :rolleyes: Thanks man! :)<br />
<br />
Technel<!--content-->heeh or add 100% like I suggested and not worry about it. :P<!--content-->My point was, the only thing you have to do is remove all width specifications from the <table> tags, and leave them in <td> tags.<!--content-->Originally posted by technel <br />
Wow, thanks for pointing that out. I knew the code had a few bugs as far as bordercolor and ALT, but I thought the reason was because CuteNEWS' little URL system doesn't work with W3, but I guess the upgrade does. Thanks. <br />
<br />
No problem technel.<!--content-->
 
Back
Top