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?

    #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.

    Comment


      #3
      Screenshot or link?
      Helpful? Donate. Thanks!
      Buy me a coffeePayPal QR Code
      Fast VPS Host for vBulletin:
      A2 Hosting & IONOS

      Comment


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

        Click image for larger version

Name:	Capture.PNG
Views:	385
Size:	44.6 KB
ID:	16156

        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.
            Helpful? Donate. Thanks!
            Buy me a coffeePayPal QR Code
            Fast VPS Host for vBulletin:
            A2 Hosting & IONOS

            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>

              Comment


                #8
                You have an extra double quote after the second hyphen in the added class.
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


                  #9
                  I see, it is displaying correctly now.

                  Click image for larger version

Name:	Capture.PNG
Views:	391
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.

                  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.
                    Helpful? Donate. Thanks!
                    Buy me a coffeePayPal QR Code
                    Fast VPS Host for vBulletin:
                    A2 Hosting & IONOS

                    Comment

                    Users Viewing This Page

                    Collapse

                    There is 1 user viewing this forum topic.

                    • Guest Guest

                    Latest Posts

                    Collapse

                    Working...
                    X
                    Searching...Please wait.
                    An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                    Please push the back button and reload the previous window.'
                    An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                    Please push the back button and reload the previous window.'
                    An internal error has occurred and the module cannot be displayed.
                    There are no results that meet this criteria.
                    Search Result for "|||"