CSS - Css & Jquery Question

Hi all, I'm using a jQuery plugin called "Cycle" and I am having issues with the CSS for it in IE, it looks perfect in Opera, FF, Chrome and Safari, but IE is cracking the sads..

http://www.photographicpassions.com/home

You will see the "latest work" on the right hand side and the thumbnails below the main image, in FF, Safari, Chrome and Opera, the grey container is behind all the thumbnails, but in IE, the grey background stops at the top of the thumbnails.. I've tried various things to make it work, to no avail.. could someone please help me??

Here's the CSS for the containers which arent playing nice in IE:

/* latest work container */
div#latestHolder {
position: relative;
float: left;
width: 368px;
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
background-color: #666666;
}

/* thumbnails */
#nav {
position: relative;
float: left;
left: 0px;
width: 376px;
padding: 0px 0px 0px 0px;
margin: 1px 0px 0px 0px;
}
#nav li {
width: 66px;
float: left;
padding: 0px 0px 0px 0px;
margin: 9px 9px 0px 0px;
list-style: none;
cursor: pointer;
}
#nav a {
padding: 3px;
display: block;
background: #404040;
cursor: pointer;
}
#nav a.activeSlide {
background: #ffffff;
cursor: pointer;
}
#nav a:focus {
outline: none;
cursor: pointer;
}
#nav img {
width: 60px;
border: none;
display: block;
cursor: pointer;
}

If someone could help me out, that'd be fantastic!!

Trying to use jQuery UI aqccordions for a simple news widget on a site. I have created my widget and everything works and looks great but when I click a widget the containing div resizes and makes the whole page bump down a bit.

I dont want to use any hard coded dimesnsions that are longer than the box since it would lose its effect. I need to keep the whole div able to resize whith the screen reolution.

Code:

<div id="newsAccordion" class="ui-accordion ui-widget ui-helper-reset">
 <h3 style="line-height:0.3;" class="accordionTitle ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" id="accordionTitle1">
  <span class="widgetHeadline">Add news article 1 here</span>
 </h3> 						
 <div class="accordionContent ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" id="accordionContent1" style="padding: 2px 5px;" > 							
 <span>News article 1 content</span>					
 </div> 						 						
 <h3 style="line-height:0.3;" class="accordionTitle ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" id="accordionTitle1">
  <span class="widgetHeadline">Add news article 2 here</span>
 </h3> 						
 <div class="accordionContent ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" id="accordionContent2" style="padding: 2px 5px;"> 
 <span class="rightJustifiedAccordion">News article 2 content here</span>
 </div> 						 			 <h3 style="line-height:0.3;" class="accordionTitle ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" id="accordionTitle1"><span class="widgetHeadline">News article 3</span></h3> 						<div class="accordionContent ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" id="accordionContent2" style="padding: 2px 5px;"> 							<span>News article 3 content here</span> 						 </div> 					
</div>

Thanks in advance,

Jim

I am trying to implement jQuery tabs into a page with specific css requirements. The tabs and most of the page contents falls within a maincol div that is centered in the page. But the page also has a navigation menu on the left side column of the page. I didn't write this css but I have to work with it.

When the content in the menu column is removed, the tabs display correctly. You can view that (and access the css pages) at this link

Here is what it looks like when the menu content is included. You will also notice that the menu mouseovers don't display properly now either.

This menu (only a portion is shown in my examples) is included on every page of the site. So I have to be careful about adjusting the css for the menu. It's used elsewhere and displays fine elsewhere. It's really just on this one page where I try to use the tabs. The tabs CSS was generated from jQuery Themeroller

I'm in the middle of building a site. I have a gallery page with a pop up j-query gallery.

perisandcorr.com/mona/gallery.html

It works in IE7 and IE8 but not in IE6. Any suggestions.

Another problem I have is with the navigation on the left. The margins between each button is larger in IE6 and IE7 than I want them to be they are fine in the latest versions of Safari, Firefox and Opera (on a Mac).

Also in IE6 the rollover doesn't work.

Any help much apreciated.

Thanks in advance.

I have created a navigation menu with sub menu as per code below:

