I've been banging my head against the screen for hours today trying to solve the problem we have with our website at:
http://www.cctvcambridge.org
We updated to 4.7 and selected a cooler, cleaner theme and everything is going fine. Until, that is, I started using tables and images in the body content that included object widths in percentages. It seems to break everything. If the html 
or whatever are set to 100% width then it often extends out of the central content area, and in worse cases , pushes the image or table to drawn BELOW the bottom of the sidebar. Its a real pain in the butt, too.
And the issue is only visible on IE, a browser that dominates the user market and yet doesn't conform to web standards.
So if anyone has any idea how I can solve this problem in my CSS, I have seen other themes handle this well, but unfortunately I do not understand the solution myself.
The Theme I am working with, quite a nice looking one too, is this:
http://drupal.org/project/andreas09
The pages that have the nasty issues are here:
http://www.cctvcambridge.org/schedule
And an interesting thing happens when I use an SSI. When using normal inline HTML, the table width (set at 100%) displays too wide, and using a server side include with tables (width set to 100%) they display properly. That's total mad science that I don't understand.
Anyone have a good head for this kind of thing?
Sean
Comments
The problem is likely a
The problem is likely a result of you using percentages to define the width of your images. If you look at IE, it is rendering your "What's on TV image" at over 650 pixels, while Mozilla renders it at approximately 540pixels.
In a table-less layout, like the one you are using (courtesy of your Theme) - wide elements that are too wide for the 'column' they are contained in, tend to drop things (especially in IE). Not to mention, for IE, the width of elements is often the critical factor that determines how things behave. Throw in the fact that the tables you are using have attributes like "cellpadding" set (while using 100% for the width), you have a greater chance of IE misinterpreting the width of elements.
I would suggest you start by changing your images to have their width defined by pixels, not %. Also, be careful when mixing percentages and pixels (for things like tables).
Right
I understand the situation, definitely, but if I set my tables and images to a fixed width layout then I don't benefit from a flexible width theme. How do I theme this so that the images and tables are proportionally similar sizes on differently sizes monitors, I want the images to scale regarless of whether or not people have a 640x480 screen or a 1400x1100 screen.
Gifs and Jpegs Don't Scale
Gifs and Jpegs are bitmap formats that aren't designed to scale. These images will continue to lose quality as their dimensions get larger.
http://en.wikipedia.org/wiki/Bitmap
Your priorities to accomodate every screen resolution are noble, but scaling gifs or jpegs with percentage widths and heights leave you with a blurry, deformed image for those with a higher resolution.
However, there are some CSS solutions that can create at least the illusion of a scaling image - which largely rely on a background image that repeats seamlessly where your image left off (or using a background image instead of embedding the image in an IMG tag). It's also worthy to note that your initial solution (the way you envisioned that page to look) may not be the best solution in the context of the constraints we identified in this thread. As such, your question is probably more of a design problem rather than a theming / CSS problem.
So
So setting my tables and images to fixed sizes will bring me closer to my original goal of not breaking the layout, is that what I am interpreting? If I use percentages to set the width I am asking for trouble, but what if I use no size tag, in some browsers it seems that sometimes solves the problem.
Also, can you help me
Also, can you help me understand why the table widths in the SSI file display properly when set to 100% but not the HTML in the node itself? You can see the two tables here:
http://www.cctvcambridge.org/schedule
Hmm
Are you saying that in a seperate file your tables are looking fine, but when you include the file with tables using SSI into a Druapl node the tables render differently?
Having hard time figuring out which two tables you are referring to.
Yes, well, it was.
Yes, that -was- was I was saying and I believed it. However, when I made this test page for you to look at something actually came out in the wash.
I found that the images, imbedded in the tables and set to 100% width, were forcing the tables extra wide and breaking the layout. I changed the image widths to 100px, not the effect I wanted, but not breaking the layout. I'm guessing that the images are using some other value for 100% and not the actual with I intend. Could this be the famous max-width / min-width defect in IE that is causing my 100% images to handle poorly? How do I set my images so that they fill the table width and not the page width?
http://www.cctvcambridge.org/node/534
vs
http://www.cctvcambridge.org/schedule