IE-NN incompatibility (spacing, div, no-repeat,...)

[wladzimier]

Dear gurus:<br><br>I made a Web site (by hand) that looks perfect (or at least so I think ) in Internet Explorer, while in Netscape Navigator it looks awful and many things don't work, such as rollover images, mousover effects, submit buttons, JavaScript functions; positioning is awful. <br><br>So what would be your advice? Are there some known techniques or/and strategies for solving this problem? Are there any good Web resources about optimizing Web-site for NN, if it were made for IE originially...<br><br>To make things clearer I'd like to explain some glitches I've already encountered. I experienced the following problems:<br><br>1) There is no way to have background with &lt;tt&gt;no-repeat&lt;/tt&gt; option.<br>2) Some mouse-overs work, while others don't.<br>3) Even with &lt;tt&gt;Cellpadding&lt;/tt&gt; and &lt;tt&gt;Cellspacing&lt;/tt&gt; set to zero<br>tables still get some extra padding<br>4) &lt;tt&gt;DIV&lt;/tt&gt; tag doesn't seem to be working<br>5) The link tag in the HEAD section:<br>&lt;tt&gt;&lt;LINK REL=&quot;stylesheet&quot; HREF=&quot;some_sheet_of_mine.css&quot; TYPE=&quot;text/css&quot;&gt;&lt;/tt&gt;<br>doesn't seem to be recognized<br>6) i cannot set &lt;tt&gt;top-margin&lt;/tt&gt; and &lt;tt&gt;left-margin&lt;/tt&gt; of body to 0em, so it never can touch the toolbar...<br><br>Any &lt;b&gt;solutions&lt;/b&gt; or &lt;b&gt;work-arounds&lt;/b&gt; available for the above mentioned problems?<br><br>Thanks a lot in advance!<br>W.K.<br><br><br>

 

[carpeliam]

First thing I'd ask is if you could post the URL to this page that works in IE but not in NN- there are 2 different possible reasons why it may not look right (#1, Netscape's lack of standards compliance, and #2, a somewhat skewed item-specific strict adherance to &quot;rules&quot. So could you please post the URL for the particular page in question?<br><br>Second- look into some basic CSS solutions. Microsoft's no-repeat background (in the body tag) is MS-specific proprietary, and I'm not sure if it's even supported by the W3C. However, I'm sure that CSS background is standards-compliant, and I think I've managed to get a non-repeating background with Netscape using this method (can't remember if it worked). As far as the &lt;DIV&gt; tag goes, I'm sure that works (same for &lt;LINK&gt; tag, but Netscape can be picky about that)- again, I'd have to see your page. And with margins, if you use CSS instead of HTML (or in addition to for older browsers), you might see some improvement. <p>Liam Morley<br><a href=mailto:lmorley@wpi.edu>lmorley@wpi.edu</a><br><a href=

