chaseman Posted March 17, 2011 Share Posted March 17, 2011 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? Quote Link to comment https://forums.phpfreaks.com/topic/230951-ie-partly-not-showcasing-the-css-in-the-header-and-footer/ Share on other sites More sharing options...
cssfreakie Posted March 17, 2011 Share Posted March 17, 2011 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. Quote Link to comment https://forums.phpfreaks.com/topic/230951-ie-partly-not-showcasing-the-css-in-the-header-and-footer/#findComment-1188850 Share on other sites More sharing options...
chaseman Posted March 17, 2011 Author Share Posted March 17, 2011 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; } Quote Link to comment https://forums.phpfreaks.com/topic/230951-ie-partly-not-showcasing-the-css-in-the-header-and-footer/#findComment-1188857 Share on other sites More sharing options...
cssfreakie Posted March 17, 2011 Share Posted March 17, 2011 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/ Quote Link to comment https://forums.phpfreaks.com/topic/230951-ie-partly-not-showcasing-the-css-in-the-header-and-footer/#findComment-1188864 Share on other sites More sharing options...
chaseman Posted March 17, 2011 Author Share Posted March 17, 2011 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. Quote Link to comment https://forums.phpfreaks.com/topic/230951-ie-partly-not-showcasing-the-css-in-the-header-and-footer/#findComment-1188869 Share on other sites More sharing options...
cssfreakie Posted March 17, 2011 Share Posted March 17, 2011 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) Quote Link to comment https://forums.phpfreaks.com/topic/230951-ie-partly-not-showcasing-the-css-in-the-header-and-footer/#findComment-1188871 Share on other sites More sharing options...
chaseman Posted March 17, 2011 Author Share Posted March 17, 2011 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. Quote Link to comment https://forums.phpfreaks.com/topic/230951-ie-partly-not-showcasing-the-css-in-the-header-and-footer/#findComment-1188907 Share on other sites More sharing options...
cssfreakie Posted March 17, 2011 Share Posted March 17, 2011 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. Quote Link to comment https://forums.phpfreaks.com/topic/230951-ie-partly-not-showcasing-the-css-in-the-header-and-footer/#findComment-1188915 Share on other sites More sharing options...
chaseman Posted March 17, 2011 Author Share Posted March 17, 2011 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. Quote Link to comment https://forums.phpfreaks.com/topic/230951-ie-partly-not-showcasing-the-css-in-the-header-and-footer/#findComment-1188929 Share on other sites More sharing options...
Philip Posted March 18, 2011 Share Posted March 18, 2011 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. Quote Link to comment https://forums.phpfreaks.com/topic/230951-ie-partly-not-showcasing-the-css-in-the-header-and-footer/#findComment-1189293 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.