creating a horizontal line (IE/NS) ?!?

very strange difference of translating this table tag

[boko]

I have got the following table created:

<table width="200" border="0" cellspacing="0" cellpadding="0" height="200">
<tr>
<td></td>
<td align="right" bgcolor="#000000" width="1"><img src="images/#000000spacer.gif" width="1" height="1"></td>
</tr>
</table>

This generates a great 1 pixel black horizontal line in IE5, but this same code gives me in NS4.75 the actual pixel in white (1x1)and a black filled background with unexplained measurements (?)

Can someone advice on how to create a solid 1pixel horizontal line for Netscape viewers ?

Much appreciated

Marcellino

[rencke]

"Welkom" to WebmasterWorld Marcellino.

I and my fellow moderators hope that you will like this place. It is like a "University of Search Engine Optimization and Webmaster Techniques", with an enormous amount to read - at present more than 25.000 posts.

My learned collegues will be along shortly with an answer to your question - if it is not already here. You are not the first one to tear your hair over the problem of making things look right in both NS and IE at the same time. I just wanted to greet you welcome.

If you visit the European forum, where I am the moderator, please take a moment to view the charter [webmasterworld.com], where you will find information about the forum. Because of its special fact finding nature, it has more than 40 continuously ongoing discussions - one for each country. In order to view them all, you will need to set the list box at the bottom of the forum menu page to "Show All Post". Or just click here [webmasterworld.com].

If you are new to SEO (search engine optimization) there are two classical discussions that I recommend you to read: "One size fits all SEO" [webmasterworld.com] and "Thou shalt not..." [webmasterworld.com]

Jan Rencke

[tedster]

Welcome, boko!

Yes, Netscape and MSIE prioritize the table attributes differently, as you've discovered.

When I want a horizontal line of an exact pixel width, I usually create a 1-pixel gif in the exact color I want, in your case black. Then I use the browser to re-draw the gif to the dimensions needed -- e.g.

<img src="black.gif" width="200" height="1">.

This works well for any color I have in the page's color scheme -- I can quickly have the browser draw a rectangle of any dimension in that accent color, with no further download time and no browser compatibility challenges.

Because the gif is a solid color, no harm comes from changing the dimension with the browser.

Edited by: tedster

[Xoc]

Nice tip, tedster!

[DaveAtIFG]

Be sure to include a border="0" attribute too. I think the default is a 1 pixel border if it's left undefined and this will make a 1X1 gif render as 3X3.

[boko]

Thanks a lot. That border is indeed an important item to make it work.

This was my entry in this forum and i am sure i will visit more often.

Great

Marcellino

[EX_S]

Unless I'm missing the point here, there's a very simple solution:

<HR SIZE=1 COLOR="#000000" WIDTH="200">

This produces a 1 pixel horizontal line in plain black.

True, "COLOR" is not a valid attribute for HR in HTML 4.0, but MSIE, NS 4.7 and Opera all render it as intended.

[unicorn11]

EX_S

is right and noshade to it and will have no shading the only problem occured in this that there is a little space left on top and bottom

regards
Abhishek

[boko]

That's right. We are talking here about horizontal lines, but my idea was to have a overall solution for all kind of lines in any usage for all the browsers (vert/horz.).

But for the horz. rule this is indeed a good solution.

And as far as i know the only color that works is black, any other HEX gives the visual color grey (?)

P.S. i saw i did mention only horizontal in my first post, sorry.

[knighty]

NO, NO, NO

The best way to make a horizontal OR vertical line is to first as Tedster said first create a 1x1 pixel in the colour that you want the line to be.

Then simply place the pixel in its own cell, colour the background to the same as the pixel, change the cell width to 1 and change the other cell widths so that the whole table adds up. (this is only if you are doing a vertical line) If you simply want to place a horizontal line either specify the pixel size to a width of 1 and length of X OR stick it in its own cell without changing the size and set the background colour to match.

and thats it! this will work in all browsers (honest)

As for the first post by Boko the reason it wasnt showing up properly was cos you set the height of the table and NOT the cells

[knighty]

I have got the following table created:

<table width="200" border="0" cellspacing="0" cellpadding="0" height="200">
<tr>
<td></td>
<td align="right" bgcolor="#000000" width="1"><img src="images/#000000spacer.gif" width="1" height="1"></td>
</tr>
</table>

This generates a great 1 pixel black horizontal line in IE5, but this same code gives me in NS4.75 the actual pixel in white (1x1)and a black filled background with unexplained measurements (?)

Can someone advice on how to create a solid 1pixel horizontal line for Netscape viewers ?

Much appreciated

Marcellino

Heres how it should look...

<table width="200" border="0" cellspacing="0" cellpadding="0" height="200">
<tr>
<td height="199"></td>
<td align="right" bgcolor="#000000" width="1" height="1"><img src="images/#000000spacer.gif" width="1" height="1"></td>
</tr>
</table>

but you could avoid the whole thing simply by just leaving out the table height

[gmiller]

