Member Avatar for popflier

I'm new to setting up HTML sites with CSS and I am trying to find the best way to setup the structure of a site. I've read online about the many ways you can setup the structure, but I'm not sure which way to go and am looking for some advice.

Should I use a 1 X 1 table with divs inside and no wrapper?
Should I use all divs and put my content in a wrapper?
Should I use all tables and style with CSS?

Right now my workflow has been to create a Photoshop PSD layered design, take it into Fireworks to slice & optimize it, export to Dreamweaver to setup CSS. It seems though that I end up with a ton of tables and when I add content to one cell it begins to stretch out the tables in the row which causes my background graphics to be broken apart. Would setting up my site with divs solve this problem? I'm used to building sites in Flash and not used to having issues like this.

I've also read that there are quite a few 'hacks' that need to be done to your CSS code in order for your site to be viewed the same in all browsers. Is there a list anywhere of the basic workarounds needed in order to be consistent with all browsers?

Thanks in advance for any advice.

  • 5 Contributors
  • 8 Replies
  • 185 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by almostbob
Member Avatar for MJ Pieterse

i would suggest div's. Tables limit you.

you would have to create two style sheets. one that is set for FF, Chrome etc and then one for IE. you then include conditional commenting on your html including the style sheet so that it reads if it's IE and ignores if it's not

Member Avatar for popflier

Is there a website somewhere that details the workarounds that I need to put in each stylesheet for FF and IE? Or a site that details what both IE and the other browsers are and are not capable of? I have read about a few of the "hacks" you need to use, but definitely don't know them all.

Any sites that anyone can recommend that has this info?

Member Avatar for MJ Pieterse

Two style sheets required with one framework. The reason that we include two style sheets is one for Fire Fox, Chrome etc. and one for IE.

IE is the only browser that supports conditional commenting and therefore we need to style for FF/Chrome etc on a ‘main’ style sheet and have a separate page that we adjust the bugs that might form, for IE separately that is included with conditional commenting on our page/master page.

There should be a wrapper to contain your header, body (herein referred to as container) and footer. This is so we can have optimal control of the main display (wrapper) and then style the rest (header, container and footer) as required. Font size is set on the html tag as 100% so we can style the rest of the fonts accordingly on %. It is wise and suggested that % or em’s is used for font sizes, as people have different screen resolutions, and setting pixels on font sizes can cause havoc on some peoples screens.

Chrome/FF Style Sheet

html {
        height:100%;
        font-size:100%;
}
body {
        margin:0 auto;
        padding:0;
        text-align: -moz-center;
        text-align: -khtml-center
}
#wrapper {
         text-align: -moz-center;
         text-align: -khtml-center;
         width:800px; //whatever you need your width. mines on 800
         margin:0 auto;
}
#header {
         width:800px;  //add style as required
}
#container {
         width:800px;  //add style as required
}
#footer {
         width:800px;  //add style as required
}

IE Style Sheet

html {
       height:100%;
       font-size:100%;
}
body {
     margin:0 auto;
     padding:0;
     text-align:center;
}
#wrapper {
      text-align:center;
      width:800px;
      margin:0 auto;
      padding-bottom:20px;
}

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Sample</title>
<link href="<%=ResolveUrl("~/style/ChromeFFStyle.css") %>" rel="stylesheet" type="text/css" media="screen" />
<!--[if IE]>
<link href="<%=ResolveUrl("~/style/IEStyle.css") %>" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
</head>
<body>
  <form id="form1" runat="server">
<div id="wrapper">
        <div id="header">
                  //content for header            
        </div>
        <div id="container">
                    //content for body
         </div>
        <div id="footer”>
               //content for footer
       </div>
</div>
</form>
</body>
</html>

This is the most outer shell that you will need when you start. the rest you'll have to adjust on your IE style sheet as you carry on with your design and your main style. you will see that on a lot of things you will have to add a (normally left) margin to your IE style to get it to align exactly (also as shown on FF and Chrome - that is correct).

Hope this helps.

Member Avatar for popflier

Thank you so much! Yes, this is very helpful. I didn't understand exactly how to setup a stylesheet for different browsers for one website. Thanks for writing it out for me and for the clear explanation.

There are so many sites that list different hacks, workarounds, etc... that it's all so overwhelming and I've found some of the information contradicting. Because of this it's very hard to know what is the correct way to do things in order to accommodate all browsers. I also haven't found just one website that clearly spells out all of the issues with each browser so that I know the limitations of each and therefor know what I will need to adjust for IE or FF or Netscape, etc...

I also do not have a mac or access to one in order to test my site on. Is there a resource somewhere online where you can test your code to know whether it will work correctly in Safari?

Thanks again for the help.

Member Avatar for MJ Pieterse

you will need to download Safari and install it on your pc. i'm not 100% sure one how it works, but apparently it runs the same. Otherwise your other option will be to phone a friend with a Mac.

Good luck and hope this helps

Member Avatar for Phaelax

Safari does have a Windows version. You could use Chrome which also uses Webkit, but Safari 4 currently has the most updated version of webkit; Chrome is slightly behind on the version but should work the same

Member Avatar for MidiMagic

You don't have to use different stylesheets for different browsers. I get stuff to work just fine with only one.

The following rules make pages work with all browsers:

- Don't use deprecated tags and attributes.

- Don't use browser-specific tags.

- Make all HTML tags lowercase.

- Be aware that Internet Explorer renders box objects in a different way, compared to other browsers. Don't put nonzero surrounding styles (margin, border, width) in the same tag or style that contains size styles (width, height).

- Make all attributes, values, styles, ids, and classes lowercase.

- Don't tangle tag pairs. Each pair of opening and closing tags must be entirely inside, or entirely outside, every other tag pair in the document.

- Place all attribute values in quotes.

- Don't put line breaks within attribute values.

- Close containing tags with separate closing tags.

- Close empty tags with self-closing tags. Put a space before the / mark. This is necessary to get Internet Explorer to work correctly with closed empty tags.

- Don't use comments to hide scripts or styles from browsers. They cause trouble.

- If you can do so, use styles instead of tables to create columns.

- Don't use tables to create margins, borders, or padding. Use tables to create tabular data.

- Set text alignment styles for tables. The defaults are different for different browsers.

- Write your urls and filenames as though everything is case-sensitive. And don't use special characters in urls and filenames.

- Be sure to &-encode special reserved characters intended to appear in your text. The following US-ASCII characters must be encoded if they are to appear on the page: < > & "

- Center text withstyle: text-align: center;

- Center images reliably using: a container with the styles:
text-align: center; margin: 0; border: none; padding: 0;
Put this style in the image itself: clear: both;
There must be room for the image.

- Center other objects reliably using: a container with the styles:
text-align: center; margin-left: auto; margin-right: auto;
There must be room for the object.

Note that the text-align: center makes IE do what it should.

- Don't try to center something vertically in the browser window. It can't be done in a way that works on all computers. Any trick used to center vertically fails with a different screen resolution. Don't try to exactly fill a screen, or place something against the bottom edge of the browser window. These can't be done in a way that works on all computers. Any trick used to position objects vertically will fail with a different screen resolution or browser window size.

- Don't change the colors of links. It can't be done without the possibility that the links disappear on browsers configured for disabled people.

- Don't position objects absolutely. It can't be done without introducing browser incompatibilities.

- Don't expect structures made of div tags to stay together if the browser window is too small.

- Don't expect the page to look exactly the same in all browsers. Be aware that different browsers render objects differently. Each browser renders objects and text in its own context. The character and image display processes are slightly different in each browser. For example, Internet Explorer renders characters one pixel thicker than Firefox does, even though the characters are spaced the same.

- No text on top of graphics. Some visual learning disabilities (including dyslexia) cause text placed on top of graphics to become unreadable.

- Leave enough space between items. Then minor differences won't matter.

- Don't put inline tags or text directly inside the body tag.

- Don't put block tags inside inline tags.

- The li tag pair must be directly inside ol or ul pairs. Nothing else can be directly inside ol or ul pairs.

- The td and th tag pairs must be directly inside tr pairs. Nothing else can be directly inside tr pairs.

- The tr tag pair must be directly inside table, thead, tfoot, or tbody pairs.

commented: excellent +1 +22
Member Avatar for almostbob

Portable-apps versions of Firefox, Opera, Avant and several other browsers, made to be installed on thumb drives so do not write to the registry or try to become default browsers, installed to thumb drive or the system drive are a good debug tool
browsershots to check what the css-html look like in OS/Browser combinations that you cant install, or that you have no direct access to and the
w3c validator to check the actual code

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.