IE 5, IE 6 issues

HTML & CSS
21

Ok, wasted a bit of time playing with alternate stylesheets on this one, but here’s what I came up with:

Asheville Playgrounds - Premier design builder of custom, hand-crafted residential and commercial playgrounds

as with all my examples directory is wide open for easy access.

Index of /for_others/sculley

I took quite a few stylistic liberties including switching it to dynamic width, using media queries to change the layout depending on width, using dynamic fonts wherever possible (pretty much sidebar and behind image replacements were the only no-go on that), and of course redid all the images to get the file sizes under control.

I broke the floating content image into three parts, and APO’d them using CSS3 border-radius – likewise the content area background was switched (for the first stock wood pattern in my textures folder) so it can be dynamically sized and again with CSS3 corners. Oh noes, IE8 and lower don’t get rounded corners. OH WELL! :smiley:

I also used my ‘fake 100% height’ trick to apply the transparent background area without resorting to using a image file. Renders faster, works all the way back to IE5 assuming scripting is enabled… works in all modern browsers without scripting; GOOD ENOUGH.

Other than the lack of rounded corners and subtle use of text-shadow in two places, works just fine all the way back to IE 5.5. I make no guarantees about 5.2 Quack or 5.01 – a lot of the CSS2 properties being used they don’t recognize properly.

Though that’s just the home page… you’ve got gallery issues too? NOT that I’d have any of that scripted asshattery in there; but I’m the guy who passionately HATES lightbox type effects. I believe my reaction is typically to scream at the display “Oh for {expletive omitted} sake just let me open the blasted image! Ok, now how the {expletive omitted} do I resize it or SHOCK close it?” – Not a fan.

Even as just the homepage it illustrates what I mean, 95% the functionality and appearance, not a script to be seen (unless you count IE expressions in the CSS), and it’s 72k vs. the originals 2.3 megabytes. Only 2k over my ideal target and well under the 140k per page max I usually aim for.

22

Hey DS…cool. I’ll look at this in a minute. I forgot to mention…the images need to stick up and down like they are on current site. That is how designer wants them. That’s the trick to making the transparent bg work when adding the content…the only page it will grow down for now is the Online Store > Swings page where the scrollbar is.

23

I’m assuming you mean the ones next to the content – in which case “stick up and down” doesn’t work when the area dynamically resizes it’s height based on the width and dynamic font size… Change your screen width to see what I mean – especially below 960ish where I resize and reposition them one atop the other, or below 752ish where they are removed from the layout entirely.

If that’s indeed the images you mean – TYPICAL of what I’m referring to with the phrase “but I can do it in photoshop” – usually indicating whoevers drawing the pretty pictures doesn’t know enough about the Internet to be drawing pretty pictures of an ethernet port, much less websites. You cannot guarantee the content size – the end client may edit that content until blue in the face – honestly having those images spaced that way isn’t even viable long-term for a site design.

“Designers” – who know jack about accessibility, web development, or even what’s actually practical to put on a site in the first place. Should have known you were working with one from the two megabyte train wreck you had.

There’s a REASON I say kick the designer right square between the legs, and stick them at the END of the process to make the pretty pictures to hang on the layout – as starting from a goofy picture is broken buggy disasters that usually do nothing more than take a massive dump on the entire development process.

In case you couldn’t tell, <jay>I’m {expletive deleted} sick of {expletive deleted} designers and their {expletive deleted} goof-assed pretty pictures that are {expletive deleted} useless when it comes to {expletive deleted} making a {expletive deleted} website.</jay>

Snooch to the nooch? :smiley:

Probably completely freak if they saw it in large fonts/120dpi… or even larger. There’s a reason fixed height backgrounds are a complete miserable failure at web design – and if the “designer” didn’t know that (given that massive home.png thing), they need to do the world a favor, back the devil away from the keyboard, and take up something less dangerous like macramé weaving.

24

Yeah, it happens a lot. Designers don’t understand coding the design. Sopme ask for guidance some don’t :-). Yup…you’re right. That’s what’s happening here.

I reduced the size of the wood image and the transparent staging area. I will get to all the content images. I’ll have to create them as jpgs and then go back in and match them to the bg.

So, what do you think? Keep as is? If so, any idea why the page below shifts waaaaay down in IE7?

http://ashevilleplaygrounds.com/online-store/swings-and-chains/
25

Not sure what you mean by “shifts way down” as it looks just like it does in 8,9 and Opera here.

Though that crappy little scrollbox you can barely see any content in? THAT’s a problem – again caused by that crappy fixed height background. LET THE PAGE EXPAND!

I’d be half tempted to axe the footer in it’s entirety, moving the copy/disclaimer into the sidebar, and letting the page grow.

If you’re going to shoehorn that much content into a crappy little fixed height you can’t do anything with, you might as well hang it up and not even bother deploying a site for this client for all the good it will do them.

In fact, pages like what you have so far are the type of things I encourage companies to sue developers for damages over. The above profanity? Mostly gentle joking and exaggeration. That one statement about lawsuits over damages? NOT A JOKE.

Seriously, pimp slap the designer. What they’ve given you is USELESS.

26

Gosh, DS. I’m not sure what to do. The deadline is Friday and they’re not going to change the design. So, if we can make it so the page can expand down, I’m all for it if the images can stay as is for now to fit the content as it is now. It can grow if client adds more. If not, I feel like I’m in a rock and a hard place. I guess I can explain to designer that to make it grow, the content images can’t be like they are but like you have it?

Yeah, I know the scrollbar issue is caused by the crappy height issue. IE 7 for some reason is starting the whole table below the transparent or even the wood staging area.

27

The issue in IE7 is haslayout and can be fixed with this.


.entry-content{zoom:1.0}

I think you should show your client Jason’s version as I think its much better than the original especially with the flexible size also.

28

Thanks Paul. I added .entry-content{zoom:1.0} but it didn’t work.

29

Yes it did I’m looking at it now in IE7 and its not dropped down any more unless you were talking about something else?

Did you refresh your browser?

30

Yeah, several times. I’m using IETester…not sure how accurate it is.

I’ll take your word for it!

31

Looks like it may be an issue on first load but if you are using Jason’s code then I wouldn’t worry about it for now as it won’t happen in his page :slight_smile:

32

Still not working in my IETester after refreshing…oh well…