CSS or HTML issue, not sure which one

[Hig]

So I'm returning after a falling off the map for a little while. In fact, I had to register again since I lost my log in info. Anyway, I have an issue I'm working on that I could use some insight. I would post the code, but it is rather lengthy and would be easier to just use firebug to see.

 

Here is the problem: http://www.booksamillion.com/product/F608941810070

 

You may (or may not depending on something or another, but most likely you will) notice that the price and add to cart btns on the left side of the page are breaking the background module they are housed in. This is because the css (for this class 'product-actions') is set to position:absolute. So I corrected the problem by setting the position to relative, but I can't get the image to position itself the way I need it. I need it to be -10px from the top of the container it is in (the way you will see it in the link I provided), but if you try to set negative margin after setting the position to relative, then the image doesn't use the top of the module as it's 'top' reference. I believe this is because the HTML is set up like this:

 

 

 

 

 

 

 

 

I think the h2 tag is the issue, since it's height will affect the negative margin of the 'product-actions' class (which is the class I am talking about).

 

So how confussing is this? Please tell me if I am not making any sense. But if anyone can tell me how to make the 'product-actioins' class be relative and always be 10 above the blue module, I would greatly appreciate it.

 

Thank you,

Keith Higginbotham

[Wickham]

I made these edits:-

 

to the stylesheet base_20081104.css:-

 

.product-actions{position:relative;/*absolute;*/top:-45px;/*-10px;*/left:10px;float: left; margin-left: -240px; }

 

which makes it position: relative as you wanted but I had to edit the top size as well. I don't know why I had to add the margin-left: -240px; perhaps you can sort that out, all I know is that it works.

 

I moved the div class="tabset" position in the html file so that it includes the div class="product-actions" instead of them being separate:-

 

.............

Bella Swan Character Figure

class="subtitle">

 

...............

 

and deleted it lower down:-

 

.............

 

 

Overview

...............

 

It works in IE7 and Firefox to keep the left side in position up at the top with the buttons and text below inside the blue frame. I haven't tested other browsers.

Edited February 27, 2009 by Wickham

[Hig]

I think I found a simpler solution, although I am not finished testing.

 

I changed the css to

 

.product-actions{position:relative; margin-top: -10px; margin-left: 10px;}

 

and then moved the h2 tag below the .product-actions tag, and that seems to work.

 

I will see if it can be that simple and will report back shortly.

 

Thanks Wickham for looking at it, I will try your method if mine fails. I do know that I need to keep the tabset class seperate from the product-actions class due to the overall structure/use in the site.

 

Thanks,

Keith

[Hig]

Just when I thought I figured it out, IE bites me in the rear. I have it looking good on FF and Safari, but in IE8, the class .product-actions is not floating right. Instead, it is confined to the h2 area. See link for attachment.

 

http://khcreativemedia.com/bamm/ie8.jpg

 

This is using the method I mentioned in the post above.

 

Any ideas as to what bug in IE I have?

 

Thanks,

Keith

Edited February 27, 2009 by Hig