I'm using the SlidesJS product example found here http://slidesjs.com/examples/product/
I want to have more than 1 of these units on the page, but when just copying the markup for it and pasting below doesn't work right. The first one will show up fine, but the second one only shows the 2 pagination elements and are unclickable. My main question is why would my approach of just copying the slider again not work, and is my general approach totally wrong? Is there some quirk with SlidesJS or Jquery in general that requires me to create separate css divs or something like that?
HTML:
<div id="containerSlides">
<div id="products_example">
<div id="products">
<div class="slides_container">
<img src="img/lamp1.png" width="360" alt="1144953 3 2x">
</div>
<ul class="pagination">
<li><img src="img/lamp1.png" width="55" alt="1144953 3 2x"></li>
<li><img src="img/lamp2.png" width="55" alt="1144953 1 2x"></li>
</ul>
</div>
</div>
</div>
<div id="containerSlides">
<div id="products_example">
<div id="products">
<div class="slides_container">
<img src="img/lamp3.png" width="360" alt="1144953 3 2x">
</div>
<ul class="pagination">
<li><img src="img/lamp3.png" width="55" alt="1144953 3 2x"></li>
<li><img src="img/lamp4.png" width="55" alt="1144953 1 2x"></li>
</ul>
</div>
</div>
</div>
CSS:
#containerSlides {
width:580px;
padding:10px;
margin:0 auto;
position:relative;
z-index:0;
float:left;
}
#products_example {
width:600px;
height:282px;
position:relative;
}
/*
Slideshow
*/
#products {
margin-left:26px;
}
/*
Slides container
Important:
Set the width of your slides container
Set to display none, prevents content flash
*/
#products .slides_container {
width:360px;
/*overflow:hidden;*/
float:left;
position:relative;
border:1px solid #dfdfdf;
display:none;
}
/*
Each slide
Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display block
*/
.slides_container a {
width:360px;
height:268px;
display:block;
}
/*
Next/prev buttons
*/
#products .next,#products .prev {
position:absolute;
top:127px;
left:0;
width:21px;
height:0;
padding-top:21px;
overflow:hidden;
display:block;
z-index:101;
}
#products .prev {
background:url(../img/arrow-prev.png);
}
#products .next {
left:398px;
background:url(../img/arrow-next.png);
}
/*
Pagination
*/
#products .pagination {
width:55px;
padding:5px 5px;
float:left;
margin-left:30px;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
#products .pagination li {
float:left;
margin:2px 4px;
list-style:none;
}
#products .pagination li a {
display:block;
width:55px;
height:41px;
margin:1px;
float:left;
background:#f9f9f9;
}
#products .pagination li.current a {
border:1px solid #7f7f7f;
margin:0;
}
Without seeing the javascript its impossible to say exactly where the issue is, however there are some immediate issues with the markup.
You have multiple elements on the page with the same id's (containerSlides, products_example, products).
Giving the second container unique id's will help solve the problem. You will then probably (again, cant say for sure without seeing the javascript) need to add another 'initialization' call to set up slidesjs on the second container as well as adding the id to your css so that the second container gets the same styling.
Ex:
Markup
<code>
<div id="secondContainerSlides">
…
</div>
</code>
Css
<code>
#containerSlides,
#secondContainerSlides{
…
}
</code>
Related
I want image slider to work in such a way that on hover of tab or click it should change the coreesponsing image like you can always see on flipkarts home page. Now the script I have made is working like normal slider which changes the image in 5 seconds. Can anybody help me to achieve what I need.
HTML
<!--slide-part-starts--><div class="slide-part">
<!--slider-starts--><div class="fadein">
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerock-13600mAh-powerbank.html'" src="BG Slideshow/1.jpg"><!--powerock-->
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerpunch-10500mAh-powerbank.html'" src="BG Slideshow/2.jpg"><!--powerpunch-->
</div><!--slide-ends-->
</div><!--slide-part-ends-->
<div class="tabbed">
<ul class="tab-slide">
<li>POWEROCK 13600mAh Power Banks</li>
<li style="float:right">POWERPUNCH 10500mAh Power Banks</li>
</ul>
</div>
css
.slide-part{
width:100%;
max-width:1600px;
margin:0 auto;
min-height:100px;
height:100%
}
.fadein {
position:relative;
width:100%;
max-width:1600px;
margin:0 auto;
min-height:600px;
height:100%
}
.fadein img {
position:absolute;
left:0;
top:0;
height:auto;
max-width:100%;
width: auto\9;
}
.tabbed{
width:100%;
max-width:1600px;
margin:0 auto
}
ul.tab-slide{
margin:0;
padding:0
}
ul.tab-slide li{
list-style:none;
width:50%;
display:block;
float:left;
display:list-item;
text-align:center;
background:#00a3d3
}
ul.tab-slide li a{
position:relative;
color:#000;
text-decoration:none;
width:100%;
display:block;
color:#fff;
padding:15px 0 15px 0;
}
ul.tab-slide li:hover{background:#000;}
JS
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 5000);
});
});//]]>
</script>
You can do this easy with some extra jQuery and adding some id's to your html.
First you have to add an id to the image within the HTML code:
<img id="img1" style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerock-13600mAh-powerbank.html'" src="linktoimage"><!--powerock-->
<img id="img2" style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerpunch-10500mAh-powerbank.html'" src="linktoimage">
after that you add data-id to the hyperlinks:
<li><a data-id="img1" href="#">POWEROCK 13600mAh Power Banks</a></li>
<li style="float:right"><a data-id="img2" href="#">POWERPUNCH 10500mAh Power Banks</a></li>
When you have done that you can add the following jQuery:
$('.tabbed a').on({
'mouseenter': function() {
$('.fadein img').hide();
$('#' + $(this).data('id')).fadeIn();
}
This should do the trick. JSFIDDLE over here: https://jsfiddle.net/enhtymgk/1/
Could someone help me with creating a simple concept for content sliding?
What I want can be seen in this website's (https://www.palatine.fr) bottom part - 4 panels, which slide out on hover, and coming back to their original state after unhovering. I already tried a few fiddles with css blocks, but it gets up very complex, plus I know that I'll need jQuery in the end anyway for things like not stopping animation when the mouse unhovers a panel.
So what I'm asking is if anyone would be so kind and help me create a simple concept of this type of animation for content?
EDIT: http://jsfiddle.net/z3gY7/ is what I've done, yet it's not much at all, and probably won't be compatable at all. It's basicly done by div's and animations.
LIVE DEMO
HTML:
<div class="slideContent">
<p>Content here</p>
<div class="slideIn"><p>Sub Content</p></div>
</div>
CSS:
.slideContent, .slideIn{
height:300px;
width:180px;
}
.slideContent{
position:relative;
overflow:hidden;
}
.slideIn{
position:absolute;
left:0;
bottom:0px;
display:none;
}
jQ:
$('.slideContent').hover(function(){
$('.slideIn',this).stop().slideToggle();
});
Important note: This one works even better than the one on the website you provided :)
<div class="wrap">
<div class="wrap-inner">
<div class="normal">
Original text
</div>
<div class="hover">
other text
</div>
</div>
</div>
.wrap
{
display:block;
width:300px;
height: 300px;
position:absolute;
top:0px;
overflow:hidden;
}
.wrap-inner{
position:absolute;
height:600px;
width:300px;
top:0;
-webkit-transition: top 300ms ease;
}
.wrap-inner:hover{
top:-300px;
}
.normal
{
display:block;
width:300px;
height:300px;
background-color:green;
}
.hover
{
width:300px;
height:300px;
background-color:red;
}
I think you are close, just have to keep a 600px container inside wrap, that could hold the two 300px items one below other. Otherwise the second item wont be rendered when wrap height is made 300px.
http://jsfiddle.net/z3gY7/4/
http://jsfiddle.net/z3gY7/19/
HTML:
<div class="wrap">
<div class='box'>
<div class="normal">
Original text
</div>
<div class="hover">
other text
</div>
</div>
<div class='box'>
<div class="normal">
Original text222
</div>
<div class="hover">
other text2222
</div>
</div>
</div>
CSS:
.wrap
{
width:100%;
height: 300px;
position:absolute;
overflow:hidden;
}
.box {
width:25%;
height:600px;
float:left;
}
.normal {
width:100%;
height:300px;
background-color:blue;
}
.hover {
width:100%;
height:300px;
background-color:red;
}
And, jquery:
$('.box').hover(
function () {
$(this).stop().animate({ 'margin-top':'-300px' }, 1000);
},
function () {
$(this).stop().animate({ 'margin-top': '0px' }, 1000);
}
);
You can change speed, to fit your needs...
I have a page with lots of large images set to 100% width. The navigation takes you to each individual image. I want the background of the link that ties to the div that is in focus to change color either because it was scrolled to or the link was clicked.
html:
<!------ Start Header Wrapper ------>
<div class="HeadWrapper">
<!------ Start Head ------>
<div class="Head">
<!------ Logo Box ------>
<div class="Logo">
<img src="_images/nav/PrimalLogo.jpg" />
</div>
<!------ Navigation links when in mobile all links except shop will go under a menu icon. ------>
<div class="NavSpan">
Helix
Originals
Black Label
Military
Beer & Rock
Custom
Community
</div>
<div class="clear"></div>
</div>
<!------ End Head ------>
<!------ Transparent BG ------>
<div class="HeaderBG"></div>
</div>
<!------ End Header Wrapper ------>
<!------ Start Images ------>
<div id="LBHome">
<img src="_images/bodyImages/01_LB_MtEvansRDSky.jpg" />
</div>
<div id="LBMHelix">
<img src="_images/bodyImages/02_Lookbook.jpg" />
</div>
<div id="LBWHelix" class="theme-default">
<div id="slider" class="nivoSlide">
<img src="_images/bodyImages/01_LB_MtEvansRDSky.jpg" />
<img src="_images/bodyImages/02_Lookbook.jpg" />
<img src="_images/bodyImages/03_Helix_V2.jpg" />
</div>
</div>
<div id="LBMOriginals">
<img src="_images/bodyImages/03_Helix_V2.jpg" />
</div>
<div id="LBWOriginals">
<img src="_images/bodyImages/04_LB_Helix.jpg" />
</div>
<div id="LBBlackLabel">
<img src="_images/bodyImages/05_LB_Helix.jpg" />
</div>
<div id="LBMilitary">
<img src="_images/bodyImages/06_WMS-Helix.jpg" />
</div>
<div id="LBBandR">
<img src="_images/bodyImages/01_LB_MtEvansRDSky.jpg" />
</div>
<div id="LBCustom">
<img src="_images/bodyImages/01_LB_MtEvansRDSky.jpg" />
</div>
<div id="LBCommunity">
<img src="_images/bodyImages/01_LB_MtEvansRDSky.jpg" />
</div>
css:
body {
line-height: 1;
background:#1e1e1e;
}
* {
margin:0 auto!important;
padding:0 auto!important;
}
img {
width:100%;
border: none;
}
a {
font-family:Helvetica, Arial, sans-serif !important;
font-size:13px;
line-height:18px;
color:#B70809;
}
a:link, a:visited {
color:#b70809;
text-decoration:none;
outline:none;
outline-width:0;
border-width:0;
}
a:hover, a:active {
color:#7c7c7c;
}
/*------------------------------------*\
Header
\*------------------------------------*/
.HeadWrapper {
width:100%;
height:80px;
z-index:100;
clear:both;
position:fixed;
border-bottom:1px #1e1e1e solid;
top:0;
left:0;
}
.HeaderBG {
position:absolute;
top:0px;
left:0px;
width:100%;
height:80px;
background-color:#1e1e1e;
z-index:101;
/* These three lines are for transparency in all browsers. */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity:.7;
}
.Head {
position:relative;
width:1000px;
height:80px;
z-index:105;
display:block;
}
.Logo {
width:86px;
float:left;
}
/*------------------------------------*\
NAV
\*------------------------------------*/
.NavSpan {
float:left;
}
.NavSpan a {
font-family:Helvetica, Arial, sans-serif !important;
font-size:14px;
line-height:18px;
color:#FFFFFF;
text-transform:uppercase;
line-height:80px;
margin-left:40px !important;
letter-spacing:1px;
}
.NavSpan a:focus {
background:#b70809;
}
.NavSpan a:active {
background:#b70809;
}
I tried doing it with an :focus or :active tag. I know there is a lot that I can do with JavaScript but I was attempting to leave out any JavaScript if possible. I desire that when a user scrolls down the page the red box under the nav item moves with the section they are in. I know I can do it with a parallax scroller or by getting window position and setting actions to happen at certain positions just wasn't sure if there was an easier way to do this.
Try this function. It will change the CSS background-color of the div when a click is made on the image, you can change that to anything!
$('document').ready(function () {
$('img').click(function () {
$('div').css('background-color', '#hexcode');
});
});
Remember: Show us your code first! Tell us what you were doing and what went wrong. We will help you. Instead these guys are going to downvote you buddy. Try to keep this in mind for the next question as this not a freelancer site. Its a Q&A site, you ask about what is wrong we tell! That's how it goes. Also, I would like to advise you to go to this site and learn some jQuery. jquery.com. You need to polish your JavaScript talent! :)
I am facing a input select dropdown problem in Firefox browser but it works fine in Google Chrome.
I have created a jQuery submenu box. My problem is when I put content in the content area of the submenu, its ok. But when I am creating a select box in that content area its not working in Firefox but works fine chrome browser...I mean I can't select any option of that select box when I am trying to select option 2, option 3 etc, the whole thing got disappear.
I need your help regarding this.
Here is my html code:
<div class="layout_nemo" style="margin:0px auto; width:520px;">
<aside id="models">
<section class="nestingList" style="width:520px;">
<div style="float:right; width:100px; border:1px solid #f00; text-align:right">A5
</div>
<div style="clear:both; margin:0px; padding:0px;"></div>
<div class="flyout" style="border:3px solid #000;">
<div class="inner">
<div class="col" style="float:right;">
<ul class="nav">
<li>A5 Coupé
</li>
<li>A5 Sportback
</li>
</ul>
</div>
<div class="articles" style="float:left;">
<article class="visuallyhidden">
<select name="bvgn " style="border:1px solid #000; height:30px;width:180px;">
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>
<select name="bvgn " style="border:1px solid #000; height:30px;width:180px;">
<option>option5</option>
<option>option6</option>
<option>option7</option>
<option>option8</option>
</select>
</article>
<article class="visuallyhidden" style="border:7px solid #3C0; height:30px;">content here</article>
</div>
</div>
</div>
</section>
</aside>
</div>
And the CSS code:
.visuallyhidden {
border:0;
clip:rect(0 0 0 0);
height:1px;
margin:-1px;
overflow:hidden;
padding:0;
position:absolute;
width:1px;
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
clip:auto;
height:auto;
margin:0;
overflow:visible;
position:static;
width:auto;
}
.clearfix:after, .layout_nemo .nemo_carousel .pagination:after {
clear:both;
}
aside {
display:block;
}
nav ul, ul.nav {
padding-bottom:0;
}
.flyout {
display:none;
height:auto;
overflow:hidden;
position:absolute;
z-index:9999;
}
.flyout nav#navigation .links a {
font-family:Verdana, Helvetica, sans-serif;
line-height:20px;
font-weight:bold;
background-position:0 -444px;
}
.flyout nav#navigation .links a:hover {
background-position:0 -444px;
}
.flyout>.inner {
position:relative;
margin:-3px 3px 3px 3px;
}
#models {
position:absolute;
top:-124px;
}
#models.home {
top:-84px;
}
#models section {
display:inline;
float:left;
}
#models .flyout {
left:-3px;
width:520px;
}
#models .articles, #models .inner {
overflow:hidden;
}
#models .inner {
position:relative;
padding-top:20px;
min-height:280px;
}
#models .nav li {
list-style-image:none;
list-style-type:none;
margin-left:0;
}
#models .nav a {
display:block;
height:29px;
line-height:29px;
padding-left:9px;
border-top:1px solid #e7e9ea;
text-decoration:none;
background:none;
}
body.special #main .content .mediaContainer, body.special #main .content .audi_flash_replace, body.special #main .content .flash_3col, body.special #main .content .con_flashfilm_3col, body.special #main .content body.special.detail .headline h1 {
font-size:36px;
}
.layout_nemo #models {
top:23px;
}
.layout_nemo #models section>h1>a {
margin-left:0;
}
Also sharing you a link
where we have tried the whole thing includes all the js files. Please have a look of that link in both browser (firefox & chrome)
Developing primarily in Chrome will always lead to strange behavior in other browsers, so a good start would be to do it in Firefox. If it works in Firefox 99% it will work everywhere else, in IE too. Chrome has a lot of assumptions and "helpful" features that derail developers.
Also, my test in Firefox showed no errors. I am using 23.0.1.
I just refactored entire HTML code and started working on CSS. I've done this up to now I hope it helps, somewhat.
http://jsfiddle.net/cgRA2/19/
<div class="layout_nemo">
<aside id="models">
<section class="nestingList">
<div id="new_url_top">
A5 series
</div>
<div style="clear:both; margin:0px; padding:0px;"></div>
<div class="flyout" style="border:3px solid #000;">
<div class="inner">
<div class="col" style="float:right;">
<ul class="nav">
<li>A5 Coupé</li>
<li><a href="#" class="track-click" >A5 Sportback</a></li>
</ul>
</div>
<div class="articles" style="float:left;">
<article class="visuallyhidden">
<select name="bvgn " style="border:1px solid #000; height:30px;width:180px;">
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>
<select name="bvgn " style="border:1px solid #000; height:30px;width:180px;">
<option>option5</option>
<option>option6</option>
<option>option7</option>
<option>option8</option>
</select>
</article>
<article class="visuallyhidden" style="border:7px solid #3C0; height:30px;">content here</article>
</div>
</div>
</div>
</section>
</aside>
The effect and everything concerned around the dropdown is not happening inside HTML/CSS, and its not Firefox problem because of that. I thought you must have been using some external JavaScript to do this, and I was right.
Problem is inside your js.js file, that you have included into external files for the jsFiddle example page. One part of the problem is that the file is combined with everything else and is part of something much bigger. I would really hate going into it after doing html/css.
So the part of jQuery that is making the problem is located around:
line 4836
line 4841
line 4937
line 4942
line 5074
If you can get that spaghetti code out and do something with it... Good luck.
Someone posted a solution here Containing div loses focus when mousing over select dropdown
July 14, 2021
Anyone experiencing recent issues with Firefox not rendering HTML, in particular the <select> element correctly see below:
I have been managing a Grails web application for a number of years and came across this issue just the other day, where my site worked fine in all browsers, but for whatever strange reason, Firefox simply would not render the <select> tags in their allocated <div>
Following a lot of testing across the browsers and using Firebug console/inspection, I tracked it down to an old HTML 4.0 Doctype definition.
As soon as I updated my site to the HTML 5 standard doctype, Firefox fell into line and rendered everything perfectly.
FIX:
Change OLD Doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
To NEW Doctype:
<!DOCTYPE html>
I know this is YEARS later than the original question post, but I would have really appreciated stumbling across this answer.
I hope it helps someone out there.
I wondered whether someone might be able to help? I've tried and tried to find a solution myself, but nothing seems to work.
I have a horizontal list and when the user clicks on one of these links, a hidden div appears just below the list, filling the width of the overall container (950px).
This works absolutely perfectly on Firefox, Safari and IE8 but doesn't seem to work on IE7 (and possibly less, I haven't been able to check).
In IE7, the div causes the list to break, plonking the final list item on an extra line and (as a result, I presume?) pushing the div further down the page, so it's not flush with the bottom of the list. In fact, it appears just beneath the div with ID "highlightsbar".
Here is the relevant code - I'd be eternally grateful for any suggestions anyone might have!
You can see this problem 'in action' at http://www.totalbackpacker.co.uk. (Interestingly, if I do a quick test with only the relevant bits of code at http://www.martinjefferies.co.uk/test.html, the problem isn't there. I'm not sure if that helps or not?!)
Thanks,
Martin
HTML:
<div id="outer">
<div id="wrapper">
<div id="header">
</div>
<div id="navbar">
<ul>
<li class="left"><img src="<?php bloginfo('template_url'); ?>/images/navbar/home.png" alt="Home" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/images/navbar/explorebycountry.png" alt="Explore by country" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/images/navbar/search.png" alt="Search" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/images/navbar/contact.png" alt="Contact" /></li>
<li class="right"><img src="<?php bloginfo('template_url'); ?>/images/navbar/about.png" alt="About" /></li>
<div id="submenu" style="display: none; z-index:500;">
<div id="submenu-inner">
<?php
$categories = get_categories('child_of=7');
$count = 1; ?>
<div class="left">
Left hand links go here
</div>
<div class="right">
Right hand links go here
</div>
<div class="clearer"></div>
<br />Close menu
</div>
</div>
</ul>
<div class="clearer"></div>
<div id="highlightsbar">
<span class="title">Promotion:</span> Promotion info goes here.
</div><!--highlightsbar-->
</div><!--navbar-->
<div id="content">
</div>
</div>
</div>
CSS:
#outer {
margin:0 auto;
background:#E2E2E2;
width:100%;
}
#wrapper {
text-align:left;
width:950px;
margin-left:auto;
margin-right:auto;
background:#FFFFFF;
padding:0 0 50px 0;
}
#header {
background:#be023a;
height:100px;
width:950px;
margin:0;
padding:0;
}
#navbar {
background:#cc0000 url('http://www.totalbackpacker.co.uk/wp-content/themes/totalbackpacker/images/navbar.jpg') repeat-x;
height:70px;
width:950px;
}
#navbar ul {
float:left;
list-style:none;
margin:7px 0 0 10px;
padding:0;
height:40px;
}
#navbar li {
float:left;
}
#navbar li a {
display:block;
padding:3px 10px;
margin:0;
border-right:1px solid #ffffff;
font-family:Helvetica,Arial,sans-serif;
font-size:15px;
line-height:15px;
color:#ffffff;
text-decoration:none;
text-transform:uppercase;
font-weight:normal;
}
#navbar li a:hover {
background:#cc0000;
}
#navbar img {
border:0;
}
#highlightsbar {
padding:0;
margin:3px 0 0 20px;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
line-height:12px;
color:#666666;
text-decoration:none;
}
#highlightsbar .title {
text-transform:uppercase;
float:left;
font-weight:bold;
}
#highlightsbar .textwidget {
float:left;
padding:0;
margin:0 0 0 5px;
}
.clearer {
clear:both;
}
#submenu {
background:url('../images/submenushadow.png') left bottom repeat-x;
margin:30px 0 0 -10px;
padding:0 0 50px 0;
z-index:5000;
position:relative;
width:950px;
display:block;
}
#submenu-inner {
background:#ffffff;
border-left:5px solid #be023a;
border-bottom:5px solid #be023a;
border-right:5px solid #be023a;
padding:20px;
}
#submenu-inner .right {
float:left;
width:140px;
padding:0;
margin:0;
}
#submenu-inner .left {
float:left;
width:140px;
padding:0;
margin:0;
}
JavaScript:
<script type="text/javascript" language="javascript">
function toggle(id)
{
el = document.getElementById(id);
var display = el.style.display ? '' : 'none';
el.style.display = display;
}
window.onload=function()
{document.getElementById('submenu').style.display='none';}
</script>
If you pull it out and it works then it must be something in the surrounding code.
The most common issue with non javascript IE compatibility is IE will treat extra open tags and close tags differently than other browsers.
I suggest you look very closely at the html, or selectively add back HTML till you can reproduce.
I suggest you look into using conditional-includes for IE7 (forget about IE6 if at all possible). Here's a jsFiddle of the code I got working in my copy of IE7: http://jsfiddle.net/qjx4g/2/
What happened is that you shouldn't have your submenu code within your #navbar <ul> (i.e., close your #navbar (</ul>) and then put in your submenu's code) and whenever I have problems with a container with position: relative that contains content that is floated, I change the container to use position: absolute and work from there (only in a conditional-include for IE7).
1 - If you give your ul a width of 100%, it solves the problem of the last list item "About" pushing itself down to a second line.
2 - Close your ul . In IE9 the div#submenu is a child of ul, while in IE7 it is the child of the last li
3 - div#navbar{ position: relative;} - div#submenu{position: absolute; top: 15px; right: 1px;} - Works on IE7
pic
Here's the solution I came up with.
Firstly, I created an extra div for the submenu - called #submenu-outer:
#submenu-outer {
position:absolute;
width:100%;
left:0;
display:block;
text-align:center;
margin:35px 0 0 0;
z-index:5000;
}
Then I made #submenu appear in the centre of the 100% outer div:
#submenu {
background:url('totalbackpacker.co.uk/wp-content/themes/totalbackpacker/images/…;) left bottom repeat-x;
margin-left:auto;
margin-right:auto;
padding:0 0 50px 0;
width:950px;
text-align:left;
}
Et voila! Thanks to everyone who helped along the way! :)