Log in

No account? Create an account

Previous Entry | Next Entry

IE Issues?

  • Sep. 20th, 2007 at 9:43 PM
Hi, all. I apologize in advance if this isn't the kind of thing you guys can help me with! But I'm still really new at LJ layouts, and as much CSS experience as I've got under my belt, I'm really stumped by the way my otherwise functional layout renders in IE (6).

The layout is here; http://community.livejournal.com/standonthesky/

(More apologies, I know the code is a bit ugly and still all in the head instead of a neat, separate CSS file, and I know there are a lot of !important declarations. Honest, I don't normally code this way!)

Essentially, I'm really hoping some of you experts can help me figure out what kind of overrides to put in there so that the IE version works, too. I'm thinking absolute positioning instead of fixed positioning would help, although I was trying to avoid it so that the dreaded navstrip wouldn't be hidden behind divs.

And, as the image map would indicate, this is on a paid account.

Thanks in advance!


Sep. 21st, 2007 04:29 am (UTC)
Why not just disable the nav strip in the community settings?
It looks like a jumbled mess in IE7, too. I think it might have something to do with all the height: 100% settings, which probably aren't necessary.
Sep. 21st, 2007 04:44 am (UTC)
I did, initially, but a lot of people have that turned on themselves, and there's no way to control what they're seeing. (And more importantly, if they want the navstrip, I really shouldn't disable it on them if I can avoid it.)

You're right, the height: 100%; was the problem. Unfortunately at least one of them was necessary. XD But I'll see if I can figure out which one that is. Thanks!
Sep. 21st, 2007 05:02 am (UTC)
Okay, that solved one problem; but there are still others.

1.) The page isn't scrolling -- no scrollbar, even though there's clearly enough text to merit one.

2.) The div with the images in it will appear when it's coded with "position: relative", but not with "position: absolute". ???
Sep. 21st, 2007 12:31 pm (UTC)
I have no idea which of your accounts to respond to, so I'm going with the original poster...
* {
overflow: visible !important;
font-family: verdana;
I don't know what you're trying to do here, but I would remove this entirely. You can put the font declaration in body{}, and overflow: visible is going to prevent scrollbars, not show them. [Reference link]
From the same site [link] IE6 does not support position: fixed. Note that for compatibility purposes, Expressive always uses "strict" or "standards" mode.
Sep. 21st, 2007 01:19 pm (UTC)
Yes, sorry about that; RP account that I'm using to make the actual changes to the layout. I keep changing between them to comment on this thread, and I slipped up.

Re: overflow

It's an attempt to override the original layout's approximately twenty separate "overflow: hidden" declarations, which were doing a weird thing that caused the header blocks not to completely cover up the black background. (The padding was showing up as a black strip "on top of" them, and even with 0 or negative padding, there was a single black pixel of "border" going down the left and right sides.)

Still, that hadn't really occurred to me, so thank you. I suppose I'll have to track down the block of code that needs its overflow: auto, or vice versa; this is what I get for being lazy.

Re: fixed

I know. I really have no idea what to do about that; although there are numerous ways of trying to fix it, most of them seem to involve JavaScript to some extent, and even if I COULD do that with LJ, I hate the visual effect.

I suppose I'll have to settle for something halfway: I'll use position: absolute; on both divs, and let the menu scroll out of sight, or something. Maybe do a pixel drag or something to fix the part where the image is otherwise just going to "stop" abruptly.

Re: current problems still remaining

The part where the div doesn't show up at all seems to mainly be a problem with the fact that the "header" div is inside several others, and position: absolute isn't yanking it out of the flow in IE like it should. If you refresh, you'll see that at least the image is now showing up in IE, now that I've put all my coding instead in a new div right after the body tag called "sos_group".

Of course, I can't just do this, because the code snippet I snitched from this community to put an image map in is using the header_links function to build itself, and I don't know enough about S2 code to move this block into the new div, or even just yank the header to where the new div is currently located! Bah. :(
Sep. 21st, 2007 01:42 pm (UTC)
Out of curiousity, did you try disabling the base stylesheets through the Customization Wizard or in the theme layer? Something weird is going on because it's trying to load a non-existent stylesheet.

If you make the theme layer's source viewable and provide the ID, I could probably help out with that.
Sep. 21st, 2007 01:59 pm (UTC)
I think that's me, attempting to wedge IE's conditional comments in there. (I really just want two declarations, absolute positioning on the relevant divs, but since I wasn't sure how much else I'd need to fiddle with, I was just going to make an extra stylesheet called ie.css.) So far the layer does not like them, which is such a shame.

Boy it's been a while since I last tried anything like this -- I don't remember how to make a theme public. *much bowing and scraping and appreciation for all your help so far, by the way*
Sep. 21st, 2007 03:01 pm (UTC)
At the top, with the rest of the layerinfo:
layerinfo "source_viewable" = 1;
Sep. 21st, 2007 05:36 pm (UTC)
Okay, done -- like hours later; sorry!

Oct. 1st, 2007 12:27 pm (UTC)
It still doesn't look quite right in IE... the page scrolls, but the graphic on the left looks "smeared" below the floating links.

(Sorry about the delay.. work has been unusually busy the last few weeks trying to get some software ready.)
Oct. 1st, 2007 05:12 pm (UTC)
At this point, that's deliberate. I made a "pixel-drag" background image for IE so that at least it wouldn't look so plain; without JavaScript, there's nothing I can do to get IE6 to emulate the fixed positioning.

I'm sure IE7 still looks a bit off, but I used an underscore hack to feed the "fixed" code only to IE6, so it should be getting the fixed-position code like all the other browsers. (I much prefer conditional comments to things like this, but I was unable to get them to display; the layer compiler ate the code.)
Sep. 21st, 2007 08:44 am (UTC)
No scrollbar in IE, which completely breaks it for me-- I can't see anything past the top two entries. (And, if accessibility is something that matters, very, very hard to read dark text on black. That makes a lot of people go "ow".)
Sep. 21st, 2007 01:24 pm (UTC)
I know, I know~. *mournful* Probably, as av8rmike has suggested, that's a problem with an overflow override I did to fix something niggling about the layout visually. Hahaha. (I'm actually surprised this DIDN'T get me into trouble with Firefox or Opera; both of those browsers were displaying everything fine and functional, until I started hacking away at the layout to see if I could get it to work in IE.)

(The text shouldn't be that dark? It's a light shade of gray, which is much less painful on the typical eye than white on black. But I have to say, I find the IE version much harder to look at for long periods of time; I think it's because it doesn't have the strip of white running up the side to help minimize that feeling of staring at pale text on endless, solid black.)

Latest Month

March 2016

S2 Help Communities


Powered by LiveJournal.com
Designed by chasethestars