Followed *most* of your suggestions Zoe as closely as I could given the circumstance of the design. I think it worked out well (except for making the font bigger which will break the design as it is).
http://www.olpguitars.com/OLP102005/ Thanks Jeff -----Original Message----- From: Zoe M. Gillenwater [mailto:[EMAIL PROTECTED] Sent: Wednesday, October 05, 2005 4:03 PM To: [email protected] Subject: Re: [css-d] Image and Links Missing in IE Bayesian Filter detected spam Jeff Reid wrote: >I am converting an eps file to css and .asp pages. In Firefox the conversion >is rendering correctly but in IE the main image and the text links above it >are missing. ..nowhere to be found > > Anyone had this happen before? > >Here is the working url: http://www.olpguitars.com/OLP102005/ > >Here is the css: http://www.olpguitars.com/OLP102005/css/olphome.css > > Hi Jeff, Your site looks pretty consistent between IE and FF now, but there are a lot of improvements that could be made to it. I'm guessing that you're a print designer, based on the fact that you said the comp was an eps and the way some of things on the site are put together. Designing for the web, and CSS specifically, requires an entirely different mindset and way of doing things. For starters, before you apply any style to your page, you want to focus on structuring the content correctly. This means using the correct HTML element for each piece of content, otherwise known as "semantic markup." I won't get into the whys of semantic markup here, as that would be off topic, but feel free to email me offlist if you want to know why it matters. Some areas of your site were semantic markup would be useful: - The list of links at the top should be marked up as a list, then styled with CSS to appear horizontal, unbulleted, etc. -- http://css.maxdesign.com.au/listutorial/ -- http://css.maxdesign.com.au/listamatic/ -- http://www.communitymx.com/abstract.cfm?cid=93FC2 -- http://www.communitymx.com/abstract.cfm?cid=D6F9E - The paragraphs in the left sidebar should be marked up as paragraphs, instead of using the br element to space them out. -- http://www.communitymx.com/abstract.cfm?cid=A1A37 Once you have your content marked up correctly and separated into sections using divs, you can start hanging styles on those elements. Try to use CSS to control all the presentational elements of your design instead of HTML. For instance, get rid of the center element you have wrapped around your entire page and use the auto margins method to center your page instead: http://www.communitymx.com/abstract.cfm?cid=A8BBA http://css-discuss.incutio.com/?page=CenteringBlockElement While building your design, keep in mind the flexible and user-centered nature of the web. Right now, your design only works at a particular font size. If I enlarge the text in my browser (as I'm inclined to do, with such teeny text in that sidebar) the design immediately breaks apart. Even if you refuse to believe that anyone will ever resize their text, the fixed height of your sidebar precludes you from making any changes to the text inside. You've locked yourself into a box instead of taking advantage of the flexible and fast-changing nature of the web. In general, don't assign fixed heights for layout elements, and always allow for text resizing. There are a number of rounded corners methods that could transform your rigid sidebar into a flexible container quite easily. http://css-discuss.incutio.com/?page=RoundedCorners Many people dive into CSS-based design without really understanding the concepts behind it, and never learn how to use it correctly and efficiently. Instead they learn enough to just get by, and perhaps even create some attractive stuff, but create really inflexible, overly complex web sites that only work for a handful of users in the process. I would suggest that you take more time to educate yourself about how CSS really works and practice on a number of pages before building a site with it. This list is a great place to start your education, and the list wiki has tons of great resources listed. I hope you are not hurt by my suggestions -- I simply want to make sure that you learn what you need to to be a kick-ass CSS designer, instead of just getting by and never really "getting it." Best, Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
