View Full Version : Resolved Problem with floats and positioning in IE6

Nov 4th, 2009, 04:42 AM
While I have been lurking around here learning from you guys for the past month this is my first time posting here, so hello everyone.

The page I am working on is pretty complex so rather than posting code here I just set up a test page. The page is password protected so please find the login info below.

user: iesucks
pass: evilie

So the page is working fine in Firefox and it is mostly fine in IE7 and 8 (some minor issues that I still need to fix in IE7/8 but they are just minor issues and not really the point of this post - though I may ask for advice on those issues later). The site even works fine in IE6 (after having spent inordinate amounts of time addressing hundreds of problems in that browser), except for the one stubborn problem which I have as yet been unable to fix.

If you look at the page in IE6 I'm sure you'll spot the problem right away. The crystal buttons which should be arranged horizontally along the top right of the page are arranged vertically in the center of the page in IE6. They are in the right place in FF, IE7 and IE8. After spending the past 3 days trying to fix this in IE6 I am about ready to start ripping my hair out. The rollover effects for those buttons also don't work in IE6 but I am not really that concerned about that - ideally I would like to get at least the text overline on rollover effect working in IE6 but even that would just be icing on the cake. The main thing is to get the positioning fixed.

One thing that I should mention is that this site will get chopped up and put into our CMS (content management system). So I have it set up so that the different buttons don't have any button specific classes or IDs. The class names and the file names for the graphics are exactly the same with the only difference being the color 'red', 'blue', or 'white'. The buttons don't have a specific width either. It is set up like this so that someone will be able to rearrange those buttons easily through the CMS and add new buttons there just by entering the title, link target URI, and color. The container for the buttons also has no specific width although it would be alright to give the container a width of 760px since that is the min-width of the page (I did try that along with a million other things but nothing seemed to work so I put it back).

So far the only results I have been able to get in IE6 is what you see now, or the buttons simply disappearing completely in IE6. I am already using conditional comments in order to load an IE6 specific stylesheet (for min-width) so any IE6 specific fixes for this should ideally go in that stylesheet (iefixes.css).

I would also prefer to avoid conditional comments within the <body> of my markup (granted I already have those 3 IE6 specific divs wrapping the page for the min-width fix but they are only at the very beginning and end so they don't muck up my markup too badly, plus I could just as well remove those conditional comments as the 3 unstyled divs wouldn't break anything in other browsers - being totally unnecessary for anything other than IE6 though, I just decided to hide them from other browsers). One thing you may notice is that I am not using any hacks, or browser specific code except for the min-width stuff for IE6. It is all valid HTML 4.01 strict and valid CSS. Not 100% semantic HTML but fairly close. So I would prefer to avoid any ugly hacks.

I realize that many of my graphics are messed up but that is not an issue, they are all just shabby placeholders at present.

I will be deeply grateful for any help any of you may be able to offer with this.

PS. The last time I built anything for the web was 10 years ago and it was strictly using tables generated by Dreamweaver's wysiwyg layout mode and Imageready's automatically generated table layout image slicing features. So while I feel like I have learned a great deal in the past month I do welcome any additional constructive criticism regarding my work on this page.

And again, thanks so much for any help you may be able to offer.

Edit: I just realized that my CSS file may not be so accessible. I'm sure most of you would have figured it out though. If you log in to see the test page provided above then you can also access /test02/assets/ (just add /assets to the URI) where you can find bq-clean5.css. Of course you can just view source for the HTML.

Nov 4th, 2009, 09:35 AM
Try applying a width to .topbuttons_cs. In the absence of this IE6 is making these divs 100% wide.

Nov 4th, 2009, 11:14 AM
SB65 thank you so much! You have saved me from premature baldness.

I suspected that it was a width issue but you pinpointed it for me and put me on the right track. The issue then is that i need the div holding the text to be dynamic in their width.

What I actually used was
.topbuttons_cs {width:85px; white-space:nowrap; overflow:visible;}
I put that in the ie6 specific stylesheet.

I understand that ie6 will treat width not quite like min-width but not exactly like modern browsers treat width either. The images are 85px so there is no way those buttons can get smaller than that (spacing wise) but they can get bigger due to the variable sizes of the text links. The "hassle free returns" is wider than 85px so width:85px would cause it to wrap, thus the white-space:nowrap but then it gets cut off at 85px, thus the overflow:visible, and happily for me in IE6 this doesn't force the text to stick out of the box (as it would in modern browsers I think) which would mess up the spacing, but rather it just allows IE6 to expand the width of the box in order to accommodate the contents.

I am so happy now that I think I am going to knock off early and go out for drinks!

I'll see if I can get the text overline on rollover working tommorow..
Thanks again SB65!