Code:

 
  <div id="myslidemenu" class="jqueryslidemenu">
  <ul>
    <li class="home"><a href="index.htm">Home</a></li>
    <li class="heating"><a href="#">Heating</a>
    <ul>
    	<li><a href="#">Boilers</a></li>
    	<li><a href="#">Radiators</a></li>
        <li><a href="#">Controls</a></li>
        <li><a href="#">Hot Water</a></li>
        <li><a href="#">Fires</a></li>
        <li><a href="#">Water Treatment</a></li>
        <li><a href="#">Fan Convectors</a></li>
        <li><a href="#">Fittings</a></li>
    </ul>
    </li>
    <li class="plumbing"><a href="#">Plumbing</a>
    	<ul>
        <li><a href="#">Plastic</a></li>
        <li><a href="#">Cold Water Storage</a></li>
        <li><a href="#">Fittings & Valves</a></li>
        <li><a href="#">Pumps</a></li>
        <li><a href="#">Water Softeners</a></li>
        <li><a href="#">Tools</a></li>
        <li><a href="#">Fixings</a></li>
        </ul>
        </li>
    <li class="bathroom"><a href="#">Bathroom</a></li>
    <li class="spares"><a href="#">Heating Spares</a></li>
    <li class="branches"><a href="#">Branches</a></li>
    <li class="contactus"><a href="#">Contact Us</a></li>
    </ul>
     </div>

The menu is a jqueryslidemenu that uses a CSS stylesheet and Javascript.

The CSS is:

Code:

.jqueryslidemenu{
font: bold 14px Arial, sans-serif;
background: #005daa;
width: 97%;
position:relative;
top:5px;
left:10px;
z-index:1000;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
list-style-type:none;
}

.jqueryslidemenu ul li.home{
position: relative;
display: inline;
float: left;
list-style-type:none;
padding-left:30px;
}

.jqueryslidemenu ul li.heating{
position: relative;
display: inline;
float: left;
list-style-type:none;
padding-left:10px;
margin-left:80px;
}

.jqueryslidemenu ul li.plumbing{
position: relative;
display: inline;
float: left;
list-style-type:none;
padding-left:10px;
margin-left:45px;
}

.jqueryslidemenu ul li.bathroom{
position: relative;
display: inline;
float: left;
list-style-type:none;
padding-left:50px;
}

.jqueryslidemenu ul li.spares{
position: relative;
display: inline;
float: left;
list-style-type:none;
padding-left:45px;
}

.jqueryslidemenu ul li.branches{
position: relative;
display: inline;
float: left;
list-style-type:none;
padding-left:45px;
}

.jqueryslidemenu ul li.contactus{
position: relative;
display: inline;
float: left;
list-style-type:none;
padding-left:65px;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #005daa; /*background of tabs (default state)*/
color: white;
padding: 9px 0px;
text-decoration: none;
border-left:0px;
list-style-type:none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: #005daa; /*tab link background during hover state*/
color: #ffcc33;
}
	
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left:0px;
display: block;
visibility: hidden;
z-index:1000;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

.jqueryslidemenu ul li ul li.heatingsub{
display: list-item;
float: none;
}

.jqueryslidemenu ul li ul li.plumbingsub{
display: list-item;
float: none;
}
/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 14px Arial, sans-serif;
width: 140px; /*width of sub menus*/
padding: 10px 10px 10px;
margin: 0;
}

The Javascript is:

Code:

var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']}

var jqueryslidemenu={

animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid, arrowsvar){
	jQuery(document).ready(function($){
		var $mainmenu=$("#"+menuid+">ul")
		var $headers=$mainmenu.find("ul").parent()
		$headers.each(function(i){
			var $curobj=$(this)
			var $subul=$(this).find('ul:eq(0)')
			this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
			this.istopheader=$curobj.parents("ul").length==1? true : false
			$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
			$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
			)
			$curobj.hover(
				function(e){
					var $targetul=$(this).children("ul:eq(0)")
					this._offsets={left:$(this).offset().left, top:$(this).offset().top}
					var menuleft=this.istopheader? 0 : this._dimensions.w
					menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
					if ($targetul.queue().length<=1) //if 1 or less queued animations
						$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
				},
				function(e){
					var $targetul=$(this).children("ul:eq(0)")
					$targetul.slideUp(jqueryslidemenu.animateduration.out)
				}
			) //end hover
		}) //end $headers.each()
		$mainmenu.find("ul").css({display:'none', visibility:'visible'})
	}) //end document.ready
}
}

