vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB3 Programming Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=15)
-   -   Who's REALLY good with HTML? (https://vborg.vbsupport.ru/showthread.php?t=99728)

Bubble #5 10-30-2005 10:46 PM
Who's REALLY good with HTML?
 
1 Attachment(s)
We're trying to make a table for our first 3.5.0 skin. When we view it in IE and firefox it looks OK (see screenshots below) but when we view it in Safari it's not tiling correctly :( The only thing that we can figure is that there must be something wrong with the HTML, or that something is affecting the HTML, but it's a default vB forum with no hacks installed so I don't see how anything could be affecting the HTML (even though that's how it's acting when you view it). Below is the HTML for the table. The table is broken into 3 sections, top, middle and bottom.

HTML Code:
<!-- top section -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tr>
<td width="10" height="32"><img src="$stylevar[imgdir_misc]/pic1.png" /></td>
<td width="10" height="32"><img src="$stylevar[imgdir_misc]/pic2.png" /></td>


<td width="100%" height="32" background="$stylevar[imgdir_misc]/pic3.gif" valign="middle" class="pic2"><center>vbphrase</center></td>


<td width="10" height="32" align="right"><img src="$stylevar[imgdir_misc]/pic4.png" /></td>
<td width="10" height="32" align="right"><img src="$stylevar[imgdir_misc]/pic5.png" /></td>
</tr>
<!-- / End top section -->



<!-- mid section -->
<tr>
<td background="$stylevar[imgdir_misc]/pic7.gif" valign="top"><img src="$stylevar[imgdir_misc]/pic7.gif" /></td>
<td colspan="3">
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
</table>
</td>
<td background="$stylevar[imgdir_misc]/pic9.gif" valign="top"><img src="$stylevar[imgdir_misc]/pic9.gif" /></td>
</tr>
</table>
<!-- / End mid section -->

<!-- bottom section -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tr>
        <td width="10" align="left" valign="top"><img src="$stylevar[imgdir_misc]/pic10.png" width="10" height="32" /></td>
  <td width="10" align="left" valign="top"><img src="$stylevar[imgdir_misc]/pic11.png" height="32" /></td>
        <td  width="100%" style="background-image:url($stylevar[imgdir_misc]/pic12.png)"><img src="$stylevar[imgdir_misc]/pic12.png" width="1" height="32" alt=" " border="0" /></td>
        <td width="10" align="right" valign="top"><img src="$stylevar[imgdir_misc]/pic13.png" height="32" /></td>
  <td width="10" align="right" valign="top"><img src="$stylevar[imgdir_misc]/pic14.png" height="32" /></td>
      </tr>
    </table>
<!-- End bottom section -->
The only part that is looking wrong on Safari is the middle of the top portion of the table. The rest of the table looks good in all browsers, even Safari. Here is the HTML for the section which looks bad:

HTML Code:
<td width="100%" height="32" background="$stylevar[imgdir_misc]/pic3.gif" valign="middle" class="pic2"><center>vbphrase</center></td>
Are there any really good HTML'ers that can look at the HTML above and see if anything is wrong with the way it's written? I know the table itself works because it works in another part of the forum (even with Safari). I looked at templates until 5:00 in the morning last night :ermm: and I'm pulling my hair out :( Hopefully a fresh set of eyes from someone really good with HTML can pick out what's wrong. I'd appreciate it. Thank you.

pyro.699 10-30-2005 11:12 PM
I know lots about HTML, but, i know nothing about your browser :S

Could it be in the settings?

akanevsky 10-30-2005 11:49 PM
Sorry, I don't have safari, so even though I know a lot about HTML/CSS, I cannot say anything about that browser.. :(

Bubble #5 10-31-2005 12:02 AM
Quote:
Originally Posted by pyro.699
Could it be in the settings?
Do you mean the settings in the browser configuration? I don't think it would be those simply because every other skin looks good when viewed with that browser. If it was the way Safari was configured then all skins would show the same error, right?

Quote:
Originally Posted by Dark Visor
I know a lot about HTML/CSS, I cannot say anything about that browser
Did everything in the HTML posted above look good to you?

Princeton 10-31-2005 12:49 AM
You should upgrade your code to compliant XHTML.

akanevsky 10-31-2005 12:53 AM
No... If one cell is 100% width, then how the hell are other cells 10px in width? o.O

Other than that, your code is structured too poorly to be readable. Sorry.

Protoman 10-31-2005 01:06 AM
use http://validator.w3.org to check your code. As long as it passes the xhtml test, it's safari's fault, and not your code.

Brad 10-31-2005 01:38 AM
Can you show us the CSS code for the class pic2?

Bubble #5 10-31-2005 02:33 AM
Quote:
Originally Posted by Brad
Can you show us the CSS code for the class pic2?
Here you go. I didn't write the CSS for this so I could have easily missed something :ermm: Thanks for looking at it :)

Code:
.pic2
{
        color: #222222;
        font: bold 10px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.pic2 a:link
{
        color: #222222;
        text-decoration: none;
}
.pic2 a:visited
{
        color: #222222;
        text-decoration: none;
}
.pic2 a:hover, .tcat a:active
{
        color: #222222;
        text-decoration: underline;
}

Guest190829 10-31-2005 02:56 AM
Could it be the
HTML Code:
valign="middle"
?

[high]* Guest190829 shrugs shoulders.[/high]

Zachery 10-31-2005 03:15 AM
background is not a valid xhtml tag, assuming you are working inside of vBulletin, it tells the browser its xhtml code.

use
style="background-image:$stylevar[imgdir_misc]/pic3.gif"
Instead of
background="$stylevar[imgdir_misc]/pic3.gif"

Bubble #5 10-31-2005 03:00 PM
Quote:
Originally Posted by Zachery
assuming you are working inside of vBulletin
Thank you for helping out Zachery :) Yes we are working from within the templates (forumhome, forum display, navbar, etc.).

Quote:
use
style="background-image:$stylevar[imgdir_misc]/pic3.gif"
Instead of
background="$stylevar[imgdir_misc]/pic3.gif"
When we switched it as shown above the image disappeared causing the entire center section to now be missing :( I've included our new code for the top section so you could see exactly what we changed. Image (pic3.gif) is in the correct folder and was appearing just before the change. Any idea on what would cause the image to disappear like that when the code is correct?


HTML Code:
<!-- top section -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tr>
<td width="10" height="32"><img src="$stylevar[imgdir_misc]/pic1.png" /></td>
<td width="10" height="32"><img src="$stylevar[imgdir_misc]/pic2.png" /></td>


<td width="100%" height="32" style="background-image:$stylevar[imgdir_misc]/pic3.gif" class="pic2"><center>vbphrase</center></td>


<td width="10" height="32" align="right"><img src="$stylevar[imgdir_misc]/pic4.png" /></td>
<td width="10" height="32" align="right"><img src="$stylevar[imgdir_misc]/pic5.png" /></td>
</tr>
<!-- / End top section -->

Zachery 10-31-2005 03:09 PM
Quote:
Originally Posted by Bubble #5
Thank you for helping out Zachery :) Yes we are working from within the templates (forumhome, forum display, navbar, etc.).


When we switched it as shown above the image disappeared causing the entire center section to now be missing :( I've included our new code for the top section so you could see exactly what we changed. Image (pic3.gif) is in the correct folder and was appearing just before the change. Any idea on what would cause the image to disappear like that when the code is correct?


HTML Code:
<!-- top section -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tr>
<td width="10" height="32"><img src="$stylevar[imgdir_misc]/pic1.png" /></td>
<td width="10" height="32"><img src="$stylevar[imgdir_misc]/pic2.png" /></td>


<td width="100%" height="32" style="background-image:$stylevar[imgdir_misc]/pic3.gif" class="pic2"><center>vbphrase</center></td>


<td width="10" height="32" align="right"><img src="$stylevar[imgdir_misc]/pic4.png" /></td>
<td width="10" height="32" align="right"><img src="$stylevar[imgdir_misc]/pic5.png" /></td>
</tr>
<!-- / End top section -->
oh silly me, thats what I get for not having my caffiene in me.

should be

background-image: url($stylevar[imgdir_misc]/pic3.gif);

Bubble #5 10-31-2005 03:42 PM
Quote:
Originally Posted by Zachery
oh silly me, thats what I get for not having my caffiene in me.
LOL :)

Quote:
should be
background-image: url($stylevar[imgdir_misc]/pic3.gif);
I'm hoping you don't mean it should look like this:

HTML Code:
<td width="100%" height="32" background-image: url($stylevar[imgdir_misc]/pic3.gif); class="pic2"><div align="center">$vbphrase[whats_going_on]</div></td>
...because that's still not working :ermm: :)

Zachery 10-31-2005 04:19 PM
Quote:
Originally Posted by Bubble #5
LOL :)


I'm hoping you don't mean it should look like this:

HTML Code:
<td width="100%" height="32" background-image: url($stylevar[imgdir_misc]/pic3.gif); class="pic2"><div align="center">$vbphrase[whats_going_on]</div></td>
...because that's still not working :ermm: :)
No

<td width="100%" height="32" style="background-image: url($stylevar[imgdir_misc]/pic3.gif);" class="pic2"><div align="center">$vbphrase[whats_going_on]</div></td>

Bubble #5 10-31-2005 06:11 PM
OK thanks Zachery :) I put the new code in and now the image is appearing correctly, BUT the center section of the top still has gaps on each side of it like in the first post :( I also used the new code that you provided for the guest table and it is now working correctly in all browsers, but the 'What's going on' table and the navbar table (where you enter in username/password) still has those gaps. I'm just thinking out loud here but is it possible that something else could be effecting those two tables to act that way? If so then what should I be looking for? (if you need me to post anything from the templates just let me know) :)

akanevsky 10-31-2005 07:48 PM
Quote:
use http://validator.w3.org to check your code. As long as it passes the xhtml test, it's safari's fault, and not your code.
That's not entirely true. Different browsers have slightly different box models, which could be causing the problem - even when the code is valid according to the validator. In which case, the problem could be eliminated by adding some CSS hacks...

