Topic: Page Border Images (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=23585" title="Pages that link to Topic: Page Border Images (Page 1 of 1)" rel="nofollow" >Topic: Page Border Images <span class="small">(Page 1 of 1)</span>\

 
Schitzoboy
Paranoid (IV) Inmate

From: Yes
Insane since: Feb 2001

IP logged posted posted 10-08-2004 09:26 Edit Quote

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)

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 10-08-2004 15:19 Edit Quote

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)

mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

IP logged posted posted 10-08-2004 15:27 Edit Quote

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.

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 10-08-2004 16:15 Edit Quote

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

Schitzoboy
Paranoid (IV) Inmate

From: Yes
Insane since: Feb 2001

IP logged posted posted 10-08-2004 20:47 Edit Quote

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..

mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

IP logged posted posted 10-08-2004 22:02 Edit Quote
code:
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.

Schitzoboy
Paranoid (IV) Inmate

From: Yes
Insane since: Feb 2001

IP logged posted posted 10-09-2004 02:16 Edit Quote

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.

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 10-09-2004 20:43 Edit Quote

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

Schitzoboy
Paranoid (IV) Inmate

From: Yes
Insane since: Feb 2001

IP logged posted posted 10-09-2004 22:22 Edit Quote

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)

Schitzoboy
Paranoid (IV) Inmate

From: Yes
Insane since: Feb 2001

IP logged posted posted 10-20-2004 01:41 Edit Quote

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)



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu