By gordonbooker on

I am using a zen subtheme with Drupal 5.7
I developed my site to my liking (so far only on local server) by hacking away on firefox with firebug. (my first theme - so probably committed some crimes)
It now looks great in firefox and Safari - but it is completely a mess in IE6 and IE7.

Only one of the three teasers shows - and that contains the nav bar! the block in the right sidebar is in the middke of the page.

I was wondering:
How do you change css etc so that it works in ff and ie ? - do you make conditional statements etc ?

Are things more likely to look the same across browsers if using Drupal 6.3 ? - I don't mind starting again.

Would it maybe be wise to use the approach at this website:

  • http://www.nerdliness.com/article/2007/09/10/drupal-theming

    • which suggests building from scratch in html and css, then fitting it into Drupal ?

    ⋅ Categories: Drupal 5.x

    Comments

    ridolfidesigns’s picture

    ridolfidesigns commented

    Hi,

    IE can be a bummer. I am developing a theme for a website as well and I had some problems with IE as well. If you are using zen and doing the whole sub theme thing, there there should be a conditional statement in the head to call IE stylesheets. I believe there is an IE stylesheet included already. So just copy and paste the IE.css and tweak it.

    I try to stay away from that. However, if it works for you then do it. If you have any questions I can try to help you. I am new to drupal theming as well. I am not an expert on CSS but I do have experience and I can produce valid code.

    Thanks

    cjokomay’s picture

    cjokomay commented

    Unfortunately there isn't one sure shot way to make all browsers play nice. The most important thing you can do while learning is take it one step at a time. Every time you make a change to your code keep loading it in different browsers until it looks good in each one. Whenever you come to an issue look it up. Here is an excellent site for researching CSS bugs, http://www.positioniseverything.net/.

    It is not impossible to make your code cross browser compatible, there are no bugs or issues that haven't already been dealt with by someone else. So just do a google search for whatever your current issue is and then work with it until you fix it. Over time you'll just start to remember what works and what doesn't. And taking it one step at a time is a million times easier than getting it all working in one browser and then trying to make it look exactly the same in another.

    One cool way to start things off is to use a reset stylesheet. Eric Meyer has a good one, http://meyerweb.com/eric/tools/css/reset/. The reset stylesheet attempts to set a common base ground among all browsers, since for example right out of the box Firefox and IE render margins completely differently.

    As far as following a specific approach to themeing...I think it's a matter of preference. I personally style my Drupal sites as I am developing them, so the best way is whatever is easiest for you. Also, it doesn't make any difference what version of Drupal you are using, the root problem boils down to your HTML and CSS.

    Hopefully this helps!

    gordonbooker’s picture

    gordonbooker commented

    Thanks a lot for the ideas and wise advice - I'll look into all that stuff then get going again (!)