 |  |  |  |  |  |  |  |
tables vs divs & workflow advice? And a list for CSS workarounds for browsers?
Please support our Site Layout and Usability advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
 |
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.
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.
•
•
Join Date: Mar 2009
Posts: 77
Reputation: 
Solved Threads: 5
Junior Poster in Training
Re: tables vs divs & workflow advice? And a list for CSS workarounds for browsers?
0
#2 Jul 3rd, 2009
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
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
Re: tables vs divs & workflow advice? And a list for CSS workarounds for browsers?
0
#3 Jul 9th, 2009
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?
Any sites that anyone can recommend that has this info?
•
•
Join Date: Mar 2009
Posts: 77
Reputation:
Solved Threads: 5
Junior Poster in Training
Re: tables vs divs & workflow advice? And a list for CSS workarounds for browsers?
0
#4 Jul 9th, 2009
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
IE Style Sheet
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.
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.
Last edited by mj080; Jul 9th, 2009 at 6:26 am.
Re: tables vs divs & workflow advice? And a list for CSS workarounds for browsers?
0
#5 Jul 9th, 2009
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.
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.
•
•
Join Date: Mar 2009
Posts: 77
Reputation:
Solved Threads: 5
Junior Poster in Training
Re: tables vs divs & workflow advice? And a list for CSS workarounds for browsers?
0
#6 Jul 10th, 2009
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
Good luck and hope this helps
Re: tables vs divs & workflow advice? And a list for CSS workarounds for browsers?
0
#7 Jul 10th, 2009
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
•
•
Join Date: Jan 2007
Posts: 3,203
Reputation:
Solved Threads: 164
Re: tables vs divs & workflow advice? And a list for CSS workarounds for browsers?
1
#8 Jul 12th, 2009
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.
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.
Daylight-saving time uses more gasoline
•
•
Join Date: Jan 2009
Posts: 1,323
Reputation:
Solved Threads: 161
Re: tables vs divs & workflow advice? And a list for CSS workarounds for browsers?
0
#9 Jul 14th, 2009
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
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
Failure is not an option It's included free
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it
Please mark solved problems, solved
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it
Please mark solved problems, solved
|
Similar Threads
- A reason to use tables instead of divs (HTML and CSS)
- General rules when working with divs and css. (HTML and CSS)
- Align floated images in center of page with CSS (HTML and CSS)
- Table with CSS (HTML and CSS)
- Is SEO Unethical? (Search Engine Optimization)
- Css ? (HTML and CSS)
Other Threads in the Site Layout and Usability Forum
- Previous Thread: Image and text alignment and layering
- Next Thread: Web page loading errors
| Thread Tools | Search this Thread |
You need to join our community in order to build your list of favorite forums. You can visit the forum index for a listing of all forums.
Related Forum Features
Latest Site Layout and Usability Posts
- Today's Posts
- Unanswered Threads
blogging content customer design development dreamweaver duplicate email evaluation filesharing firefox flash gilbane google html itunes javascript kazaa layout music napster peertopeer photoshop remote remoteserver satellitenavigation satnav server site tables template tips tomtom url wave web website websitedesignreview web_development web_sites
