Need some CSS help.

[ChrisVCB]

Hi guys and girls.
I've been putting together a site for a friend, basing it off the rather excellent picaflor-azul Ashley_Pink template. It's all fine and dandy, but the site is doing something rather annoying that I know is related to the CSS - however, I don't have the knowledge or expertise to fix it myself.

The problem is rather hard to describe but here goes; when you load the page, the header is a certain height. When you refresh the page, or click on a link in the header, the header changes height.

I've attached a screenshot of the problem, but the easiest way is to see for yourselves:
http://www.the-bike-shed.com/

You should notice that, as you browse the site, the 'wheels' of the logo, as contained in the header_bk.jpg image, are intially covered by the Navbar, but if you refresh, or click a link in the header area, the positioning changes to it's intended positioning. This seems to be because the area between the logo and the top of the header area changes.

Like I said, beyond changing colours and values in the existing CSS, i've very little knowledge in this area, and have no idea how to fix this. Any help would be appreciated.

[stevesh]

Your template designer has included all of the header, including navCatTabs, inside the #logoWrapper. In fact, the whole page is inside #headerWrapper, which has to be an error and may cause other problems.

Try adding #logoWrapper (if it isn't already there) to the stylesheet and giving it a height of, say, 100px and increase it until it doesn't do that.

The problem only occurs in IE7 and probably IE6. IE8 and FF are fine.

[Website Rob]

jscript_easySlider.js
- this file is being loaded automatically as can be seen when viewing page source:

<script type="text/javascript" src="includes/templates/ashley_pink/jscript/jscript_easySlider.js"></script>


You do not need to list it again:

<div id="indexDefaultMainContent" class="content"> <script type="text/javascript" src="includes/templates/ashley_pink/jscript/jscript_easySlider.js"></script>


Your jQuery loader should go in

includes/templates/ashley_pink/common/tpl_main_page.php

at page bottom just before the closing </body> tag.

<script type="text/javascript">
$(document).ready(function(){

$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true
});

});
</script>


With that said, you should Validate your code and fix a few errors.

http://validator.w3.org/ - copy & paste your page source and Validate by Direct Input.

[ChrisVCB]

Thanks for the help so far. I think i've fixed the #headerwrapper error, and done the suggestion with #logowrapper - but the problem is still there

I'm afraid I don't really understand what it is you're trying to tell me, Rob, other than it's related to the slider.

By the way, i'm running the latest version of FF.

[stevesh]

You have a stylesheet called ie7.css somewhere. In that there's a rule for #mainWrapper that has a top: -50px; statement. Try removing that.

[ChrisVCB]

Unfortunately, no dice. I appreciate the help though.

[ChrisVCB]

OK, I just enabled the language and currency headers that i'd previously disabled(as a single-country only store, they aren't neccessary), and the logo position has stopped shifting about like it was. So, perhaps the problem is something to do with these?

As soon as they're out of the equation again, the logo starts shifting about.

[stevesh]

It's fixed here in IE7.