Custom theme broken in IE

Start by validating the site. For example, there’s no such markup in (X)HTML) as <date> and you need to ensure that every opening tag has its corresponding closing tag.

Once all that is cleared up, you should find it a lot easier to apply some tweak via an IE specific stylesheet but, until then, you’re going to find that 1 or more browsers will display pages erratically.

I tried validating it all, but, the <date> tag comes already in the default theme so I didn’t wanna delete it incase it was needed. And it tells me to delete some </p> tags, but I can’t even find them anywhere, checked every file and can’t see any stray tags where it says there is.

And the rest of the things I needed to validate were all within plugins I installed or the widget sidebar, or in the adbrite code in the sidebar – it kept saying that in the adbrite code there was stuff I needed to correct but as far as I could tell it was just pointing to a random section of code, like some random numbers/letters, not any actual html.

So is validating it all really that necessary? It works in every other browser, it just seems to be a problem with CSS (for obvious reasons in IE).

the <date> tag comes already in the default theme

The <date> tag is not part of the WordPress default theme. The relevant code in the default theme is:

<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

Not:

<date><?php the_time('F jS, Y') ?> <!-- by H-Man --></date>

The </p> tags that you need to delete are probably within your posts – not your theme’s template files.

is validating it all really that necessary?

For the most part – yes. You can’t just add in ad hoc tags like <date> and expect browsers to understand them. And you can’t fix broken markup by applying yet more CSS. CSS only works properly when the web markup is valid and can be correctly parsed by the browser.

Something to bear in mind when you design themes or design websites in general:

How code behaves and is rendered and displayed on the browser depends on how a browser itself renders the code. Sounds redundant, but the fact is, IE, Firefox, Opera, and Safari don’t behave the same way when it comes to rendering code.

The most ‘foolproof’ way, I guess you can say, to make the code as compatible with as many browsers as possible is to follow the W3C standard when coding, which means writing W3C valid code/code that validates according to W3C standards.

THIS, I feel, is why validating code and writing valid code is so important.

IE is very VERY famous in the web development community for not following the established W3C standards in the earlier versions of the browser up until 7.0 and one of the ways that coders have worked around this known issue is to code for Firefox or a similarly standards-adherent browser and THEN add the IE fixes/hacks accordingly afterwards.

In this vein, I would suggest to anyone who is interested in designing themes to investigate the differences in rendering code between the browsers as there are several well-documented IE-specific ‘bad’ behaviors that can oftentimes screw up coding.

Ok, I’ll try and fix the validation stuff tomorrow, and try again with the IE fixes. I tried looking up common fixes that make IE mess the CSS up, but couldn’t really find anything. I’ll look again.

Thanks for help, i’ll reply again when I’ve messed with it some more.

Try and validate your code first and if you still see the same issues, come back and drop a line. ??

It’s much easier to explain and illustrate IE’s code rendering problems if the code is valid (that way, we can make sure it really is IE and not just bad code).

As it is, right off the top of my head, I can name a few problems that IE might have with rendering your site but can’t be confirmed until you have valid coding that proves that the issue must be with IE.

With that said, make sure you validate your CSS as well.

Ok, its all validated. The only thing I can’t validate is the Sociable Plugin CSS, but from searching google it looks like there’s nothing I can really do about that and the problem comes because it uses stuff from CSS3 so the validator says its wrong for older versions. I guess I could just take the stuff out cause it looks like it’s just a fancy way of making the buttons it controls go transparent. But I can’t see that being the problem anyway.

And IE still doesn’t display the page right. Could it maybe be something stupid like IE not recognising a width because I haven’t put “px” after the number? Although I fixed all those while validating… and even put px after any 0s i found even though it didn’t tell me to.

But yeah, any suggestions? :/

Sorry for double post, but I’ve done some measuring and the main content area should be 600, but its 602 (if you look where the sidebar meets it at the bottom, its as if the little 2 pixel extra on the right is stopping the sidebar from slotting in next to it). But, I’ve tried changing loads of margins and everything, but nothing seems to make a difference.

The sidebar is obviously the same, it’s supposed to be 197 wide with a 3 pixel border on the left, but its actually… 210 in total – 10 pixels added to the right.

The header is inside a box thats 800×200. And that seems fine as far as I can tell, so I can’t work out why at least the header isn’t over the content area. Well, actually the only thing I can think of is that to get the content area to appear below the header, I put a 220px margin-top on the #page area, because the header is 20px below the top of the page so, yeah, 20 + 200 obviously 220. But I’m thinking because that margin exists, is the header maybe not kinda, overlapping with that div area even though its 220px of blank space? If that makes sense…

I don’t get it… Everything is now the right size, but it’s still all spread around the page.

Can no one help??

I’ve managed to get the header to appear over the content area, and for everything to be centered in the page, by changing some of the positions: from absolute to fixed.

Sidebar still wont come up next to content though.

You’ve still got some validation errors in your sidebar. Also, you’re loading the theme’s stylesheet twice in the header.

I’m loading the style sheet once for all browsers, then a seperate stylesheet (iestyle.css) just for IE.

And those validation error messages have appeared within the last few hours, cause I checked earlier and all was fine…

This is ridiculous, stuff is just breaking when I’m not even touching it. The validation errors are within the widget code, which I haven’t touched. How can they just break themselves?

*fixed*

Accidentally added

• tags around the widget code without realising it gets its own.

That’s what invalidated the sidebar. The markup you added around the widgets. If you check your theme’s functions.php file for the register_sidebar function, you should see how the sidebar is configured to handle widgets. You’ve still got two calls to the same stylesheet in the header, though.

Your iestyle.css sheet seems inordinately long and complex. Now that the site is valid, I’d suggest you make a backup copy of iestyle.css and then delete everything within that file, so we can see how IE7 handles the default style and what (if any) tweaks need to be added..

Okay, a few things going on:

Where you’ve done a great job piecing together your code and such, it’s also a bit messy. It helps you a great deal if you can keep your code clean because it makes it a lot easier for you to troubleshoot things like unclosed tags or double tags and stuff like that.

With that said, you have a mess of CSS for your sidebar.

Just specify the width of your sidebar and float it right of your content and see what it does in IE.

No absolute positioning, no weird margins, just float it right and leave it and see where it goes and see where you get extra spacing if you get extra spacing at all.

Float your content to the left as well and don’t bother with absolute positioning.

What you’ll probably see is maybe a bit of extra space or something is too ‘fat’ or that there are extra pixels and the like.

From THERE we can fix it.

Things to remember: padding adds pixels, margins sometimes collapse, and IE likes adding extra space in some places.