//build menu with ID="myslidemenu" on page:
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)

The menu seems to work fine in Firefox, Chrome, Opera and IE8 but for some reason in IE7 the submenu is appearing below the main content that appears in the page itself. I have set the z-index of the menu to 1000 and the content to 1 but still no joy.

Any ideas?

I'm trying to use a jQuery script to create a tabbed slide-out on the right side of the screen. At this point, the slide-out plug-in is not an option.

Here's the jQuery script:

Code:

$('#sideTabMain .button').toggle(function() {
	$('#sideTab').animate({right:'0px'}, {queue:false, duration: 500});
}, function() {
	$('#sideTab').animate({right:'-650px'}, {queue:false, duration: 500});
});

And the basic CSS for the div:

Code:

#sideTab      {
	position: absolute;
	z-index: 1000;
	top: 50px;
	right: -650px
	}

The issue is CSS-related. You can still see the slide-out div when you scroll over to the right (off the screen). How do I hide this? I tried putting the entire page in a CSS div with overflow: hidden but this completely removed the ability to scroll horizontally. Any ideas?

Thanks for your help.

Not know why tooltip box(class .show_tooltip) there is left when mouse enter on li a, i want display each tooltip box top same link that mouse is enter on it and if the width and height was more or less it is same style.(i want links put in right) http://jsfiddle.net/AQh6y/3/

I want example this (for how): what do i do?

CSS:

Code:

.show_tooltip{
    background-color: #E5F4FE;
    display: none;
    padding: 5px 10px;
    border: #5A5959 1px solid;
    position: absolute;
    z-index: 9999;
    color: #0C0C0C;
    /*margin: 0 0 0 0;
    top: 0;
    bottom: 0;*/
}

HTML:

Code:

<ul>
    <li>    
    <div class="show_tooltip">
        put returns between paragraphs
    </div>
        <a href="#">about</a>
    </li>
    <br>
    <li>    
    <div class="show_tooltip">
        for linebreak add 2 spaces at end
    </div>
        <a href="#">how</a>
    </li>
</ul>

jQuery:

Code:

$("li a").mouseenter(function(){
     $(this).prev().fadeIn();
}).mousemove(function(e) {
            $('.tooltip').css('bottom', e.pageY - 10);
            $('.tooltip').css('right', e.pageX + 10);
        }).mouseout(function(){
     $(this).prev().fadeOut();
})

Hi, I'm new to this forum I hope someone can help.

I'm using a jquery slidemenu to make menus pop down from a ul but I'm having trouble in that when the menu opens up, it opens behind a div below.

Any tips much appreciated

Thanks

**sorted myself found a position relative on some bit being underlapped

I've been bashing my head with this problem for several days now and i've tried lots and lots of methods with no good result. now, i'm out of ideas.



I want to use the superfish/suckerfish menu from :
jquery plugin's home

The problem is that i want to show the second ul submenu (the one that extends from the first) ~50px to the left over the first ul menu.

see the problem in the attached image.

it works fine in firefox, but in internet explorer 6 & 7 the second ul submenu is shown below the first one. i thought its a problem with z-index or something but i can't get it to work.

here is the html code :
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>A very basic Superfish menu example</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">
		<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
		<script type="text/javascript" src="js/hoverIntent.js"></script>
		<script type="text/javascript" src="js/superfish.js"></script>
		<script type="text/javascript">

		// initialise plugins
		jQuery(function(){
			jQuery('ul.sf-menu').superfish();
		});

		</script>
		<style type="text/css" media="screen" id="test">
		    .test {margin-left:-50px;margin-top:10px;position:absolute;z-index:9999;}
		</style>

	</head>
	<body>
		<ul class="sf-menu">
			<li class="current">
				<a href="#a">menu item ↓</a>
				<ul>
					<li>
						<a href="#aa">menu item that is quite long</a>
					</li>
					<li class="current">
						<a href="#ab">menu item →</a>
						<ul class="test">
							<li class="current"><a href="#">menu item</a></li>
							<li><a href="#aba">menu item</a></li>
							<li><a href="#abb">menu item</a></li>
							<li><a href="#abc">menu item</a></li>
							<li><a href="#abd">menu item</a></li>
						</ul>
					</li>
					<li>
						<a href="#">menu item →</a>
						<ul>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
						</ul>
					</li>
					<li>
						<a href="#">menu item →</a>
						<ul>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">menu item</a>
			</li>
			<li>
				<a href="#">menu item ↓</a>
				<ul>
					<li>
						<a href="#">menu item →</a>
						<ul>
							<li><a href="#">short</a></li>
							<li><a href="#">short</a></li>
							<li><a href="#">short</a></li>
							<li><a href="#">short</a></li>
							<li><a href="#">short</a></li>
						</ul>
					</li>
					<li>
						<a href="#">menu item →</a>
						<ul>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
						</ul>
					</li>
					<li>
						<a href="#">menu item →</a>
						<ul>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
						</ul>
					</li>
					<li>
						<a href="#">menu item →</a>
						<ul>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
						</ul>
					</li>
					<li>
						<a href="#">menu item →</a>
						<ul>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">menu item</a>
			</li>	
		</ul>
	</body>
</html>

here is the css code :
Code:

/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
.sf-menu {
	line-height:	1.0;
}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
	width:			100%;
}
.sf-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
	float:			left;
	position:		relative;
}
.sf-menu a {
	display:		block;
	position:		relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0;
	top:			2.5em; /* match top ul list item height */
	z-index:		-1;
}
.current:hover  sf-menu li {
position:absolute;z-index:-5;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
	position:absolute;z-index:999;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}

/*** DEMO SKIN ***/
.sf-menu {
	float:			left;
	margin-bottom:	1em;
}
.sf-menu a {
	border-left:	1px solid #fff;
	border-top:		1px solid #CFDEFF;
	padding: 		.75em 1em;
	text-decoration:none;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#13a;
}
.sf-menu li {
	background:		#BDD2FF;
}
.sf-menu li li {
	background:		#AABDE6;
}
.sf-menu li li li {
	background:		#9AAEDB;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	background:		#CFDEFF;
	outline:		0;
}

/*** arrows **/
.sf-menu a.sf-with-ul {
	padding-right: 	2.25em;
	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
	position:relative;z-index:-1;
}
.test a {position:relative;z-index:555;}
.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			.75em;
	top:			1.05em; /* IE6 only */
	width:			10px;
	height:			10px;
	text-indent: 	-999em;
	overflow:		hidden;
	background:		url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
	top:			.8em;
	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
	background:	url('../images/shadow.png') no-repeat bottom right;
	padding: 0 8px 9px 0;
	-moz-border-radius-bottomleft: 17px;
	-moz-border-radius-topright: 17px;
	-webkit-border-top-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
	background: transparent;
}

i'm not adding the javascript because i believe that the problem is from css ...

can anyone help me ?

image : URL

Sample can be seen at this link

I'm using some jQuery Tool tooltip code that will bring up a stylized tooltip when the user hovers over a set of li tags. Right now, I'm just playing with the sample png file that came with the demo . This uses a black box as a background image and then anything I put inside a div class="tooltip" shows up as text inside that image.

Nice, but I can't quite get the tooltip box to pop up where I want it. The li tags are nested inside a div, which is nested inside other divs. So, I need some help figuring out how to tweak the CSS to reposition the tooltip. I'd like it to appear just to the right of the selected li tag, and still stay within the maincol div. Actually, I don't even mind if it floats outside that maincol, just as long as I can get it to show up somewhat closer to the li tag's text.

and just some of the relevant css

Code:

#maincol.second {
padding: 8px;
width:700px;
margin-left: 190px;
margin-right:10px;
background-color:#fff;
min-height:730px;
}

