469,356 Members | 2,172 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,356 developers. It's quick & easy.

Position confusion - two troubles

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!

Oct 30 '06 #1
2 1014
Dang - shouldn't type while sleeping...

Here's the link to the stylesheet:

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

Thank you for any help!

Oct 30 '06 #2
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!

Oct 31 '06 #3

Post your reply

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

Similar topics

3 posts views Thread by tomi | last post: by
reply views Thread by Michal | last post: by
14 posts views Thread by Schraalhans Keukenmeester | last post: by
2 posts views Thread by pierre | last post: by
8 posts views Thread by merrittr | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.