Many Troubles In IE

Wow. I just realized that even though I was the first person to register here, I’ve never actually posted. :) Anyway, I was having some troubles with my website’s CSS in IE. You can see it here: http://fourisland.com/

The two most noticeable problems are that the site isn’t centered (with margin: auto) as it should be, but I’ve heard that that’s a known problem with IE. :( The other thing is that all of my blue divs that are in the sidebar and in the content pane are black and square rather than blue and round.

Other small problems are that the navbar at the top has a space between it and the header image, the text in the calendars next to each blog post isn’t aligned to the center, which it should be, but is instead to the left, the pointers of the bubble divs on the sidebar are messed up, the rating icons (thumbs up and down) under each blog post has a background and a border.

If you know of any reasons why these things might be happening in IE (other than the fact that it’s a bad browser), please reply! :) Thanks in advance.

As you can see, I included instructions for each prefix and then the general one. Is there an IE specific one I should add?

And I’m pretty sure that the div.bubble and the div.rounded aren’t, in fact, meant to be separated by a comma. I used Firebug to test out that theory and it rather messes things up. But thanks for trying. :)

And thanks for the #wrap pointer, I can’t believe I didn’t notice that before. :)

As you can see, I included instructions for each prefix and then the general one. Is there an IE specific one I should add?

IE simply will not read these. You will have to do it the old fashioned way (with images) or just move on knowing they won’t be rounded in IE.

"hatkirby" wrote:

And I’m pretty sure that the div.bubble and the div.rounded aren’t, in fact, meant to be separated by a comma. I used Firebug to test out that theory and it rather messes things up. But thanks for trying. :)

Ah yes. After further looking into the code, it is EXTREMELY bloated! There are some id’s in there that are going 5 tiers deep. Did you code it yourself?

Okay, I’m sorry, I didn’t realize that. I don’t really mind that it’s square, it’s the color that’s bothering me. It seems like it’s taking the style of the ".pimped" bubble and applying it to all of the bubbles.

….yes, I did code it all by my self. I’m sorry it’s so bad, I didn’t realize. :(

….yes, I did code it all by my self. I’m sorry it’s so bad, I didn’t realize. :(

I only ask because there’s so much of it! It could definitely be simplified.

Robski seems to have all the time in the world lately, maybe he’ll condense it all for you ;) (I’m kidding Rob! I know you’re a busy man!).

What I suggest you do, is go through all of the code and try to find things that aren’t necessary. Firebug is actually quite good for this because you get instant results. Delete some code, see what happens. The more condensed the code is, the easier it is to find bugs later on when you change things.

I just had one more quick look at your CSS, a lot of what you could do to cut down on the overall size of the file is CSS shorthand! It’s truly a wonderful thing once you understand what goes where.

I’ve got allll theee timmmeee in the woorrrlllddd… well maybe I do – I just don’t manage it very well, but that’s another story…

OK Quick shorthand lesson…

margin & padding, when you are doing the shorthand that looks like this:

margin: 10px 0 50px 0;

Think of it like a clock, you have your square and you start at the top and go clockwise. Top, Right, Bottom Left. So…

margin: Top Right Bottom Left;

Now border likes to be difficult. Its the only one you cant use short hand on (prob because it might get complicated with styling too – dunno) So with border you can either style all of them at once with "border" or you have to do border-top etc…

You can make the shorthand even shorter, but its best you get used to that for now. :)

As for other things like background – all you need do is put a space between your styling.

so instead of

background-image:url(blar/blar.jpg);
background-color:#ffffff;

you could do

background:url(blar/blar.jpg) #ffffff;

The only one I would recommend again you not doing the shorthand for is "font" some browsers (not mentioning any names) are stupid and for some reason cant read the font shorthand… so always break that one up.

I think Doc showed a good example and I’ve probably been wasting my breath lol I haven’t even looked at the problem yet! lol

Oh and add a doctype to the very first line of your code – either strict or transitional – that helps a lot with some issues too:

Ah yes, rightbar. I’m sorry about that, it did use to be on the right in a previous layout of the site. I guess I’m just really bad at maintaining my CSS. :(

Aaand I have <BR> tags somewhere? Whaaat? I thought I got rid of those. Oh, wait, I do see a ton of <BR> tags. :( I’ll try to fix that.

I know what <!DOCTYPE> does, it’s just it’s never really seemed to do anything for me. Nvm, I’ve added it now.

I’ve fixed many of the problems by looking into the code, finding some stupid mistake I made and fixing it or by putting some hacks into my IE-specific file, but there are three things I can’t seem to fix.

First, there’s a large space beneath every post that separates it from the next post, but it shouldn’t be that large. Second, the thumbs-up, thumbs-down span of the post is a little detached from the line and it hangs down. Third, on my phpBB forum, the wrapping div is too wide and it looks really weird.

I don’t have access to IE right now (read: I can’t be bothered to boot up the pc) but if you add overflow:hidden to div.post it might just solve your spacing problem, if not try adding it to div.bubble. Man, there are a lot of divs in there! :?

I’ve had a look through the forum page but it’s pretty difficult to see what you are trying to do. The only thing I can suggest is to give #page-body a margin of 0 auto.

Ugh, I guess I really am a bad coder. I tried all three of those suggestions and they didn’t work, sorry. And I’m sorry about my terrible mess of DIVs.

How do you think I could replace all of those nested DIVs? I tried it and everything got messed up and I don’t even know what that <BLOCKQUOTE> is doing anymore. Because div.bubble is used in other places (like blog posts and comments) and div.rounded is only one type of bubble, so I’m buried pretty deep in this. Sorry.

I’m sorry, I’ve tried to edit the markup and the CSS with firebug but there is just so much going on in there it’s almost impossible to keep track. If it were my project I would start again with a clean sheet.

Not sure what blogging platform you are using (I guess from the paths it’s not WordPress) but could you not just create a new theme? Leave what you have "as is" for the time being, by the sound of it, although it doesn’t look great in IE it’s not actually broken.

If you can, develop your new theme locally using the current one as your reference, only this time plan it out first, decide where you need "hooks" in the markup, and where you don"t. Start your CSS with the overall layout and then the details. Take your time and when it’s finished just switch themes.

I’m sorry, I’ve tried to edit the markup and the CSS with firebug but there is just so much going on in there it’s almost impossible to keep track. If it were my project I would start again with a clean sheet.

I would agree with that, try using strict XHTML – there isnt much difference to HTML and its just better all round tbh… Also dont caps your tags do them in lower case :)

I’m sorry, I’ve tried to edit the markup and the CSS with firebug but there is just so much going on in there it’s almost impossible to keep track. If it were my project I would start again with a clean sheet.

I thought you were going to say that. Perhaps I should restart.

"apostrophe" wrote:

Not sure what blogging platform you are using (I guess from the paths it’s not WordPress) but could you not just create a new theme?

It’s actually one I wrote myself. :) I don’t think my PHP’s as bad as my CSS, though. :) But yes, I could just create a new theme.

Tips

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.