How to make IE 6 look like FF2 and IE7?

Hi Everyone,

I hope this thread is not going to get kicked out as it has on some other forums I use. Ok on with the explanation and question.

Basically I've become involved in a site www.lwfox.com that uses div tags to control the positioning of all elements.
Initially absolute postioning had been used for all div's unfortunately this did not work exactly as desired.
I used the div style float because some of the div's can have variable amounts of content and want the other div's to position themselves around them.

Upon testing the site looks fine in Firefox 2 & IE 7, however when viewed in IE 6 and earlier it leaves spaces between the floated div's. This completely ruins the look and feel of the site.

If it is possible to accurately and easily determine which browser is viewing the site it would be possible for me to display a tabular version for those that are unable to correctly display the div's.

I looked at using

PHP: Select all

request.servervariables("HTTP_USER_AGENT") 

However to my eyes it would require a fair bit of string manipulations in order to extract the browser type and version information.

Can anyone suggest a easy way of extracting browser type and version number so the best version of the pages can be displayed?
Or alternatively a method by which IE 6 and earlier can be forced to handle div float in the same manner as IE 7/Firefox?
Or alternative to using div float to accomodate variable size divs surrounded by other divs?

Hi Phil, you may want to check this thread out - http://www.webforumz.com/asp-forum/60212-problem-with-browser-based-script-viewing.htm
as it deals with finding browser information and then manipulating the response to show a desired image.

You could also look here http://www.quirksmode.org/css/condcom.html as it shows you how to determine what browser is in use and use a conditional statement to use an alternative style sheet, you could have a entirely different stylesheet or just replace the classes / divs that are affected by a particular browser.

Hi Robbie,

Thanks for your post.

I was thinking along the lines of determining which browser and version is being used to view the page then use asp conditional to determine if the div tag version is shown or a tabular version.

HTML: Select all

<% 
if ((IE) AND (version < 7)) then
%>
    html table layout
    ....
<% else %>
    html div layout
    ....
<% end if %>

Personally I would not want to use the IE conditional comments because I imagine that IE 4 will have the same problems as IE 6 and the conditional comments are not compatible to versions prior to IE 5.

Like I said previously
Having looked at the webforumz post you suggest I see that it can be done which I was already sure of however I did not see anything about the necessary string manipulations inorder to extract the information.

I understand how to use

PHP: Select all

stringContains = InStr(1, user_agent, "Firefox", vbTextCompare) 

to determine which browser it is (by substituting appropriate browser string) however I don't know of a simple method of extracting the version number which is what I really need.

Or indeed if there is another completely different solution to this problem.

You really need to rethink your plan, because at the moment it's a complete mess. You are making life very complicated, when it should be simple.

• Do not use browser detection. It's messy, unreliable, and unnecessary. Use conditional comments instead. IE4 is irrelevant, because almost nobody uses it. Heck, even IE5 is irrelevant!
• Do not use absolute positioning for your website layout. Use floats instead. Absolute positioning is a powerful tool that should not be used lightly, and not at all by beginners. It has specific applications, but floats are better for basic layout.
• Don't even consider making two versions of your site, one in CSS and one in tables. Are you crazy? You might as well just use tables if you're going to do this!

Before I started on the website absolute positioning had been used.
Website broken in several places due to div's expanding into areas other div's were absolutely positioned in.
I converted where appropriate to floats
Website fine in IE 7 and FF 2, but even more broken than before in IE 6 (unsure about status in other browsers I don't know currently if other browsers experience the same problems as IE 6)
Where I have used Floats in IE 6 it inserts a space around them.

Therefore if you know a method by which I can force IE 6 to behave like IE7/Firefox with regard to floating div's I will gladly do it that way.

The site is already made and visible on the web, using floats.

All the sites I create I use the CSS conditional selector as i mentioned in the previous post, I totally agree with Mike on this matter and would urge you to not use tables if possible.

How do I stop IE6 inserting a space around floated div's?

incase people do not understand or are only reading part of my posts

IE 6 inserts a space around floated div's how do I stop it doing this?

as stated in my last post

If you know a method by which I can force IE 6 to behave like IE7/Firefox with regard to floating div's I will gladly do it that way.

I can't think of any more ways of asking the same question at this time and I will repeat myself if I have to.

Oops; sorry, I was scanning not reading.

This is what you should do:

1. Validate your code. You have lots of errors, and -- big surprise! -- validation errors frequently produce rendering errors; these rendering errors are unlikely to be consistent across browsers, because invalid code causes browsers to guess at the author's intention. Different browsers make different guesses (they have different error-correcting routines).
2. Remove all inline CSS, placing it in the external CSS file (so you'll need to use classes).
3. Create a blank, separate stylesheet just for IE6. Use conditional comments to serve this to IE6 only (or to versions less than 7). Make sure it is declared after the main stylesheet.
4. Use this stylesheet to tweak the display in IE6. Rules that you add here, providing they are specific enough, will override your main styles. Use !important temporarily for assurance of an override.
5. Create a minimal test case to determine the nature of IE6 misbehaviour. Remove sections of your code until you have as simple a page as possible, yet with the bug still occurring. In other words, isolate the bug first, observe its behaviour, and then try to kill it. You may have multiple bugs.

You'll need to do some testing here. IE6 has a large number of bugs, including many float bugs. Good luck.

Oh dear...

You also need to validate your CSS. You have a parse error.

I cannot stress this enough: invalid code produces errors! You can't expect your code to work as expected if it's fundamentally broken.

Of course, this won't necessarily fix your problem; but it might fix your problem, and you should do it anyway.

Hi Everyone,

I want to formally apologise to everyone reading this thread and particularly MikeHopley and Robbied72 for my insulting post made on 06/Nov/07 at 17:22.

It was totally inappropriate and unnecessary to be insulting like that especially to those people who are trying to help me out.

I'm Sorry

Moving to CSS forum..
I manage to change the title of this thread only the first one, the reply post still using the old title..
Can someone edit that, Thanks.

Forgiven. We all get bouts of frustration mate, I know from experience.

No offence taken. It's easy to get frustrated; and I did read rather superficially.

If I knew the exact cause of this bug, I'd definitely tell you. As it is, I think your best option is to go bug-hunting yourself. Maybe someone else will recognise the symptoms, however!

Hi Phil

I would first do what others have said and strip out the inline css.

Next, I would recommend swfobject to place your flash, and then fix any remaining validation errors.

My interpretation for layout would be a fixed 'wrapper' X pixels wide centered using margin: 0 auto, in which all the content is placed within.

Next job would be to simplify the layout with a div at the top for your banner and navigation, and then two inner divs below that are left and right floated respectively.

If you don't mind, I have had a little play with your home page based on the tips above, and will post it to you when I'm finished. No obligation, I'm just interested to try a fix this

Regards

Alex

In response to my previous reply, it's a tad more work than I thought. That's not to say there's heaps of work, the layout just needs simplifying.

I don't think there is a quick fix here - there's a lot of unnecessary divs and code in there that could do with stripping out. Did you use Dreamweaver by chance?

I would recommend the layout I mentioned previously, with a container div, banner div and 2 floated inners (use display: inline; on them to fix a float bug in IE6), using external stylesheets of course.

And if you wanna go all the way, replace those rollovers with CSS image swaps or background-position

Either way good luck. If you need any help you know where to ask

Hi,

I've been trying out what you've suggested. However I don't think I can simplify the layout as much as you think.

if you take a look at www.lwfox.com/test2.asp you will see the multitude of div's coloured to separate them and laid out as intended.

on www.lwfox.com/test.asp you will see where I'm at currently.

The float left and right div's inside the Main div appear to ignore the size of the div and float to the edges of the screen.

Any advice would be greatly appreciated

Regards
Phil

Hi Phil

At the bottom right where you have the opening times - is this intentional that it is thinner than the above right-hand content?

If so, the attached suggestion would need to be modified, but otherwise this was what I had in mind - valid & tested in IE6, IE7, FF & Opera 9

HTH

Alex

Attached Files

index.html (1.8 KB, 5 views)

Hey, well done for validating your code!

I don't get it, sorry. Both test1 and test2 appear to have the same layout, and they appear identical in Firefox and IE6. I don't see any boxes near the edges of the screen.

Many IE6 bugs are related to the bizarre Microsoft notion of "having layout". Since you've now validated your code, a possible next step is to read about having layout. This has solved many intractable IE bugs for me.

Sorry about that Mike,

At the time when I had posted there was a small bug causing the two/three div's to break out of the Main div, this did not appear to be a problem in IE7 or FF however in IE6 they started floating to the respective sides of the Page. I got this fixed and am in the process of correcting one or two other minor problems.

Alex,

Thanks for the suggestions. The opening times is meant to be smaller than those panels above it.

If I use a div the same width as those above it but include inside it the smaller div(s) for the opening time panel floated to the left that would work??
I'll check it out

Thanks again for all of your help. Now that the layout is coming together I'll just have to work out how to accomplish it for the actual pages.

If you want the body background to show around the edge of your opening times (as it does on your site currently), the whole design would need a little re-think - will post alternative shortly