By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,731 Members | 1,123 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,731 IT Pros & Developers. It's quick & easy.

Position confusion - two troubles

P: 25
I have been away from here for a while working long and hard on my site and am pleased to say the dawn broke and all suddenly went well. Almost.

The HTML and CSS are both validated (YEA!) but I have two buggies that have cropped up and I think they are position attribute conflicts of some sort. I just haven't been able to figure it out so I appeal to the big brains here again.

http://www.purplefriends.com/fouad/csstest.html - the page

http://www.purplefriends.com/fouad/csstest.html - the css

In FF, the image has decided to move south. It should be positioned next to the title heading. Other than that, all looks fine.

In IE, the image is positioned correctly BUT the tan box on the right is overlapping the banner. If I move it down, there's a gap in FF.

I did make it look right by playing with position attributes but ended up with my dropdown menu showing up in all kinds of weird places.

#ticketblock { background-color:#D7B076; width:205px; height:95px; margin:-21px 0px 0px 594px; position:relative; }

Changing the above position attribute makes the menu break in both browsers. But if I change it to static, it looks right in both browsers.

Any help for each of these problems would be gratefully appreciated!

Kathy
Oct 30 '06 #1
Share this Question
Share on Google+
2 Replies


P: 25
Dang - shouldn't type while sleeping...

Here's the link to the stylesheet:
http://www.purplefriends.com/fouad/fsoedited.css

And no worries about the missing background images - I'm fixing that now!

Thank you for any help!

Kathy
Oct 30 '06 #2

P: 25
I have discovered one interesting thing about my #topgroup but I'm not sure what it means.

Initially, I had #topgroup with a -343 top margin to place the content at the correct point on the page. The text portions have a top margin of 10, the image a top margin of 0.

Somehow, FF placed the text content in the correct place but left the image at 0 top margin overall - as if it is ignoring the -343 of #topgroup.

It looked like this:

#topgroup { font-family:Georgia, "Times New Roman", Times, serif; width:594px; padding:0; margin:-343px 0px 0px 0px; background-image:url(images/content_sm.jpg); position:relative; }
#topgroup h1 { font-size:1.8em; font-variant:small-caps; color:#000000; font-weight:bold; margin:0px 5px 10px 18px; text-align:left; }
#topgroup hr { color:#000000; margin:5px 5px 10px 8px; width:240x; position:relative; }
#topgroup img { float: right; padding: 5px 10px 5px 10px; margin: 0px 10px 5px 10px; position:relative; }

I changed the #topgroup top margin to 0, which placed all the content at the same level as the image.

When I changed both the top margins in h1 and img to -343, the image layered on top of the content. The text did not wrap around it as it did previously.

All this is very interesting but I just don't know what it means or how to make it work.

Thank you for any ideas!

Kathy
Oct 31 '06 #3

Post your reply

Sign in to post your reply or Sign up for a free account.