Hi, y'all! First off, let me be very clear that I am NOT a web developer. I make no claims to be - I am a marketing guy who is eagerly learning HTML, CSS and JQuery as both a hobby and a means to business improvement. Having said that, I recently built a site for a client that is now demonstrating a frustrating problem I have been unable to resolve: I have built a position:fixed 50px bar at the top of the site that carries the client's tagline and a link to their Facebook page. As part of that social link, I am using an 80px-high graphic that carries a z-index:9999 and hangs 30px below the bar. In Firefox, Opera, Chrome, Safari and IE9, this graphic looks and works perfect. However, in IE8 (still used by the client), the graphic is not visible below the fixed height of the bar. It literally cuts off flush with the bottom of the bar. Now, the CSS for this bar was gifted to me from a fellow designer who actually built it for her site. I have basically hacked it up to make it work here. Obviously, there is something in the CSS that IE8 just doesn't like. Help? Thanks so much! Site is: cidermag dot com
<!DOCTYPE html> That tells the browser "render this any way you like", and IE doesn't like not being told what the doctype is. Choose a strict doctype (4.01 is good) and write the site to that standard. SNPA - yes. But I prefer it with a bit of caravienne underneath, which is how I brewed it for years.
It is interesting you say that IE is "still used by client." In the last week 33% of the visitors to our website used IE. So you can't dismiss IE, even if the client never sees it. Though I would like to dismiss IE from the planet, we are stuck with it. Also it is interesting that you say this is a hobby, but you already have customers. wiz
Thanks for replying, wiz. I actually specifically said "IE8" as still used by the client, not "IE" in general. According to the stats on the site, the majority of visitors are using other browsers or IE9+. Also, nothing at all interesting about offering to design a website for clients who have purchased other services through us. What is interesting, though, is a request for assistance that gets answered with a strange dissection of semantics.
Well there's your problem -- ever notice you do NOT see position:fixed elements on a whole lot of websites, and certainly not on any of the major 'big name' sites without say... scripting assistance? there's a reason for this. It's unreliable, particularly on older versions of IE. I don't trust it in any browser, you shouldn't either. Honestly given the size of the element in question and what's in it, I'm wondering why you'd even bother. As to: The site has MAJOR issues any number of which could cause problems in older versions of IE or even cross platform -- which is why here in IE9, Opera, FF and Chrome I'm seeing four different broken layouts. From top to bottom you've got HTML 5 garbage, that stupid malfing HTML tag conditional comment crap Paul Irish came up with for targeting different versions of IE for no good reason, endless pointless DIV for no reason, dozens of CSS files with no media targets for Christmas only knows what, jquery bloat with a dozen javascripts certainly not making the site any more useful. There's nonsensical gibberish use of numbered headings, lists around non-list elements, classes on things for no good reason, comment placement (yes, I said COMMENTS -- as stupid as that sounds) that could be causing rendering bugs in some versions of IE and FF, tags that don't even exist (top?!?), presentation inlined in the markup, attributes like TARGET that have no business being used in any HTML written after 1998 (unless you're using framesets), clearing DIV like it's still 2001... it's a laundry list of how not to build a website AND a poster child for everything wrong with using HTML 5 -- since to be frank you don't have HTML 5, you have 1998 style 3.2 with a 5 doctype on it... and to be frank I've found most of the polyfills, shivs and other scripted workarounds cause more problems than they solve. It may sound harsh, but the reason posters like rukbat and myself are pointing out these types of issues is that any of a dozen different things could be causing cross browser issues -- and rather than let you continue to be led down the garden path by bad practices, we're trying to explain to you that to be brutally frank, it needs to be tossed and started over from scratch. CSS is only as good as the markup it is applied to -- so you have to start there. ... and more and more developers are souring on HTML 5 because of problems like you are encountering. See the links in my siggy for more on what's wrong with 5, and what's wrong with your site... because you're hitting up against both of them. As evidenced by the 34k of markup to deliver 2.3k of plaintext, a dozen or so content images and two objects... easily three times what should be used -- and that's before we talk about it being an accessibility train wreck thanks to the fixed width layout and undersized fixed metric (px) fonts. We're not trying to be mean, we're trying to explain that your problems run far deeper than you think -- and again to be frank, it's from a mix of over-thinking solutions to problems and jumping the gun on specifications like HTML 5 that just aren't ready for the lime-light (and even if it was completed, I still would advise against it's use!) I'm away from the workstation, but if I'm up to it and remember later, I might do a rewrite of the homepage for said site addressing as many of the issues as possible to illustrate what I'm talking about... though again you've got a lot of "gee ain't it neat" scripted stuff like that malfing full width image rotator I'd never put on a website in the first place.
Thanks for the answer, deathshadow. That helps a lot! I have no fear of anybody "being mean" to me on an online forum. Pretty sure I've got my big-boy pants on. Frankly, the way you guys talk to guys like me about web design is the same way I talk to amateur photographers and rookie printing press operators. At the same time, though, the one thing I've learned over the years that many forum-"gurus" seem to conveniently forget is that EVERYbody starts somewhere. This is all very fun for me and I'm learning a LOT by DOING rather than just sitting back and not doing anything for fear of insulting those who have been doing it for years.... The site is based on a template so the majority of the markup is not mine. But you've made some things clear enough for me to know where to make changes and, for that, I'm grateful for your reply ('specially when it comes from somebody living in the town I grew up in! ). (ETA: I made the "dissection of semantics" comment not in reference to any reply about the site but, rather, in reference to the strange need to pick apart the words in my post. I welcome dissection of the site - it's why I joined the forum! )
I'm going to give you some photographic insight into web development. Some web development is the same as framing a shot. And so many people here want a fast short lesson in how to frame great shots. I'll wait until you stop laughing. A lot of this stuff is just "yeah, I did that, and it took me 2 days to figure out why it didn't work" - but that was 20 years ago and "doesn't everyone do it the right way now?" Programming and art may use different hemispheres of the brain, but learning is learning, and we often forget that it was painful learning something.