IE Theme woes

By linuxpimp on 19 Sep 2006 at 18:39 UTC

Good day forum

Woe woe woe, i have installed a very nice theme called "Nifty Corners" however in IE all the data is below the actual left and center block. In the more advanced :-) Firefox, all is good.

I 'could' change themes, but am curious as to why some are 110% in FF but not so good on IE?

Thanks

LP
secure wireless network

Comments

becaues IE and Firefox

vm commented 19 September 2006 at 18:55

becaues IE and Firefox handle things very differently. IE is behind the curve and Firefox is ahead of the curve when it comes to CSS.
finding a theme that works as expected in both browsers, can be painful at times.

Keep in mind you've only mentioned 2 of the 5 - 7 browsers out there, and each one has their own way of handling certain things. cross browser compatibility is huge undertaking, which is why in many cases, its best to keep themes simple, or at least insure that the them breaks down properly in IE, so that users dont notice a huge difference.

This is a good reason to stick with table based layouts

zoon_unit commented 20 September 2006 at 19:30

All the CSS compatibility arguments aside, if you simply want a clean theme that works consistantly across browsers, it makes sense to do your overall layout in a simple table. The layout will then look about the same across all browsers. No reason the nifty corners theme couldn't be translated into a table based columnar layout.

Now I know all the CSS junkies will jump on my case and cry foul, but there is really no reason to kill yourself trying to do successful tableless layout right now. Get the job done and worry about style later.

Switching from tableless to tabled isn't that big a deal. All the rest of your CSS will work the same either way.

I am using internet_services

j0k3z commented 21 September 2006 at 01:18

I am using internet_services theme and I am having lots of trouble in IE.

How would I go about changing it to tables?

Take a look at the bluemarine theme

zoon_unit commented 21 September 2006 at 15:04

bluemarine is a table based theme. Look in the page.tpl.php file in the bluemarine themes folder. In there you will find that all the html content and php variables are wrapped by table rows and cells. (td and tr tags)

If you've never worked with tables in html, you'll need to read up on it. But you can use a transitional style of coding it. A tableless format uses divisions to split content up and then absolute positioning in the CSS style sheet to create columns and rows.

In a tabled format, the content is wrapped by rows (tr) and cells (td) But you can wrap the content inside each cell with a division class as well. That way you can set the cell widths, background colors, fonts, etc. by using the style sheet. (bluemarine does this)

The nice thing about a tabled theme is that it operates exactly the same in all browsers AND columns can be fluid and collapse if there's no content in them. It's very easy then to have a fluid layout where the right column collapses if no blocks are displayed in it. This can be done in a tableless layout too, but it's much harder and leads to many of the formatting issues you are currently seeing.

The biggest complaint about tables with CSS artisans is the fact that the design of the page is embedded in the html source rather than the CSS style sheet. Therefore, you can't completely change your site's format simply by replacing the style sheets ala Zen Garden (http://www.csszengarden.com/)

But who does this in the real world anyway? You want one clean, simple theme for your site that works consistantly. Besides, you can still control the style and size of your columns within the table by using CSS classes. The php template engine of Drupal lends itself well to tabled page design.

Check it out.

I wish that was

ontwerpwerk commented 21 September 2006 at 11:51

I wish that was true....

--
I work for Ontwerpwerk

it's hard

ontwerpwerk commented 19 September 2006 at 18:59

Well.. do a quick websearch on webdesign, browsers compatibility and such. It's very hard to make a theme that works for all browsers - and even harder to make it work when users are making content that can have dimension that do not fit into your theme or feed broken markup into your system.
--
I work for Ontwerpwerk

Thanks guys lp

linuxpimp commented 19 September 2006 at 19:07

Thanks guys

Im in the same situation. My

j0k3z commented 19 September 2006 at 19:16

Im in the same situation.

My theme looks great in firefox. In IE the sidebar is shown below the center content.

I really like my theme and dont want to change. Is their any changes I can make in my css to make it work?

In my experience...

LateNightDesigner commented 19 September 2006 at 19:24

In my experience, most problems with dropping sidebars is caused by a couple things:

1. IE displays padding on both sides of a div, your width needs to allow for that.
2. you are missing a Clear attribute in your CSS

//---------------------------------------
Latenightdesigners.com- Giving IMD a Fighting Chance

Thank you for the info. So

j0k3z commented 20 September 2006 at 02:06

Thank you for the info.

So what changes can I make? Are you saying that making each column a bit smaller might do the trick?

Also what is this clear atribute?

Thanks

link to explaination of

vm commented 20 September 2006 at 16:44

link to explaination of clear attribute.
http://www.w3schools.com/css/pr_class_clear.asp

Thanks for the link. Do you

j0k3z commented 20 September 2006 at 17:59

Thanks for the link.

Do you know which clear atrib I should use?