I'm currently in the process of designing a vBulletin forum template, and I've encountered an issue with one of the headers that is proving to be quite tricky. It appears that Internet Explorer is expanding the width of one of the div elements by 100% or even more than necessary, while FireFox does not exhibit this problem.
Here's what I intend for the layout to look like: [ ( image [ title ] image ) <---expand 100%---> ]
However, the current situation is as follows: [ (image [ title <---expand 100%---> ] image ) ]
I apologize if my explanation lacks depth. Please feel free to request additional information if needed!
Thank you for your assistance!
Below is the HTML code:
<div class="forumhead-title">
<div class="forumhead-left"></div>
<div class="forumhead-main">
<div class="forumtitle"><a href="{vb:link forum, {vb:raw forum}}" style="line-height: 42px;">{vb:raw forum.title}</a></div>
</div>
<div class="forumhead-right"></div>
</div>
And here is the corresponding CSS code:
.forumhead-left {
float: left;
width: 25px;
height: 42px;
background: url(images/versusmatch/gradients/h1-main-left.png);
}
.forumhead-main {
float: left;
height: 42px;
background: url(images/versusmatch/gradients/h1-main.png) repeat-x;
}
.forumhead-main a {
color: #000000;
line-height: 42px;
}
.forumhead-right {
float: left;
width: 161px;
height: 42px;
background: url(images/versusmatch/gradients/h1-main-right.png);
padding-right: auto;
}