Expression >
Domovská stránka fór
>
Expression Web and SuperPreview
>
Design question for satisfying IE8 & FireFox
Design question for satisfying IE8 & FireFox
- I'm struggling trying to figure out why my shopping cart order buttons work in FireFox and not in IE8?!
(I also noticed that my 'authorize.net' logo isn't appearing in IE8 either?!)
http://www.thecarepakscompany.com/option_02/opt2_index.aspx
Comments?
Thanks.
Všechny reakce
- You are using layers (and layers and layers and layers!) A very bad idea, and a source of complexity sorting out Z-indexes. (It's not just IE8 that doesn't work. Try IE7, or Opera, for example.)
View the site in IE or Firefox and use Page settings or Zoom (text only) to view it in a larger text size, as many of your site visitors will. ...The crashing sound you hear is your site breaking. - Whoa!
Correct me if I'm wrong though (because I'm kinda new to all of this...), but isn't EW designed to use layers?!
I was my understanding that the whole concept was to be able to use layers for the placing text over graphics, overlapping various fields, etc.
I'm kinda thinking that I should just go back to using standard .html....
How would you design it differently? - EW can use layers, yes. Was it designed to use layers? No, no more than any tool is designed to use only one technique. Layers are a very bad choice for page layout - for many reasons. They have a few (very few) uses, but only in the hands of someone who understands all the pitfalls. You don't need them at all on your pages. Just use normal page elements, including divs that are *not* layers, and style them with CSS.
"I'm kinda thinking that I should just go back to using standard .html...."
"Layers" are standard html, just a bad choice for page layout. If you mean you should redesign your site to not use layers, I agree.
I'd park your site in your back pocket for a bit and view some tutorials on how things should be done.
One to try would be Cheryl's free Basic Website tutorial. It walks through the right way of doing things:
http://by-expression.com/content/tutorials.aspx - Yes, EW is designed to use layers. But layers have VERY specific uses. It's like racing the Daytona 500 in a minivan; it can be done, but you'll never win. That's not the fault of the race track.
I haven't found the need to use layers in ages. Years. - Bill...
Perhaps a dumb question...but how do you overlap text and graphics then? Do you break up larger graphic files into small fields and utilize PhotoShop for graphic text in lieu of using text in EW?!
Check out my home page:
http://thecarepakscompany.com/option_02/opt2_index.aspx
I have a graphic toward the middle of the page and the circle on the bottom. Would you just make all of that a graphic and use 'hotspot' hyperlinking?
Thanks.
Randall - Hi Ran D
Another way you can use "Text Over Images" is create the div where you need this functionality use the images as the div background and style your text inside that div.
Let me know if that works for you. - Yeah, what Cylant said.
There's no need to be slicing and dicing graphics for what you're doing. About the only time you need to make text as a graphic is if you must use a font that isn't in a common web-safe font family. If everyone needs to see that exact font or with that exact effect applied, then you could make it a graphic. - Layers ARE standard HTML = part of the w3c specificiations but are rarely undestood or used proiperly. In the seventy sites I manage and the 16 years (yes, that is correct I started when my son who is 16 was less than a year old) I have used layers (technically absolutely positioned divs) on production sites six times.
Almost every one of those times and 5 of those times were because of Netscape 4.x. Yep, that's right Netscape 4 which should give you some idea of how long ago that was. I currenlty have one site that uses postion: absolute and that is for a very specific effect.
Layers are deceptive because they seem so easy and an answer to placing things on the page exactly how you want them. Unfortunately, they are very fragile and easily broken.
Use images in the background if you want to overlay text. However, if you want people to be able to print the images you will need to put the overlay on in a graphics program or if you hosting offers the capability you can put it in on the fly using something like gdimage or one of the asp.net image controls as a watermark.
BTW, if you add two spaces after your url it should become clickable so people don't have to copy/paste the url into a browser address bar. Makes it much easier to check things.
http://thecarepakscompany.com/option_02/opt2_index.aspx
Now that I have looked at yoru page its code is a mess. You have so many inline styles that are applied on top of styles that are in an external stylesheet it is hard to follow. Not to mention then inclusion of depreciated html attributes like align="right". Using image maps the way you did makes you site inaccessible to those who use sreen readers as well as those who use keyboard or other non-mouse methods of navigation.
I also noticed that you have list items without having specified the list type. There are 28 HTML errors, many of which are for malformed html like no closing div. That is why the closing form element is in red with a yellow highlight.
Using <br /> for spacing is another way to mess up cross browser display. Not to mention that you are using vml grpahics somewhere which only render properly in some versions of IE. <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
This image is the only one that I see would need to be in the background <img alt="" src="opt2_images/frame_600_01.gif" width="600" height="100" usemap="#FPMap0" class="style11" /> and it should just be the water strip plus the text on it though you could use plain html for the text, it would give a more reliable presentation keeping the text on the graphic.
Interestingly enough you page caused Expression to go 'white' more time that I could count as I attempted to make sense of what you have in the code. Every element seems to be wrapped in at least one div some with both ids and/or classes plus inline styles.
If I can make sense of what you have I'll try and post more specifics later.
MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes - If you're not using 'layers'...and rarely using 'absolute'...then I assume that you must be designing within tables. Correct?
- "If you're not using 'layers'...and rarely using 'absolute'...then I assume that you must be designing within tables. Correct?"
You do not need to use tables for page layout just because you are not using layers or absolute positioning.
I do not use tables for layout at all. (I do use a table on one of my sites for competition results, and of course a table is ideal for that.)
Watch the tutorial I recommended. All you need to do is style your elements (padding, margin, widths, floats, clears) to put things where you want them relative to other elements on your page. If you're not using 'layers'...and rarely using 'absolute'...then I assume that you must be designing within tables. Correct?
Incorrect. You don't need layers to layout a non-table layout. Just look at the code of most Wordpress blog templates.
--
Chris Hanscom - Microsoft MVP
Veign on Facebook | Resource Center | Veign's Blog | Web Development Help
Get a Complete Website Analysis by Veign- Incorrect. Go download the zip file and work through the tutorial that Kathy suggested. You will see that there is no layers or tables at all in that tutorial. Content on my pages is placed using margin, padding and floats. It is not positioned using absolute positioning or tables.
I rarely use table for anything other than tabular data. This is a quick and dirty clean up and restructuring of you web page http://wiserways.net/carepack/index.aspx note that there is one table on the page for your currently featured products.
Note, I deliberately increased font sizes since the ones you had on your site are not in compliance with the ADA which does apply to commerical websites that sell on the web. xx-small should never be used for anything you want people to actually read. I have also used semantic mark-up - headings and specifying list types. This helps with seo. I have also minimized the use of divs. If you look at the source code you will see no inline styles, no head section css and no deprecated html.
The givegifts background/foreground images would need to be redone using the original images since I had to use the gif (which btw should be a jpg or png for better quality/compression ratios).
MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes- Navržen jako odpověďCheryl D WiseMVP6. července 2009 3:57
- Cheryl, that link gives an "Application Firewall Alert", a problem another webhost4life link had in anther thread.
"To immediately resolve this problem. You can login to your hosting control panel->security->Security guard and set the security guard to Medium Level for your domain name."
(Rather ridiculous that a host would have default security set so that no one could see a website...) - Thank you Cheryl...and everyone else.
I'm currently going through the recommended tutorial and starting from scratch with solid guidelines to follow. (I don't really feel like it's from scratch because I have some good templates to follow - my old site, your recreation, etc.) I designed a few personal websites a LONG time ago and I've had to adjust my thinking with CSS and EW. Your patience with my slow learning curve has been much appreciated.
Thanks again...I'm sure I'll be back on here several times before it's all over.
(I'm hoping to actually start this little business soon!) ;-)
Randall - Interesting, it doesn't give me any issue in either Firefox or IE 8. Though I could just as well have removed the asp.net form element since I made all the links null for the purposes of fixing the worst issues with the site.
MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes - "Interesting, it doesn't give me any issue in either Firefox or IE 8." The problem appears for me in IE8 - not Firefox, not Chrome, for example. And I'm pretty sure I don't have a setting in IE8 that says, "hack the site you're viewing", so who knows what is causing it. But, as I mentioned, I've seen the same on some other webhost4life sites. Google for it, and you'll see some get the problem as soon as they add a file for download to their site, for example, and that it's not unusual for it to affect some visitors, but not all.
- Weird, it is just my testing site so I'm not going to worry about it. Mostly I use it for testing stuff and back-up email in case wiserways.com goes nown.
MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes
