• Registered: 2005-03-03
  • Posts: 16

Topic: Tables with 1x1 pixels being blown apart... CSS?

Hi Everyone, I just installed PunBB on our site and when I wrap our design around the forums I have two issues...

Please see: http://forum.megahosters.com/4um/

All of my tables seem to have a large space in them... Please have a look at a sub page on our site to see how it should look: http://www.megahosters.com/customercare.php

I have looked through the PunBB CSS files and tried commenting things out to see if they were causing this but it seems that they are not. I returned the file to normal once i was done commenting out thing so it is not that causing it.

I am totally stumped now. Can someone please let me know why my tables are being exploded?

As you can see in the page source we are also refering to our own css file.

Any help ASAP would be great!

Thanks,

MM

  • Registered: 2005-03-03
  • Posts: 16

Re: Tables with 1x1 pixels being blown apart... CSS?

Actually after looking at this further I have included two screenshots. I looks like the pixel problem is not showing up in IE but the text on the forum is WAY TO SMALL and looks crappy. That is Image 1 on the screen shot, taken in the latest version of IE on the PC.

The second screen shot is taken using FIRE FOX on the PC... There you can see the table problem.

Please help!!

Thanks,

MM

http://www.megahosters.com/screenshot.jpg

  • CodeXP
  • Senior Member
  • Offline
  • From: /dev/null
  • Registered: 2004-07-07
  • Posts: 503

Re: Tables with 1x1 pixels being blown apart... CSS?

As for the text problem, open up your stylesheet and comment out this line: 

HTML .pun {FONT-SIZE: 68.75%}

CodeXP's Website

4 Reply by buzzkill (edited by buzzkill 2005-03-03 18:35)

  • From: Rochester, NY USA
  • Registered: 2005-01-05
  • Posts: 173

Re: Tables with 1x1 pixels being blown apart... CSS?

Have you adjusted the font sizing in the punbb style sheet?  On lines 22 to 27 in oxygen.css you should see these defaults:

/* IEWin Font Size only - to allow IEWin to zoom. Do not remove comments \*/
* HTML .pun {FONT-SIZE: 68.75%}
/* End IE Win Font Size */

/* Set font size for tables because IE requires it */
.pun TABLE, .pun INPUT, .pun SELECT, .pun OPTGROUP, .pun TEXTAREA, DIV.postmsg P.postedit {FONT-SIZE: 1em}

Did you change these settings?

This other thing, your page does not validate XHTML 1.0 Strict which will throw IE into quirks mode.  See the output here.

http://validator.w3.org/check?uri=http% … m%2F4um%2F

5 Reply by megaman (edited by megaman 2005-03-03 18:29)

  • Registered: 2005-03-03
  • Posts: 16

Re: Tables with 1x1 pixels being blown apart... CSS?

Buzzkill, I did not change those settings...

I am using the Lithium Style... Does this apply to it as well?

Thanks...

MM

  • Registered: 2005-03-03
  • Posts: 16

Re: Tables with 1x1 pixels being blown apart... CSS?

CodeXP... That worked great thanks!

MM

  • From: Rochester, NY USA
  • Registered: 2005-01-05
  • Posts: 173

Re: Tables with 1x1 pixels being blown apart... CSS?

Yes, the same lines are in the lithium style.  Try getting it to validate and see if the problem goes away.  I am sure Paul will chime in on this since he authored the markup.

  • Registered: 2005-03-03
  • Posts: 16

Re: Tables with 1x1 pixels being blown apart... CSS?

How do I get it to "validate" don't think I have ever had to do that. smile

Thanks,

MM

9 Reply by buzzkill (edited by buzzkill 2005-03-03 18:41)

  • From: Rochester, NY USA
  • Registered: 2005-01-05
  • Posts: 173

Re: Tables with 1x1 pixels being blown apart... CSS?

go here.  http://validator.w3.org/check?uri=http% … m%2F4um%2F
That is the output results for your page.  Don't be alarmed at the number of errors.  Most of the time once you fix one problem, others go away.

  • Registered: 2005-03-03
  • Posts: 16

Re: Tables with 1x1 pixels being blown apart... CSS?

Hrm... That makes no sense... It is saying things that are not true like my CSS tag IS closed. Etc Etc... Weird....

MM

11 Reply by buzzkill (edited by buzzkill 2005-03-03 18:46)

  • From: Rochester, NY USA
  • Registered: 2005-01-05
  • Posts: 173

Re: Tables with 1x1 pixels being blown apart... CSS?

are they closed with a /> or  just a >.

i.e.

this

<link rel="stylesheet" type="text/css" href="style/Lithium.css">

needs to be

<link rel="stylesheet" type="text/css" href="style/Lithium.css" />

  • Registered: 2005-03-03
  • Posts: 16

Re: Tables with 1x1 pixels being blown apart... CSS?

Just a ">" no back slash.

Does EVERY tag need to be closed with a slash?

MM

  • Registered: 2005-03-03
  • Posts: 16

Re: Tables with 1x1 pixels being blown apart... CSS?

Well I fixed a couple of them...

There must be a reson the tables are getting blown apart in certain browsers.

MM

14 Reply by buzzkill (edited by buzzkill 2005-03-03 18:51)

  • From: Rochester, NY USA
  • Registered: 2005-01-05
  • Posts: 173

Re: Tables with 1x1 pixels being blown apart... CSS?

Elements that don't have both an opening and a closing tag such as: <link rel="stylesheet" type="text/css" href="style/Oxygen.css" />  need to have the /> to properly close the tag.

like the <br> and <br />

