IE Shows space under tabbed navigation bar, FF, Chrome, & Safari Do Not? Help Please

MakingThisSucked Greenhorn

Messages:: 46

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 16

#1

I posted links to pictures so you can see the problem. I also have put the code in quotes here.

Thank you for any help you can give me!

I also have pics of the problem here:

IE: http://xenonsglobal.com/Graphics/eBay/example-non-working.jpg

FF, Chrome, Safari: http://xenonsglobal.com/Graphics/eBay/example-working.jpg

HTML
<div id="end-wrapper">

<div id="nav-wrap">
<div style="float:left; padding:0px; margin:0px;" id="tab" onClick="changeTab(1)"><a class="page-one" href="#THIS WILL BE THE STORE">Visit Our Store!</a></div>
<div style="float:left; padding:0px; margin:0px;" id="tab" onClick="changeTab(2)"><a class="page-two" href="#item" name="item">Item Description</a></div>
<div style="float:left; padding:0px; margin:0px;" id="tab" onClick="changeTab(3)"><a class="page-three" href="#paynship" name="paynship">Payment / Shipping</a></div>
<div style="float:left; padding:0px; margin:0px;" id="tab" onClick="changeTab(4)"><a class="page-four" href="#policy" name="policy">Policy Information</a></div>
<div style="float:left; padding:0px; margin:0px;" id="tab" onClick="changeTab(5)"><a class="page-five" href="#contact" name="contact">Contact Us</a></div>

<div id="content">
<div id="content1">
<div id="content1-content">
<h2> Item Description </h2>
<p> This should be the item description </p>
<p>This is filler content to SEE HOW the margins on each SIDE OF THE PAGE will show, blah blah, lorem lipsum something or other, i need to get that damn add on, it is bad ass. I'm jealous. I wonder if this is going to be long enough yet, shit damn damn shit. HERE ARE SOME CAPS. I think this is gonna be good, i'm going to copy and paste it two times after this though to be sure. NOW TO Copy and PASTE W00T W00T This is filler content to SEE HOW the margins on each SIDE OF THE PAGE will show, blah blah, lorem lipsum something or other, i need to get that damn add on, it is bad ass. I'm jealous. I wonder if this is going to be long enough yet, shit damn damn shit. HERE ARE SOME CAPS. I think this is gonna be good, i'm going to copy and paste it two times after this though to be sure. NOW TO Copy and PASTE W00T W00T This is filler content to SEE HOW the margins on each SIDE OF THE PAGE will show, blah blah, lorem lipsum something or other, i need to get that damn add on, it is bad ass. I'm jealous. I wonder if this is going to be long enough yet, shit damn damn shit. HERE ARE SOME CAPS. I think this is gonna be good, i'm going to copy and paste it two times after this though to be sure. NOW TO Copy and PASTE W00T W00T </p>
</div>
</div>

<div id="content2" style="display:none; padding:0px; margin:0px;">
<div id="content2-content">
<h2> Item Description </h2>
<p> This should be the item description </p>
<p>This is filler content to SEE HOW the margins on each SIDE OF THE PAGE will show, blah blah, lorem lipsum something or other, i need to get that damn add on, it is bad ass. I'm jealous. I wonder if this is going to be long enough yet, shit damn damn shit. HERE ARE SOME CAPS. I think this is gonna be good, i'm going to copy and paste it two times after this though to be sure. NOW TO Copy and PASTE W00T W00T This is filler content to SEE HOW the margins on each SIDE OF THE PAGE will show, blah blah, lorem lipsum something or other, i need to get that damn add on, it is bad ass. I'm jealous. I wonder if this is going to be long enough yet, shit damn damn shit. HERE ARE SOME CAPS. I think this is gonna be good, i'm going to copy and paste it two times after this though to be sure. NOW TO Copy and PASTE W00T W00T This is filler content to SEE HOW the margins on each SIDE OF THE PAGE will show, blah blah, lorem lipsum something or other, i need to get that damn add on, it is bad ass. I'm jealous. I wonder if this is going to be long enough yet, shit damn damn shit. HERE ARE SOME CAPS. I think this is gonna be good, i'm going to copy and paste it two times after this though to be sure. NOW TO Copy and PASTE W00T W00T </p>
</div>
</div>

