homepage Welcome to WebmasterWorld Guest from 50.19.206.49
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
margins
oilman




msg:591198
 7:55 pm on Nov 2, 2000 (gmt 0)

I am trying to get zero margins in IE and NS but I keep getting a margin on the right side in NS. I am using this tag:
<body topmargin="0" leftmargin="0" rightmargin="0" MARGINWIDTH="0" MARGINHEIGHT="0">

What am I missing? I know it's not all backwards compatible but I would at least like to get it working in the 4+ browsers.

 

tedster




msg:591199
 8:44 pm on Nov 2, 2000 (gmt 0)

Oilman, as far as I know, you're doing everything there is to do. All the versions of Netscape leave a slim margin at the edge of the window -- this is even true when you use absolute positioning at (0,0). The problem is only with Netscape; MSIE performs to spec.

I haven't tested the new Communicator 4.76 release announced last week -- maybe, just maybe, the margin issue has been fixed. However, I know that won't help your coding situation.

This issue seems to be related to the extra pixels Netscape always renders at the edge of a frame -- making borderless frames more of a compatibility challenge than we would like.

Leaves me longing for a better world, or at least a better browser.

Edited by: tedster

Brett_Tabke




msg:591200
 2:25 pm on Nov 3, 2000 (gmt 0)

There is no "margin" strictly speaking in html4 is there? That is CSS2 and a IE extension isn't it?

rcjordan




msg:591201
 2:44 pm on Nov 3, 2000 (gmt 0)

Oil, I had forgotten about the struggle I had with this cross-browser design issue. I never could squeeze that last pixel out of NS, so to make IE and NS as near identical as possible my code is

TOPMARGIN=1
LEFTMARGIN=1
MARGINWIDTH=1
MARGINHEIGHT=1

tedster




msg:591202
 7:57 pm on Nov 11, 2000 (gmt 0)

Brett, as far as I know you are right. Strict HTML 4 does not include margin attributes, they are CSS and IE extensions.

Here's the best cross-browser information I could gather about page margins. Thanks to Lisa Schmeiser at macworld [macworld.zdnet.com] for the bulk of this information.

The amount of extra space a browser adds to your layout depends on the user's platform: on the Mac, whether you're viewing a page with Navigator or Internet Explorer, the layout will move 8 pixels down and 8 pixels to the right. PC users have it even worse: the offset in Internet Explorer for the PC is 10 pixels down and 15 to the right.

The solution? Add margin attributes to your ‹body› tag. You need four of them.

1) marginwidth determines how many pixels of space are between the left edge of a browser window and the items within an HTML document's body.

2) marginheight sets the placement of items relative to the top of the browser.

3) leftmargin tells the browser the pixel width of the left margin (similar to the marginwidth attribute).

4) topmargin tells the browser the pixel width of the top margin (similar to the marginheight attribute).

Even though there seems to be duplication here, you need all four because Internet Explorer 3.0 supports the marginwidth and marginheight tags while the 4.0 browsers support the leftmargin and topmargin tags. Unfortunately, if your users access your site with Navigator 3.0, you're out of luck -– there's no way to get rid of the margin offset with that browser.

As noted above in this thread, even if you are using all four attributes, Netscape will add a 1 pixel margin, and there is no known workaround.

If your design allows, you can declare a background hex color that makes this little sliver less obvious, but that's as far as it goes -- and with a background color defined you must then consider how to define the background for the main area of your page so that readability isn't compromised.

ams




msg:591203
 3:23 pm on Nov 13, 2000 (gmt 0)

There is one way to get rid of the margin in NS4+.
Use:

<body>
<layer top="0" left="0" height="100%" width="100%">

<!-- page encoding -->

</layer>
</body>
</html>

tedster




msg:591204
 7:21 am on Nov 14, 2000 (gmt 0)

Welcome to the WmW Forums, ams.

Since this uses layers, it would require browser detection and a separate page for MSIE, right?

I just tried it on one of my problem templates, and I still get a 1 pixel sliver at the left and top (Netscape Communicator 4.7).

Are there any other details to your solution that I need to pay attention to?

ams




msg:591205
 9:45 am on Nov 14, 2000 (gmt 0)

Thanks for the welcome tedster. I happy to have found the WmW forums!

The nice thing about this method is that you don't have to resort to browser detection at all. HTML <layer> tags are discarded by MSIE and as such only have an effect in Netscape.

It's too bad you still get the 1 pixel on top and left. I also use NS 4.7 to test and I don't get the pixel. I have also tested on Mac NS and don't get the pixel there either. However Mac NS does react a little buggy to my page by making it just a few pixels longer than it should be.

The pages I'm working on should have no top and bottom margin. So my code starts something like:

<style>
BODY {margin: 0px;...}
...
</style>

<body bgcolor="#ffffff" ... topmargin="0" bottommargin="0" marginheight="0">
<layer top="0" height="100%">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="700" height="100%">
<tr>
<td background="images/.." .....>

Besides the little Mac NS thing I haven't found any problems using this method so far...

tedster




msg:591206
 7:37 pm on Nov 14, 2000 (gmt 0)

I'll definitely keep it in mind and give it a try on some other pages. Thanks for reminding me that MSIE will disregard "layer". Netscape 6 should as well.

There could be something else in this particular template I tried to adapt to your method that makes it problematic. For instance, I also have some absolute positioning at (0,0) within the content-- that might cause a conflict with the layer when Netscape renders the page.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved