Click here to Skip to main content
       

Web Development

 
QuestionUDDI and tmodel Pinmembernagesh1019-Oct-12 5:59 
QuestionChat via Internet PingroupdungSoft12311-Oct-12 1:21 
AnswerRe: Chat via Internet PinmemberMohibur Rashid11-Oct-12 20:30 
AnswerRe: Chat via Internet PingroupdungSoft12316-Oct-12 8:26 
GeneralRe: Chat via Internet PinmemberMohibur Rashid16-Oct-12 16:14 
AnswerRe: Chat via Internet PinmemberJoan Murt16-Oct-12 20:47 
QuestionEntityFramework and MVC3 Pinmembersatish gorakati10-Oct-12 21:47 
Questionbrowsers adding whitespace to display (solved) Pinmembercjoki4-Oct-12 7:03 
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...?
 
<!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

AnswerRe: browsers adding whitespace to display Pinmembern.podbielski9-Oct-12 4:59 
GeneralRe: browsers adding whitespace to display Pinmembercjoki9-Oct-12 6:02 
GeneralRe: browsers adding whitespace to display PinmemberRichard A. Abbott9-Oct-12 6:27 
GeneralRe: browsers adding whitespace to display Pinmembercjoki9-Oct-12 6:49 
GeneralRe: browsers adding whitespace to display Pinmembercjoki9-Oct-12 7:04 
GeneralRe: browsers adding whitespace to display Pinmembern.podbielski9-Oct-12 7:15 
GeneralRe: browsers adding whitespace to display Pinmembershanucis17-Oct-12 4:49 
General.NET is Hell (subtitle: An error message from Microsoft) PinmemberBCantor4-Oct-12 5:45 
GeneralRe: .NET is Hell (subtitle: An error message from Microsoft) PinmemberPeter_in_27804-Oct-12 13:05 
GeneralRe: .NET is Hell (subtitle: An error message from Microsoft) PinmemberBCantor4-Oct-12 13:10 
Questionprinting on client's printer from web application running on server PinmemberSKABBASJ2-Oct-12 1:27 
AnswerRe: printing on client's printer from web application running on server PinmemberSKABBASJ2-Oct-12 1:29 
AnswerRe: printing on client's printer from web application running on server PinprotectorPete O'Hanlon2-Oct-12 3:10 
QuestionRTL Mobile website bad format on a Samsung Star mobile PinmemberAhmad Safwat30-Sep-12 4:25 
QuestionSMS URL on htc mobile Invalid Recipient error PinmemberAhmad Safwat30-Sep-12 4:24 
QuestionDialog auto-resize Pinmemberawedaonline27-Sep-12 9:25 
AnswerRe: Dialog auto-resize PinmemberVijayChauhan1237-Oct-12 22:01 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.


Advertise | Privacy | Mobile
Web02 | 2.8.141223.1 | Last Updated 26 Dec 2014
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid