Click here to Skip to main content
11,709,375 members (38,528 online)

Web Development

 
QuestionUDDI and tmodel Pin
nagesh1019-Oct-12 4:59
membernagesh1019-Oct-12 4:59 
QuestionChat via Internet Pin
dungSoft12311-Oct-12 0:21
groupdungSoft12311-Oct-12 0:21 
AnswerRe: Chat via Internet Pin
Mohibur Rashid11-Oct-12 19:30
memberMohibur Rashid11-Oct-12 19:30 
AnswerRe: Chat via Internet Pin
dungSoft12316-Oct-12 7:26
groupdungSoft12316-Oct-12 7:26 
GeneralRe: Chat via Internet Pin
Mohibur Rashid16-Oct-12 15:14
memberMohibur Rashid16-Oct-12 15:14 
AnswerRe: Chat via Internet Pin
Joan Murt16-Oct-12 19:47
memberJoan Murt16-Oct-12 19:47 
QuestionEntityFramework and MVC3 Pin
satish gorakati10-Oct-12 20:47
membersatish gorakati10-Oct-12 20:47 
Questionbrowsers adding whitespace to display (solved) Pin
cjoki4-Oct-12 6:03
membercjoki4-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...?

<!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
membern.podbielski9-Oct-12 3:59 
GeneralRe: browsers adding whitespace to display Pin
cjoki9-Oct-12 5:02
membercjoki9-Oct-12 5:02 
GeneralRe: browsers adding whitespace to display Pin
Richard A. Abbott9-Oct-12 5:27
memberRichard A. Abbott9-Oct-12 5:27 
GeneralRe: browsers adding whitespace to display Pin
cjoki9-Oct-12 5:49
membercjoki9-Oct-12 5:49 
GeneralRe: browsers adding whitespace to display Pin
cjoki9-Oct-12 6:04
membercjoki9-Oct-12 6:04 
GeneralRe: browsers adding whitespace to display Pin
n.podbielski9-Oct-12 6:15
membern.podbielski9-Oct-12 6:15 
GeneralRe: browsers adding whitespace to display Pin
shanucis17-Oct-12 3:49
membershanucis17-Oct-12 3:49 
General.NET is Hell (subtitle: An error message from Microsoft) Pin
BCantor4-Oct-12 4:45
memberBCantor4-Oct-12 4:45 
GeneralRe: .NET is Hell (subtitle: An error message from Microsoft) Pin
Peter_in_27804-Oct-12 12:05
memberPeter_in_27804-Oct-12 12:05 
GeneralRe: .NET is Hell (subtitle: An error message from Microsoft) Pin
BCantor4-Oct-12 12:10
memberBCantor4-Oct-12 12:10 
Questionprinting on client's printer from web application running on server Pin
SKABBASJ2-Oct-12 0:27
memberSKABBASJ2-Oct-12 0:27 
AnswerRe: printing on client's printer from web application running on server Pin
SKABBASJ2-Oct-12 0:29
memberSKABBASJ2-Oct-12 0:29 
AnswerRe: printing on client's printer from web application running on server Pin
Pete O'Hanlon2-Oct-12 2:10
protectorPete O'Hanlon2-Oct-12 2:10 
QuestionRTL Mobile website bad format on a Samsung Star mobile Pin
Ahmad Safwat30-Sep-12 3:25
memberAhmad Safwat30-Sep-12 3:25 
QuestionSMS URL on htc mobile Invalid Recipient error Pin
Ahmad Safwat30-Sep-12 3:24
memberAhmad Safwat30-Sep-12 3:24 
QuestionDialog auto-resize Pin
awedaonline27-Sep-12 8:25
memberawedaonline27-Sep-12 8:25 
AnswerRe: Dialog auto-resize Pin
VijayChauhan1237-Oct-12 21:01
memberVijayChauhan1237-Oct-12 21: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
Web04 | 2.8.150819.1 | Last Updated 31 Aug 2015
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid