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/
