How come...

how come my Gin Ichimaru theme/layout look different on Firefox and Internet Explorer? i think it looks different on my other themes too, but i first noticed it on the Ichimaru theme.

http://www.coolchaser.com/layout/create/15524428

on the Ichimaru theme, the network and contact boxes are cut off and the borders look different on IE than on FF. the Grimmjow theme only has the network box messed up and the borders look different in IE than in FF. the Soi Fong theme (the one below the Ichimaru theme) borders look different in IE than in FF. the second Soi Fong (second after the Ichimaru theme) is ok, but it would have the same problem with the borders if the borders were the same as the other Soi Fong theme. in the Ichigo with Renji theme, the borders look different in IE than in FF. in the Ichigo theme (the one with Ying-Yang symbols) the network and contact box are messed up and the borders look different too in IE than FF. on the Ichigo theme (the theme after the Ichigo theme with Ying-Yang symbols) the borders look different in IE than in FF. on the Ichigo Vizard theme the network box pic is cut off and the borders look different in IE than in FF. on the Uryuu theme, the borders look different on IE than on FF. on the Toushirou theme, the borders look different in IE and FF. on the transformers theme the network box theme is cut off and the borders look different.

open both Internet Explorer and Firefox and see the difference. probably some people didnt take my themes cuz of these problems. is there any way to fix this?

http://www.coolchaser.com/user/profile/3816406

IE displays borders, padding, and width differently than FF does. So you have to sort of play with the settings to get it to look the same in both browsers. I can’t remember what I did to my network banners to make them look the same. I’ll have to play with it again the next time I make a couple of themes. But for the contact box I always align the background image to “top center” under the “more image options” link.

As far as the borders go…there is no trick to make them the same. IE just displays them differently when you choose “inset” or “outset”. There is an option when you are making a banner layout in FF to change up the settings a little so if you use a really thick border it won’t overlap the top of the rest of the layout. It only does that in FF.

so i have to play around with network box on IE?

Well, it’s sort of tricky to do. Whatever browser you use for it…you will have to check how it looks in the other browser once you save…and then go make some more changes and keep checking until it’s right. That is what I do.

Oh, I also just remembered, that I usually just put a big fat “0” for the padding when I use a network picture. The text will be at the very top of the box though. I think if I put the text in the middle of the box, I end up using my administrative privileges to fix it for IE. But, I’ll let you know if I can figure it out for both browsers without that trick.

well, ok…did you figure it out yet?

Hey guys~ sorry I couldn’t log in to the forum. Man I am so behind! Oh well :D

So, Kon, to answer your questions:

1) Borders look different on IE and Firefox

Answer: The appearance of the borders may vary between user agents (within limits). The algorithms that define the relationship between the colors used to achieve an effect (for example, groove, ridge, inset, and outset) are not explicitly defined in the CSS specifications, so the colors may vary between user agents. In CSS2.1, the three-dimensional border styles (groove, ridge, inset, and outset) depend on the corresponding border-color, rather than on color. (reference: http://reference.sitepoint.com/css/border-style)

Solution: To make the layout look identical in all browsers, avoid using groove, ridge, inset, and outset. Instead, specify the width and color for each borders individually (e.g. border-top: 5px solid blue; border-left: 3px solid red… etc) Of course, the effect that can be achieved from this method is limited.

2) Network box appears shorter on IE

Answer: Internet Explorer interprets the padding wrong called a box model ie bug. (read the whole article if interested on: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug)

Solution: To make the layout look identical, take out the padding on the network box’s text. The default is top:30px. This causes IE’s boxes to be 30px longer than Firefox. By taking this out, IE and Firefox will have exactly the same height. Of course, the downside is, you can’t position the text to anywhere else than the very top.

I’ve been working as a web developer for a while and I learned not to expect all the layouts to look identical on all browsers. Of course, for professional work, I wound up using lots of “hacks” so it looks identical (almost). I do understand though how you would like it to look all identical on all browsers. So, you can follow my advise above and play safe, or you can just optimize it for Internet Explorer or whatever you think is a dominant user of your layouts.

What about using the hacks? Unfortunately, you can’t use hacks on our site yet unless you have admin privilege but you can use it on your own myspace profile by putting a hack code.

How to put a hack code:

Let’s say you want the network box’s height to be 230px high but want to keep the network text with a padding top of 30px. In the theme editor, just make it look correct for Firefox which is to make the box’s height to 200px. (230px -30px). For Internet Explorer, the height actually needs to be 230px so here comes the hack:

<style> * html span.blacktext12 { height:230px; }
</style>

You need to put this code AFTER the coolchaser code so it will overwrite the previous rule. This way, you can be sure that the network box looks identical and not having to be restricted about the text’s padding.

Hope this helps!

TYVM Sachiko!!! that’s exactly what i need!!! =D

i played around with it a bit. i needed a height of 325px.
now my profile looks great on FF and IE!!! =)

btw Sachiko, i tried to add you in myspace but it require me to know your last name or email. you can add me. if it asks for an email, i messaged you one.

Thanks Sachiko!! You are awesome to explain it so well! :)

I just noticed how long that post was o it was like late at night so I must had been high! :)

Kon, I tried to add you but it said the email is wrong or something :( I’m gonna allow people to add me as a friend without knowing my name or email and just gonna add people that I like I guess :D so try adding me again! You can also add

http://www.myspace.com/coolchasers

as a friend too! That’s the official coolchaser myspace page… but I don’t check it that often :P often enough so the account don’t get canceled!

ok, i sent you an invite