I'm building a header section for a vBulletin forum I run, unfortunately they're still on vB 3.x and since I have no control over updating that's what I have to work with.

 

So I designed a pretty simple header section, nothing particularly complicated. This is how it displays in IE9 as a plain HTML page and CSS:

 

 

 

I've pasted the code onto that image, the CSS is as follows:

 

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
background: #c6c6c6;
font: 12px Tahoma;
}
#head {
background: url(images/headbg.jpg) repeat-x;
height: 118px;
width: 100%;
}
#headcontent {
width: 980px;
margin: 0 auto;
padding: 0 10px;
height: 85px;
}
#login {
background: #535353;
width: 402px;
height: 20px;
float: right;
border: 1px solid #6f6d6d;
border-radius: 0 0 5px 5px;
padding: 9px;
}
#register {
background: #535353;
width: 82px;
height: 22px;
border: 1px solid #6f6d6d;
float: right;
border-radius: 0 0 5px 5px;
padding: 9px;
margin-left: 10px;
}
ul.nav {
 clear: both;
 color: #F5F5F5;
 height: 32px;
float: left;
}
ul.nav li {
 display: inline;
 line-height: 32px;
 list-style-type: none;
 margin: 0px;
padding-right: 55px;
}
ul.nav li a {
 color: #F5F5F5;
 text-decoration: none;
}
ul.nav li a:hover {
text-decoration: underline;
}

#search {
float: right;
width: 215px;
height: 30px;
line-height: 32px;
}

.clear {
clear:both;
}

 

So then I transfer that HTML and CSS into the vB templates. In Chrome and Firefox it displays basically the same except some issues with the search placement but that's because I haven't started styling the rest of the forum yet. However in IE9, with the same above code in the header template I get this:

 

 

 

The two areas I'm going to place login and register sections have moved to the bottom right of the DIV and the CSS3 rounded corners property is no longer working. It even has a strange quirk where if I don't specify a background colour or image for the #headcontent DIV then when hovering on that entire div area the cursor changes to the text one (cursor:text) rather than the arrow as it should be. If I set a colour that corrects it.

 

I've played around with it a lot the last two hours but I can't figure out why a) those sections are moving in IE9 inside vB and why the CSS3 properties are no longer working inside vB3. Obviously the rest after it is a mess which I've blurred but that's because none of it it styled yet.

 

Since the HTML output of vB is pretty large I've attached that as a file below.

 

This isn't my website/forum but I'm working offline in XAMPP and it has the same issue regarding the CSS3 so easier just to show you this:

 

http://www.gtplanet.net

 

Visit that website on IE9 and note that on the Wordpress news page, everything has CSS3 rounded corners. Now go to the forum, also powered by vB3. Rounded corners don't work. Try it on Firefox or Chrome, they show across the website and forum as expected.

 

So, what could be inside the guts of vBulletin 3 causing this? It's really got me baffled. As I say the output HTML of the vB index is attached.

vbhtmloutput.html

Well after remembering IE also has developer tools in it I've activated that and noticed the problem, the page/forum is running in IE9 Browser Mode but Document Mode is IE7 Standards. If I manually change it to IE9 standards everything displays as expected, rounded corners as well. So I need to change the document mode to IE9 somehow although that still means I need to fix the layout for IE7 users.