http://www.wpi.edu/~lmorley/>

] :: imotic :: website :: [</a><br>"light the deep, and bring silence to the world.<br>
light the world, and bring depth to the silence.

 

[wladzimier]

Thanks for the answer! I got more info for you... ;-)<br>1) As of URL. Well, it's on the internal server for now, but it'll be launched on-line by Friday.<br>2) As far as I experimented with DIV in NN today, it does work with ID, but NOT with CLASS, while most of my CSS definitions are classes (because then I can reuse them all over the document)...<br>3) anything about spacing and margins?<br>4) As for CSS - i noticed that some of them work (it's not the problem of LINK tag as I previously thought), but it seems to be a problem with CSS inside tables (outside table they are ok) or/and DIVs inside DIVs.<br><br>

 

[carpeliam]

I've had no problem with CLASS in Netscape- I'll wait 'til Friday to see your code.<br><br>As for spacing and margins, make sure you have margins set up in BODY{} for CSS if you want something to extend all the way to the scrollbar.<br><br>And yes... ahh, you've met with one of the worst Netscape bugs (for which there are very few workarounds) of NN4- CSS doesn't work in tables. As for inside of DIV's, that's confusing- I'll have to see what you mean on Friday. But in Netscape, try either giving the table CSS attributes (so the entire table is displayed a certain way), or using the STYLE attribute for each and every tag (not sure if that works). The alternatives are either don't use tables (use CSS-P) or don't use CSS (akk, no CSS, that's so sad).<br><br>Best of luck. <p>Liam Morley<br><a href=mailto:lmorley@wpi.edu>lmorley@wpi.edu</a><br><a href=

http://www.wpi.edu/~lmorley/>

] :: imotic :: website :: [</a><br>"light the deep, and bring silence to the world.<br>
light the world, and bring depth to the silence.

 

[palbano]

Dear W.K.<br><br>Take a look at the service at this location:<br><A HREF="

http://websitegarage.netscape.com/"

TARGET="_new">

http://websitegarage.netscape.com/</A><br><br>-pete

 

[wladzimier]

I solved 60-70% of the problems by now, and thanks to everyone who answered. The site is now available at this address:<br>- <A HREF="

http://212.95.174.5/"

TARGET="_new">

http://212.95.174.5/</A><br>(if

you have a free minute, please, visit, I'll be grateful to hear your suggestions).<br><br>1) Interesting solution for no-repeat option:<br>make redirect for NN version of the file and in that file:<br>a) delete background from body tag and CSS definition;<br>b) put it as a layer in the following fashion:<br>&lt;layer id=&quot;back1&quot; name=&quot;back1&quot; top=&quot;0&quot; left=&quot;0&quot; z-index=&quot;1&quot;&gt;<br>&lt;layer name=&quot;back2&quot; top=&quot;0&quot; left=&quot;0&quot;&gt;&lt;img src=&quot;images/mybackground.gif&quot;&gt;<br>&lt;/layer&gt;<br>&lt;/layer&gt;<br><br>2) Solution for nono-working submit images:<br>instead of your_form_name.submit() you should use<br>document.forms[0].submit in JavaScript for NN version.<br><br>3) spacing of the main window problem:<br>instead of LEFTMARGIN=0 and TOPMARGIN=0, you should use<br>MARGINWIDTH=0 MARGINHEIGHT=0 in BODY tag for NN version<br><br>4) input type=&quot;image&quot; must have border=&quot;0&quot;, otherwise NN will draw a thick border around it.<br><br>Those are just a few things I noticed, maybe they'll be helpful for you too.<br><br>

 

[carpeliam]

woah, watch out with your layers tag. Netscape 4 is the only browser that will support them, so make sure your Netscape 6 visitors will get your regular page (Netscape 3 visitors are hurting no matter where they go- best bet is just to show a flat background color for them, which can be accomplished in only putting the background in a CSS statement).<br><br>And last time I checked, non-repeating backgrounds did work in certain versions of Netscape 4 with CSS... best of luck, nice looking site ) <p>Liam Morley<br><a href=mailto:lmorley@wpi.edu>lmorley@wpi.edu</a><br><a href=

http://www.wpi.edu/~lmorley/>

] :: imotic :: website :: [</a><br>"light the deep, and bring silence to the world.<br>
light the world, and bring depth to the silence.

 

[carpeliam]

I just checked on the background thing. I used CSS backgrounds without repeat for an old website of mine, and the background doesn't repeat in Netscape (at least not in 4.73, I don't know what you were testing in).<br><br>Here's the page:<br><A HREF="

http://www.geocities.com/SoHo/9719/inside.html"

TARGET="_new">

http://www.geocities.com/SoHo/9719/inside.html</A><br><br>The

main window (first.html) has a graphic (an old picture of me) that is a CSS no-repeat background. You might not be able to tell if it repeats or not based on your window size, but I'm looking at it in 1024x768 (without the frames) and it obviously doesn't repeat.<br><br>Here's my code for the background:<br><br>BODY {background-image: url(images/background.jpg); background-repeat: no-repeat;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;background-attachment: fixed; background-position: 0px, 4px;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;margin-left: 35px; margin-right: 5px; margin-top: 4px}<br><br>I hope this helps, maybe you won't have to deal with nasty layers ) <p>Liam Morley<br><a href=mailto:lmorley@wpi.edu>lmorley@wpi.edu</a><br><a href=

http://www.wpi.edu/~lmorley/>

] :: imotic :: website :: [</a><br>"light the deep, and bring silence to the world.<br>
light the world, and bring depth to the silence.

 

[wladzimier]

Thanks, Liam. I figured out that glitch with the background. I guess it was NN's stricter rules -- I didn't put parentheses &quot;url()&quot; for background-image and that's why NN ignored the whole CSS definition for &lt;body&gt; tag, while IE processed it ok...