I mantain a framed Intranet site, where a company logo exists in the top left corner of the page (this image section with its background is a page within the frame). Its placement looks totally perfect in IE, but in Netscape, the image is shifted off to the left. I found this on a google search... <br />
<br />
"Navigator: <br />
- is unable to display foreground objects (e.g., graphics, text, or plug-ins) in the upper left corner of a page. Instead, foreground images are offset from 1 to 8 pixels. (Other browsers may also exhibit this behavior.)" <br />
<br />
Can anyone give me some feedback on why this happens and what I could to fix this??? <br />
<br />
Thanks and much appreciated!!<!--content-->Originally posted by benri <br />
I mantain a framed Intranet site, where a company logo exists in the top left corner of the page (this image section with its background is a page within the frame). Its placement looks totally perfect in IE, but in Netscape, the image is shifted off to the left. I found this on a google search... <br />
<br />
"Navigator: <br />
- is unable to display foreground objects (e.g., graphics, text, or plug-ins) in the upper left corner of a page. Instead, foreground images are offset from 1 to 8 pixels. (Other browsers may also exhibit this behavior.)" <br />
<br />
Can anyone give me some feedback on why this happens and what I could to fix this??? <br />
<br />
Thanks and much appreciated!! <br />
<br />
Browser compatibility is a common problem for web developers. My company ignores this issue because the majority of our site users rely on Internet Explorer rather than Netscape software.<br />
<br />
Another situation that you're dealing with is frames. Naturally, it can be argued, but take this for what it's worth... the less you force frames into your site design, the less frustrated you'll generally be. That's just from my personal experience. Avoid frames.<br />
<br />
To get down to your specific problem:<br />
I don't know if you're using tables in each frame or not, but if so, remember to set cellspacing, cellpadding, and table borders to zero. Secondly, image content should be aligned top left. Once these settings are complete, you'll end up with less spacing and therefore a better shot at alignment.<br />
<br />
Additionally, you'll very likely need to eliminate your frame borders and scrolling.<!--content-->Post some code, we are not mind readers!<!--content-->Originally posted by Heavy <br />
Browser compatibility is a common problem for web developers. My company ignores this issue because the majority of our site users rely on Internet Explorer rather than Netscape software. Or one could make the site work in opera mozilla ie6 ie5.5 ie5, and all the way down to lynx... if they do the job right! i.e. css based layout, browsers the do not support css will not see it and the site goes into unstiled black and white text where the content is still accessable. Your company is basically taking a dump on people like me who use mozilla, and sadly this is true for a lot of developers, but the minority browsers are slowly but surely growing.<!--content-->PeOfEo, <br />
<br />
Here is some code...the main frame page:<br />
<br />
<html><br />
<head><br />
<title>default</title><br />
</head><br />
<frameset cols="163,*" framespacing="0" border="0" frameborder="NO"><br />
<frameset rows="110,*" framespacing="0" border="0" frameborder="0"><br />
<br />
<frame name="lefttop" scrolling="NO" left= "-14" top= "0" src=http://www.webdeveloper.com/forum/archive/index.php/"lefttop.html" noresize><br />
<frame name="leftnav" scrolling="NO" marginwidth="0" marginheight="0" src=http://www.webdeveloper.com/forum/archive/index.php/"leftnav.htm" noresize><br />
</frameset><br />
<frame name="main" marginwidth="10" marginheight="0" src=http://www.webdeveloper.com/forum/archive/index.php/"main.html"><br />
</frameset><br />
<br />
<noframes><br />
</noframes><br />
</html><br />
<br />
<br />
Then the code for the frame page where the image (logo_1.jpg) shifts off to the left in Netscape, but not in IE:<br />
<br />
<html><br />
<head><br />
<title>lefttop</title><br />
</head><br />
<body background="images/bgtopleft.jpg" marginheight="0" marginwidth="0" leftmargin="20" topmargin="3"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/logo_1.jpg" border=0><br />
<br />
</body><br />
</html><br />
<br />
<br />
Any ideas??<br />
<br />
I just took over the duties of maintaining the site, so I'm not as advanced yet to redo the whole site as a non frame site, even though I know that'd be the best bet......<br />
<br />
Thank you!<!--content-->Make your body statements (in each page) read as follows:<br />
<BODY LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0"><br />
<br />
Also, your html files should all be ".html"<br />
<br />
You have one that's ".htm" for some reason.<br />
<br />
Not a real problem... just careful details for consistency.<br />
<br />
Let me know if this solves your problems. It should.<!--content-->heavy... that code is deprecated.<br />
It should be as follows rather<br />
<BODY style="padding:0px; margin: 0px 0px 0px 0px;" ><br />
<br />
You could also say<br />
...<br />
<html><br />
<head><br />
...<br />
<style type="text/css"><br />
body {<br />
padding:0px; <br />
margin: 0px 0px 0px 0px;<br />
}<br />
</style><br />
</head><br />
<body><br />
...<br />
</body><br />
</html><br />
<br />
Just slip that style tag into your head section. The ... is where I left out code you would have on your page already.<!--content-->Originally posted by PeOfEo <br />
margin: 0px 0px 0px 0px;Note, however, that it could be written more shortly like this:margin: 0;<!--content-->Thats true but I tend to write it out like to that control them all. It can also be written<br />
margin-top:0px;<br />
margin-left:0px;<br />
margin-right:0px;<br />
margin-bottom:0px;<!--content-->Though, I'd make careful note of two things: You simply do not have to specify a unit when the value is 0 because 0 is always going to be the same regardless of the unit. If the value is going to be the same for top, right, left and bottom, it only makes sense to use the shorthand notation.<!--content-->0% is not the same as 0px though, ie will stretch an element with the content if you use 0%, different browsers will render that differently. So 0 is not 0 on all browsers with all units. Though just saying 0 will be rendered fine.<!--content-->I have the LEFTMARGIN="20" on my top left page (lefttop.html) because I need the image indented about 1/2 inch. Your suggested code of <br />
<br />
<BODY LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0"> or the posted <BODY style="padding:0px; margin: 0px 0px 0px 0px;" ><br />
<br />
for each page, just sets the image all the way to the left in both IE and NS. This would be fine if I didnt need that image indented...so I'm sill getting that shift with the image in netscape....<!--content-->Ok I tried...<br />
<br />
<BODY style="padding:0px; margin: 0px 0px 0px 20px;"> <br />
<br />
and this looks perfect when I open in it Netscape locally.....BUT then when I go to upload to the server, it goes back to shifting to the left.....<!--content-->personally I'd nest a container div.<br />
<br />
<body style="margin: 0; padding: 0;"><br />
<div style="padding-left: 20px;"><br />
<br />
all page content<br />
<br />
</div><br />
</body><br />
<br />
this avoids any box model problems if you should at any point specify a width on the body.<!--content-->That worked for me...thanks so much everyone who had ideas and suggestions!!<!--content-->Originally posted by PeOfEo <br />
heavy... that code is deprecated.<br />
It should be as follows rather<br />
<BODY style="padding:0px; margin: 0px 0px 0px 0px;" ><br />
<br />
<br />
Much appreciated, PeOfEo. I'm saving your solution for future use! Thanks!<!--content-->welcome to css
<!--content-->Damn...I'm late again...
<!--content-->
<br />
"Navigator: <br />
- is unable to display foreground objects (e.g., graphics, text, or plug-ins) in the upper left corner of a page. Instead, foreground images are offset from 1 to 8 pixels. (Other browsers may also exhibit this behavior.)" <br />
<br />
Can anyone give me some feedback on why this happens and what I could to fix this??? <br />
<br />
Thanks and much appreciated!!<!--content-->Originally posted by benri <br />
I mantain a framed Intranet site, where a company logo exists in the top left corner of the page (this image section with its background is a page within the frame). Its placement looks totally perfect in IE, but in Netscape, the image is shifted off to the left. I found this on a google search... <br />
<br />
"Navigator: <br />
- is unable to display foreground objects (e.g., graphics, text, or plug-ins) in the upper left corner of a page. Instead, foreground images are offset from 1 to 8 pixels. (Other browsers may also exhibit this behavior.)" <br />
<br />
Can anyone give me some feedback on why this happens and what I could to fix this??? <br />
<br />
Thanks and much appreciated!! <br />
<br />
Browser compatibility is a common problem for web developers. My company ignores this issue because the majority of our site users rely on Internet Explorer rather than Netscape software.<br />
<br />
Another situation that you're dealing with is frames. Naturally, it can be argued, but take this for what it's worth... the less you force frames into your site design, the less frustrated you'll generally be. That's just from my personal experience. Avoid frames.<br />
<br />
To get down to your specific problem:<br />
I don't know if you're using tables in each frame or not, but if so, remember to set cellspacing, cellpadding, and table borders to zero. Secondly, image content should be aligned top left. Once these settings are complete, you'll end up with less spacing and therefore a better shot at alignment.<br />
<br />
Additionally, you'll very likely need to eliminate your frame borders and scrolling.<!--content-->Post some code, we are not mind readers!<!--content-->Originally posted by Heavy <br />
Browser compatibility is a common problem for web developers. My company ignores this issue because the majority of our site users rely on Internet Explorer rather than Netscape software. Or one could make the site work in opera mozilla ie6 ie5.5 ie5, and all the way down to lynx... if they do the job right! i.e. css based layout, browsers the do not support css will not see it and the site goes into unstiled black and white text where the content is still accessable. Your company is basically taking a dump on people like me who use mozilla, and sadly this is true for a lot of developers, but the minority browsers are slowly but surely growing.<!--content-->PeOfEo, <br />
<br />
Here is some code...the main frame page:<br />
<br />
<html><br />
<head><br />
<title>default</title><br />
</head><br />
<frameset cols="163,*" framespacing="0" border="0" frameborder="NO"><br />
<frameset rows="110,*" framespacing="0" border="0" frameborder="0"><br />
<br />
<frame name="lefttop" scrolling="NO" left= "-14" top= "0" src=http://www.webdeveloper.com/forum/archive/index.php/"lefttop.html" noresize><br />
<frame name="leftnav" scrolling="NO" marginwidth="0" marginheight="0" src=http://www.webdeveloper.com/forum/archive/index.php/"leftnav.htm" noresize><br />
</frameset><br />
<frame name="main" marginwidth="10" marginheight="0" src=http://www.webdeveloper.com/forum/archive/index.php/"main.html"><br />
</frameset><br />
<br />
<noframes><br />
</noframes><br />
</html><br />
<br />
<br />
Then the code for the frame page where the image (logo_1.jpg) shifts off to the left in Netscape, but not in IE:<br />
<br />
<html><br />
<head><br />
<title>lefttop</title><br />
</head><br />
<body background="images/bgtopleft.jpg" marginheight="0" marginwidth="0" leftmargin="20" topmargin="3"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/logo_1.jpg" border=0><br />
<br />
</body><br />
</html><br />
<br />
<br />
Any ideas??<br />
<br />
I just took over the duties of maintaining the site, so I'm not as advanced yet to redo the whole site as a non frame site, even though I know that'd be the best bet......<br />
<br />
Thank you!<!--content-->Make your body statements (in each page) read as follows:<br />
<BODY LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0"><br />
<br />
Also, your html files should all be ".html"<br />
<br />
You have one that's ".htm" for some reason.<br />
<br />
Not a real problem... just careful details for consistency.<br />
<br />
Let me know if this solves your problems. It should.<!--content-->heavy... that code is deprecated.<br />
It should be as follows rather<br />
<BODY style="padding:0px; margin: 0px 0px 0px 0px;" ><br />
<br />
You could also say<br />
...<br />
<html><br />
<head><br />
...<br />
<style type="text/css"><br />
body {<br />
padding:0px; <br />
margin: 0px 0px 0px 0px;<br />
}<br />
</style><br />
</head><br />
<body><br />
...<br />
</body><br />
</html><br />
<br />
Just slip that style tag into your head section. The ... is where I left out code you would have on your page already.<!--content-->Originally posted by PeOfEo <br />
margin: 0px 0px 0px 0px;Note, however, that it could be written more shortly like this:margin: 0;<!--content-->Thats true but I tend to write it out like to that control them all. It can also be written<br />
margin-top:0px;<br />
margin-left:0px;<br />
margin-right:0px;<br />
margin-bottom:0px;<!--content-->Though, I'd make careful note of two things: You simply do not have to specify a unit when the value is 0 because 0 is always going to be the same regardless of the unit. If the value is going to be the same for top, right, left and bottom, it only makes sense to use the shorthand notation.<!--content-->0% is not the same as 0px though, ie will stretch an element with the content if you use 0%, different browsers will render that differently. So 0 is not 0 on all browsers with all units. Though just saying 0 will be rendered fine.<!--content-->I have the LEFTMARGIN="20" on my top left page (lefttop.html) because I need the image indented about 1/2 inch. Your suggested code of <br />
<br />
<BODY LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0"> or the posted <BODY style="padding:0px; margin: 0px 0px 0px 0px;" ><br />
<br />
for each page, just sets the image all the way to the left in both IE and NS. This would be fine if I didnt need that image indented...so I'm sill getting that shift with the image in netscape....<!--content-->Ok I tried...<br />
<br />
<BODY style="padding:0px; margin: 0px 0px 0px 20px;"> <br />
<br />
and this looks perfect when I open in it Netscape locally.....BUT then when I go to upload to the server, it goes back to shifting to the left.....<!--content-->personally I'd nest a container div.<br />
<br />
<body style="margin: 0; padding: 0;"><br />
<div style="padding-left: 20px;"><br />
<br />
all page content<br />
<br />
</div><br />
</body><br />
<br />
this avoids any box model problems if you should at any point specify a width on the body.<!--content-->That worked for me...thanks so much everyone who had ideas and suggestions!!<!--content-->Originally posted by PeOfEo <br />
heavy... that code is deprecated.<br />
It should be as follows rather<br />
<BODY style="padding:0px; margin: 0px 0px 0px 0px;" ><br />
<br />
<br />
Much appreciated, PeOfEo. I'm saving your solution for future use! Thanks!<!--content-->welcome to css
<!--content-->Damn...I'm late again...<!--content-->