Hi everyone. C; So I've been coding again, and I'm coding a pet profile for someone. c: Aaand, I'm done with everything; you can see it on Fal's pet profile. :)

[HERE]

Unfortunately, it only looks fine on Google Chrome. >.> On other browsers such as FF and IE, everything isn't positioned. Aside from tat, there are a few more problems...

• I can't put an overlay. As in, the code is there, but the image won't show up. :c This is supposed to be the overlay. Sorry for the derpiness. :B

• I can't position the pet_desc. :c I've tried, but it won't budge. It only moves if I change the , but if I change it, everything goes haywire and I have to position everything again, and this thing took me almost a whole day to do. :U If that's the only thing left to do, though, then I won't mind... ^It now works, but now I can't move the content. :| Not that I'd move it, but WHAT'S WRONG. hhnggnhn. :U

• Yep, I tried making a new div for the text but I just remembered that new divs don't show up in FF. lD Dunno about IE. They show up for Chrome though. :c

I can give the code to whoever is willing to help me. :) I just need to know what I'm doing wrong, this is the first time I've coded something since forever. Dl (last year) I'm also willing to pay or something, if that helps. :3 Thank you, ping me please! :D

: I re-did the code, for FF. It should work in Chrome and IE as well, but I haven't tested that yet. The overlay should work as well, and I don't know why you can't move the with absolute positioning but you can move it with margins (as I did in the code).

Also, I'm not sure what you mean about new divs in FF. I use multiple new divs on my pet Mingmei's profile and it works in FF (it's my primary browser so...)

Anyway, here's the code:

*, , {margin: 0; padding: 0;} , , , , , , , , .pet_age_info_date, .pet_wco_info_date, h2 {display: none;} body {background: url(http://i55.tinypic.com/2rw5b92.jpg) top left no-repeat;} , {background: transparent; height: 100%!important;}

{background: url(http://i53.tinypic.com/rkwj0x.jpg) no-repeat; width: 200px; height: 200px; position: absolute; top: 65px; left: 395px;} {position: absolute; top: 90px; left: 630px;} .pet_name {position: absolute; top: 290px; left: 630px;} .pet_color_info {position: absolute; top: 315px; left: 600px;} .owner {position: absolute; top: 330px; left: 620px;} .pet_spotlight {width: 100px; height: 100px; position: absolute; top: 275px; left: 366px;} {width: 320px; height: 190px; margin: 350px 0 0 330px; overflow-x: hidden; overflow-y: auto;} p {padding: 0 0 10px 0;} {width: 160px; height: 230px; position: absolute; top: 490px; left: 740px; overflow-x: hidden; overflow-y: scroll;} .treasure_item {border: 1px solid ; margin: 5px 0 0 5px;}

Hope that helps you out! :D

[edit]Also, a tip for you: The first thing you should do when making a pet profile is resetting margins and paddings to 0. You can see I did this in the first line. Normally "*" does the job fine as a selector, but on pet profiles it's handier when you add content & pet_info to the tags as well. Using this is good because some browsers (coughIEcough) tend to display margins and paddings with added values.

I'm actually recoding it to fit FF now. xD But thank you so much for coding it, and for that tip! :) I'll use that tip from now on, thank you so much! C:

So everything was fine, except for the margins? xD

Do you have a WL? 8DD I need to buy you somethingggg~ lD

[edit]

I'm done recoding/repositioning. lD I tested it in IE and FF and it looks normal. :3 Now I'm not sure if it looks fine in Chrome because there's no internet in the computer that has it. lD [HERE]

Everything works now, thank you! :D

EDIT 2: Umm, if you don't mind me asking, you don't happen to know something about making hovers, do you? ^^; All this time I haven't thought of making hovers. :B I would be extremely grateful if you could help me. :3 Thank you! :D

: You're very welcome, glad I could be of service!

It looks fine to me in Chrome! Apparently when you code in FF you can see it the same way in Chrome, but not the other way around (probably because Chrome is a bit more up-to-date with their CSS stuff). Margin's are a real pain in the bum. It's the biggest problem when positioning stuff, because previous versions of IE (I don't know about the current version) tended to add 20px or so to any margin that you set unless you reset them. That and IE doesn't play nice with margins or absolue/relative/any positioning.

And yes, I do know something about making hovers. It's not that difficult, if you tell me what you want to hover then I can explain how to do it! :D

As for a wl, I've got two of them: my general and cluttered one and my pet Mingmei's tc wl

Ahh, thanks for that note. lD Good thing we have both FF and Chrome here. xD Margins seem icky. D8 Thanks for telling me about those! :3

Ahh, well I've seen hovers where there's some sort of image with a title, say, INFO. and then when you hover on it tythe image kind of becomes a bx, and the text is there. lD Basically I'd like to know how hovers are made for the information. :3

Also, would you mind if I ask another question? xD is it possible to make new divs for additional information, like art or credits for example? :D Thanks! ;3

Ooh, thank you! C; I shall send you some items now. xd

: Oh, that! Well that kind of goes like this: First you position everything like you want to be when people hover over it. This includes setting heights and widths. After that, you simply add an "opacity:0" to the tag and an "opacity:1" to the hover tag, like this:

{width: 100px; height: 100px; position: absolute; top: 10px; left: 10px; opacity: 0; filter:alpha(opacity=0);} :hover {opacity: 1; filter:alpha(opacity=100);}

(the first opacity code is for all browsers and the filter:alpha is for IE)

Does that help?

And yes, it is possible to make new divs. However, keep in mind that all divs that you make are still contained within the box. So you can't move them out of the box, but you can make the box bigger to move the new divs around more. I hope that made some sense. xD

And thank you very much for the items! :D

Ooh, thank you very much for explaining! :3 I never knew it's as easy as that. lD It helps a lot, thank you! :)

Ahh, right, of course. xD I'll keep that in mind then! C: It makes sense, no worries. :D I made one before but I never really understood how I did it. XD Thanks for clarifying it! :3

You're very welcome! c:

: You're welcome. :]

You can lock this now! :)