IE Partly Not Showcasing the CSS in the Header and Footer.

[chaseman]

I'm developing a Wordpress theme currently, and I've always checked it regularly in Chrome and Firefox and left out IE. In Chrome and in Firefox it always would showcase the design without any problems, I just now tried it in IE and the design looks totally messed up.

 

Here's an example:

 

This is how it looks in Chrome:

 

 

And this is how it looks in IE:

 

 

Some of the colors are showing correctly, but some of the styles are not, like the border for example (the same thing accounts for the footer, which does not show the thick border as well).

 

BTW my main concern is the thick border and the navigation links.

 

 

This is how the footer looks like in Chrome:

 

And in IE:

 

 

On the footer it's also not showcasing the thick border it's also not showcasing the links correctly. So maybe that may be the pattern, the thick border and the links.

 

 

What could be a reason for this?

[cssfreakie]

what version of IE you use, (each version of IE has it's own bugs)

can you show your html page? (got codes a live example?)

 

any wayss from the look of it, it looks like the margin bug, when you have this also in a new versio  of IE (7, your doctype is invalid or missing.

But without code that's just guessing.

 

And if it's the margin bug, use display:inline on everything that floats.

[chaseman]

Ok I was able to fix the most part. The problem was that I was using HTML 5 tags like header, footer and nav, and I guess IE is not ready for HTML 5. I changed those tags into divs and now it's working the only thing I wasn't able to get to work was the copyright statement here's a pic:

 

 

In the CSS I used float: bottom, which works flawless in Chrome and Firefox but it does not work in IE.

 

Do you know how I can have that copyright statement be at the very bottom of the whole page in IE?

 

Since I have a CSS freak here in the thread, while we're at it, do you have an idea how I could make the rounded corners work? None of them work in IE.

 

I'm using IE version 8.

 

 

 

Here's the code for the copyright statement:

 

#div_copyright { float: bottom; }
#div_copyright p { 
-webkit-border-top-left-radius: 10px;
-khtml-border-radius-topleft: 10px;	
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;

-webkit-border-top-right-radius: 10px;
-khtml-border-radius-topright: 10px;	
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;

letter-spacing: 3px; float: right; padding: 2px 10px 2px 10px; margin: 0 0 0 0; color: white;  background-color: skyblue;  }

 

[cssfreakie]

I am surprised your float:bottom; works since it's invalid as hell.

 

9.5 Floats

 

A float is a box that is shifted to the left or right on the current line

 

It depends on your code really, there are several ways to do it. Maybe have a look at: Position:absolute; Google it

 

-edit:  oh i just saw you also ask for rounded corners in IE, well you can do that in several ways. One i use quite often is named the sliding doors technique. in a nut shell, you take an element that has a nested element in it. and set a background image on both of them.

for instance:  <a href=" "><span>some text</span></a>

both background images will overlap and form 1 nice image. A detailed explanation can be found here: http://www.alistapart.com/articles/slidingdoors/

[chaseman]

Ok I got the copyright statement to show correctly now too, only thing missing are the rounded corners.

 

 

I didn't even realize that I was using float incorrectly, it works without the float as well.

[cssfreakie]

lol okay, I just posted above the rounded corners by using the sliding doors technique, IF you want rounded corners on bigger boxes for instance a text field you will need 4 overlapping elements There are crap loads of way to do that really. Just google, rounded corners css with 1 image (that is probably the best, the least header requests that way)

[chaseman]

I've just installed IE 9 and the rounded corners are showing up correctly, I will not bother and try to make it work with IE 8, I'd rather not use any images and other div hacks. I wanted the site to be completely CSS, even my logo is in text with CSS styles.

 

I think there even wouldn't have been a need to remove the HTML 5 for IE 9, but I guess there are just too many people using older browsers to not fix that critical issue.

[cssfreakie]

well it depends on your client really, Most of mine want it to work in every browser, but it costs more time.

on the other hand you can of course reason , that people with a nice browser should get a nicer web page.

[chaseman]

well it depends on your client really, Most of mine want it to work in every browser, but it costs more time.

on the other hand you can of course reason , that people with a nice browser should get a nicer web page.

Yeah I agree on that, I'm working on my first Wordpress blog template and I'm also planning on leasing that template on market places, besides using the template for myself. I'll just hope that people will not complain too much. The design itself does not look much worse because of the missing rounded corners, it just does not look as sleek anymore.

[Philip]

For HTML5 + IE to play nicely, add this to the top of your CSS file. It will help with older versions knowing what HTML5 is. 

header,footer,section,aside,article,nav,summary { display: block }

 

Also consider adding [ur=http://code.google.com/p/html5shim/]HTML5 shim[/url] which is a small JS file.