The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
Reply to this topicStart new topic
> table related problem with border added automatically...
rw1
post Sep 19 2006, 08:07 PM
Post #1


Member
***

Group: Members
Posts: 41
Joined: 19-September 06
Member No.: 171



hello,

i am working on a joomla site and i have placed some 'modules' within some table cells. the problem is that for some reason there is a border around the modules and therefore the modules are not 'butting up' together.

i have placed a message on the joomla forums but i think it may just be a table related problem.

if anyone could check the link and offer any ideas it would be really appreciated.

thankyou.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 19 2006, 08:19 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,986
Joined: 9-August 06
Member No.: 6



Do you mean the white stripe below the top image? Here goes.
http://www.htmlhelp.com/faq/html/images.html#image-nospace
Another way to get rid of the space is to use CSS and make the image 'display: block'.

I like that layout. It looks very nice and clean.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rw1
post Sep 20 2006, 12:31 AM
Post #3


Member
***

Group: Members
Posts: 41
Joined: 19-September 06
Member No.: 171



QUOTE(pandy @ Sep 20 2006, 11:19 AM) *

Do you mean the white stripe below the top image? Here goes.
http://www.htmlhelp.com/faq/html/images.html#image-nospace
Another way to get rid of the space is to use CSS and make the image 'display: block'.

I like that layout. It looks very nice and clean.


thank you pandy, i really appreciate your reply. could you tell me how to implement the "'display: block" solution. where and how do i need to add this?

thankyou.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 20 2006, 12:44 AM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,986
Joined: 9-August 06
Member No.: 6



Have you fixed it already? I don't see gap anymore. blink.gif

Anyway, there is a whole table wrapped around the image and the table has a class so this should work.
.moduletable img { display: block }

But as the gap is gone I guess you don't need that.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rw1
post Sep 20 2006, 12:47 AM
Post #5


Member
***

Group: Members
Posts: 41
Joined: 19-September 06
Member No.: 171



QUOTE(pandy @ Sep 20 2006, 03:44 PM) *

Have you fixed it already? I don't see gap anymore. blink.gif

Anyway, there is a whole table wrapped around the image and the table has a class so this should work.
.moduletable img { display: block }

But as the gap is gone I guess you don't need that.


hi pandy,

no i have not fixed it, i still see it in ff. i would never not report on fixing something! smile.gif

so i add this to my css file:

.moduletable img { display: block }

what do i need to add where the image is? (btw its actually a flash movie)

thankyou.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 20 2006, 01:23 AM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,986
Joined: 9-August 06
Member No.: 6



You don't have to change the HTML. But we are obviously talking about different stripes! The one I mean is in IE (and it's still there - I used the wrong browser when I said it wasn't). The thin, horizontal white line between the top image and the flash is much wider in IE than in FF. That's what I thought you meant.

But I see now that there's vertical stripe across the flash, on the left side, in FF. Is that what you mean? I'll have a look but I'm not so sure I can figure this one out.

Here's the line I mean in IE.
Attached Image

And the one I think you mean in FF. Is this the one?
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rw1
post Sep 20 2006, 01:34 AM
Post #7


Member
***

Group: Members
Posts: 41
Joined: 19-September 06
Member No.: 171



QUOTE(pandy @ Sep 20 2006, 04:23 PM) *

You don't have to change the HTML. But we are obviously talking about different stripes! The one I mean is in IE (and it's still there - I used the wrong browser when I said it wasn't). The thin, horizontal white line between the top image and the flash is much wider in IE than in FF. That's what I thought you meant.

But I see now that there's vertical stripe across the flash, on the left side, in FF. Is that what you mean? I'll have a look but I'm not so sure I can figure this one out.

Here's the line I mean in IE.


And the one I think you mean in FF. Is this the one?



thanks pandy, yes they are the lines i am talking about, i have removed the css references now and am just coming at the problem again with a clean slate. are you familiar with joomla?

basically there is an index.php which is the structure of the site (made of a table) and it calls 'modules' into various positions within the table. the modules contain flash movies. so i am guessing i need to apply a class to the table cell and then add that class to the css file. but i am not sure of the correct way to add these classes to the index.php and css file.

sorry to be one of these annoying time intensive problems!

This post has been edited by rw1: Sep 20 2006, 01:35 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 20 2006, 02:00 AM
Post #8


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,986
Joined: 9-August 06
Member No.: 6



You want that first fix for IE anyway. But I've changed my mind. Add an id to the image tag (the top blue one), say id="logo". The use this in your CSS.
#logo { display: block }
I didn't notice at first that class="module table" is used all over the place, so that could possibly *beep* up.

I found the cause of your line too. It wasn't flash related as I feared. It's caused by HTML errors. Several table tags are missing. Especially a start tag for TABLE, the error at line 96 here.
http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes
There's also a lot of peculiar widths for tables and TDs. 3200 pixels among others. You have to fix those things.

No, I haven't used Joomla, but I've seen its output before. Those guys sure like unnecessary tables. I don't envy you cleaning that up. mellow.gif

