Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

netscape layout. Has anyone had this problem?

Status
Not open for further replies.
joelwenzel

joelwenzel

Programmer
Jun 28, 2002
448
I've started giving a webpage I'm working on a decent layout and I started by creating a tab sheet. It looks great in explorer but in netscape, there is a line space at the top between the tabs and the sheet. The way it works is that the tabs are in a table while the main sheet is just within a span tag. I cannot figure out why netscape has inserted a line between the table and the span.

I've tried setting margin to 0, vertical-align: bottom for the table

 
Sort by date Sort by votes
Can you post a link to your site or the code so we can take a look?


É

endamcg-logo1b.gif

 
Upvote 0 Downvote
make sure in your html that the span tag is right next to the closing table tag, eg

...</td></tr></table><span>...</span>

spaces between the tags sometimes screws up formatting
 
Upvote 0 Downvote
Unfortunately I'm not running off a server yet. Here is the bar bones code though. Just cut and paste and it should show you my problem.



<script language=&quot;javascript&quot;>

//**********************************************
// toggle(btn)
//**********************************************/
function toggle(btn)
{
var bMoreTabs = true;
var i = 1;

do {
//see if there are any tab sheets and if so, make the selected sheet visible
try
{
if(i==btn)
{
document.getElementById(&quot;HideShowp&quot;+i).style.display = &quot;block&quot;;
document.getElementById(&quot;tabP&quot;+i).style.borderBottomStyle = &quot;none&quot;;
document.getElementById(&quot;tabP&quot;+i).style.background = &quot;#eeeeee&quot;;
}
else
{
document.getElementById(&quot;HideShowp&quot;+i).style.display = &quot;none&quot;;
document.getElementById(&quot;tabP&quot;+i).style.borderBottomStyle = &quot;solid&quot;;
document.getElementById(&quot;tabP&quot;+i).style.background = &quot;#e3e3e3&quot;;
}
}
catch(errorObject)
{
bMoreTabs = false;
}

i++;
}while(bMoreTabs)
}
</script>

<html>
<head>

<style type=&quot;text/css&quot;>
#HideShowp1, #HideShowp2,#HideShowp3,#HideShowp4,#HideShowp5
{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:1px solid #000000;
background-color:#eeeeee;
padding: 1px;
width:100%;
}

#space
{
background-color:#eeeeee;
border-right:1px solid #000000;
border-left:1px solid #000000;
}

#tabP1, #tabP2, #tabP3, #tabP4, #tabP5
{
background-color: #eeeeee;
border: 1px solid #000000;
color: #000000;
font: bold;
text-align: center;
cursor: hand;
width: 40px;
margin:0px;
padding:0px
}

#tabTable
{
width: 100%;
border-collapse: collapse;
margin: 0px;
padding: 0px;
}

#tabFiller
{
width:1px;
border-bottom:1px solid #000000;
/*border:1px solid #000000;*/
background: transparent;
border-top-style:none;
}
</style>
</head>
<body>

<!-- -------------------Tabs ---------------------- -->
<table id=tabTable>
<tr style=&quot;margin: 0px;padding:0px&quot;>
<td id=tabP1 style=&quot;cursor:pointer&quot; onclick=&quot;toggle(1);&quot;>P1</td><td id=tabFiller></td>
<td id=tabP2 style=&quot;cursor:pointer&quot; onclick=&quot;toggle(2);&quot;>P2</td><td style=&quot;padding:0px;margin:0px;border-bottom: 1px solid black&quot;> </td>
</tr>
</table><span id=HideShowp1>
<!------------------------------------------tab1--------------------------------->
This is the first tab. <br>
This is the first tab. <br>
This is the first tab. <br>
This is the first tab. <br>
This is the first tab. <br>
This is the first tab. <br>
This is the first tab. <br>
This is the first tab. <br>
This is the first tab. <br>
This is the first tab. <br>
This is the first tab. <br>
This is the first tab. <br>
</span>
<span id=HideShowp2>
<!------------------------------------------tab2--------------------------------->
This is the Second tab. <br>
This is the Second tab. <br>
This is the Second tab. <br>
This is the Second tab. <br>
This is the Second tab. <br>
This is the Second tab. <br>
This is the Second tab. <br>
This is the Second tab. <br>
This is the Second tab. <br>
This is the Second tab. <br>
This is the Second tab. <br>This is the Second tab. <br>
</span>

<script language=&quot;javascript&quot;>
//initialize tabs
toggle(1);
</script>

</body>
</html>
 
Upvote 0 Downvote
Hi,

first step would be what sjravee suggested. remove any spaces in your table, close up all that code cos it can be a common problem!

I'll take a closer look at the code after if it doesnt work.


É

endamcg-logo1b.gif

 
Upvote 0 Downvote
Thanks for all your help :)

I tried getting rid of all the spaces between the table tags and the span tags but it did not fix my problem. I probably should have mentioned that the space is only about 1px high. I figured that a formatting error due to table spaces would be one <br> high but I'm not really sure.
 
Upvote 0 Downvote
I also noted that you last table cell has no contents, this is a sure fire way to add unwanted spacing in Netscape, add a &nbsp; in the cell or a 1*1px transparent gif. If a cell has no content in Netscape then the cell attributes and styles are not rendered
 
Upvote 0 Downvote
it's supposed to contain a &nbsp. It didn't show up when I made the post. Just to be safe though, I add some random characters but to no avail
 
Upvote 0 Downvote
put your script in the head tag not before the HTML tag. Also get rid of the inline style in the tr tag and change your table tag to:

<table id=tabTable cellpadding=0 cellspacing=0>
 
Upvote 0 Downvote
sjravee and cian, you guys rock.

getting rid of the inline tr tag and putting cellpadding/cellspacing equal to 0 solved my problem. One thing I noticed is that you suggested putting the script tag in the head tags. I normally leave my javascript at the top because it is easy to find but I have read that by putting it in the head tags, it is executed first on loading the page. Is that the only benefit?
 
Upvote 0 Downvote
Even if moving the script has no effect it should always be put in the head of the document!! Thats the rule!
As for benefits? ? You never know that in some browsers it may not work unless its in the head! You also want your code to conform right?

Can I ask you where you got the script? I have something similar which is not working, yours is better! :)

One other thing I noticed is that sometimes Netscape does not recognise some border specifications! I had this problem
when putting a border on one side of a table, in N4.7 it wouldnt work and I couldnt find a way to make it work.



É

endamcg-logo1b.gif

 
Upvote 0 Downvote
I wrote it. For some reason it never struck me that some browsers wouldn't be able to read it but now that you mention it, it's probably true, probably with some older browsers
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
987
bdwilcox
bdwilcox
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
387
tyutghf
tyutghf
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
1K
PeDa
PeDa
dvannoy
  • Locked
  • Question
Simple Layout
Replies
3
Views
373
vacunita
vacunita
Carlvic
  • Locked
  • Question
How can i make layout 2 columns 2
Replies
3
Views
402
Carlvic
Carlvic

Part and Inventory Search

Sponsor

Back
Top