CSS Nesting, grr
Any advice here from other CSS-savvy people would be greatly appreciated.
Situation: div box holding text and two images that should be layered, one on top of the other.
I can’t use background because it’s an image that must be resized.
I can’t use absolute positioning, because the rest of the page (which is too complex to tear apart) isn’t -precisely- the same in IE and FF.
When I use relative positioning to say “put transparent image over other image”, that works fine… EXCEPT: the original div is still stretched to fit the space the image SHOULD be in if it weren’t floating over the background image.
I’ve tried forcing the size of the box, but now I’m missing the text that’s supposed to be below.
Anything?
EDIT: Okay, problem was worked around. Exceeept… it still shoves the next box down in Firefox but not IE.
Float the image with a negative margin? You should be able to do that without constraining the width of the parent container.
That’s just a random thing to try. My ability to picture web code without, well, a picture is limited. I’m used to people handing me a design and saying, “Make the page look like this.”
http://castage.sv.publicus.com/apps/pbcs.dll/frontpage
As it stands, it is currently floating in a relative position with a negative margin and a higher z-index. unfortunately, it seems to leave this “ghost”.
Is this what you’re talking about, or something else?
http://www.screencast.com/t/_aTIAfsaR
Specifically, it is the videos directly above that box. The text is currently bleeding into the lower box because of that “bumping down” of the elements due to the ghost of the transparent image that makes the play arrow (and black border) around the video image.
So you want this? http://www.screencast.com/t/b1O4wtK8lHJ
Moving the text into the span that holds the play image worked for me. Somewhat dirty, but you get the idea: http://www.screencast.com/t/VBQvQo30SI3
Hmmm, it’s so crazy, it just might work. I’ll give that a test.
I assume you got it working?
I’ve been having to deal with CSS fun a lot recently too… not only is it browser compatibility, but CSS version differences too… which css implementation to use, how each are supported on various browsers, etc. yay coding.
Still easier than application development though IMO :P
*nod* More or less. It’s not ideal – for some reason the podcast link below it does some strange things in IE (firefox is fine).
I’m definitely not an application developer.
try to stay away from more ‘advanced’ coding in general web development… makes compatibility that much better. It might end up a little bulkier, but at least it’s easier to make things look the same across a lot of browsers.
Advanced features are better used for ‘bonuses’ for users that can support them, rather than for core functionality, unless you’re in a closed environment where you can dictate what users should use.
Of course, I haven’t looked at the HTML for the issue you had, so I have no idea how ‘advanced’ the css or dom is that was used for that box.
I’ll stop talking now :P
*chuckle* It’s cool. I’ve been doing web design (html, css, javascript, graphic design, information theory) for about ten years now.
However, I did not create the site itself (which is going through a major redesign as we speak, which I had much more of a hand in). It’s built via a CMS template system for publications called Saxotec Publicus. My options for modifying structural things are somewhat limited by this.
http://castage.sv.publicus.com/apps/pbcs.dll/frontpage
Woo hoo! Thanks, Chris! Yer my hero. :)
which is the area in question?
The Video box is what I was working on. still causing a gap in IE, but it’s functional.
:-)
Glad to know my headaches with CSS have helped someone else.
EDIT: Okay, problem was worked around. Exceeept… it still shoves the next box down in Firefox but not IE.
It’s looking good, but that’s frustrating. I can go into the code for the other boxes and -force- them to climb up, but I’d rather convince firefox not to be so lame. Any ideas?
Yup, on the span that holds the bottom text give it a negative bottom margin. That will move up the stuff under it.
http://www.screencast.com/t/zNZsDkRaenu
(because taking a picture of code is easier than dealing with LJ formatting)
I tested that in IE 7 and Firefox.
MARGIN! Why didn’t I think of the bottom margin as opposed to the actual box size!
*bows low before the mighty Chris*
I’ll take it from your enthusiastic reply that it worked, so yea!
For what it’s worth though, the gap wasn’t caused by the size of the box, it was caused by the image that wasn’t there anymore which is outside of the box.
CSS is all voodoo though. But, it’s the best voodoo that we have.
do 2 versions of the page, one for ie, one for ff, grab the user agent with the browser, have the server dynamically load differe css classes (or a different div, whichever’s easier)
IMHO
server side > client side
I typically favour finding a workaround that works for both (or any more than 1) browsers… easier to maintain that way. For the most part, forcing a css version/implementation helps, at least in later browser versions that support more accurate standards (IE7 and FF2 are great for that)
But then I develop web apps where one can define a required browser/version, rather than having to support a wider range of browsers/versions on the market…
But I stand by the opinion that IE7/FF2 = best browsers right now. :)
i’m lucky in that i very rarely have to “design” anything. i hate javascript with a burning passion, and will do just about anything to offload functionality to the server, excessive postbacks be damned!
its just a selfish personal bias though, maybe i don’t understand javascript enough, but it just seems so fragile. backend code feels more robust to me
when dealing with compatibility, yeah javascript can be a pain… but with a known DOM, it can be very very helpful… and with apps that do a lot of server side calculating, unloading some of those CPU cycles to the browser can be a huge plus, especially for trivial tasks that javascript’s suited for.
Right now I still favour IE7 over FF2 for web apps, mainly because of its built in XML/XSL support which is a huge benefit. And combining the DOM/XML/DHTML features together, you can make one slick, dynamic app.
I tend to cite Facebook and Flickr as two very user friendly and advanced UI sites that take advantage of a lot the browser has to offer (though from what I can tell, both either have implemented a browser-compatible XML function set, or have offloaded that to the server, if they use XML at all – but the DHTML interfaces are very nicely done). And I like how they ignored IE6’s windowed elements issue (form elements not able to be controlled by CSS, such that for example, a grey layer over top of the page can block access to regular page elements but not a dropdown box :P). IE7 and FF don’t have that problem.
But now I’m babbling about coding… talk about derailenated!
You’re lucky then. I don’t know how many headaches here were caused by IE 6 and Safari. I have to admit though, having Safari on Windows has helped for testing. I can’t develop in it— I feel helpless without my Firefox extensions— but at least we don’t have to rely on the one guy on the team with a Mac to log our Safari bugs.
heh at this point I don’t pay too much attention to Safari… with over 90% of the browser market (YMMV) covered by IE6/7 and FF, I just trust that most will work sufficiently in Safari :P
Now what about IE on a mac? I’ve never really tested to see the compatibilities between Mac IE and its equivalent PC version. I heard the Mac version was more of a pain… has it improved since it first launched?
We don’t have to support IE on the Mac, which is a grace since that’s even more of a nightmare than Windows IE 5.
Safari doesn’t have a large percentage of the browser market, but Mac customers are vocal and seemingly make up a disproportionately large percentage of our viewers. We seem to have most of the issues straightened out, though Flash support in OS X doesn’t seem to be any better than Flash support in Linux.
*laugh* You don’t understand, our page is broken up into perhaps 40 separate templates that are combined dynamically.
well hell, there you go then! half your job is already done for you!
*laugh* Orrrr, I’d have to duplicate 40 separate templates.