/* tooltip styling */
            .tooltip {
                display:none;
                background:url(http://static.flowplayer.org/tools/img/tooltip/black_arrow_big.png);
                height:163px;
                padding:40px 30px 10px 30px;
                width:200px;
                font-size:11px;
                color:#fff;
            }

            .switches {width: 400px;}
            .switches ul{
                font-size: .85em;
                margin: 1em 0 .5em 0;
                }
            .switches li{
                list-style-type:none;
                color:#800000;
                }

Hi, the new Drupal site I've developed is artemis2taste (dot) gr for an ice cream shop in Greece - The site loads fine in Firefox, Chrome and Opera but not in Internet Explorer (versions 6,7,8). I would appreciate it if you could visit my website and take a look at my css. The main content area is divided in two columns by the "composite layout" module. The "last" column (the one on the right) contains collections of images for each one of the site's pages. I've used a jQuery script to make a slideshow with simple next/previous buttons for the photos that appear there. The problem is I tried so many combinations of floats, padding, margins, inline etc for the right column and the photos keep stacking one below the other (you can only see a small part of the second image, as I have a fixed height for the container div), also hiding the slideshow navigation links. I can't find a way to make these images appear on the same horizontal direction... I would really appreciate suggestions on how to solve this issue...
Thanx in advance

When the page loads initially, the bottom portion of the div/ul is cut-off. However, once I start sliding through the different sections, the entire element is visible. Odd thing is, it works just fine 10% of the time...all browsers (ie, ff, chrome) seem to be impacted similarly.

Webpage: hxxp://jennifer.e-carleton.com

I am using loopedSlider for my base slider code (hxxp://nathansearles.com/loopedslider/)

Not sure if this is a JS or CSS issue, but my gut says CSS...thanks for your help,
JC

Hello,

I'm using jquery and the cycle plugin to cycle through a few images on my homepage inside a container.When i load the website at any browser size, it seems to do the proper thing. The problems arise when i try to make the browser bigger or smaller after that, it does funky things to the images. If you begin to scale the browser when the first image is displayed, it also seems to scale properly for that first image, but goes haywire after that. It pretty much does it in all browsers and i can't seem to figure out if it's something im not setting properly within css or if it have something to do with jquery and the cycle plugin.

here's the website thus far:

www.beaucoupla.com

this is my first time writing code so please any help would be appreciated!

Code:

@charset "utf-8";
/* CSS Document */

#mainWrapper {
	/*
	background:#000 right top no-repeat; 
	min-width:1000px;
	min-height:775px;
	border:0px;
	background-color:#000; */
	padding: 0 0 0 1px;
	margin:0;
	top:0;
	left:0;
	width:100%;
}

.mainbar { 
	position:absolute;
	top:0px;
	left:0px;
	display:none;
	visibility:hidden;
	width:78%;
	min-height:100%;
	height:auto;
	/*This works for IE7
	min-height:775px;
	height:775px;*/ 
	border-right: #FFF solid medium;
}

#imagelist {
	left:0;
	position:absolute;
	display:block;
	visibility:visible;
	/* width:auto; static size */
}

#imagelist img {
	display:block;
}

#imagelist img.first {
	display:block;
}

.theimage {
	position:absolute;
	left:0;
	width:100%;
	/* Adding this works for IE7 */
	/* height:775px; */
	border-right: solid #FFF medium;
}


#podcast {
	/*right:303px; */
	position:absolute;
	top:0px;
	left:0px;
	height:100%;
}


.about_info p {
	font-size:1.1em;
		
}

.contact_info, .about_info, .news_info {
	position:relative;
	margin-top:4em;
	margin-left:10%;
	width:78%;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:1.3em;
	color:#FFF;
	height:100%;
}

.contact_info #title, .about_info #title, .news_info #title {
	font-size:1.75em;
	padding-bottom:1.5em;
	color:#1ac089;
	color:#03c5d1;
}
.contact_info .heading {
	color:#c04141;
	font-size:1.2em;
}

.contact_info .mail {
	text-decoration:underline;
}

.contact_info a:hover {
	color:blue;
	text-decoration:underline;
}

.news_info .heading {
	color:#c04141;
}



body {
	/*width:1400px;
	height:775px;*/
	padding:0;	
	margin:0;
	border:0;
	background-color:#000;
}



#share td {
	padding-left:0.5em;
}


#share {
	margin-left:1.4em;
	margin-top:0;
	border-top:0;
	/* padding-top:5; */
	font-size:0.65em;	
}

.sidebar {
	position:relative;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	margin-left:78%;
	margin-top:1em;
	font-size:2em;
	color:#FFF;
}


ul {
	border:0;
	margin:2px;
	text-decoration:none;
}

li {
	list-style:none;
}

a {
	text-decoration:none;
	color:#FFF;
}

a.home:hover {
	color:#bc7bd4;
}

a.news:hover {
	color:#7bd488
}

a.podcast:hover {
	color:#d47b88;
}

a.blog:hover {
	color:#d4cb7b;
}

a.about:hover {
	color:#7bd4c6;
}

a.contact:hover {
	color:#d4a37b;
}

a.twitter:hover {
	color:#33ccff;
}

a.myspace:hover {
	color:#999;
}

a.facebook:hover {
	color:#5b61d5;
}

This is my first post so hello everybody!

I am trying to implement this menu and my problem arises in trying to change the submenu font color (as well as the hover color) at levels 2 and 3 of the menu.

I figured this would be as straightforward as just changing the color values in the CSS, but it doesn't seem to be responsive. Interestingly, it works for the first level. It's been driving me insane.

I can change the submenu background color, but not the font color even though there looks to be code for it.

Anyway, any help would be greatly appreciated! You can test out the menu itself from the site or take a gander at a portion of the code I'll post below. I commented on the section towards the bottom.

Cheers,
MorphVT

Code:

/**
 *********************************************
 * Prototype of styles for horizontal CSS-menu
 * @data 30.06.2009
 *********************************************
 * (X)HTML-scheme:
 *  <div id="menu">
 *      <ul class="menu">
 *          <li><a href="#" class="parent"><span>level 1</span></a>
 *              <ul>
 *                  <li><a href="#" class="parent"><span>level 2</span></a>
 *                      <ul><li><a href="#"><span>level 3</span></a></li></ul>
 *                  </li>
 *              </ul>
 *          </li>
 *          <li class="last"><a href="#"><span>level 1</span></a></li>
 *      </ul>
 *  </div>
 *********************************************
 */

/* menu::base */
div#menu {
    height:41px;
    background:url(images/main-bg.png) repeat-x;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
div#menu ul.menu {
    padding-left: 30px;
}

div#menu li {
    position: relative;
    z-index: 9;
    margin: 0;
    padding: 0 5px 0 0;
    display: block;
    float: left;
}
div#menu li:hover>ul {
    left: -2px;
}

div#menu a {
    position: relative;
    z-index: 10;
    height: 41px;
    display: block;
    float: left;
    line-height: 41px;
    text-decoration: none;
    font: normal 12px Trebuchet MS;
}
div#menu a:hover, div#menu a:hover span { color: #fff; }
div#menu li.current a {}

div#menu span {
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 95% 0;
}
div#menu ul ul a.parent span {
    background-position:95% 8px;
    background-image: url(images/item-pointer.gif);
}
div#menu ul ul a.parent:hover span {
    background-image: url(images/item-pointer-mover.gif);
}

/* menu::level1 */
div#menu a {
    padding: 0 10px 0 10px;
    line-height: 30px;
    color: #e5e5e5;
}
div#menu span {
    margin-top: 5px;
}/**@replace#1*/
div#menu li { background: url(images/main-delimiter.png) 98% 4px no-repeat; }
div#menu li.last { background: none; }

/* menu::level2 */
div#menu ul ul li { background: none; }
div#menu ul ul {
    position: absolute;
    top: 38px;
    left: -999em;
    width: 163px;
    padding: 5px 0 0 0;
    background: rgb(45,45,45);  <--- CHANGING THIS WORKS
    margin-top:1px;
}
div#menu ul ul a {
    padding: 0 0 0 15px;
    height: auto;
    float: none;
    display: block;
    line-height: 24px;
    color: rgb(169,169,169);  <--- CHANGING THIS NOTHING HAPPENS

}
div#menu ul ul span {
    margin-top: 0;
    padding-right: 15px;
    _padding-right: 20px;
    color: rgb(169,169,169);  <--- CHANGING THIS NOTHING HAPPENS

}
div#menu ul ul a:hover span {
    color: #fff;  <--- CHANGING THIS NOTHING HAPPENS

}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
    width: 100%;
}

I am a novice at web authoring. I am working a jQuery slide show. I would like to make this slide show automatically resize to fit the browser window. But the show is contained in a div element which requires a fixed size in pixels. When I try to substitute percentages for pixel values, the images no longer appear. Please advise if there is a way to accomplish this resizing. Due to a prohibition against posting URLs for new user accounts, I can't provide a link to the slide show I am trying to resize, or a link to an example of the resizing behavior which I would like to emulate.