Using a 'Sliver' Image to repeat image for nav menu

[Markbad311]

http://www.eriebusinessguide.biz/Seeerie1/

This is the site in question. What I am having a problem with is I can not get the image (sliver) to repeat down the nav menu on IE. works in mozilla, but not IE. I have the first section of the Nav menu (id="nav") which is a whole background image in css defined as 300px in height and 160 in width. then the second portion of the nav menu is the one I am having trouble with. (id="sliver")

My CSS is http://www.eriebusinessguide.biz/Seeerie1/seeerie.css and the two style blocks associated with this section is #sliver and #adLinks. Ad links is just a list positioned relatively. I wanted it to be absolute but relative is the only way I can get it to display the 'most' repeats of the slivers.

I have been battling this for awhile and have taken CSS in class but I have been staring at it so long I must be missing something in plain view. Any help?


Thanks in Advance!

[WebJoel]

I noticed that your < TD id = "nav" > that contains the navigation stuff on the left-hand side seems to jump from the top DIVS "linav" and "contactnav" and then < TD id = "nav" > closes (" < /TD >"), then you open a TABLE which is "id=bodytable" and populate that, then you try to get back into the original TD with < TD id="sliver" > populated with the DIV of "adlinks". -Wouldn't that create a necessary 'break' in the vertical flow if the content of either the TD or the content of "bodytable" were not equal in height?

(I hope I am saying this right up to this point)

-Wouldn't it be more sensible to put all your navigation stuff (linav, contactnav AND adlinks) in the same vertical TD, close it, and then you can proceed to the 'content' part, the TABLE that is "id = bodytable" part? That way, the 'background-image' will tile correctly, un-disjointed, all the way from the top to the bottom of the < TD id="nav" >... And the TD would seamlessly expand vertically if the content of either it or the 'bodytable' grows as content is added... I think that this is what you're seeing in IE (although I don't fully understand why it works okay in Fx).
(I jotted notes of how you named things and hope that I got it right, or close at least...)

Maybe this won't help. The site is looking GREAT, btw! I haven't been to Erie, PA in several years. Nice city.

I'll be lurking this thread to see how it resolves. :rolleyes:

-Joel

[Markbad311]

this is a good idea I should realy just <div> tag the whole nav menu. but as far as the break in vertical flow this should not be the case. This is because the rowspan property of the <td rowspan="2" id="body"> element cotaining the bodytable after it starts a new row with one table data element completing the two rows of the table.

The only 'real' reason I even broke it in to a table is because there is still cross-browser problems with div's and some style propeties. Besides I will have advertising in the second nav <td> so there is going to be plenty of floating objects in there. I am going to give your way a whirl. The www.seeerie.com web site will be up (waiting on dns) and I need something temporary to get on the php is worked out.

Thank you and I will be back around 10pm Est with an update

[Markbad311]

ALL DONE! I however I tried to roll with the div's and it was way worse. I had a height property that "doesn't render well" in IE actually two. This is what I did wrong. I could not go with a 'absolute' positioned list either I had to go relative positioning. due to the fact td elements render like they are empty and the absolute positioned list just sat on top looking dumb.

Thanks for you help. I have considered also using layers on this site but I never could make that work well in this format. I made it work well with this site I designed for a Florida Real Estate Company (http://www.floridasrealestateprep.com) . Have a great night I know I will rest easier now!

[ray326]

It would be better if that whole left nav section was contained in a single div.

[Markbad311]

a single div inside of the table data element? but here is the other issue then how do I get my menus to line up with the image? like right under navigation and contacts.

Are you saying make it like:


<table>
<tr>
<td id="logo">
<h1>this is a heading that lays on top of the banner</h1>
</td>
</tr>
<tr>
<td>
<div id="nav"><!--for the background image-->
<div id="linav"><!-- for the absolute positioned lists-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="contactnav"><!-- for the contact absolute positioned lists-->
<ul>
<li></li>
<li></li>
</ul>
</div>
<div id="sliver"><!--repeating image background-->
<div id="adLinks"><!--Absolute positioned ad links-->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<script></script><!-- google ad-->
</div>
</div>
</div>
</td>
<td>
<!--Body text -->
</td>
</tr>
<tr>
<td id="footer">
<!--footer links or final keywords-->
</td>
</tr>
</table>

[Markbad311]

I just love the "Russian Doll"

[ray326]

Well there's no reason to use a table but if you must then it should be three rows; banner with one cell, nav/content with two cells, footer with on cell.