Well, you could use CSS borders to get lines. That works nicely on 4.x+ browsers and doesn't screw things up horribly on older browsers.

[boko]

Thanks again.

With all the advices in mind i have made it work for all browsers.

Marcellino

[knighty]

>Well, you could use CSS borders to get lines. That works nicely on 4.x+ browsers and doesn't screw things up horribly on older browsers.

Unfortuently doesnt show up in Netscape, at least on Mac anyway :(

[gmiller]

Hrm, really? Works on NN4 with Windows. There is a problem with specify combined borders instead of specifying them individually (e.g., border-bottom-style, etc).

One more reason to hope NS6.5 finally kills off NN4.x :)

[knighty]

Waaaahh! No worky,

I really would like to be able to use this but NN on both PC and Mac is not liking it. I have tried to specify border individually and every other way.

Whats the code you are using perhaps I am missing something?

******* OK went to your site (profile) and used the exact code from your style sheet nd it doesnt work in NN on Mac or PC. Perhaps you are testing it on a higher version of netscape?

[gmiller]

I'm testing it with NN4.76 on Windows. It incorrectly generates a little extra space around the border, but that's it.

Which version are you using?

[knighty]

On the Mac im using 4.7
On the PC 4.8.0.2
On another PC 4.6 (i think)

[gmiller]

Hrm... what's 4.8.0.2?

Have you had any problems with it viewing my site (other than the mildly annoying gapping I mentioned)? Do you have a sample URL for me to look at?

[knighty]

I think im going to give up on using borders I took your code from your site as is and i still couldnt get it to work. I have used NN 4.8 and 4.6 on different PC's and they always crash when trying to bring up your site.

[gmiller]

I haven't been able to find any reference to an NN4.8 on Netscape's web page on in their browser archives. I'm downloading 4.6 for testing, so hopefully I can get this figured out.

Can anyone else confirm that the site in my profile crashes any NN 4.x versions?

[tedster]

No crash in NN4.7 but you might not like the way it displays.

The main body of text is superimposed over the border of the left hand nav section, and the CSS dictated font in the main section gets lost after the first paragraph and reverts to whatever the user default font is. Both these are common Netscape bugs.

[knighty]

You can find all the previous Netscape Browsers here including 4.8

[home.netscape.com...]

NN 4.7 on the mac will bring the site up but with similar results to what Tedster described.

I have tried NN4.6 (PC) at home and NN4.8 (PC) at work I have'nt been able to view your site on either.

Explorer, NN6 and Opera are all fine with the site.

[gmiller]

> You can find all the previous Netscape Browsers here including 4.8

Ah! 4.08! That explains it. I dug through the RichInStyle bug list some more... Did it crash for you on a page with a table?

> The main body of text is superimposed over the border of the left hand nav section, and the CSS dictated font in the main section gets lost after the first paragraph and reverts to whatever the user default font is. Both these are common Netscape bugs.

With the sheer number of times I've looked at that page in NN4, I can't believe I failed to notice the font problem.

I haven't been able to reproduce the overlap... What screen resolution? Are you on 4.76?

I may have to just break down and go back to a table for the columns. NN4 has already defeated every other three column formatting technique I know of. Maybe NN4 should have stuck to CSS1, eh?

[tedster]

Greg, I posted a screenshot [mewsgroup.com] for you. I was running a PC at 800x600, with Netscape Communicator 4.7 (first release).

If the later 4.7's don't do this, no biggie, I'd say. I see this kind of overlap several times a week, so I've grown accustomed to it.

I also noticed that the font is behaving differently on your page today. The first time I visited, paragraph 1 was sans-serif, then it switched to serif (Times New Roman is set as default).

<Off Topic>
From your contributions here, I know that you're deep into browser technology and HTML. Have you seen this thread [webmasterworld.com], where we're looking for a way to get Netscape to zero out the bottom margin in an H tag? I just thought you might have some insight on the issue.

[gmiller]

I just rebuilt the layout with a table... Hopefully, that'll solve the problems with NN4.

The vertical overlap inside the navigation bar is something I've seen before. I thought I had it worked around with a 1px margin, but apparently not on every version of NN4.

While experimenting in order to work around NN4's percent width bugs inside tables, I happened to notice that NN4 just won't seem to draw a border on a table cell via CSS. It appears you have to wrap the contents in a div in order to use borders for a horizontal or vertical line--and NN4 goes crazy if you try to put a percent width on that div. I'm using a px width nav bar with borders on px width divs to get around this at the moment.

[boko]

Well, it seems to whirl some browser-dust, this topic !

I use MM Dreamweaver for building my sites and in the extension download section of the MM site, there is a extension that seems to work in both IE and NN (based on the 1x1 pixel tables). It gives also the choice of defining lines for your rows and columns within a table.

[tedster]

Greg, it's looking good on my system now with Netscape. No overlapping, and the font stays consistent.

It's also working fine for me in MSIE 5.5. You've got some kind of special font on the left hand menu that shows in MSIE, but not Netscape. Are you embedding that font in Explorer?

All in all, a nice XHTML page -- inspiring work.