repeated background in a table 3

[Rydel]

I would like to have a dotted line on my front page -

http://www.pravapis.org/index_new.asp

I have done it like this:

<table width="100%" style="background: url(stripe2.gif);" cellpadding="0" cellspacing="0" border="0">
<tr><td>&nbsp;</td></tr></table>

where stripe2.gif is a dotted horizontal line.

The problem is that it's NOT displayed properly in most browsers. I can see the line in MSIE6 under Windows 2000, but on my notebook with MSIE6 on Windows 98 it already does not appear. (I am not even talking about MSIE5.5, Opera and other browsers). Is there a nice way to to make a repeated background in CSS that would be COMPATIBLE with most modern browsers?

Big thanks in advance!

 

[Vragabond]

As far as I know, all the recent browsers (IE5+, Opera 7+, Netscape, Mozilla) support the css background very good however the problem lies in the table. Looking at your source code you sure don't need a table there, a div would do much nicer and will probably make your code work:

<div style="background: url(stripe2.gif) repeat-x; height: 20px;"></div>

You need to specify the height so that the div (which is empty) doesn't have zero height. Just make it as high as the background.

 

[Rydel]

Thank you. One thing I don't quite understand is why/how this <div> will know how wide it should stretch itself? Because at least in <table> tag I specify width="100%", and for div you don't specify any width at all...



regards,
rydel n23

http://pravapis.org/

http://rydel.net/

 

[BabyJeffy]

If you do not specify a width, the width of the div will be the width of it's "container". If the div sits directly in the body of the page, it will have the width of the body (which is defaulted to 100%). So... by default, the div will be 100% -- just like your table was.

BTW: Using percentages for tables seriously slows down the speed at which the table is rendered on the page (since the browser needs to figure out all the widths on the page before it can render the table properly).

Just so you know

Jeff

 

[BillyRayPreachersSon]

Just an addition to Jeff's note...

In IE, you can optimise table rendering performance by specifying the tableLayout property. This property causes IE to render the table one row at a time, providing users with information at a faster pace.

For more information, see the following MSDN url:

http://msdn.microsoft.com/library/d...or/dhtml/reference/properties/tablelayout.asp

Hope this helps,
Dan

 

[Rydel]

I've replaced the table with the div:
<div style="background: url(stripe2.gif) repeat-x; height: 20px;"></div>
But it still does not display the stripe (MSIE6, W2K).

regards,
rydel n23

http://pravapis.org/

http://rydel.net/

 

[Rydel]

Never mind. Somehow when I FTP'ed back and forth I accidentally deleted (?) stripe2.gif. So now it's all working. Thank you for your help!!!



regards,
rydel n23

http://pravapis.org/

http://rydel.net/