Announcement

Collapse
No announcement yet.

vBulletin tripping up html

Collapse
X
Collapse
First Prev Next Last
  • Filter
  • Time
  • Show
Clear All
new posts

    vBulletin tripping up html

    I have a table on my site that is not displaying as the html states it should.

    The columns should be v aligned top and it shows correctly in my editor. Once I place in vbulletin the columns are displaying as such, but more as a horizontal align center.

    HTML Code:
    <div class="restore"><div style="overflow-x:auto;">
      <table>
    
        <tr style="background-color: hsl(206, 54%, 95%)">
          <td width="213" valign="top"><p align="center"><strong><u>TAC-1</u></strong></p></td>
          <td width="213" valign="top"><p align="center"><strong><u>TAC-2</u></strong></p></td>
          <td width="213" valign="top"><p align="center"><strong><u>TAC-3</u></strong></p></td>
          </tr>
        <tr>
          <td width="213" valign="top"><p><strong>ALTONA<br />
            CHAMPLAIN FD<br />
            CHAMPLAIN EMS<br />
            CHURUBUSCO<br />
            CLINTON EMS<br />
            CLINTON PRISON<br />
            DANNEMORA<br />
            ELLENBURGH DEPOT<br />
            ELLENBURGH CENTER <br />
            LYON MOUNTAIN<br />
            MOOERS<br />
            ROUSES POINT</strong></p></td>
          <td width="213" valign="top"><p><strong>BEEKMANTOWN <br />
            CHAZY<br />
            CUMBERLAND HEAD<br />
            CVPH <br />
            DIST #3<br />
            PLATTSBURGH CITY <br />
            WEST CHAZY </strong></p></td>
          <td width="213" valign="top"><p><strong>AUSABLE FORKS FD<br />
            AUSABLE FORKS EMS CADYVILLE<br />
            KEESEVILLE<br />
            MORRISONVILLE FD<br />
            MORRISONVILLE EMS<br />
            SARANAC<br />
            SOUTH PLATTSBURGH<br />
            PERU</strong></p></td>
          </tr>
    </table>
    </div></div>
    Thoughts?
    If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

    #2
    I should ad that this is in the QA Help module and not in a static html module. Not that that would make a difference.
    If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

    Comment


      #3
      Screenshot or link?

      Comment


        #4
        Its my intranet site, Here is the screen shot.

        Click image for larger version

Name:	Capture.PNG
Views:	1
Size:	44.6 KB
ID:	16156
        If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

        Comment


          #5
          Set your alignment in CSS with a custom class on your table. You're probably running afoul of the CSS resets in vBulletin. CSS will have higher priority over the alignment in HTML attributes.

          Comment


            #6
            I checked and the issue occurs because vB5 resets the cell vertical alignment to middle by default and it is overriding your style. Replace all occurrences of valign="top" with class="h-align-top" to fix the issue. vB5 CSS classes that start with "h-" are some of the helper classes that you can use anywhere on your forum.
            Last edited by glennrocksvb; 01-23-2019, 09:04 PM.

            Comment


              #7
              I made the recommended edits and still same alignment exists.

              HTML Code:
              <div class="restore"><div style="overflow-x:auto;">
                <table>
              
                  <tr style="background-color: hsl(206, 54%, 95%)">
                    <td width="213" class="h-align-"top"><p align="center"><strong><u>TAC-1</u></strong></p></td>
                    <td width="213" class="h-align-"top"><p align="center"><strong><u>TAC-2</u></strong></p></td>
                    <td width="213" class="h-align-"top"><p align="center"><strong><u>TAC-3</u></strong></p></td>
                    </tr>
                  <tr>
                    <td width="213" class="h-align-"top"><p><strong>ALTONA<br />
                      CHAMPLAIN FD<br />
                      CHAMPLAIN EMS<br />
                      CHURUBUSCO<br />
                      CLINTON EMS<br />
                      CLINTON PRISON<br />
                      DANNEMORA<br />
                      ELLENBURGH DEPOT<br />
                      ELLENBURGH CENTER <br />
                      LYON MOUNTAIN<br />
                      MOOERS<br />
                      ROUSES POINT</strong></p></td>
                    <td width="213" class="h-align-"top"><p><strong>BEEKMANTOWN <br />
                      CHAZY<br />
                      CUMBERLAND HEAD<br />
                      CVPH <br />
                      DIST #3<br />
                      PLATTSBURGH CITY <br />
                      WEST CHAZY </strong></p></td>
                    <td width="213" class="h-align-"top"><p><strong>AUSABLE FORKS FD<br />
                      AUSABLE FORKS EMS CADYVILLE<br />
                      KEESEVILLE<br />
                      MORRISONVILLE FD<br />
                      MORRISONVILLE EMS<br />
                      SARANAC<br />
                      SOUTH PLATTSBURGH<br />
                      PERU</strong></p></td>
                    </tr>
              </table>
              </div></div>
              If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

              Comment


                #8
                You have an extra double quote after the second hyphen in the added class.

                Comment


                  #9
                  I see, it is displaying correctly now.

                  Click image for larger version

Name:	Capture.PNG
Views:	1
Size:	18.9 KB
ID:	16171

                  I never would have figured this out (using class="h-align-top")without your help.

                  Admittedly I thought it was a typo and was missing the " as the valign="top" has the double quote.

                  Coffee break on me, thank you.
                  If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

                  Comment


                    #10
                    Thanks! Glad to help.

                    There are a number of undocumented CSS helper classes that can be used. I probably need to start a tutorial on this.

                    Comment

                    Working...
                    X