Log in

No account? Create an account
IBNeko's Journal-Nyo~!
Arrrgh. Stupid frigging browsers.
In my attempts to convert the Engineering Council website (http://ec.uiuc.edu) from coldfusion to PHP, I've also taken it upon myself to not use tables, and convert it over to pure CSS.

This, I find, is somewhat of a pain in the ass. While tables are clunky, and tend to uglify code, CSS isn't implemented in the same way for all browsers.

And that annoys me. Only ONE browser, out of the five I keep on my laptop, handles the div the way I want it to.

Here's what I'm trying to do:
See the rather ugly peach-colored navigation bar at the left? And how there's that extending empty chunk at the bottom (it extends, trust me; just try the program/events link.), 'cause it's based on a table, and that's the result of the table row-height extending?

I can't replicate that with CSS. I'm pretty sure I'm doing it right, but it only displays perfectly in OmniWeb, of ALL THINGS. Opera probably handles it correctly, but I have a bug elsewhere that's causing it to offshift a bit too far upwards.

Here's how I'm doing it:
<div class="main-area-wrapper">
<div class="left-filler">
<div class="main">
<?php include "main.php"; ?>

CSS code:

.main-area-wrapper {
/* Dummy wrap */
margin: 1px;
width: 160px;
height: 100%;
background-color: #ffcc99;
.main {
position: absolute;
left: 0px;
top: 71px;
width: 575px;
margin-left: 170px;

Essentially, the idea here is that, due to the fact that stuff is wrapped in the main-area-wrapper, this will expand as far as there is text, thereby stretching the left-filler so that it matches the height of the main content area.

However, most browsers read the height:100% in the left-filler incorrectly, and stretch that to 100% of the browser window, which I DON'T want. XP

So I have two options. Keep poking around to see if there's some sort of CSS hack to work this out, code up a javascript hack to calculate the size of the text, and insert that in, or use the faux columns method (where you have a vertically repeating background).

None of those methods are particularly appealing... Why the fuck can't things be implemented correctly?!?

Tags: , ,

2 happy kittens | Leave catnip
jaiwithani From: jaiwithani Date: January 6th, 2006 04:41 am (UTC) (Link)
Or there's the last resort of the web-design scoundrel, browser detection. It's a pain and not exactly model coding, but it gets things done...in any event, it's not a terrible thing, and doesn't even look like a bug (sidenote: it does extend on Firefox 1.5/Linux). Personnally, I kinda like it that way.

You're doing an awesome job. I bow before anyone who can do decent web design.
ibneko From: ibneko Date: January 7th, 2006 04:40 am (UTC) (Link)
Yeah, I'd rather stay away from browser detection though, 'cause as you noted, it's a pain in the ass, and it's not really model coding.

And uh, I'm not too sure what you're looking at: all of the development pages are currently on my laptop, which is accessible only on the LAN. ^^;; If you're looking at http://www.ec.uiuc.edu/, that's the old, coldfusion stuff that I'm trying to write out.

Heh, thank you. It's not really web design, per say, but more of code translation from coldfusion to php, with the addition of security patches (I've lost track of the number of holes and stuff that attackers could use to gain information on how the system works...). And honestly, web design isn't that hard - just figure out how to think with the mindset of a silly, simple user, then dumb it down a bit, so it's even easier to use, and poof, a good website.
2 happy kittens | Leave catnip