geeky

kawaiiness’ layout

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.

11 thoughts on “kawaiiness’ layout

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

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

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

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s