Absolutely Position bottom border moving in IE7 and more

HTML & CSS
1

Hello there, I have been working on a layout that has three boxes for the content across the page, which line up at the bottom, using an absolutely position element, which contents makes the bottom border of my lined up upper boxes.

here is the site:
www.iapto.t35.com.

They look fine in FF, IE8, Opera, but not in IE7.

I have similar positioning problems in other projects like in a second-level horizontal suckerfish drop-down menu. It seems as if the absolutely position content is being pushed to the left, and I don’t get what’s happening.

Also, when the page loads at first many times I get the page without the styles, having to refresh it once to fix it. Why is this.

One more thing, I have been using Adobe Browser Labs to the the look of my sites (only 3 so far) in different browsers, I have reallied on that to know whether or not they display in most browsers as intended. Is this correct? I’m a being unprofessional. Is there a more reliable tool.

Any help greatly appreciated, and please let me know what you think of my design.
Thanks a lot!

2

Hi,

There are 2 issue with the border here. The first is that the elements in that right column need haslayout but more importantly the absolute positioning is offset because it is placed without using co-ordinates.

IE7 and under will not auto position correctly unless the text-align of the parent is set to left otherwise it thinks the auto position is central (which in a way it is).

You need to set links_s to text-align left and set haslayout as shown below (if the inner inline content needs to be centred then apply text-align:center on an inner element instead).


.primary .links_s {text-align:left}
#set1,#set2 {zoom:1.0}/* or use width if you don't like the proprietary zoom */

I assume you know that the equal column method you are using will break very badly if you try to use any in-page links (fragment identifiers) and is the reason that this method is rarely used.

You can make equal columns more simply with my method here.

I have similar positioning problems in other projects like in a second-level horizontal suckerfish drop-down menu. It seems as if the absolutely position content is being pushed to the left, and I don’t get what’s happening.

I’d have to see the site n question but it may be the same bug as above (or one of many others :)).

One more thing, I have been using Adobe Browser Labs to the the look of my sites (only 3 so far) in different browsers, I have reallied on that to know whether or not they display in most browsers as intended. Is this correct? I’m a being unprofessional. Is there a more reliable tool.

I don’t know how the Adobe browser Labs work but so I can’t comment on it but there is no substitution for trying in a real browser. Just download as many browsers as you can - they are free :slight_smile:

You can download Ietester for testing older versions of IE. It’s a little unstable but does the job.

3

Thanks for your recommendations, which is more like teaching at this time. And yes I did try to use in-page links, and I drop their use because of the way the page would brake once linked, I was not mindful of the connection with the column height technique. I learned it from a CSS book, CSS Mastery by Andy Budd, which I find incredibly informational, although I did some tweaks to the original code and that’s what perhaps made it less reliable.
I did try however to apply your changes and did not get to the solution, but I guess I will have to find out more about the layout issue.
Thanks again.

4

I did try however to apply your changes and did not get to the solution,

Try again as I have a local working copy of your page which shows the border working perfectly so I know the fixes I gave will work 100%.

Just drop the code I gave you at the end of the css file and it will work.

If it isn’t working then upload the page with the changes I recommend so I can see what you are doing wrong. I have just copied all your code locally once again and tested and it works exactly as it says on the box :slight_smile:

5

#set1,#set2 {zoom:1.0}/* or use width if you don’t like the proprietary zoom */

It works, I was missing the #set1, #set2, and was not giving them layout. Greatly appreciate the help there.

As of the problem in my other pages, I had an image at the bottom of my other pages .secondary ul, so that caused the .bottom class to be pushed to the right. I applied

display:block

, and that fixed it for me.

I also resolved the problem with mu Suckerfish Dropdown Menu. And it wasn’t the ingenious in me that find out the solution really, i just apply the java code form the Son of the Suckerfish article, and also add a

href="#"

to the anchor tags inside the LI, which are anchors to match the rest of the LI’s. But it scapes my understanding why this will make the code work, although I’m glad I was able to resolve the problem, thank God.
I will like note that in the IE Accessibility mode, the sf dropdown appears (I notice other people explained that It wouldn’t appear at all), in my case, flushed to the right and top corner.
Lastly, I wanted my dropdowns to be horizontal (outer and inner) so I did not make them relative(containing LI no

position:relative

) and this will make the second drop to be like that, can I ask why exactly that is.

I’d like to share this:
I apply an easy CSS vertical expanding effect to my main .nav, by adding a

 .nav li.title:hover{padding-bottom: 2.2em;}

. I can be certain It won’t present any problems, but it works fine in IE7/8, FF, Chrome, and Opera.

6

[QUOTE=mpiantella;4593113

I also resolved the problem with mu Suckerfish Dropdown Menu. And it wasn’t the ingenious in me that find out the solution really, i just apply the java code form the Son of the Suckerfish article, and also add a

href="#"

to the anchor tags inside the LI, which are anchors to match the rest of the LI’s. But it scapes my understanding why this will make the code work, although I’m glad I was able to resolve the problem, thank God.
[/quote]

A elements without hrefs are named anchors and IE6 only hovers on anchors

I will like note that in the IE Accessibility mode, the sf dropdown appears (I notice other people explained that It wouldn’t appear at all), in my case, flushed to the right and top corner.
Lastly, I wanted my dropdowns to be horizontal (outer and inner) so I did not make them relative(containing LI no

position:relative

) and this will make the second drop to be like that, can I ask why exactly that is.
.

The suckerfish code isn’t that well optimised for various browser bugs and they use auto positioning to bring the absolute menu into place but this seldom works in IE6/7. The solution is to apply position:relative to the parent list element and then you can set the dropdown ul to left:0 which makes IE know exactly where it should be placed.