Topic: Bluerobot.com

Hi, guys. today I have been copying and figuring out how to make something like Bluerobot.com. As you know I have been suffering from exact pixel layout problem. So I thought good idea to make exactly same site of them for just practice.

A lot of guys has heard of IE5x bug against margin and padding staff, havenot you? I learned about this from tanket.com. I jsut want to make sure if I am right.

In the nut shell, problem is IE5.x doesn't add border and padding. When you set div like below, width includes border and padding. What you will see on the screen using IE5.x will be 200px width. But this is against W3C recommendation.

quote:

---

.hiro{
padding: 20px;
border: solid 10px #000;
width: 200px;
}

---

On the contrary, other web browser does understand this point right such as Opera, IE5 Mac, and Gecko.
So div like above will be understood differently and will be shown on the screen differently.

Here is the solution that protects IE5/Win form its own bug. Please see this code below:

quote:

---

.hiro{
padding: 20px;
border: solid 10px #000;
width: 260px;
voice-family: "\"}\"";
voice-family: inherit;
width: 200px;
}

---

Then following above, you put this to be nice to Opera5.

quote:

---

body>.hiro{width: 200px;}

---

Here is my question. I can see the point why you put body>.hiro{width: 200px;}. Because it allows other browsers to override width is 200px not 260, right?
But I cannot see any point why you need this part:

quote:

---

voice-family: "\"}\"";
voice-family: inherit;
width: 200px;

---

I think I don't need them. The reason is that it seems doing nothing just sitting there. I mean this will be fine enough.

quote:

---

.hiro{
padding: 20px;
border: solid 10px #000;
width: 260px;
}

body>.hiro{width: 200px;}

---

Don't you reckon? Please tell me your thoughts and opinion.
I suceed making blue robot and tanket though.
Cheers.


Hiroki Kozai

[Emp edit: Making the links work since 2002]

[This message has been edited by Hiroki (edited 04-29-2003).]

[This message has been edited by Emperor (edited 04-29-2003).]

OK, tantek's hack takes advantage of a parsing bug in IE5.x--in other words, that browser will not acknowledge anything beyond the funky part (the two lines with "voice-family"). Other browsers, on the other hand, ignore the funky markup and continue on to the next line, which overrides the previous width.

The "be nice to Opera" rule is in there because Opera 5 exhibits the same parsing bug that IE5.x exhibits--but it gets the box model right (unlike IE5.x). In other words, if you don't put that in there, Opera will ignore the fix and use the IE width--but it will be the wrong width.

Is this starting to make sense now? Do you see why you need tantek's hack? The way you have your code, it will work in IE5.x and Opera, but it will not work in other browsers (notably, Netscape). I know what you're thinking--doesn't the Opera rule take care of the other browsers as well? Well, this is where things get fuzzy for me, but I've always assumed that that particular code only affects Opera. At least, that is my understanding of the situation. I must admit it is all very confusing, thanks to the browser manufacturers (once again).

My advice to you is this: if the original code works (with tantek's hack), don't change it. Why bother running the risk of your design breaking in a browser that you may not have handy for testing? The people who came up with these solutions know what they're doing when it comes to CSS--trust them. I know that may not be a satisfactory answer (kind of like telling you "because I said so, tht's why"), but if my explanation above doesn't suffice, then that's the best I can do for you.

Personally, I have given up on trying to make things pixel perfect and just decided to "go with the flow." But that's me.



[Edit: Stupid spelling...]



www.liminality.org

Hi, Suho. Wonderful to hear from you.
Yes, I got it. Yes!

My question was why I needed those funcy part like:

[quote]
.hiro{
padding: 20px;
border: solid 10px #000;
width: 260px;
voice-family: "\"}\"";
voice-family: inherit;
width: 200px;
}

Because they will overwrite ex-width for other browsers. In this case, IE5.x shows width 260px including padding and border within itself. But other browser will show 260px like:

20px + 20px + 10px + 10 px + 200px = 260px.

so that fancy part is so important, isn't it? Thanks for your reply. I am glad to hear from you.

And also, I don't want to set layout using px. Becuase it doesn't flow, does it? But I have been having tough problem using % layout for ages. I cannot figure out what problem is. So frustrating. That's why I am doing these tutorial to find way.

Many many thanks to you. Cya.



Hiroki Kozai

OK, good, I'm glad you got it.

quote:

---

And also, I don't want to set layout using px. Becuase it doesn't flow, does it? But I have been having tough problem using % layout for ages. I cannot figure out what problem is.

---

By "doesn't flow" you mean the sizes of elements don't change as the viewport size changes? If so, then yes, pixel-precise design doesn't flow. I've had far more problems with px for measurements than with percentages, though. My site (see sig), for example doesn't measure anything in pixels (well, I think I might have used pixels to pad link text). Granted, it's a very simple layout, which is kind of why I like it. What is it about percentages that isn't working for you?

Hi, Suho. Great to talk to you on the net.
Well, I meant "liquid" design. It flows depending on the screen resolution. It was talked in Zeldaman's book, "talking to the talent to the web".

I have been designing almost everyting using percentage not pixel because of his recommendation. You know I have been making DOS web site? I have been sick of re-coding that site. I don't know why I cannot get what I want. It has been just nightmare.

That is why I did bluerobot.com tutorial. I wanted to find another way or to make sure myself abot the technic.
Today I suceed to copy those bluerobot site from just seeing design, not seeing code of them. It made me quite happy, you know.

Many many thanks for your help. These days, finaly I feel I am getting better. But still far and far to be like you though. Even I cannot see how far it is. I will keep trying, anyway.

Have a good nighgt.

Cya.


Hiroki Kozai

quote:

---

But still far and far to be like you though.

---

And you better thank your lucky stars that you're not like me yet! I don't think the world could handle two of me!



And here's something for you to ponder when you wake up tomorrow: when creating a "fluid" or "liquid" design, it is not only your design that should be fluid. If your design is fluid but your mind is rigid, there will be no harmony. Your mind must be fluid also, like water.

Look at a stream flowing down a mountain. What happens when you place an obstacle in its path? It simply flows around the obstacle and continues on its way.

There is never one single path to any design goal. If you find an obstacle in your way, flow around it, and another path will open up to you. Never let your mind become fixed or rigid.

I'm not trying to be humorous here--I mean this in all earnestness. Ponder this in your free time, and see if it does not help you.