Web Development Discussion Boards

I have a link showing my issue, link below. In the background firefox looks to be adding extra space to the bottom of my banner nav buttons and also to the div block above it. http://postimage.org/image/krt95j1wj/

I have tried the following with no effect, or an undesired effect;
...font-size: 0 in the ul and font-size:normal on the li
...display inline
...add divs to the text inside the inside of the li tags

here is the html. any ideas...?

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
*{
	margin:0;
	padding:0;
	border:0;
}
#banner_container{
	width:770px;
	height:360px;
	overflow:auto;
}
#banner{
	position:absolute;
	list-style-type:none;
	width:770px;
	height:360px;
	overflow:hidden;
	clip:rect(0px,770px,360px,0px);
}
#banner li{
	width:770px;
	height:360px;
	position:absolute;
	top:0;
	left:0;
}
.right_side_container{
	float:right;
	clear:left;
	width:250px;
	height:360px;
}
.ad_box{
	height:160px;
	width:230px;
	margin:10px;
	//background:url('bg_white_fade.png');
	background:white;
}
.main_banner_text{
	position:relative;
	background:url('bg_white_fade.png');
	color:black;
	height:60px;
	width:400px;
	top:240px;
	padding:10px;
}
#banner_nav{
	list-style-type:none;
	margin:0;
	padding:0;
	border:0;
	position:absolute;
	top:325px;
	left:10px;
	width:300px;
	height:25px;
}
#banner_nav li{
	float:left;
	clear:right;
	width:25px;
	height:25px;
	border:0;
	margin-left:3px;
	padding:5px;
	font-size:10pt;
	text-align:center;
	background:url('bg_black_fade.png');
	color:white;
}
.banner_nav_current{
	background:url('bg_white_fade.png') !important;
	color:black !important;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
var bg_images = new Array('slide0bg.jpg','slide1bg.jpg','slide2bg.jpg','slide3bg.jpg');
var max_banners = bg_images.length;
// these are <li> indexes
var current_banner = 0;
var next_banner = 0;
var last_banner = max_banners-1;
var btimer = null;
$(document).ready(function(){
	$('#banner>li').each(function(){
		$(this).css('background-image','url('+bg_images[$(this).index()]+')');
		$(this).css('z-index','-'+$(this).index());
	});
	make_buttons();
	start_banner();
});
function start_banner()
{
	if(max_banners>1)
	{
		next_banner = current_banner+1;
		btimer = setInterval('rotate_banner()',5000);
	}
}
function set_z_index()
{
	var index = 0;
	var cur_li = next_banner;
	for(var i=0;i<max_banners;i++)
	{
		$('#banner>li').eq(cur_li).css('z-index',index);
		cur_li++;
		if(cur_li==max_banners) cur_li = 0;
		index--;
	}
}
function rotate_banner()
{
	// move next image to far right
	$('#banner>li').eq(next_banner).css('left','770px');
	
	// move to top z-index...#0
	$('#banner>li').eq(next_banner).css('z-index','0');
	
	// move all others to -#...ie: -1,-2,-3,etc...
	if(max_banners>2)
		$('#banner>li').eq(last_banner).css('z-index','-2');
	$('#banner>li').eq(current_banner).css('z-index','-1');
	
	
	// slide in new top banner.
	$('#banner>li').eq(next_banner).animate({'left':'-=770px'},'slow');
	
	
	// update nav
	$('#ban_nav_btn_'+current_banner).removeClass('banner_nav_current')
	$('#ban_nav_btn_'+next_banner).addClass('banner_nav_current')
	
	// set values
	last_banner = current_banner;
	current_banner = next_banner;
	next_banner++;
	if(next_banner==max_banners)
	{
		next_banner=0;
	}
}
function make_buttons()
{
	if(max_banners>1)
	{
		var n=1;
		var add_nav = "<ul id='banner_nav'>";
		for(var i=0; i<max_banners;i++)
		{
			add_nav+= "<li id='ban_nav_btn_"+i+"'";
			if(i==0) add_nav+= " class='banner_nav_current'";
			add_nav+= ">"+n+"</li>";
			n++;
		}
		add_nav+= "</ul>";
		$('#banner_container').append(add_nav);
	}
}
</script>
</head>
<body>
<div id='banner_container'>
<ul id='banner'>
	<li>
		<div class='right_side_container'>
			<div class='ad_box'>
			</div>
			<div class='ad_box'>
			</div>
		</div>
		<div class='main_banner_text'>
			It's Fall!
		</div>
	</li>
	<li>
		<div class='right_side_container'>
			<div class='ad_box'>
			</div>
			<div class='ad_box'>
			</div>
		</div>
		<div class='main_banner_text'>
			It's Summer!
		</div>
	</li>
	<li>
		<div class='right_side_container'>
			<div class='ad_box'>
			</div>
			<div class='ad_box'>
			</div>
		</div>
		<div class='main_banner_text'>
			It's Winter!
		</div>
	</li>
	<li>
		<div class='right_side_container'>
			<div class='ad_box'>
			</div>
			<div class='ad_box'>
			</div>
		</div>
		<div class='main_banner_text'>
			It's Spring!
		</div>
	</li>
</ul>
<div>
</body>
</html>

Chris J
www.redash.org

Use firebug to check if there is really white space.

No more Mister Nice Guy... >: |

Here are two more screen shots that show my firebug window.

http://s5.postimage.org/z8zl234dj/fb_ss1.jpg[^]

http://s5.postimage.org/fsevfk99j/fb_ss2.jpg[^]

I also highlighted the ul in the first one and the li in the second. You can see the code dislayed in the window below which is odd as I did not have line breaks or tabs in my code, soI assume that fire bug is formating it. The generated source looks like this

<ul id="banner_nav"><li id="ban_nav_btn_0" onclick="selectFocus(0);" class="">1</li><li class="" id="ban_nav_btn_1" onclick="selectFocus(1);">2</li><li class="banner_nav_current" id="ban_nav_btn_2" onclick="selectFocus(2);">3</li><li class="" id="ban_nav_btn_3" onclick="selectFocus(3);">4</li></ul>

I do not see any whitespace, but it looks like a css issue with a height of 25px and padding 5px on the li. Firefox, Chrome and Safari do add this. the odd one is IE, but I think IE is correct (I could be wrong).

I had read online that making an element float forces a dislay block on the element which also adds spacing to the bottom, which is what I see here. But I also think that firefox and company are taking my 25px height and 25 px width, and adding the 5px padding to these along the y axis. I suspect that IE is respecting the 25px h+w and forcing the padding to stay with those limits....this is all just guess work on my part, so I am hoping the community has some advice.

I can run the code with the extra spacing, it does not stop it from working, but I would like it to truly look the same on all platforms.

ideas...?

Chris J
www.redash.org

cjoki wrote:
I think IE is correct

That depends on what version of IE. Previous version calculated the box model differently to Firefox etc. Latest versions calculate that in the same way as Firefox etc. http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-did-internet-explorer-get-the-box-model-right/?search_index=1[^]

modified 1-Aug-19 21:02pm.

I am running ie8 on an win xp box

Chris J
www.redash.org

Richard!

You rock!

The box model was it and your link was just the solution. Final screen shot with ff and ie

http://s5.postimage.org/ec7yb5vqf/browser_weirdness_solved.jpg[^]

Now they match up

Chris J
www.redash.org

That was my guess to.
Oh I am to late Smile | :)

No more Mister Nice Guy... >: |

any website or mobile app which is created through this platform will ensure reaching to masses all over the world. HTML5 developers Do a great work and make your work easy far better.