Author Topic: I Hate CSS (Read 2920 times)

jitspoe · « **on:** January 18, 2008, 01:01:32 AM »

All I want is a stupid navigation menu on the right hand side of the screen. Finally got it in the right place, but for some reason the text is flush up against the left side, even though a margin is specified.

Then I tried it in IE, and the menu is completely gone. Not there at all. And in firefox, it's down underneath the content of the site instead of to the right. Now I remember why I didn't get into web development professionally. Should not have taken this on.

It's about time to whip out the <table>'s. At least those work.

y00tz · « **Reply #1 on:** January 18, 2008, 01:02:26 AM »

What are you working on?

sk89q · « **Reply #2 on:** January 18, 2008, 01:26:40 AM »

You'd have to use padding for some things (that's how to fix the ineffective margin issue).

How are you actually putting the menu to the right? A floated div? Placed in-code before or after the main content?

Eiii · « **Reply #3 on:** January 18, 2008, 01:29:44 AM »

CSS would be nicer if it seemed to actually be designed for the things it's used for nowadays. But yeah, a sidebar should be pretty (really?) simple.

jitspoe · « **Reply #4 on:** January 18, 2008, 01:31:59 AM »

Just a simple website - switching it over from a static one to a content management system so they can update it.

And it DID render in IE, just about 10 feet to the right of everything else on the page so it didn't show up. Good god. After all this time, browsers still don't work right. Too bad the one browser that actually is standards compliant (Opera) is hardly ever used.

The menu is in a div, after the content. I tried making it absolute. That worked, until the content was shorter than the menu, then the menu exceeded the page boundaries. and looked really bad.

Oh, and I did find a cool feature in CSS I didn't know about: "content". You can actually add stuff around things. That could be really cool for adding images and other things around headers and stuff...

... too bad IE doesn't even support it.

sk89q · « **Reply #5 on:** January 18, 2008, 01:47:34 AM »

The way I do it, if I remember right (usually I tinker), is by making the main content div float left and give it right margin for the sidebar. The right sidebar then has a negative margin to make it fit into the right place. I THINK that's what I do, since I can't remember, but you might not need to make the main content div a float. It is by no means easy to do if you want the code for the sidebar to appear after the content (the converse is a piece of cake).

The CSS3 advanced layout module (still a working draft) defines a new standard to create table-like layouts much easier than how you would do it now. But it's not complete yet, and I think the only browser that has jumped ahead of the time and implemented it regardless is Firefox.

Eiii · « **Reply #6 on:** January 18, 2008, 01:54:39 AM »

Quote from: jitspoe on January 18, 2008, 01:31:59 AM

The menu is in a div, after the content. I tried making it absolute. That worked, until the content was shorter than the menu, then the menu exceeded the page boundaries. and looked really bad.

min-height

Also, you should probably float the sidebar, if you haven't already.

jitspoe · « **Reply #7 on:** January 18, 2008, 02:07:05 AM »

I got it working. Just used a left margin. That's what it was originally, but I moved away from it since the math didn't seem to add up. I just shoved random numbers in there until it lined up correctly, and somehow it managed to work on all 3 browsers, so I'm calling it a night.

lekky · « **Reply #8 on:** January 18, 2008, 12:44:17 PM »

Quote from: jitspoe on January 18, 2008, 02:07:05 AM

I got it working. Just used a left margin. That's what it was originally, but I moved away from it since the math didn't seem to add up. I just shoved random numbers in there until it lined up correctly, and somehow it managed to work on all 3 browsers, so I'm calling it a night.

lol, sounds like a familiar story.

jitspoe · « **Reply #9 on:** April 23, 2008, 03:14:45 PM »

Ok, so it's broken again. I thought it was all working and I don't think I changed anything.

Here's the site: http://www.granitesolutionsus.com/ -- works in Firefox and Opera, but in IE, the menu is underneath the content.

y00tz · « **Reply #10 on:** April 23, 2008, 03:22:01 PM »

What version of IE are you running?

jitspoe · « **Reply #11 on:** April 23, 2008, 03:24:16 PM »

6.0.2900.2180.xpsp_sp2_gdr.070227-2254

... and I thought the Paintball2 versioning sounded confusing!

b00nlander · « **Reply #12 on:** April 23, 2008, 03:26:23 PM »

my guess is that IE doesn't interpret the float correctly, but I don't have the IE Dev Toolbar installed to check on that :-/

jitspoe · « **Reply #13 on:** April 23, 2008, 08:20:12 PM »

Lovely. I tried it on IE 7 and it works. Unfortunately the client is using IE6.

y00tz · « **Reply #14 on:** April 23, 2008, 08:26:13 PM »

Yeah looks fine on IE7/8... IE6 sucks. Looks great on every browser actually: http://browsershots.org/http://www.granitesolutionsus.com/

Deranged · « **Reply #15 on:** April 23, 2008, 09:00:16 PM »

Word of advice, if you have to make two CSS files of the section of CSS used to position the nav bar, use javascript to check for versions of IE under 7 and load the IE6- CSS file instead in that case.

EDIT: I might take a crack at fixing this later, usually pretty handy with making stuff work across browsers. IE6 has a lot of known issues with margins. Basically it just does them assbackwards from every other browser.

In case you work on this more before I try a crack at it, or I fail

, you may want to look into some tricks with the clear css property and some tricky block level partitioning and resizing. Basically IE6 is just ignoring the fact that the navbar is supposed to be next to the text. Either it thinks it's too wide (try decreasing the width of the text a little) or it's just misinterpreting what you want (I haven't looked at the code yet), or both. Out of spec browsers are a female dog

Good luck

Edit 2: Having a bit of trouble with the CSS. Dunno if you used some sort of generation program or something, so many redefinitions in the same file. Everything is all caps and there are virtually no line breaks within braced scopes. Really hard to read for me

Edit 3: I see why it shoots over to the right off screen. Remember when I said IE6 just does margin wrong? When it margins something, instead of occupying the space margin'd out it pads the space to the direction of the block element, almost like padding. Kinda ridiculous.

jitspoe · « **Reply #16 on:** April 23, 2008, 09:16:40 PM »

Perhaps I need to change this thread subject to "I hate Internet Explorer." That's kind of implied, though. I shouldn't have to state it.

I don't have IE 6 installed at home anymore, so it's going to be kind of hard to tell if I've fixed it. Take your best shot.

Deranged · « **Reply #17 on:** April 23, 2008, 09:31:57 PM »

I got it working I think, how would you prefer I send you the updated css file?

Edit: just tested in IE6, firefox, and opera. Indeed I got it working fine

sk89q · « **Reply #18 on:** April 23, 2008, 10:29:51 PM »

Using JavaScript to load an IE6-specific CSS file is a bad idea. It won't degrade well.

You can just use this CSS hack that only affects IE6 and below: * html div { prop: val; }

Or you can use IE's conditional comments.

As for the problem... negative margins work like a charm. The only situation where it could present a problem, if you use it a lot, is with Opera's SSR. But it's not that big of a deal; SSR is for mobile browsing.

jitspoe · « **Reply #19 on:** April 24, 2008, 08:34:16 AM »

Quote from: Deranged on April 23, 2008, 09:31:57 PM

I got it working I think, how would you prefer I send you the updated css file?

Edit: just tested in IE6, firefox, and opera. Indeed I got it working fine

Awesome - you can just attach them to a post here.