Just to prove it works and because I've just discovered how cool the attachment feature is. Look - no line! tongue.gif
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rw1
post Sep 20 2006, 05:42 AM
Post #9


Member
***

Group: Members
Posts: 41
Joined: 19-September 06
Member No.: 171



QUOTE(pandy @ Sep 20 2006, 05:00 PM) *

You want that first fix for IE anyway. But I've changed my mind. Add an id to the image tag (the top blue one), say id="logo". The use this in your CSS.
#logo { display: block }
I didn't notice at first that class="module table" is used all over the place, so that could possibly *beep* up.

I found the cause of your line too. It wasn't flash related as I feared. It's caused by HTML errors. Several table tags are missing. Especially a start tag for TABLE, the error at line 96 here.
http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes
There's also a lot of peculiar widths for tables and TDs. 3200 pixels among others. You have to fix those things.

No, I haven't used Joomla, but I've seen its output before. Those guys sure like unnecessary tables. I don't envy you cleaning that up. mellow.gif

Just to prove it works and because I've just discovered how cool the attachment feature is. Look - no line! tongue.gif


hi pandy, thanks again, i'm still working on it...

i added the id to the top image - <img src="/images/stories/blue_header.png" id="logo" />

i added exactly this at the top of my css file - #logo { display: block }

and it hasnt changed anything...

can u tell me what you did to make that line go away?

thank you.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rw1
post Sep 20 2006, 06:24 AM
Post #10


Member
***

Group: Members
Posts: 41
Joined: 19-September 06
Member No.: 171



i have cleaned up the code quite a lot, it is working in IE now (and i have applied ie/flash fix).

there is a still an unwanted little line in FF...if you could tell me how you got it away that would be great! thanks!

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 20 2006, 11:03 AM
Post #11


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,986
Joined: 9-August 06
Member No.: 6



QUOTE(rw1 @ Sep 20 2006, 12:42 PM) *

QUOTE(pandy @ Sep 20 2006, 05:00 PM) *

You want that first fix for IE anyway. But I've changed my mind. Add an id to the image tag (the top blue one), say id="logo". The use this in your CSS.
#logo { display: block }
I didn't notice at first that class="module table" is used all over the place, so that could possibly *beep* up.

I found the cause of your line too. It wasn't flash related as I feared. It's caused by HTML errors. Several table tags are missing. Especially a start tag for TABLE, the error at line 96 here.
http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes
There's also a lot of peculiar widths for tables and TDs. 3200 pixels among others. You have to fix those things.

No, I haven't used Joomla, but I've seen its output before. Those guys sure like unnecessary tables. I don't envy you cleaning that up. mellow.gif

Just to prove it works and because I've just discovered how cool the attachment feature is. Look - no line! tongue.gif


hi pandy, thanks again, i'm still working on it...

i added the id to the top image - <img src="/images/stories/blue_header.png" id="logo" />

i added exactly this at the top of my css file - #logo { display: block }

and it hasnt changed anything...

can u tell me what you did to make that line go away?

thank you.


Is the thick line still there in IE? This won't fix the thin vertical line in FF.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 20 2006, 11:43 AM
Post #12


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,986
Joined: 9-August 06
Member No.: 6



QUOTE(rw1 @ Sep 20 2006, 01:24 PM) *

i have cleaned up the code quite a lot, it is working in IE now (and i have applied ie/flash fix).

there is a still an unwanted little line in FF...if you could tell me how you got it away that would be great! thanks!


Not enough. There's still a missing </td> in the code for the nested tables that surround the flash (see the validator result for line number).

The page has changed though. This time fixing that wasn't enough. You have to remove those crazy widths too. I've deleted most of the widths and the page looks OK.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rw1
post Sep 20 2006, 07:11 PM
Post #13


Member
***

Group: Members
Posts: 41
Joined: 19-September 06
Member No.: 171



QUOTE(pandy @ Sep 21 2006, 02:43 AM) *

Not enough. There's still a missing </td> in the code for the nested tables that surround the flash (see the validator result for line number).

The page has changed though. This time fixing that wasn't enough. You have to remove those crazy widths too. I've deleted most of the widths and the page looks OK.


i cant figure out where to add it wacko.gif this is the entire code for my body area. can u tell me what is wrong with it? thank you.

CODE
<body class="page_bgr">
<div align="left"><table width="1002" border="0" cellpadding="0" cellspacing="0" class="frame">
    <!--DWLayoutTable-->
    <tr valign="top">
            <td width="1002" height="39" colspan="2" align="left" valign="top" class="header"><?php mosLoadModules ( 'header' ); ?></td>
          </tr>
    <tr>
      <td width="1002" align="center" valign="top" class="mainpage"><table width="1002" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td width="198" rowspan="2" valign="top"><?php mosLoadModules ( 'left' ); ?></td><td width="802" height="104" valign="top"><?php mosLoadModules ( 'image' ); ?></td></tr><tr><td width="802" valign="top"><?php mosMainBody(); ?></td></tr></table></tr>
  </table><?php mosLoadModules ( 'booty' ); ?></div>
</body>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 20 2006, 09:12 PM
Post #14


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,986
Joined: 9-August 06
Member No.: 6



Look at the validator result here. http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes
The next last error is this.

CODE
Line 83, character 49:
... /table></td></tr></table></tr>
                                 ^Error: end tag for td omitted; end tags are required in XML for non-empty elements; empty elements require an end tag or the start tag must end with />


It looks like this in your code.
CODE
        </div></td></tr></table></td></tr></table>#</tr>
  </table>        <table cellpadding="0" cellspacing="0" class="moduletable">


You have a lot of nested tables there. Table tags must come in a certain order and you lack a closing tag for TD where the validator points out. I put a hash sign there in the code above.

You must also remove those crazy widths. <td width="1002"...> and so on. Just nuke all widths with very large values. Then you're fine.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rw1
post Sep 20 2006, 09:13 PM
Post #15


Member
***

Group: Members
Posts: 41
Joined: 19-September 06
Member No.: 171



i changed to this but now there is padding around the table cells wacko.gif

CODE
<body>
<table width="1002" border="0">
  <tr>
    <td height="39" colspan="2" valign="top" class="header"><?php mosLoadModules ( 'header' ); ?></td>
  </tr>
  <tr>
    <td width="198" rowspan="2" valign="top"><?php mosLoadModules ( 'left' ); ?></td>
    <td width="802" height="104" valign="top"><?php mosLoadModules ( 'image' ); ?></td>
  </tr>
  <tr>
    <td width="802" valign="top"><?php mosMainBody(); ?></td>
  </tr>
  <tr>
    <td colspan="2" valign="top"><?php mosLoadModules ( 'booty' ); ?></td>
  </tr>
</table>

</body>


This post has been edited by rw1: Sep 20 2006, 09:16 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rw1
post Sep 20 2006, 09:26 PM
Post #16


Member
***

Group: Members
Posts: 41
Joined: 19-September 06
Member No.: 171



this is code now, i tried to make it cleaner and so there are no nested tables - the only problem now is that the lines have re-appeared:

(ps '1002' is the actual width of the template)

CODE
<table width="1002" border="0" cellspacing="0">
  <tr>
    <td height="39" colspan="2" valign="top" class="header"><?php mosLoadModules ( 'header' ); ?></td>
  </tr>
  <tr>
    <td width="198" rowspan="2" valign="top"><?php mosLoadModules ( 'left' ); ?></td>
    <td width="802" height="104" valign="top"><?php mosLoadModules ( 'image' ); ?></td>
  </tr>
  <tr>
    <td width="802" valign="top"><?php mosMainBody(); ?></td>
  </tr>
  <tr>
    <td colspan="2" valign="top"><?php mosLoadModules ( 'booty' ); ?></td>
  </tr>
</table>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 20 2006, 09:33 PM
Post #17


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,986
Joined: 9-August 06
Member No.: 6



QUOTE
(ps '1002' is the actual width of the template)

Remove it. rolleyes.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rw1
post Sep 20 2006, 09:40 PM
Post #18


Member
***

Group: Members
Posts: 41
Joined: 19-September 06
Member No.: 171



QUOTE(pandy @ Sep 21 2006, 12:33 PM) *

QUOTE
(ps '1002' is the actual width of the template)

Remove it. rolleyes.gif


i removed it and code now looks lihe this - the lines are still there wacko.gif

CODE
<table border="0" cellspacing="0">
  <tr>
    <td height="39" colspan="2" valign="top" class="header"><?php mosLoadModules ( 'header' ); ?></td>
  </tr>
  <tr>
    <td width="198" rowspan="2" valign="top"><?php mosLoadModules ( 'left' ); ?></td>
    <td width="802" height="104" valign="top"><?php mosLoadModules ( 'image' ); ?></td>
  </tr>
  <tr>
    <td width="802" valign="top"><?php mosMainBody(); ?></td>
  </tr>
  <tr>
    <td colspan="2" valign="top"><?php mosLoadModules ( 'booty' ); ?></td>
  </tr>
</table>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 20 2006, 09:50 PM
Post #19


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,986
Joined: 9-August 06
Member No.: 6



Oh man... now the line is there in IE too. ohmy.gif

Here. I only made those changes I said.
http://web.telia.com/~u18115332/sayblu.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rw1
post Sep 20 2006, 10:02 PM
Post #20


Member
***

Group: Members
Posts: 41
Joined: 19-September 06
Member No.: 171



QUOTE(pandy @ Sep 21 2006, 12:50 PM) *

Oh man... now the line is there in IE too. ohmy.gif

Here. I only made those changes I said.
http://web.telia.com/~u18115332/sayblu.html


can u pm me exact code for index.php laugh.gif - i have tried what you said but it wont work. sorry!! blush.gif and if you go to sleep, i think i will go mad...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th September 2018 - 09:25 AM