<div id="content3" style="display:none; padding:0px; margin:0px;">
<div id="content3-content">
<h2> Payment / Shipping </h2>
<p> This should be Payment / Shipping </p>
<p>This is filler content to SEE HOW the margins on each SIDE OF THE PAGE will show, blah blah, lorem lipsum something or other, i need to get that damn add on, it is bad ass. I'm jealous. I wonder if this is going to be long enough yet, shit damn damn shit. HERE ARE SOME CAPS. I think this is gonna be good, i'm going to copy and paste it two times after this though to be sure. NOW TO Copy and PASTE W00T W00T This is filler content to SEE HOW the margins on each SIDE OF THE PAGE will show, blah blah, lorem lipsum something or other, i need to get that damn add on, it is bad ass. I'm jealous. I wonder if this is going to be long enough yet, shit damn damn shit. HERE ARE SOME CAPS. I think this is gonna be good, i'm going to copy and paste it two times after this though to be sure. NOW TO Copy and PASTE W00T W00T This is filler content to SEE HOW the margins on each SIDE OF THE PAGE will show, blah blah, lorem lipsum something or other, i need to get that damn add on, it is bad ass. I'm jealous. I wonder if this is going to be long enough yet, shit damn damn shit. HERE ARE SOME CAPS. I think this is gonna be good, i'm going to copy and paste it two times after this though to be sure. NOW TO Copy and PASTE W00T W00T </p>
</div>
</div>

<div id="content4" style="display:none; padding:0px; margin:0px;">
<div id="content4-content">
<h2> Policies </h2>
<p> This should be the policy information </p>
<p>This is filler content to SEE HOW the margins on each SIDE OF THE PAGE will show, blah blah, lorem lipsum something or other, i need to get that damn add on, it is bad ass. I'm jealous. I wonder if this is going to be long enough yet, shit damn damn shit. HERE ARE SOME CAPS. I think this is gonna be good, i'm going to copy and paste it two times after this though to be sure. NOW TO Copy and PASTE W00T W00T This is filler content to SEE HOW the margins on each SIDE OF THE PAGE will show, blah blah, lorem lipsum something or other, i need to get that damn add on, it is bad ass. I'm jealous. I wonder if this is going to be long enough yet, shit damn damn shit. HERE ARE SOME CAPS. I think this is gonna be good, i'm going to copy and paste it two times after this though to be sure. NOW TO Copy and PASTE W00T W00T This is filler content to SEE HOW the margins on each SIDE OF THE PAGE will show, blah blah, lorem lipsum something or other, i need to get that damn add on, it is bad ass. I'm jealous. I wonder if this is going to be long enough yet, shit damn damn shit. HERE ARE SOME CAPS. I think this is gonna be good, i'm going to copy and paste it two times after this though to be sure. NOW TO Copy and PASTE W00T W00T </p>
</div>
</div>

<div id="content5" style="display:none; padding:0px; margin:0px;">
<div id="content5-content">
<h2> Contact Us </h2>
<p> This should be how to contact us </p>
<p>This is filler content to SEE HOW the margins on each SIDE OF THE PAGE will show, blah blah, lorem lipsum something or other, i need to get that damn add on, it is bad ass. I'm jealous. I wonder if this is going to be long enough yet, shit damn damn shit. HERE ARE SOME CAPS. I think this is gonna be good, i'm going to copy and paste it two times after this though to be sure. NOW TO Copy and PASTE W00T W00T This is filler content to SEE HOW the margins on each SIDE OF THE PAGE will show, blah blah, lorem lipsum something or other, i need to get that damn add on, it is bad ass. I'm jealous. I wonder if this is going to be long enough yet, shit damn damn shit. HERE ARE SOME CAPS. I think this is gonna be good, i'm going to copy and paste it two times after this though to be sure. NOW TO Copy and PASTE W00T W00T This is filler content to SEE HOW the margins on each SIDE OF THE PAGE will show, blah blah, lorem lipsum something or other, i need to get that damn add on, it is bad ass. I'm jealous. I wonder if this is going to be long enough yet, shit damn damn shit. HERE ARE SOME CAPS. I think this is gonna be good, i'm going to copy and paste it two times after this though to be sure. NOW TO Copy and PASTE W00T W00T </p>

</div>
</div

></div>

</div>

</div>
<div style="clear:both; display:none;">
</div>



</div>
Click to expand...

CSS
#end-wrapper {
height:auto;
width:750px;
margin:0px;
padding:0px;
display:block;
text-align:left;
}
#nav-wrap {
width:1000px;
}
#nav-wrap {
width:1000px;
}
#nav-wrap ul li {
display:block;
}
#nav-wrap ul li a {
display:inline;
}
#tab {
display:block;
height:56px;
margin:0px;
padding:0px;
}
#end-wrapper.endone a:hover {
background-image:url(Graphics/New%20Description/Nav-Store.jpg);
background-position: bottom center;
background-repeat:no-repeat;
}

