≡ Menu

Frustrating CSS

CSS, quite possibly, like some things on this planet, seems to be the bane of my existance. I’ve spent a good portion of tonight trying to work three bugs out of my code. It took me so long to get it to a place where I could stand it, that some of you may have been lucky enough to see my site without it’s textures, or worse, with funny textures I use to tell where my boxes are. Needless to say, I have nothing better to do than tell you about what I ran into, and how I fixed them.

The first thing I was trying to fix was this pesky little warning from the CSS people about not having a default family. Well, that one was simple, I added a default family: IE: monospace, sans-serif, serif… You get the idea. So that’s one bug in my CSS that was shot down and destroyed easily.

Now for our second, slightly harder bug. This one involved how my site looked in IE for awhile tonight. For some strange reason, after my last post, the content div decided that it was allowed to expand by 2 pixels (1 on each side). Never did I tell it that it could do this. So I started working on a solution.

First attempt: fixed width content. I thought I had this but I guess not. Weird part was, when I set it, the site looked fine, but the float then stopped working in IE. For those of you who don’t understand, the float is what makes my navigation possible.

Second attempt: resizing some stuff around the site. Needless to say, this too resulted in failure.

Third attempt: line by line I removed code from the previous post until I found what was causing the problem. It happened to be the tag that allows me to produce italics. This would be known as the <em> tag by some. Apparently, IE doesn’t take into account the extra pixels required for italics, and thereby, caused by div to expand. This was… unacceptable, so my solution ended up being make the <em> tag do both italics and bold. Now IE seems to pay attention. Good browser. We’ll see if it holds up if I do this:

Internet Explorer is truly the bane of web browser existance. If it wasn’t for all the crap it did to HTML 3.1, we would have been fairly standard at this point and we would have to go through all the pain and misery of removing everyones favorite html tags like the <b> tag and the <i> tag. Needless to say: IE you suck.

So the big question is: will that paragraph work in IE. If it doesn’t, I give up.

My third bug that I hoped to clear out tonight is not so much a bug as it is me trying to be nice to the general public. At the top of the page, there is an <h1> tag that contains what is known as my heading. For those of you who can’t see this, it reads ":: rinsefirst :: always spinning, Never Normal ::". So, my goal was to make it so that if you increase the font size to max in Mozilla (or IE for that matter) the entire site would handle it and be readable in some sense of the word. Well, my first idea was to increase the size and shape of the of div and then have the h1 throw text to the bottom using a vertical align. Sounds right doesn’t it?

Well, apparently… due to some stuff about inline stuff, this can’t be done with an h1 tag. So justin? why do you use something different.. something other than an h1 tag…

Well, that would ruin my main priority in keeping the shape of the document proper for non CSS users. So needless to say I came up with a temporary new solution. Not quite what I want, but it will work.

I moved the text up about 20 pixels so that when it grows, it at leasts stays inside the darkness long enough for IE to be ok with it. It’s a start. Maybe Alex has a solution to my design woes.

Needless to say, this site is holding together fairly well. A few more tweeks and some more stuff and we’ll be good to go for submission to other cool design sites.. right?

Next post:

Previous post: