Solved

Annoying space caused by a toggle using MooTools Fx.Slide?

Posted on 2008-06-18
4
623 Views
Last Modified: 2013-12-08
Hi Guys

I would have posted this question on the MooTools forum but it's been down today :(

I have been using Joomla! 1.5.2 which has MooTools 1.11 built in. I have created a slide effect on several divs on this page: http://www.landau-forte.org.uk/post16/calendar (it's a work in progress so appologies if its not up when you look)

As you can see, if you click on the Term headings (Term 1, for example) the events slide up and hide. The problem I have seems to only happen in IE7 (I don't have IE6 to test it in). When you toggle the term to close the events they slide up but a space appears between the term title and the container footer. It's only small and doesn't show up in FireFox 3.

Does anyone know what is causing this or how to fix it? If you can't see what I am on about then let me know :)

Thanks for your help,
James
0
Comment
Question by:nikez2k4
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
4 Comments
 
LVL 1

Author Comment

by:nikez2k4
ID: 21818044
Should you need the CSS it is attached here!
@charset "utf-8";
/* CSS Document */
 
#calContainer {
}
 
.catContainer {
}
 
.catTitle, .eventDates0, .eventDates1 {
	width: 200px;
	padding-left: 10px;
	float: left;
}
 
.catTitle, .catDates {
	line-height: 33px;
	height: 30px;
	text-align: left;
	font-weight: bold;
	background: #FFF;
}
 
.catTitle {
	background: url(../images/cat_title_bg.gif) top left no-repeat;
}
 
.catDates {
	background: url(../images/cat_dates_bg.gif) top right no-repeat;
}
 
.catFooterLeft, .catFooterRight {
	height: 10px;
	margin-bottom: 10px;
}
 
.catFooterLeft {
	width: 200px;
	float: left;
	background: url(../images/cat_footer_left_bg.gif) top left no-repeat;
}
 
.catFooterRight {
	background: url(../images/cat_footer_right_bg.gif) top right no-repeat;
}
 
.eventDates0, .eventDates1, .eventTitle0, .eventTitle1 {
	line-height: 18px;
	text-align: left;
	background: #FFF;
}
 
.eventDates0 {
	background: url(../images/event_dates_bg_0.jpg) top left repeat-y;
}
 
.eventDates1 {
	background: url(../images/event_dates_bg_1.jpg) top left repeat-y;
}
 
.eventTitle0 {
	background: url(../images/event_title_bg_0.jpg) top right repeat-y;
}
 
.eventTitle1 {
	background: url(../images/event_title_bg_1.jpg) top right repeat-y;
}

Open in new window

0
 
LVL 4

Accepted Solution

by:
sajay_j earned 250 total points
ID: 21820242
Inside style.css make modification for following classes; specify float:left; for all classes.

.catTitle, .catDates (line 16)

{

overflow-x: hidden;

overflow-y: hidden;

line-height: 33px;

height: 30px;

float:left;

width:300px;

text-align: left;

background-color: #ffffff;

background-image: none;

background-repeat: repeat;

background-attachment: scroll;

background-position: 0% 0%;

}

.catFooterLeft, .catFooterRight (line 34)

{

height: 10px;

width:300px;

float:left;

margin-bottom: 10px;

}
0
 

Assisted Solution

by:InfoAlfa
InfoAlfa earned 250 total points
ID: 22498764
seems that the DIV that you "slide" must be "float:left"

for me, that worked! ;)
0

Featured Post

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
SharePoint and CAML query help 4 26
Scroll 5 news at a time using vticker 2 40
Difference between Leaflet and MapBox? 5 47
IE book marks 1 17
I had to do a bit of research to find the answer to this question so I thought I'd share my results.  Due to our outdated mainframe systems, we need to downgrade IE9 to IE8 in order to stay compatible.  We also needed to downgrade Java.  In order to…
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question