I'm making a menu system that used DIVs with a background image for the menu panels.<br />
<br />
In IE it works fine, but in Netscape there is a space a few pixels wide between the DIV border and the image. Is there a parameter to override this?<!--content-->How about posting some code?<br />
<br />
If you coded like this:<br />
<br />
<div style="border: 1pt solid black"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"cancel.gif"><br />
</div><br />
<br />
I would believe NS would have space to the right of the image. If you change it to this:<br />
<br />
<div style="border: 1pt solid black"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"cancel.gif"></div><br />
<br />
The space will be gone. Magic!<!--content-->Nah - it's a uniform border around the edge of the image. Here's the code:<br />
<br />
<DIV id="div7" style="border:1px solid black;background-image: url(./images/menuback.jpg); position:absolute; width:114px; height:10px; top:77px; left:0px; visibility:hidden;"><br />
<table border=0 width=110px><br />
.<br />
.<br />
.<br />
</table><br />
</DIV><!--content-->posted by Gil:<br />
<br />
If you coded like this: <br />
<br />
<div style="border: 1pt solid black"> <br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"cancel.gif"> <br />
</div> <br />
<br />
I would believe NS would have space to the right of the image. If you change it to this: <br />
<br />
<div style="border: 1pt solid black"> <br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"cancel.gif"></div> <br />
<br />
<br />
where are the differents, the break after the image?<!--content-->Originally posted by swon <br />
where are the differents, the break after the image?Yes. NS 4 renders white space for the line break, and IE does not. I'm not sure if it is considered a bug.<!--content-->What I'd like to know is ... Netscape? which netscape... 4.x or 6+ ?<br />
A link to the page would help also.<!--content-->It's Netscape 4 - the site has to be as backward compatible as possible cos it's for schools, and we all know how underfunded they are!<br />
<br />
Can't give you an address cos it ain't live yet...<!--content-->The original problem that Geat asked about seems to center around where NS 4 places the background image. NS 6 does not exhibit the space.<br />
<br />
It seems to have something to do with the extra layer-background "feature".<br />
<br />
Also, NS 4 ignores any position data in the styles for background.<!--content-->It could well be that Netscape isn't tiling the image - whereas IE does that by default. Is there a tile attribute that can be set, or do I just have to accept that Netscape doth suck?<!--content-->NS 4 tiles background-image by default. If you make the DIV bigger than the image, you'll see it tile. NS 4 obeys "no-repeat".<br />
<br />
or do I just have to accept that Netscape doth suck?<br />
It only sucks because you don't know it's limitations. It was "cutting edge" when it was originally released in 1994.<!--content-->Yep - problem solved. It was indeed the <br />
"layer-background-image" attribute of the DIV.<br />
<br />
Well done Gil.<br />
<br />
But you do have to admit that Netscape is far less forgiving (e.g the requirement of closed table tags, etc.) And yes, while this may force you to create perfect HTML - when you're dynamically creating a site with PHP, it can be a bit of a nightmare!<!--content-->Originally posted by Geat <br />
problem solved. It was indeed the <br />
"layer-background-image" attribute of the DIV.So, what was the final bit of code? What did you change from your initial code?<!--content--><DIV id="div7" style="<br />
border:1px solid black;<br />
background-image: url(./images/menuback.jpg);<br />
layer-background-image: url(./images/menuback.jpg);<br />
position:absolute;<br />
width:114px; height:10px;<br />
top:77px; left:0px; visibility:hidden;"><br />
.<br />
.<br />
.<br />
</DIV><br />
<br />
Why'd you ask - you told me how to do it!<!--content-->Why'd you ask - you told me how to do it!Because it didn't work when I tried it. I had specified layer-background instead of layer-background-image.<br />
<br />
BTW, the table repeats the background image. You may not be able to tell, but if you use an image with a lot of detail, you'll see what I mean.<br />
<br />
I posted an example at <!-- m --><a class="postlink" href="http://home.att.net/~gil.davis/space_around_image.htm">http://home.att.net/~gil.davis/space_around_image.htm</a><!-- m --><!--content-->
<br />
In IE it works fine, but in Netscape there is a space a few pixels wide between the DIV border and the image. Is there a parameter to override this?<!--content-->How about posting some code?<br />
<br />
If you coded like this:<br />
<br />
<div style="border: 1pt solid black"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"cancel.gif"><br />
</div><br />
<br />
I would believe NS would have space to the right of the image. If you change it to this:<br />
<br />
<div style="border: 1pt solid black"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"cancel.gif"></div><br />
<br />
The space will be gone. Magic!<!--content-->Nah - it's a uniform border around the edge of the image. Here's the code:<br />
<br />
<DIV id="div7" style="border:1px solid black;background-image: url(./images/menuback.jpg); position:absolute; width:114px; height:10px; top:77px; left:0px; visibility:hidden;"><br />
<table border=0 width=110px><br />
.<br />
.<br />
.<br />
</table><br />
</DIV><!--content-->posted by Gil:<br />
<br />
If you coded like this: <br />
<br />
<div style="border: 1pt solid black"> <br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"cancel.gif"> <br />
</div> <br />
<br />
I would believe NS would have space to the right of the image. If you change it to this: <br />
<br />
<div style="border: 1pt solid black"> <br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"cancel.gif"></div> <br />
<br />
<br />
where are the differents, the break after the image?<!--content-->Originally posted by swon <br />
where are the differents, the break after the image?Yes. NS 4 renders white space for the line break, and IE does not. I'm not sure if it is considered a bug.<!--content-->What I'd like to know is ... Netscape? which netscape... 4.x or 6+ ?<br />
A link to the page would help also.<!--content-->It's Netscape 4 - the site has to be as backward compatible as possible cos it's for schools, and we all know how underfunded they are!<br />
<br />
Can't give you an address cos it ain't live yet...<!--content-->The original problem that Geat asked about seems to center around where NS 4 places the background image. NS 6 does not exhibit the space.<br />
<br />
It seems to have something to do with the extra layer-background "feature".<br />
<br />
Also, NS 4 ignores any position data in the styles for background.<!--content-->It could well be that Netscape isn't tiling the image - whereas IE does that by default. Is there a tile attribute that can be set, or do I just have to accept that Netscape doth suck?<!--content-->NS 4 tiles background-image by default. If you make the DIV bigger than the image, you'll see it tile. NS 4 obeys "no-repeat".<br />
<br />
or do I just have to accept that Netscape doth suck?<br />
It only sucks because you don't know it's limitations. It was "cutting edge" when it was originally released in 1994.<!--content-->Yep - problem solved. It was indeed the <br />
"layer-background-image" attribute of the DIV.<br />
<br />
Well done Gil.<br />
<br />
But you do have to admit that Netscape is far less forgiving (e.g the requirement of closed table tags, etc.) And yes, while this may force you to create perfect HTML - when you're dynamically creating a site with PHP, it can be a bit of a nightmare!<!--content-->Originally posted by Geat <br />
problem solved. It was indeed the <br />
"layer-background-image" attribute of the DIV.So, what was the final bit of code? What did you change from your initial code?<!--content--><DIV id="div7" style="<br />
border:1px solid black;<br />
background-image: url(./images/menuback.jpg);<br />
layer-background-image: url(./images/menuback.jpg);<br />
position:absolute;<br />
width:114px; height:10px;<br />
top:77px; left:0px; visibility:hidden;"><br />
.<br />
.<br />
.<br />
</DIV><br />
<br />
Why'd you ask - you told me how to do it!<!--content-->Why'd you ask - you told me how to do it!Because it didn't work when I tried it. I had specified layer-background instead of layer-background-image.<br />
<br />
BTW, the table repeats the background image. You may not be able to tell, but if you use an image with a lot of detail, you'll see what I mean.<br />
<br />
I posted an example at <!-- m --><a class="postlink" href="http://home.att.net/~gil.davis/space_around_image.htm">http://home.att.net/~gil.davis/space_around_image.htm</a><!-- m --><!--content-->