My page looks horrible in IE!

Looks almost exactly the same to me. The only difference I see is the <<previous entries at the top is in the first post box.

@kameyers – Your site looks lovely in FF, and in IE6 there’s only just a tiny bit of margin shift at the footer – hardly noitceable really.

Just a very minor tweak and all will be good.

kameyers, you might want to take a look at the articles on https://www.positioniseverything.net. There’s a lot of information about why the same page looks different in different browsers, and what you can do to fix it. No PHP required (it’s all done with CSS).

If something not pixel perfect really bugs you, have a look at https://www.positioniseverything.net/. Most of the fixes needed to make brain damaged IE behave are in there.

Right, I don’t mind the margin shift, it’s the <previous in the post box. Also the search submit button is under the search bar. In Firefox it’s not. This is probably a small problem with an easy solution. Very sorry abou this. Thanks for your replys.

Hah, looks like I typed too slow. A list Apart is also full of good stuff!

kameyers-
Easy fix below for you. IE and FF (mozilla) look at padding and margins differently. To fix the left shift in the footer you’ll use an IE Conditional Statement.

Edit your header.php to include the following <b>immediately</b> above the </head> html tag.


<!--[if IE]>
<style type="text/css">
#footer {
padding: 0 0 0 1px;
margin: 0;
clear: both;
}
</style>
<![endif]-->

Now edit #footer in style.css (under the structure) to eliminate the 1px right padding and the auto attributes:

#footer {
padding: 0;
margin: 0;
clear: both;
}


That’ll do it. At least that is what worked on a Kubrick modified theme I recently started customizing.

Thanks, I have been very impressed at the generous feedback everyone has shown me. Honestly, I didn’t really notice the small glitch at the bottom of the page. I was more interested in the search bar and my first post are different. I have been looking in the above websites for help. I am having a little difficulty in finding my problem. As I said, I’m not a programmer, so looking at all of the technical jargon is somewhat confusing to me. Anyway, even if it doesn’t get fixed, I sure appreciate your help.

I’ve had very similar problems, but perhaps a bit more egregious. I’ve got a site on which I’ve set up two identical WordPress installations, one in english, for the US, and the other in Czech. The website is below; click on the appropriate flag below the horse to choose the language.

https://host48.hrwebservices.net/~bullypu/

On Firefox (Mac and PC), for the most part, the site looks great. However, on IE (two different machines), pictures are missing from posts and the left sidebar is shifted about 1500 pixels down.

I can see where perhaps using a conditional statement for IE might address the shift of the left sidebar, but it seems a bit extreme, especially since pictures from posts are missing.

There have been other anomalies, like the site losing all sense of formatting if I put an extra CR in a post, but I’ll save those for another post.

Any suggestions?

kameyers – I’m sure the search bar issue has to do with the padding and margins attributes. Same as the images and other IE problems mentioned by zakman. For example, the search submit button is underneath because there isn’t enough room for it in the way IE interpets the CSS.

Basically, IE and Mozilla based browser treat what is called the “box model” differently.

A quick explanation [maybe] : the box is created by css attributes:

• width{}
• padding{}
• margins{} and,
• borders{}

Mozilla (FF) interpets the css1 specifications to produce a semantically correct box. IE interpets it differently. IE takes the box and says any padding and borders in the <div></div> will not be part of the total width.

So a 760px wide box in Mozilla might be 740px in IE.

CSS1 specs state that anything within the div will be part of the box, including padding. Here’s a site to reference the box model. Be Careful using the information at that site – – CSS HACKS ARE [becoming] OLD SCHOOL.

No offense meant to anyone’s efforts. But a hack can break a site’s structure as newer browsers develop and the old ones (IE) begin interpreting the standards correctly. Or, if the standards change…

IE 7’s betas are reported to having the possiblity of breaking a lot of sites relying on CSS Hacks b/c IE7 will recognize more of w3c standards.

The best method is to use an IE conditional statement that points to a style sheet with any IE needed changes.

Usually the likely box model fix is replacing padding attributes with margin attributes in the IE written css, or creating classes/ids unique to your ie css that have the corrections needed. Of course it may take a bit of trial and error to get it pixel perfect.

I saw in another thread that others are experiencing the same dropping problem I am on the left sidebar in IE only. Is it possible that this is a bug of some sort, or should I proceed with writing a conditional for IE?

Yeah, I posted another message concerning this problem. Looks fine in Firefox, but the footer is off in IE. I tried the fix mentioned above, but it didn’t work, maybe if somebody could give us some clarification as to how to fix this, that would be nice.

.classname{background: #hexColor url(https://whatever.com) center bottom no-repeat;

When shortcuts for css classes & id’s are used it’s usually required that they have specifications in a specific order for them render correctly across varied browsers.

I noticed that in the .footer id used in the inline styles this isn’t following the css spec. try modifying it using the above example and please note if this fixes the issue.

Cheers.