vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB3 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=168)
-   -   CSS Issue (https://vborg.vbsupport.ru/showthread.php?t=158082)

silurius 09-17-2007 09:26 PM
CSS Issue
 
I am trying to customize my buttons using CSS instead of images. I have the basics down pretty well, but am really struggling with one issue in particular as shown in this screenshot.

https://vborg.vbsupport.ru/external/2007/09/16.jpg

The right-hand side is not mirroring the left and is stretched out to the max.

I've been combing through the CSS and the template code and cannot seem to fix the problem. Can anyone lend assistance? I know I must be missing something very obvious.

For refererence, the CSS for this template code:

Code:
*/ Customized Buttons (Post, etc.) */

.custom_buttons {
  display:block;
  width:130px;
}

.custom_buttons_content {
  background:#9D6B84;
  width:130px;
}

.custom_buttons * {
  display:block;
  height:1px;
  overflow:hidden;
  background:#AD7691;
}

.custom_buttons1 {
  border-right:1px solid #BB7798;
  border-left:1px solid #BB7798;
  padding-right:1px;
  padding-left:1px;
  margin-right:3px;
  margin-left:3px;
  background:#fde2b4;
}

.custom_buttons2 {
  border-right:1px solid #BA97A9;
  border-left:1px solid #BA97A9;
  background:#D8C3CE;
  margin:0 1px;
  padding:0 1px;
}

.custom_buttons3 {
  border-right:1px solid #D8C3CE;
  border-left:1px solid #D8C3CE;
  margin:0 1px;
}

.custom_buttons4 {
  border-right:1px solid #BB7798;
  border-left:1px solid #BB7798;
}

.custom_buttons5 {
  border-right:1px solid #BA97A9;
  border-left:1px solid #BA97A9;
}
And the template code:

Code:
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom:3px">
<tr valign="bottom">
   
<!-- START: Custom Post Reply Button -->
        <td class="smallfont2">
        <div>

<b class="custom_buttons">
<b class="custom_buttons1"><b></b></b>
<b class="custom_buttons2"><b></b></b>
<b class="custom_buttons3"></b>
<b class="custom_buttons4"></b>
<b class="custom_buttons5"></b>
</b> <div align="center" class="custom_buttons_content">
        <a href="newreply.php?do=newreply&amp;noquote=1&amp;p=14" rel="nofollow"><strong>Post Reply</strong>
        </a>
        </div>
<b class="custom_buttons">
<b class="custom_buttons5"></b>

<b class="custom_buttons4"></b>
<b class="custom_buttons3"></b>
<b class="custom_buttons2"><b></b></b>
<b class="custom_buttons1"><b></b></b>
</b>
        </div>
<!-- END: Custom Post Reply Button -->
        </td>
   
   
</tr>
</table>
Note that my technique may be hampered by the fact that I am still learning CSS.

Deepdog009 09-17-2007 10:22 PM
1 Attachment(s)
Silurius I had a bit of tiempo so I gave it a go and found that its working ok...

It might be a conflict with other CSS file or something else... Im :confused: on why its doing that,,, it has 2 B an other CSS file causing that...

Non vBulletin Html code below


HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Css Buttons</title>

<style type="text/css">
.custom_buttons {
  display:block;
  width:130px;
}

.custom_buttons_content {
  background:#9D6B84;
  width:130px;
}

.custom_buttons * {
  display:block;
  height:1px;
  overflow:hidden;
  background:#AD7691;
}

.custom_buttons1 {
  border-right:1px solid #BB7798;
  border-left:1px solid #BB7798;
  padding-right:1px;
  padding-left:1px;
  margin-right:3px;
  margin-left:3px;
  background:#fde2b4;
}

.custom_buttons2 {
  border-right:1px solid #BA97A9;
  border-left:1px solid #BA97A9;
  background:#D8C3CE;
  margin:0 1px;
  padding:0 1px;
}

.custom_buttons3 {
  border-right:1px solid #D8C3CE;
  border-left:1px solid #D8C3CE;
  margin:0 1px;
}

.custom_buttons4 {
  border-right:1px solid #BB7798;
  border-left:1px solid #BB7798;
}

.custom_buttons5 {
  border-right:1px solid #BA97A9;
  border-left:1px solid #BA97A9;
}


</style>

</head>

<body>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom:3px">
<tr valign="bottom">
   
<!-- START: Custom Post Reply Button -->
        <td class="smallfont2">
        <div>

<b class="custom_buttons">
<b class="custom_buttons1"><b></b></b>
<b class="custom_buttons2"><b></b></b>
<b class="custom_buttons3"></b>
<b class="custom_buttons4"></b>
<b class="custom_buttons5"></b></b> <div align="center" class="custom_buttons_content">
        <a href="newreply.php?do=newreply&amp;noquote=1&amp;p=14" rel="nofollow"><strong>Post Reply</strong>        </a>
        </div>
<b class="custom_buttons">
<b class="custom_buttons5"></b>

<b class="custom_buttons4"></b>
<b class="custom_buttons3"></b>
<b class="custom_buttons2"><b></b></b>
<b class="custom_buttons1"><b></b></b></b>        </div>
<!-- END: Custom Post Reply Button -->        </td>
</tr>
</table>
<p>&nbsp;</p>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom:3px">
<tr valign="bottom">
   
<!-- START: Custom Post Reply Button -->
        <td class="smallfont2">
        <div>

<b class="custom_buttons">
<b class="custom_buttons1"><b></b></b>
<b class="custom_buttons2"><b></b></b>
<b class="custom_buttons3"></b>
<b class="custom_buttons4"></b>
<b class="custom_buttons5"></b></b> <div align="center" class="custom_buttons_content">
        <a href="newreply.php?do=newreply&amp;noquote=1&amp;p=14" rel="nofollow"><strong>Nice Button</strong>        </a>
        </div>
<b class="custom_buttons">
<b class="custom_buttons5"></b>

<b class="custom_buttons4"></b>
<b class="custom_buttons3"></b>
<b class="custom_buttons2"><b></b></b>
<b class="custom_buttons1"><b></b></b></b>        </div>
<!-- END: Custom Post Reply Button -->        </td>
</tr>
</table>
<p>&nbsp;</p>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom:3px">
<tr valign="bottom">
   
<!-- START: Custom Post Reply Button -->
        <td class="smallfont2">
        <div>

<b class="custom_buttons">
<b class="custom_buttons1"><b></b></b>
<b class="custom_buttons2"><b></b></b>
<b class="custom_buttons3"></b>
<b class="custom_buttons4"></b>
<b class="custom_buttons5"></b></b> <div align="center" class="custom_buttons_content">
        <a href="newreply.php?do=newreply&amp;noquote=1&amp;p=14" rel="nofollow"><strong>CSS Rocks</strong>        </a>
        </div>
<b class="custom_buttons">
<b class="custom_buttons5"></b>

<b class="custom_buttons4"></b>
<b class="custom_buttons3"></b>
<b class="custom_buttons2"><b></b></b>
<b class="custom_buttons1"><b></b></b></b>        </div>
<!-- END: Custom Post Reply Button -->        </td>
</tr>
</table>
<p>&nbsp;</p>
<p><strong>Button is showing ok here,,, It might be an issue with vbulletin css code taking over and rejecting your css button code... </strong></p>
</body>
</html>

silurius 09-18-2007 06:32 PM
Yes, it must be that. I'll keep playing around and I'm sure I'll figure it out eventually. For now I'm switching to an image instead. Thanks for taking a look!


All times are GMT. The time now is 04:44 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.00981 seconds
  • Memory Usage 1,768KB
  • 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
  • (1)bbcode_html_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (3)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