Hi guys,

I am working on a new header for my vBulletin forums, and I am baffled as to why this code;


<tr>
<td bgcolor="#FFFFFF">
<img src="imageoneurl.jpg" border="0">
<!-- breadcrumb, login, pm info -->
<table style="background-image:url(imagetwourl.jpg); background-color:#8bcaf3; background-position:right; background-repeat:no-repeat;">
<tr>

Creates a perfect header on firefox (here http://img82.imageshack.us/img82/9106/firefoxye1.jpg ), but on IE, theres a line - http://img529.imageshack.us/img529/2746/iexc6.jpg

Any ideas greatly appreciated

Can we see your coding?

It looks to be a css problem with your navigation really xD

An update. Spent an eternity working on a new skin but I am having a nightmare with the header.

The above code in the first post is what I am currently using, and it works a treat on my computer ;

Firefox 3.0 windowed @ 1280x1024:



However, when at different resolutions this happens;

Firefox 3.0 full-screen in Vista @ 1280x1024:



Firefox 3.0 windowed @ 1280x1024





Bit desperate now, spent hours trying to find a solution. Any opinions and suggestions would be great

Originally Posted by PeachyJuice

Can we see your coding?

It looks to be a css problem with your navigation really xD

I havent done any CSS coding?

The above code is just used in the header template in vBulletin.

vBulletin uses css to display the menu like that, so even though you're not doing anything, vBulletin is, which will cause problems if you don't look into it xD

And code would still help because there could be many reasons for that shift. Or a link.

You also put the same resolution down for all 3 pictures xD

Thanks for trying to help but I am completely lost

I dont suppose you know where the CSS in question is located with vBulletin?

I don't but if you give a link to your site and/or code we'll actually be able to help xD

www.grandoldteam.com

The skin isn't complete so is yet the default style so could you please login with the following to view the skin?

Username: test
Password: test

Thanks

Okay now things make a bit more sense xD

So there are two main problems. Firstly, you have the background of that navigation area set to right, when the top image is centered. You want to either center them both or left justify them both. I suggest the latter so that neither move for larger screen sizes.

And that moving happens because you fixed your bg to the right. I had to play with my browser size to make sure that was the main problem. Fixing it to the left will make it stop moving when someone has a larger screen. Just make sure you change the bgcolor of the nav div to be something that matches the right side of the image.

Thanks very much for the help.

<tr>
<td bgcolor="#FFFFFF">
<img src="http://www.grandoldteam.com/forum/images/feelingblues/misc/header_line.jpg" align="left" border="0">
<!-- breadcrumb, login, pm info -->
<table style="background-image:url(images/feelingblues/misc/header_line2.jpg); background-color:#ffffff; background-position:left; background-repeat:no-repeat;"></center>
<tr>

So would that coding look correct from what you have just said/

Its improved the situation in firefox , I just had to edit the image again slightly and it'll be fine.

But its majorly messed up in IE :S

You can't align images, firstly, but the td should automatically align things to the left.

When in doubt, validate your code. And as I don't have IE, what are the other problems?

Ah right yeah, sorry my mistake. I just removed align="left" and it looks fine in IE too, apart from the problem mentioned in my first post, the small gap http://img529.imageshack.us/img529/2746/iexc6.jpg

So currently its;

<tr>
<td bgcolor="#FFFFFF">
<img src="http://www.grandoldteam.com/forum/images/feelingblues/misc/header_line.jpg" border="0">
<!-- breadcrumb, login, pm info -->
<table style="background-image:url(images/feelingblues/misc/header_line2.jpg); background-color:#ffffff; background-position:left; background-repeat:no-repeat;">
<tr>