CSS Issue [Archive] - vb.org Archive

View Full Version : CSS Issue

silurius

09-17-2007, 09:26 PM

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:

*/ 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:

<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom:3px">
<tr valign="bottom">


<td class="smallfont2">
<div>







 <div align="center" class="custom_buttons_content">
<a href="newreply.php?do=newreply&noquote=1&p=14" rel="nofollow">Post Reply
</a>
</div>








</div>

</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

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

<!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">


<td class="smallfont2">
<div>






 <div align="center" class="custom_buttons_content">
<a href="newreply.php?do=newreply&noquote=1&p=14" rel="nofollow">Post Reply </a>
</div>






 </div>
 </td>
</tr>
</table>
 
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom:3px">
<tr valign="bottom">


<td class="smallfont2">
<div>






 <div align="center" class="custom_buttons_content">
<a href="newreply.php?do=newreply&noquote=1&p=14" rel="nofollow">Nice Button </a>
</div>






 </div>
 </td>
</tr>
</table>
 
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom:3px">
<tr valign="bottom">


<td class="smallfont2">
<div>






 <div align="center" class="custom_buttons_content">
<a href="newreply.php?do=newreply&noquote=1&p=14" rel="nofollow">CSS Rocks </a>
</div>






 </div>
 </td>
</tr>
</table>
 
Button is showing ok here,,, It might be an issue with vbulletin css code taking over and rejecting your css button code... 
</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!