<br> will not XHTML Strict 1.0 validate, but <br /> will.

  • From: Rochester, NY USA
  • Registered: 2005-01-05
  • Posts: 173

Re: Tables with 1x1 pixels being blown apart... CSS?

Well,  When IE goes into quirks mode.  It messes up the translation of the markup and wont display properly.

  • Registered: 2005-03-03
  • Posts: 16

Re: Tables with 1x1 pixels being blown apart... CSS?

Ok, well so what do I do here? Is there a fix or do I look for another forum software?

MM

17 Reply by buzzkill (edited by buzzkill 2005-03-04 02:06)

  • From: Rochester, NY USA
  • Registered: 2005-01-05
  • Posts: 173

Re: Tables with 1x1 pixels being blown apart... CSS?

megaman:  There isn't anything wrong with the forum software.  By itself, it validates 100% XHTML 1.0 strict.  I would first look at how you are using your style sheets.  From what I can tell you are referencing two different style sheets, and also some embedded style rules.  This is what is most likely causing the problem.  If you really need to have a style for your site separate from the forum style, then I suggest that you check to make sure that some of the style rules that you are setting in your style sheet are not overwriting the rules set in punbb, if they are, then pick one you want to keep, and comment the section out of the other.  You could always do something like Paul has done with the first few or so lines in Lithium.css, and import lithium.css into your sheet to keep things clean.

/****************************************************************/
/* 1. IMPORTED STYLESHEETS */
/****************************************************************/

/* Import the basic setup styles */
@import url(imports/base.css);
/* Import the colour scheme */
@import url(imports/Lithium_cs.css);

Just my thoughts.

  • Registered: 2005-03-03
  • Posts: 16

Re: Tables with 1x1 pixels being blown apart... CSS?

Well... I just commented out all of my styles and the link to the outside style sheet and it was still doing it.

I even reinserted the html part of it with NO javascript or anything dynamic at all.

It still is killing the tables.

I am getting frustrated now. This should not be this hard, I have wrapped hundreds of HTML pages around countless pieces of software over the past 6 years. Why all of a sudden is this messing up? I have never seen anything explode a table like that.

They are simple tables too... A table that just creates a 1 pixel by 100% wide line.

<table width="100%"  border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="1" bgcolor="#83878A"><img src="images/spacer.gif" width="1" height="1"></td>
</tr>
</table>

I just don't get what is causing this to come apart.

MM

19 Reply by CodeXP

  • CodeXP
  • Senior Member
  • Offline
  • From: /dev/null
  • Registered: 2004-07-07
  • Posts: 503

Re: Tables with 1x1 pixels being blown apart... CSS?

Setting the height of the TD tag like that is not valid XHTML Strict wink I don't know...perhaps that's what's causing the problem?

CodeXP's Website

  • Registered: 2005-03-03
  • Posts: 16

Re: Tables with 1x1 pixels being blown apart... CSS?

Nope... I tried with and without that. I have tried everything. I am totally stumped. Never seen anthing like this.

I'll give it till tomorrow then I have to move on to other software. I know phpbb wraps fine but I like the liteness of punbb better.

I will see what you guys suggest by tomorrow and take it from there.

MM

21 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Tables with 1x1 pixels being blown apart... CSS?

Just to prove it works
http://www.post21.co.uk/megatest

The problem is the doctype. Among other things the XHTML 1.0 Strict doctype does not tolerate dimensions without units of measurement e.g. you cannot have "1", you have to have "1px".

The answer it to change to the transitional doctype which is as follows

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

BTW: If you want less space around the forum then it is the margin on #punwrap which you need to alter.

megaman wrote:

.... I have tried everything. I am totally stumped. Never seen anthing like this.

I'm afraid you are going to be seeing this a lot more often. The trend is towards using modern valid markup and css and it is the GPL community which is leading the way.

  • Registered: 2005-03-03
  • Posts: 16

Re: Tables with 1x1 pixels being blown apart... CSS?

Thanks Paul, wow I learned my thing for the day already this morning. I appreciate your time to reply.

It worked perfect.

Can you remove the example you have on your server? Thanks.

It was fine in IE PC before but all browsers on the MAC were getting killed by that... I don't know if strict coding will ever take over as a standard though, 99.9% of coders are fairly lazy. I try my best to not be lazy and at least use simple CSS in all of my designs. There are still tones of sloppy codders out there who are still using font tags and other such useless things still.

Its fun to go look at peoples page sources, tells you a lot about the person who coded it. I try to keep it clean but I am by no means following strict rules yet. I have the XHTML book in front of me, I think I will start to referance it from now on.

Thank again for your help,

MM

  • Registered: 2005-03-03
  • Posts: 16

Re: Tables with 1x1 pixels being blown apart... CSS?

One final question...

Where is in stylesheet do I edit to make the left column on a view topic page smaller?

http://forum.megahosters.com/4um/viewtopic.php?id=10

Where my mane and avatar are is too wide for the space on the site... Just want to shove the right column over more.

Is it one of these?

    <div class="box">
        <div class="inbox">
            <div class="postleft">

MM

24 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Tables with 1x1 pixels being blown apart... CSS?

megaman wrote:

One final question...

Where is in stylesheet do I edit to make the left column on a view topic page smaller?

base.css Item 7.1. Look for the following two items, change the width on the first and the border-width on the second (they must always be the same as each other)

DIV.postleft, DIV.postfootleft {
    FLOAT:left;
    WIDTH: 18em;
    OVERFLOW: hidden
}
   
DIV.postright, DIV.postfootright {
    BORDER-LEFT-WIDTH: 18em;
    BORDER-LEFT-STYLE: solid
}