Cory
Cory

Reputation: 742

Internet Explorer Div Width Issue

I'm working on a template for a vBulletin forum and I'm having issues with one of the headers which is a bit tricky. Internet explorer is expanding the width of one of the div's by 100% it seems, or much larger than it should. FireFox does not give me this issue.

What I want: [ ( image [ title ] image ) <---expand 100%---> ]

What its doing: [ (image [ title <---expand 100%---> ] image ) ]

I'm sorry my explanation isn't more detailed. If you need additional information let me know!

Thank-you!

HTML:

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

CSS:

.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;
}

Upvotes: 0

Views: 161

Answers (1)

Hugo Mota
Hugo Mota

Reputation: 11567

There's some things you can do that help to override browsers differences.

  • add a doctype to your document. It will tell the browsers how they should interpret the page.

  • Use a css reset. It's some piece of CSS that try to remove browsers default values, since they can be different across browsers. Of course if you add a reset to a page that you already styled, it will probably broke it. Make sure every css you write comes after the reset.

If this doesn't help, post the code so we can debug it.

Upvotes: 1

Related Questions