Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

Geek Culture / Web site design question (CSS help please!)

Author
Message
Nicholas Thompson
20
Years of Service
User Offline
Joined: 6th Sep 2004
Location: Bognor Regis, UK
Posted: 14th Nov 2005 00:55 Edited at: 14th Nov 2005 11:53
Link
I'm playing with transparent PNG's for my sites new design that I've been working on for far too long... I want it to be similar to the Cobalt 2.0 theme fore phpBB.

I've made some nice looking menu's (the sites still being worked on) and they look great in Firefox (no surprise) and they ALMOST work in IE, but I cant get the content section of the navigation boxes to vertically tile.

I've replaced the
bit with


In fact, the relavent CSS files are:
http://www.thingy-ma-jig.co.uk/new/themes/cobalt/substyle.css
http://www.thingy-ma-jig.co.uk/new/s.css

and the URL for the site is:
http://www.thingy-ma-jig.co.uk/new/

Any help would be appreciated as I cant for the life of me figure out how to make that bit tile (by that bit I mean '.nav DIV').

Any help appreciated here guys - thanks!

PS: Ignore the failed images on the page - i'll fix them up at some point.

Back to top
Profile PM Email Website
Nicholas Thompson
20
Years of Service
User Offline
Joined: 6th Sep 2004
Location: Bognor Regis, UK
Posted: 14th Nov 2005 11:53
Link
anyone? Sorry to bump this - but its bugging me!

Back to top
Profile PM Email Website
spooky
22
Years of Service
User Offline
Joined: 30th Aug 2002
Location: United Kingdom
Posted: 14th Nov 2005 12:28
Link
Because IE is lame in certain areas, if you looked up about alpha on ms site it tells you;

Quote: "
The object that the filter is applied to must have layout before the filter effect will display. You can give the object layout by setting the height or width property, setting the position property to absolute, setting the writingMode property to tb-rl, or setting the contentEditable property to true.
"


If you edit your substyle css and stick a width in 2nd style .nav div you will find it works but now messes other things up but a slight rearrangement of things should sort that out.

Boo!
Back to top
Profile PM Website
Nicholas Thompson
20
Years of Service
User Offline
Joined: 6th Sep 2004
Location: Bognor Regis, UK
Posted: 14th Nov 2005 13:03
Link
spooky - you sir, are a genius!

Thank you so much!! I can feel hair regrowing in the patches that were torn out.

I hate IE. A simple thing like PNG transparencies and it falls to pieces!!

What makes that fix even better is it hasn't broken Firefox either!

The solution in the end was to give the main bit a class (main_nav) and set the height for that (for IE only using the * HTML hack) to 100%.

Thanks again.

Back to top
Profile PM Email Website
spooky
22
Years of Service
User Offline
Joined: 30th Aug 2002
Location: United Kingdom
Posted: 14th Nov 2005 13:13
Link
Glad I could help. Tested your site in Opera and Netscape aswell and looks good in all of them.

I'm looking forward to IE7 when alpha transparency png's will finally work without these silly hacks. Bad thing about these hacks is that when you print or print preview in IE, all the alpha bits come out black. I went through all this hassle a while back when doing a couple of websites at work that needed layering of png images where each layer had a nice alpha shadow. Nightmare.

Boo!
Back to top
Profile PM Website
Nicholas Thompson
20
Years of Service
User Offline
Joined: 6th Sep 2004
Location: Bognor Regis, UK
Posted: 14th Nov 2005 13:17 Edited at: 14th Nov 2005 13:18
Link
I'm quite pleased with the firefox logo. A really simple CSS "hack" that hides the DIV it is in if the browser understands the HTML > BODY code (which firefox does.. and netscape I think). IE doesn't understand it, so it does shows it

I'm also really please that the links still work. There is a really big problem with using the alphaimageloader as it can stop links working from underneath it. God I love the pile-o-crap that is IE.

Cheers for your help. I'm hoping to make this layout the new version of my site.

Back to top
Profile PM Email Website
Back to top

Login to post a reply

Server time is: 2024-11-16 02:22:27
Your offset time is: 2024-11-16 02:22:27