Hi Allison,I think that it may be difficult to have your css based design
render the same way in all browsers and monitors or systems. Research and
looking at various surveys of browser support may be useful. This article on
browser support at Yahoo may be
helpful.http://developer.yahoo.com/yui/articles/gbs/http://www.codestyle.org/css/BrowserConfiguration.shtmlI
think with regard making css layouts or designs cross-browser compatible it
may be good to keep designs simple, to test your design on your selected target
browsers, to provide alternative css for particular browser problems, to detect
browsers through a server-side or client-side (javascript) script and link the
necessary css for that particular browser.While searching for an answer to your
question regarding guidelines for designing for browser compatibility I found
that the link below helps to address your
question.http://www.webreference.com/authoring/style/sheets/browser_support/I
think when starting out designing using css for layout it would be good to
design using valid html or xhtml and valid css. Different browsers have
different support for standard specifications for CSS and XHTML. Keeping your
code valid based on standards provides a good starting point for fixing
problems for particular browsers.You can validate your XHTML and CSS using the
links below:For XHTMLhttp://validator.w3.org/For
CSShttp://jigsaw.w3.org/css-validator/Test your design first using Firefox,
since Firefox more closely renders standard CSS better than IE.If the design is
rendering properly in Firefox, then check if you are encountering problems with
IE6. Also then test for IE7. I think these 'modern' browsers are the most
commonly used today and have the best support for current standards.At times it
would be difficult to setup a system where you have all the different browsers
and screen resolutions so using a service like browsercam for example will help
you to see how your page is rendered on a particular browser or
system.http://www.browsercam.com/These links also provide information regarding
the most common problems related to IE rendering of
CSS:http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bughttp://css.maxdesign.com.au/listamatic/about-boxmodel.htmhttp://www.alistapart.com/stories/doctype/Other
common IE problems:http://www.positioniseverything.net/ie-primer.htmlFor
inspiration in creating CSS designs check
out:http://www.cssbeauty.com/http://www.csszengarden.com/For Web 2.0 styles
check out this
tutorial:http://www.webdesignfromscratch.com/current-style.cfmGood luck in your
work.Best regards,Alex------------------------------Alexander R. TorrijosWeb
DeveloperMobile: +63 921 838 0382Res: +63 2 822
7219http://www.stormwild.com------------------------------Date: Thu, 23 Aug
2007 10:55:49 -0400From: [EMAIL PROTECTED]: [EMAIL PROTECTED]: Re: [css-d]
Beginner layout suggestions?Hi AlexThanks a lot for your email and help. It
gave me a good starting point yesterday morning. I messed around all day with
it, and I'm starting to see why CSS is so useful.Do you have any
suggestions/guidelines as to how to design for browser compatibility? I am
trying to focus on IE and Firefox and already have major differences between
the two. I'm sure I will learna and read much more as I go along with this
process.Again, thanks for your help.AllisonOn 8/22/07, Alex Torrijos <[EMAIL
PROTECTED]> wrote:Hi Allison,I'm a bit of a newbie to CSS myself but I found
this tutorial useful in attempting to use CSS for
layout.http://www.maxdesign.com.au/presentation/process/The basic process of
converting your design from an image mock-up to an XHTML and CSS page is to
first look at the design and identify containers. For example, in your design
for the Skeet'r Beat'r website, you can basically create containers for various
parts of the design which will be marked up using divs. The header and footer
sections are two containers, the left sidebar is another, the main content
column and navigation are also containers for content. These containers can
also be wrapped within another main container.In your XHTML page within the
body tag you can mark up the containers like this:<body><div
id='container'><div id='header'></div> <!-- end header --><div id='nav'></div>
<!-- end nav --><div id='left_sidebar'></div> <!-- end left_sidebar --><div
id='main_content'></div> <!-- end main_content --><div id='footer'></div> <!--
end footer --></div> <!-- end container --></body>In the external CSS
stylesheet to which your page is linked to you can have a better idea of how to
mark-up the containers to match your design by first setting different
background colors for each container. For example:#container { background:
#00EE00;}#header { background: #00EECC;}and so forth.Once you have the colors
in place you need to specify the CSS to build and position these containers.
In the header css you can specify a background image which is basically a thin
vertical slice of the header portion of your design mock-up. You slice up or
extract parts of images from your design mock-up and use CSS to either place a
repeatable background image so that the XHTML page slowly matches your
design.The header container may need to be further divided into sub containers
like logo, and logo_text.Anyway this is just one repeatable process or way to
start building CSS layouts. Hope it helps.Best regards,Alex
Torrijos------------------------------Alexander R. TorrijosWeb DeveloperMobile:
+63 921 838 0382Res: +63 2 822
7219http://www.stormwild.com------------------------------> Date: Tue, 21 Aug
2007 18:39:53 -0400> From: [EMAIL PROTECTED]> To: [email protected]>
Subject: [css-d] Beginner layout suggestions?> > Hi all,> > I am re-learning
CSS and XHTML after not using it for a few years and am in> need of some
suggestions. I have created a layout in Photoshop and am now> ready to move
onto the next step. I just can't decide which step that is! I> decided to give
CSS a shot to get some experience, but I'm not sure where to> begin now.> >
Here is a jpeg of the layout to follow:>
http://www.skeetrbeatronline.com/testpage.html> > Does anyone have any
suggestions of how to tackle this? I am a bit confused> as to what the 'best
practice' would be here and what I can actually do with> CSS, or if I will need
to use some simple tables as well.> > Major questions for me:> > Does CSS use
slices the same way that tables do? Should I keep the slices> for the tables
that I had in mind when I started or should I take that green> circle picture
out and just reposition it after I create a two-column with> header layout?> >
I'm imagining using the slices that I have created as the background in a> div
tag and then superimposing text over those. Does that make sense, and is> that
the best way to go about this?> > Now that I have decided to go with CSS, I am
at a loss as to where I should> begin with the rollover menu buttons.> > I know
these are general questions, but I guess I am looking for help for a> place to
get started. Any help/opinions/suggestions would be greatly> appreciated.> >
Allison>
______________________________________________________________________>
css-discuss [EMAIL PROTECTED]>
http://www.css-discuss.org/mailman/listinfo/css-d> IE7 information --
http://css-discuss.incutio.com/?page=IE7> List wiki/FAQ --
http://css-discuss.incutio.com/> Supported by evolt.org --
http://www.evolt.org/help_support_evolt/Try PC Magazine's 2007 editors' choice
for best Web mail, award-winning Windows Live Hotmail. Try it now!
_________________________________________________________________
Call friends with PC-to-PC calling for free!
http://get.live.com/messenger/overview
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
