wee i had so much fun coding for rellie’s layout. my first time to use a few new css tricks. the layout as you can see is coded in tableless css with valid xhtml 1.0 strict and css. the content is always centered.
for the links that look like image map, i used this css image map trick. it worked well tho a little tedious to write. wonder if they are going to build softwares to create that kind of code?
and then i also learned a cool IE hack. sometimes the same css code looks different in IE than other browsers. if you want to get different display results in different browsers, you can do something like this:
/* google ad */
#googlead {
text-decoration: none;
position: relative;
top: 76px;
left: 273px;
width: 468px;
height: 60px;
}
/* only IE reads this */
* html body #googlead {
top:78px;
}
this particular code makes the google ad shown at 78 pixels from the top in IE but 76 pixels in other browser. kinda cool?
i also found that border-color: transparent does not work in IE. the border will be displayed in black. i haven’t found a way around that yet. if you know, please share 🙂
one thing i did today that i’ve never done before is take into consideration how the page would look without css. that’s why if you take the css out, it still looks ok and no content has been lost 🙂
after this experience, i feel much more confident writing new css layout.
Pure-Essence.Net 
wow… you code that in css?!? O.o I will never manage to do that.. I tried learning that but failed miserably… Sigh…
It looks awesome Dodo, as always. 😀 You can achieve so much with CSS, you really can make a brilliant layout out of nothing. Bother that not a lot of people try it, it is worth it.
it looks good. i love it. how would i get a design from you? email me!
i don’t do graphics. i can help you code.. but you will have to pay me back with something 🙂
Wow dodo, that is one good piece of css! Thanks for sharing the IE tip, it looks really useful! No more using php to check the browser :3
Hmm, which border are you trying to make transparent?
i don’t have a border now coz i had to use an alternative way for the layout. i’m just saying
border-color: transparent;does not in IE and i can’t make it work in any way yet.
I see what you mean 🙂 The layout is amazing (duh, it was made by you! LOL)
woot! Great tip sis! And the layout is just kawaii!!! 😀
Ah dodo, very interesting. I have seen this technique, but did’nt understand it. I know Dream weaver implements it. (even though I don’t implement DW lol). I am going to try it.
I wish I had seen it before the border “went away”. I’t strikes me as a “poor mans” or light weight “tantek box hack”>> exccellent.
I have two other comments: the first being, re: “disable styles”, doing so is one of the little known, organic, SEO techniques. when you disable styles you see more what the spiders see. So if the page renders well, with good semantics, without styles all the better for search engine visibilty (ie: an h1 right at the top, liberal use of ul’s etc etc) .
next: I like to share this, as it kicked my butt figuring it out, and I have never seen any reference to it anywhere. Internet explorer does a bizzare extra padding thing when rendering link menus stacked in an “ul” list structure but here’s the hack . I hope it saves someone viewing 1/100th of the time it took me to figure it out.
thanks for sharing 🙂