Got CSS Skills? Minimum Width IE6 on Forum

[Mehdi]

12% of forum users are still using Internet Explorer 6 instead of Firefox/IE7/google chrome.

For some reason phpbb3 put a min width for IE6 on the prosilver theme that you're seeing. So when you check the forum with ie6 and resize the window, the whole design goes bad (try it & you'll see).

Adding this fixes the min width problem on IE6

Code: Select all

* html #wrap {
width: expression(document.body.clientWidth <900 ? "810px" : "95%" );
}

However, when resizing the window, the right sidebar goes left instead of saying there. Wasting time trying to find a solution with this since I'm not that good all this stuff. If you know better: I'd appreciate help with this.

Thanks!

[Kyle]

for dynamic resizing, percents are superior to pixel counts, eg: right sidebar 30% of window instead of 200px...I will take a closer look at this tomorrow however, don't feel like re-installing ie6 right now...hope this helps either way

[Mehdi]

Internet Explorer 6 stand alone (no install): http://browsers.evolt.org/?ie/32bit/standalone

It resizes correctly. The problem is with the left div (sidebar), which goes right when you get under 810px window size.

[lolindrath]

Medhi, did you manage to fix this? I tried to reproduce it on IE 6 and couldn't make it happen.

[Mehdi]

Medhi, did you manage to fix this? I tried to reproduce it on IE 6 and couldn't make it happen.

Nope didn't fix it all. Resize browser screen with to like 50px, you'll see what happens. If you don't, I'll send you a screenshot. Thanks for helping out.

[lolindrath]

Here's my fix, it isn't 100%, the sidebar still moves around a bit but it always stays on the left-hand side. Here's a test version you can look at: https://lolindrath.dyndns.org/strong-lifts-test/got-css-skills-minimum-width-ie6-on-forum-t11566.html

I've checked it in Firefox 3, IE7, IE6 and Google Chrome. I'm not able to try it out in Safari or Opera at the moment. Safari should be fine since Chrome and Safari are built on the same rendering engine.

1. Change template: remove the

Code: Select all

class="column"

from the

Code: Select all

<div id="pagebody" class="column">

line.

2. Move the

Code: Select all

<div id="container">

ending tag up to just below the ending tag for the page body. (this is easiest using a folding code editor like Notepad++ so you can just collapse the div's).

3. Use the new style.css here: https://lolindrath.dyndns.org/strong-lifts-test/got-css-skills-minimum-width-ie6-on-forum-t11566_files/style.css

Hope this helps, let me know if you have any trouble.

[Mehdi]

Thanks for the help

* I can live with the left sidebar moving, but what's with the top nav bar?
* change template => which files is this I should edit ? (too busy to search)
* stylesheet => what did you change? (curious)

Thanks again

[lolindrath]

* I fixed the nav bar, I was missing some image files (I just did a Save Page As... from Firefox) if you refresh the link it should show the changes.
* Its hard to tell, it looks like you added a good bit ontop of the stock prosilver.
** for the first change - should be in: styles/prosilver/template/overall_header.html
** for the second change - put the close div tag in overhall_header.html just after the pagebody close and then you'll have to delete the extra close in I think styles/prosilver/template/overall_footer.html
* Here's a diff of the changes (they're all within the first three pages) - https://lolindrath.dyndns.org/strong-lifts-test/style.pdf - I basically found a left-hand column example online where the lefthand column appears after the content (good for the google juice, I'm guessing that's why you did the same) that worked when I applied your javascript fix and then made the same changes to your template.