By iraszl on

I've used Friendselectric theme as a base for my design and I'm experiencing an issue with it.

If you look at the main page the right sidebar sometimes overlaps the main content in Windows IE. Can you help me figure out what could be the issue?

adsoftheworld.com

Comments

sgwealti’s picture

sgwealti commented

I've had the same problem. Did you ever figure it out?

iraszl’s picture

iraszl commented

Well, sort of. I made a special CSS for IE. But this way my site looks slightly different in IE. It's fixed width in IE and flexible in all other browsers: http://adsoftheworld.com

JohnG-1’s picture

JohnG-1 commented

I've only noticed this when the main content contains a large table, for example the admin permissions table if you have alot of roles gets pretty wide, and overflows the right sidebar.

I think it is due to the <table>'s width requirements taking precedence over the CSS's #wrapper max widths. Whilst occasionally unsightly, it is at least a functional compromise for resolving conflicting width demands.

Is that what you are referring to?

I had a look with IE (nice site BTW) but couldn't see problem.

If not, have you seen the clearfix tricks at

http://www.positioniseverything.net/easyclearing.html ?

that might explain ...

iraszl’s picture

iraszl commented

Yes, it's tables and big images that cause this problem.
Thanks for the link. I try to look into it.
---
http://creativebits.org

JohnG-1’s picture

JohnG-1 commented

if it's table & images overflowing the right side bar, the solution should be really easy:

look in your style.css file (around line 15) for 

body {
  background: #fff;
  margin: 0px;
  padding: 0px;
  min-width: 780px;
  max-width: 1200px;
}

or something similar (I think I've deleted the whole line max-width: 1200px; from my version - shouldn't have done that :? )

The max-width of the <body> wrapper ensures that all the content is squashed into that 1200px or whatever. You can change it to 1400px or simply remove it (properly) with escape tags:

body {
  background: #fff;
  margin: 0px;
  padding: 0px;
  min-width: 780px;
/*  max-width: 1200px; */
}

The result is that main content will push sidebar-right contents further to the right so they don't overlap (though in FF you will notice the sidebar-right backgrounds stay put! - a bit ugly but functional - IE seems to display it as you would want).

If the page is bigger than the browser window, the horizontal slider bar appears at the bottom of the browser window.

There might be a cleverer cross-browser solution using the clearfix, but it's a bit more complex!).

best of luck.

Maniac8888’s picture

Maniac8888 commented

I love this theme but I have the same problems. (1) the right column is pushed so far down, one cannot even see the one block I have defined for the right column and (2) my right column box overlaps the main text area. I've tried a lot of these "fixes" to no avail.

Unfortunately, it makes the theme rather usless for me.

Maniac8888’s picture

Maniac8888 commented

OK, now I know what the problem is. Any block with a bookmark (the little trashcan with a "b" inside) in the right column will break this theme as the right column is a few pixels to narrow. This was reported back in May and not fixed? That is a real shame. I'd even pay for this one.