a.page-one {
background-image:url(Graphics/New%20Description/Nav-Store.jpg);
background-repeat:no-repeat;
display:block;
height:63px;
width:260px;
text-indent:-9999px;
margin-bottom:0px;
padding-bottom:0px;
}
a.page-one:hover {
background-image:url(Graphics/New%20Description/Nav-Store.jpg);
background-position: bottom center;
background-repeat:no-repeat;
}
a.page-two {
background-image:url(Graphics/New%20Description/Nav-ItemDescription.jpg);
background-repeat:no-repeat;
background-position: top center;
display:block;
height:63px;
width:194px;
text-indent:-9999px;
margin-bottom:0px;
padding-bottom:0px;
}
a.page-two:hover {
background-repeat:no-repeat;
background-position: bottom center;
}
a.page-three {
background-image:url(Graphics/New%20Description/Nav-PayNShip.jpg);
background-repeat:no-repeat;
background-position: top center;
display:block;
height:63px;
width:232px;
text-indent:-9999px;
margin-bottom:0px;
padding-bottom:0px;
}
a.page-three:hover {
background-repeat:no-repeat;
background-position: bottom center;
}
a.page-four {
background-image:url(Graphics/New%20Description/Nav-Policy.jpg);
background-repeat:no-repeat;
background-position: top center;
display:block;
height:63px;
width:169px;
text-indent:-9999px;
margin-bottom:0px;
padding-bottom:0px;
}
a.page-four:hover {
background-repeat:no-repeat;
background-position: bottom center;
}
a.page-five {
background-image:url(Graphics/New%20Description/Nav-Contact.jpg);
background-repeat:no-repeat;
background-position: top center;
display:block;
height:63px;
width:145px;
text-indent:-9999px;
margin-bottom:0px;
padding-bottom:0px;
}
a.page-five:hover {
background-repeat:no-repeat;
background-position: bottom center;
}
#content {
padding:0;
margin:0;
background-color:#966;
}
#content1 {
}
#content2 {
}
#content3 {
}
#content4 {
}
#content5 {
}
Click to expand...

JAVASCRIPT
<script type="text/javascript" language="javascript">
function changeTab(num){
switch(num){
case 1:
document.getElementById('content1').style.display = '';
document.getElementById('content2').style.display = 'none';
document.getElementById('content3').style.display = 'none';
document.getElementById('content4').style.display = 'none';
document.getElementById('content5').style.display = 'none';
break;
case 2:
document.getElementById('content1').style.display = 'none';
document.getElementById('content2').style.display = '';
document.getElementById('content3').style.display = 'none';
document.getElementById('content4').style.display = 'none';
document.getElementById('content5').style.display = 'none';
break;
case 3:
document.getElementById('content1').style.display = 'none';
document.getElementById('content2').style.display = 'none';
document.getElementById('content3').style.display = '';
document.getElementById('content4').style.display = 'none';
document.getElementById('content5').style.display = 'none';
break;
case 4:
document.getElementById('content1').style.display = 'none';
document.getElementById('content2').style.display = 'none';
document.getElementById('content3').style.display = 'none';
document.getElementById('content4').style.display = '';
document.getElementById('content5').style.display = 'none';
break;
case 5:
document.getElementById('content1').style.display = 'none';
document.getElementById('content2').style.display = 'none';
document.getElementById('content3').style.display = 'none';
document.getElementById('content4').style.display = 'none';
document.getElementById('content5').style.display = '';
break;
}
}
</script>
Click to expand...

MakingThisSucked, Nov 10, 2010 IP

MakingThisSucked Greenhorn

Messages:: 46

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 16

#2

I ended up fixing it, I was fixing paddings and margins and noticed it fixed. No longer needed!

MakingThisSucked, Nov 10, 2010 IP

workingsmart Well-Known Member

Messages:: 411

Likes Received:: 12

Best Answers:: 9

Trophy Points:: 120

#3

Typical IE issues are with PADDING & MARGIN... Glad that you figured it out.. Cheers!~

workingsmart, Nov 10, 2010 IP

Log in or Sign up

IE Shows space under tabbed navigation bar, FF, Chrome, & Safari Do Not? Help Please

MakingThisSucked Greenhorn

MakingThisSucked Greenhorn

workingsmart Well-Known Member

Useful Searches