Images have shifted down on...

User 271657 Photo


Ambassador
3,816 posts

Some questions from an HTML newbie (I don't often venture out of my VSD comfort zone :lol:):

I've read that BMP image files can cause some browser issues, and I've never seen BMP recommended for web images (just JPEG, GIF and PNG). Could these be part of the problem?

And, is it OK to have absolutely positioned elements within a relatively positioned container?
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2028570 Photo


Registered User
6 posts

Okay, so here is the latest. Thank you David for pointing out the open div's (as an amateur I didn't realize a <div class> represented an open <div> - shame on me I know). I've cleaned up the code and have run it through the validator. No errors except alt tags that I haven't set up yet and should have no impact on browser display.

Tom, thanks for pointing out that it displays incorrectly in both browsers. I just updated IE last night and you are right. It's not an issue isolated to Firefox.

Paintbrush, I even took your suggestion and changed the image files to .png's. Still no luck. And, from what I've read online, it is OK to have absolutely position elements in a container based on relative positioning because the absolute position is absolute within that container, but I could have been mislead so I'd love some feedback on that. Paintbrush and Jewelcraft, I too spend some time in VSD but I have found that some of the things I'm trying to accomplish cannot be accomplished there AND some of the "bad" code that David and Tom pointed out in earlier parts of this thread was code that was inserted by VSD not code I wrote myself.

At the end of the day, I've got clean code now and still cannot figure out how to get the positioning correct. The new page and source code has been uploaded to:

www.thinkpawsitivedogsnacks.com/tempindex.html

Any ideas?
User 184085 Photo


Ambassador
1,707 posts

let's try changing
.menu{z-index: 100; margin-left: 400px; margin-top: 100px;}
.addany{margin-left: 830px; margin-top: 125px;}
.dog {position: absolute; top: 0px; left: 50px;}
.name {position: absolute; top: 11px; left: 340px;}
.wrapper{position: relative; width: 1010px; margin-right: auto; margin-left: auto;}


to

/*
.menu{z-index: 100; margin-left: 400px; margin-top: 100px;}
.addany{margin-left: 830px; margin-top: 125px;}
.dog {position: absolute; top: 0px; left: 50px;}
.name {position: absolute; top: 11px; left: 340px;}
*/
.wrapper{position: relative; width: 1010px; margin-right: auto; margin-left: auto;}

and go one step at a time

:)
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 2028570 Photo


Registered User
6 posts

Thanks David. I've posted the new page with the markups you posted here.
User 2028570 Photo


Registered User
6 posts

I cracked it! I've posted the new page. If you think there's anything that will create problems with my "fix" please let me know. Thank you everyone for all of your help. David, if you have a dog, I'll send you some of our fantastic treats!
User 184085 Photo


Ambassador
1,707 posts

I've been accused of being a dog several times ;-) woof!
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 271657 Photo


Ambassador
3,816 posts

Glad you got it worked out - looks good! :)
Nice to know, there's plenty of ol' dogs to help the new pups out around here :lol:
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.