browsers adding whitespace to display (solved)
-
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...?
*{
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;
}
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(</x-turndown> -
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...?
*{
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;
}
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(</x-turndown>Use firebug to check if there is really white space.
No more Mister Nice Guy... >: |
-
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
-
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[^]
-
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[^]
I am running ie8 on an win xp box
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[^]
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
-
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 :)
No more Mister Nice Guy... >: |
-
Use firebug to check if there is really white space.
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.
