Click here to Skip to main content
16,008,490 members
Home / Discussions / Web Development
   

Web Development

 
AnswerRe: What every beginner should know about website development? Pin
L Viljoen30-Oct-12 2:30
professionalL Viljoen30-Oct-12 2:30 
GeneralRe: What every beginner should know about website development? Pin
jkirkerx31-Oct-12 7:03
professionaljkirkerx31-Oct-12 7:03 
GeneralRe: What every beginner should know about website development? Pin
Zamshed Farhan13-Jan-13 22:40
Zamshed Farhan13-Jan-13 22:40 
QuestionRoR + SQL server resources Pin
Md. Marufuzzaman19-Oct-12 20:04
professionalMd. Marufuzzaman19-Oct-12 20:04 
AnswerRe: RoR + SQL server resources Pin
User 171649220-Oct-12 0:27
professionalUser 171649220-Oct-12 0:27 
GeneralRe: RoR + SQL server resources Pin
Md. Marufuzzaman20-Oct-12 2:09
professionalMd. Marufuzzaman20-Oct-12 2:09 
QuestionUDDI and tmodel Pin
nagesh1019-Oct-12 4:59
nagesh1019-Oct-12 4:59 
QuestionChat via Internet Pin
dungSoft12311-Oct-12 0:21
dungSoft12311-Oct-12 0:21 
AnswerRe: Chat via Internet Pin
Mohibur Rashid11-Oct-12 19:30
professionalMohibur Rashid11-Oct-12 19:30 
AnswerRe: Chat via Internet Pin
dungSoft12316-Oct-12 7:26
dungSoft12316-Oct-12 7:26 
GeneralRe: Chat via Internet Pin
Mohibur Rashid16-Oct-12 15:14
professionalMohibur Rashid16-Oct-12 15:14 
AnswerRe: Chat via Internet Pin
Joan M16-Oct-12 19:47
professionalJoan M16-Oct-12 19:47 
QuestionEntityFramework and MVC3 Pin
satish gorakati10-Oct-12 20:47
satish gorakati10-Oct-12 20:47 
Questionbrowsers adding whitespace to display (solved) Pin
cjoki4-Oct-12 6:03
cjoki4-Oct-12 6: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...?

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

AnswerRe: browsers adding whitespace to display Pin
n.podbielski9-Oct-12 3:59
n.podbielski9-Oct-12 3:59 
GeneralRe: browsers adding whitespace to display Pin
cjoki9-Oct-12 5:02
cjoki9-Oct-12 5:02 
GeneralRe: browsers adding whitespace to display Pin
User 17164929-Oct-12 5:27
professionalUser 17164929-Oct-12 5:27 
GeneralRe: browsers adding whitespace to display Pin
cjoki9-Oct-12 5:49
cjoki9-Oct-12 5:49 
GeneralRe: browsers adding whitespace to display Pin
cjoki9-Oct-12 6:04
cjoki9-Oct-12 6:04 
GeneralRe: browsers adding whitespace to display Pin
n.podbielski9-Oct-12 6:15
n.podbielski9-Oct-12 6:15 
GeneralRe: browsers adding whitespace to display Pin
shanucis17-Oct-12 3:49
shanucis17-Oct-12 3:49 
General.NET is Hell (subtitle: An error message from Microsoft) Pin
MacSpudster4-Oct-12 4:45
professionalMacSpudster4-Oct-12 4:45 
GeneralRe: .NET is Hell (subtitle: An error message from Microsoft) Pin
Peter_in_27804-Oct-12 12:05
professionalPeter_in_27804-Oct-12 12:05 
GeneralRe: .NET is Hell (subtitle: An error message from Microsoft) Pin
MacSpudster4-Oct-12 12:10
professionalMacSpudster4-Oct-12 12:10 
Questionprinting on client's printer from web application running on server Pin
SKABBASJ2-Oct-12 0:27
SKABBASJ2-Oct-12 0:27 

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

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