Many Troubles In IE

[hatkirby]

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.

[TheDoc]

On your #wrapper div, try taking "text-align:left;" out of the CSS and see if that helps center it in IE.

As for the rounded corners, declaring this:

Code:

-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;

…will ONLY work in Firefox and Safari, maybe IE8?

For the color, you have this declared:

Code:

div.bubble div.rounded {
background-color:#B7E0FF;
border:3px solid #FFFFFF;
margin-bottom:10px;
}

…the div.bubble and div.rounded need to be separated by a comma:

Code:

div.bubble, div.rounded {

[hatkirby]

Wow, thanks for being so fast! :) Anyway, about the rounded corners, I am aware that the "-moz" prefix only allows Firefox to round the corner, but that’s not the only declaration. This is ".rounded":

Code:

.rounded {
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-khtml-border-top-left-radius: 10px;
-khtml-border-top-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding: 4px;
}

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. :)

[TheDoc]

"hatkirby" wrote:

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?

[hatkirby]

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. :(

[TheDoc]

"hatkirby" wrote:

….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.

Example:

Code:

#jiggins {
height: 200px;
width: 150px;
background-color:#ff0000;
background-image:url(images/image.jpg);
background-repeat:none;
background-position: top center;
border-width: 1px;
border-color: #ffffff;
border-style: solid;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 5px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

Look at that sucker! Waaaaay too long! Let’s shorthand the crap out of it:

Code:

#jiggins {
height: 200px;
width: 150px;
background: url(‘images/image.jpg’) top center no-repeat #ff0000;
border: 1px solid #fff;
padding: 5px 10px 20px 5px;
margin: 0 auto;
}

If you’re confused, do a search on the ol’ interwebs for "css shorthand", I’m sure there are tons of resources.

[Rob MacKay]

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

Or

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

Hope that helped :)

[hatkirby]

I know what shorthand is. I can’t believe I’ve been so bad at not using it, though.

And, if you really think a <!DOCTYPE> will help, I will add one. And by the way, I’m using HTML, not XHTML.

A friend of mine is helping me with the trimming down of the code, so I’ll post again later once I’ve made it more manageable.

[hatkirby]

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.

If I’m being stupid, I’m really sorry. Anyway, thanks in advance.

[hatkirby]

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.

[Rob MacKay]

"apostrophe" wrote:

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 :)

[hatkirby]

"apostrophe" wrote:

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.

Thanks for the advice, everybody.

[Rob MacKay]

"hatkirby" wrote:

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.

Hehe thats awesome!! :D

[Author]

Posts