IE vs NS web design

[erucader]

So I was designing a web site for me and a few friends, I wrote up all the code for a frameset and table layout using Notepad and previewed in IE6. The site looks great, I upload it and it looks fine in Internet Explorer. Then when I try viewing it in Netscape (and my friend who uses Opera) - the layout gets messed up. It's not too bad, but not what I wanted.

Here is what I want it to look like ...

[erucader]

posting another screenshot in a sec...

the site address is geocities.com/erucader if anyone wants to look at it.

Will using a program like Dreamweaver or FrontPage make it look the same in every browser??

[erucader]

here it is in Netscape

[Psychodic_Greak]

Im not 100% sure there erucader, but u can try it.

I believe that everyone has I.E. so until you figure a way to help the design, u can add text saying "For best viewing, please use I.E. 5 and up.

[erucader]

well, the bordercolor commands, i think are HTML4.0 but thats old news now - or do some browsers not support it?

but yeah I put that on my pages with the &copy

[mairving]

Don't put the best viewed with IE. For one it irritates people by telling them to use a different browser. People used to say that on their pages maybe 5 or 6 years ago but it is dated now. Bordercolor is not part of HTML 4.0. It is primarily IE but with limited support in other browsers. There are better cross-browser ways to do borders than bordercolor. Learn also to use " quotes around your tags and attributes. Other things like font and center tags are deprecated. Learn a little CSS and control your font formatting that way.

To remove margins in IE, topmargin="0" leftmargin="0".
To remove margins in NS, marginwidth="0" marginheight="0".
All in your body tag. You can also control margins using CSS.

Learn how to format text properly. Instead of using the BR, use P. You can also set an indent that works crossbrowser without all of the nbsp's. Here is how build a stylesheet with a .css extension, link to it in the HEAD section of your webpage like
<LINK REL="STYLESHEET" TYPE="text/css" HREF="stylesheet.css">:
Here is how to set an indent in the paragraph. I also specify px instead of fonts for a cleaner look. Verdana is also the best web font out there.

PHP Code:

P { font-family: verdana, helvetica, arial, geneva, lucida, sans-serif; color:#000000; font-size:12px; text-indent:24px } 


If you like, I can send you a stylesheet that I use pretty regular.

Quoting all of your tags and attributes and removing the bordercolor tags will make your site look better in NS.

[erucader]

thanks for all the info!
1 what is a better way for borders?
2 i know I'm supposed to "" all my tags but since I write them manually, and I'm lazy ... well
3 I am using a CSS file, but if you can send me that one for some hints it would be great
4 I'm sure its in the stylesheet, but what should I use in place of center and font tags?

Thanks for all this help. I do like the stylesheet but I seem to remember a while ago that NS didn't follow it well. Maybe it was just me..

[mairving]

1.) For borders, you can either use a spacer, which is a clear gif file that is one px by one px. Since it is transparent, you can make it any color or size that you want.
3.) I have attached a css file as a .txt file. Just change the extension to .css and it will work. I don't use everything in this stylesheet but it comes in handy when I need it.
4.) Instead of center, use align="center". Instead of font tags use the classes in the stylesheet. For instance, their is something that looks like this: td { font-family:verdana, helvetica, arial, geneva, lucida, sans-serif; font-size:12px } . This means that every <td> tag uses this style. If you want to use a different style, then you would call another class, like so <td class="classname"> . The class names in the stylesheet begin with a period.

[mairving]

Stylesheet:

[erucader]

wow thanks!

will all browsers render -all- the commands on the stylesheet?

[mairving]

Support is decent cross-browser. Some things work, some things don't. Small fonts less than 8px or so don't work well in NS. The text indent works fine cross-browser. The link rollovers from not underlined to underlined don't work in NS. But everything else works pretty well.

[erucader]

thanks for all the great advice. but I still have a couple of q's...

1. I want a heading for certain paragraphs like this:

heading
------Paragraph Text starts here (indented)

It works good with the stylesheet but there is an extra line in between (the head and pgf are in seperate &lt p &gt 's
Is there a better way to do this?

2. I have a gallery on another site where you see thumbnails of pics, then when you click it a java driven window pops up to display it. I have attached the code so you can see what I'm talking about: each thumbnail is layed out with a label over a frame. This tr is simply repeated for each picture. This totally doesn't work in Netscape - I have no idea why.

btw its not the java thats the problem, just the layout of this table cell.

if you can figure why it would be really helpful!

[glc]

I haven't looked at your code, because I do not know HTML worth a darn, but I have found that Netscape has a hissy fit if any tags and tables are not properly closed.

[erucader]

thats what I'm guessing, but can't find a problem...

[mairving]

Post the rest of the javascript. Usually in the head section of the page.

[scalifash]

regarding your question about using frontpage or dreamweaver; no it's nto going to make it look the same in netscape as it would in IE, same goes for if you use Netscape's Composer to make your website, it's not going to look the same in IE as it does in composer or netscape. When I am designing my pages (I like to hand code using frontpage because of the way it publishes etc.) I just design it for internet explorer. Netscape is such a minority now it's not funny, with decent browsers like IE on windows, Safari on os-x, and konqueror on linux, there's really no need to resort to netscape.

But, if it's imperative that it looks the same in both browsers, you can use another little trick which I like. It will take longer to load but if it needs to look the same it's the best way to do it.

Create a big old JPG image with your site in it, put it on the page and do an image map, it's sort of the cowards way out lol but it works.

[erucader]

here's the code for the page. The code to link for each image repeats like 20 times, so I cut most of it out. But this is the general idea

scalifash: It doesn't need to look the same, but if you load this code in Netscape you can see what I'm talking about - it totally messes it up.

[erucader]

mairving, you can see it at http://geocities.com/erucader/rip/gal1.html ... it has the pictures and stylesheet in place so you can see what it's supposed to look like

btw, thanks for all the great advice!

[erucader]

well, this thread helped me out a lot, but there is still one thing I can't get to work.

I have some songs that I recorded, then ripped to the puter in mp3 format to keep the sizes down. I'm trying to find a command that will play a song linked into a page. I can get it to play for me - with Quicktime, but it doesn't work on other computers. Is there a way to make WMP play it?

[Fuze]

what's the percentage of IE users vs. others (netscape, opera, etc)

[aym]

Originally posted by erucader well, this thread helped me out a lot, but there is still one thing I can't get to work. I have some songs that I recorded, then ripped to the puter in mp3 format to keep the sizes down. I'm trying to find a command that will play a song linked into a page. I can get it to play for me - with Quicktime, but it doesn't work on other computers. Is there a way to make WMP play it?

Hi erucader, here is a way to do it.

[erucader]

aym, thank for the reply. I actually get most of my info from that site, and I haven't been able to get that to work.

Fuze - I know most people use IE, but if anyone comes through with another browser that makes my work look trashy, well it doesn't say mush for me