Topic: Page Border Images

I'm making a page for a college web design class where I have to explain how to do something non-technical. I'm going to write a quick tutorial on billards. Anywho, I thought it might look cool if the webpage looked like a billard table. I whipped up some graphics in the gimp, along with some real simple CSS code and wahlah; I have my pool table page template! Test it in firefox and it looks just how I had planned it. Test it in IE and ... ohmywhaddyaknow ... it doesn't render properly. Any ideas what could be the problem here with IE?

::edit::
Umm... suppose you might want a link: http://s94974216.onlinehome.us/Project3/
::edit::



(Edited by Schitzoboy on 10-08-2004 09:33)

Off hand I can't say for sure. I know I have always run into problems when using position:fixed;

Some recommendations -

1) try using float:left; and float:right; instead of fixed position

2) try setting the background-position, and the background-repeat for the divs

3) you could always make this a fixed width page, and set the background image as the entire width of the table, tiling vertically.

4) perhaps the settings of the 'middle' div are somehow screwing with the sides....?



{{edit - this post at the GN may be useful as well -
http://www.gurusnetwork.com/discussion/thread/2469/

Also - you need some pockets!!

(Edited by DL-44 on 10-08-2004 15:22)

There are a few problems here. If it's alright with you, I'd rather not touch them.
Instead, let me point you somewhere else. This seems like a job for Sliding Doors
You'll need only one div and two bg picts. One will be just one rail, the other will be the table plus the other rail (make sure the table felt piece is wide enough for all practical screen shapes.)

Attach the rail/felt to the body tag.
Attach the other rail to the div tag.
Give your div a margin = widthOfRail on the one side and a padding = widthOfRail on the other side.

See if that goes easier for you.

good call mobrul. I haven't really delved into using the sliding doors method much...

Thanks for all these responses! I really need to spend more time reading ALA, I'm always suprised by their articles. However, I don't think the sliding doors method will be the best solution in my case. I would need to make the background much much bigger and part of my grade comes from how effeciently I use images and how small I can keep their file sizes I don't want to make a fixed width page for the same reason (image sizes). Lquid designs is so much cooler anyway. I had played with float left and right before I posted here. But I wasn't able to get it to work out for me even in firefox. I've reworked it now. I got rid of the .middle class completely. I've set the 2 rails to float left and right. I've set their heights to 100% and encased them in a big container div. (Otherwise IE only did the height's as 100% of the window). The only problem I have now is that the rail images scroll in IE but not in Firefox. Neither IE or Firefox seems to pay attention to the background-attachment tag in the rail divs, however the tag does work in both browsers for the background of the page. If I set the body's background-attachment to fixed, the page looks perfect in firefox. If I set it to scroll the page looks perfect in IE. Hmmm..

html{background:#fff url(felt.png) 0 0;}

body{background:transparent url(lRail.png) repeat-y left top;}

div{background:transparent url(rRail.png) repeat-y right top;}

3 small images, works in modern browsers(w/ the right doctype), mostly semantic markup. Do as you wish, of course. I'm just offering up some alternatives.

mobrul, I tried that latest code, but it doesn't seem like IE6 supports backgrounds for HTML. Firefox rendered it fine. I'm restricted to XHTML1.1 for this assignment so that was the doctype I used.

You could always skimp a bit and just set the background color to an appropriate green - skip the texture for the playing playing surface...

Hmm, I may try that and see how it comes out. I'm off to work right now so it'll have to wait. I kinda partial to the texture though =) As the page stands now, I don't think the fact that in one browser the rails and felt are synced up but not in another browser is *that* big of a deal. So I can live with it eventhough it does kinda bug me.



(Edited by Schitzoboy on 10-09-2004 22:30)

Ok, I took your advice DL-44 and added pockets! I also converted all the images to gifs and jpegs for quicker loading and finished all my planned content. Again, works perfect in Firefox, IE on the other hand isn't so happy. with my new top rail. Also, It would be awesome if I could get the content to scroll under the top rail, but I havn't got the slightest where to even begin with that effect.

http://s94974216.onlinehome.us/Project3/



(Edited by Schitzoboy on 10-20-2004 01:42)