Bubble #5 10-31-2005 08:04 PM
Quote:
Originally Posted by Dark Visor
the problem could be eliminated by adding some CSS hacks...
Anthony do you have any examples that I could look at, or possibly point me in the right direction? I'm really pulling my hair out trying to fix this problem :(

calorie 10-31-2005 08:33 PM
Try posting a screenie after you replace your top section with the following:
Code:
<!-- top section -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tr>
<td width="10" height="32">A <img src="$stylevar[imgdir_misc]/pic1.png" /></td>
<td width="10" height="32">B <img src="$stylevar[imgdir_misc]/pic2.png" /></td>

<td width="100%" height="32" style="background-image: url($stylevar[imgdir_misc]/pic3.gif);" class="pic2"><div align="center">C $vbphrase[whats_going_on]</div></td>

<td width="10" height="32" align="right">D <img src="$stylevar[imgdir_misc]/pic4.png" /></td>
<td width="10" height="32" align="right">E <img src="$stylevar[imgdir_misc]/pic5.png" /></td>
</tr>
<!-- / End top section -->

Bubble #5 10-31-2005 09:54 PM
1 Attachment(s)
Quote:
Originally Posted by calorie
Try posting a screenie after you replace your top section with the following
It's almost an exact opposite of the way it was before. Now the center is the correct size but the ends don't appear.

akanevsky 10-31-2005 11:30 PM
Quote:
Anthony do you have any examples that I could look at, or possibly point me in the right direction? I'm really pulling my hair out trying to fix this problem
Hmm... I had an e-book about CSS Hacks lying around somewhere... If i can find it, I'll send it to you :)

EDIT: See PM.


All times are GMT. The time now is 05:02 AM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.02305 seconds
  • Memory Usage 1,823KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (2)bbcode_code_printable
  • (7)bbcode_html_printable
  • (13)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (21)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete