FireFox to IE Problem in Blog Theme

**cldnails** · 07-31-2007, 05:16 AM

I'm at a loss when it comes to coding wordpress themes...or any themes for that matter. That being said my theme on Buy-Wii.net looks great in FireFox, however in IE things look off center and don't fall into their place.

Is there anyone that could point me in the right direction of what needs to be added to work for IE?

Thanks in advance for anyone's suggestions.

Roflic · 07-31-2007, 07:54 AM

i have same problems

Costin Trifan · 08-01-2007, 01:06 AM

How is the page layout made? tables? divs?

**cldnails** · 08-01-2007, 04:30 AM

It's divs.

Costin Trifan · 08-01-2007, 06:13 AM

3 floating divs columns?
How the content in the 2nd and the 3rd div is aligned? Is it using the text-align: center; or using float attribute to align its content? using i.e. margin: -12px 0px; and so on? because I think that there's the problem.

kristeejo · 08-01-2007, 06:14 AM

no one uses IE so don't worry about it.

*snicker*

Costin Trifan · 08-01-2007, 06:16 AM

@ KJ:
I DO USE IE!!

**cldnails** · 08-01-2007, 06:16 AM

I've attached the CSS style sheet, 'renamed .txt'. I'm really a dumby, so if you have the opportunity could you point out specifically where the issue is. If not, I appreciate the help thus far.

**cldnails** · 08-01-2007, 06:17 AM

Quote:

Originally Posted by kristeejo

no one uses IE so don't worry about it.

*snicker*

My visitors due.

kristeejo · 08-01-2007, 06:17 AM

Quote:

Originally Posted by cldnails

My visitors due.

I'm sorry to hear that.

Costin Trifan · 08-01-2007, 06:22 AM

I saved your page and I'm having a look at it right now. I'll get back to you as soon as I have an answer for you.

**cldnails** · 08-01-2007, 06:49 AM

Quote:

Originally Posted by Costin Trifan

I saved your page and I'm having a look at it right now. I'll get back to you as soon as I have an answer for you.

I shall shout your greatness from the roof tops.

Costin Trifan · 08-01-2007, 06:51 AM

You have set the:
- #container width to 960px;
- #main container to 530px;
- #inner container to 170px;
- #outer container to 170px;

that is: 530 + 170 + 170 is not equal 960

I increased the #main container's width to 580px ('cause we have a lot of unused space) and this is how it looks now in IE (see attachment bellow).

When I do that the layout shows up broken in FF

If I change back to the original value it shows up corectly in FF (this is crazy

)

So, you have 3 options:
1. You leave it like that and it shows up nice just in FF

2. You duplicate the css file and change the width accordingly so it will show up nice for the IE users. And also create a script to load the css file.

3. Create a script to see what browser is used to display the page by the visitor and if is IE set the width to 580px;

Quote:

#main {
padding-right: 15px;
padding-left: 15px;
float: left;
padding-bottom: 0px;
/* width: 530px; */ /* Use this width for firefox browser */
width: 580px; /* Use this width for Opera and IE */
line-height: 20px;
padding-top: 0px;
}

**cldnails** · 08-01-2007, 06:55 AM

Thanks for the fix, now to find an easy implementation.

This page is useful for others having similar issues...I'll be working on it later.

http://www.thesitewizard.com/css/excludecss.shtml

Costin Trifan · 08-01-2007, 07:00 AM

Search for a script that loads a different stylesheet depending on the browser used by the visitor.
That is, if the user is using FF then load the FF_Style.css file which has the:

Quote:

#main {
padding-right: 15px;
padding-left: 15px;
float: left;
padding-bottom: 0px;
width: 530px; /* Use this width for firefox browser */
line-height: 20px;
padding-top: 0px;
}

But if the user is using the IE then load the IE_Style.css file:

Quote:

#main {
padding-right: 15px;
padding-left: 15px;
float: left;
padding-bottom: 0px;
width: 580px; /* Use this width for Opera and IE */
line-height: 20px;
padding-top: 0px;
}

That is the easiest way for handling this kind of situations. At least this is the way I'd do it!

Costin Trifan · 08-01-2007, 07:25 AM

Update:

Create a new css file by copying and pasting your existent css classes defined in style.css and call that file: IE_style.css

change the link to the stylesheet in the page head section from:

Code:

<head>
    <link media="screen" href="style.css" type="text/css" rel="stylesheet" />

</head>

To:

Code:

<head>
....your current content  

<link rel="stylesheet" media="screen"  href=""type="text/css" href="IE_style.css" />
 
<![if !IE]>
    <link rel="stylesheet" media="screen" href="style.css" type="text/css" />
<![endif]>

</head>

This way you don't need the javascript script anymore and everything will be ok.

In the IE_style.css change the #main container's width like this:

Code:

#main {
padding-right: 15px;
padding-left: 15px;
float: left;
padding-bottom: 0px;
width: 580px; /* Width for IE browser */
line-height: 20px;
padding-top: 0px;
}

I've tested this in IE7, FF, Opera and works just great!

**cldnails** · 08-01-2007, 08:16 AM

Worked like a charm once I realized you through another ahref in there.

Thanks so much for your help.