Designing For Cross Browser Compatibility

Whats the best way to design a web site & have the least amount
of problems with Cross Browser Compatibility issues.

I'm using First Page 2006 & new to web page design.

Also Which html will give me the best results for this
html 4.01 Strict html 4.01 Transitional.

I noticed that someone said to create a table for the whole page

set your tables in % instead.. so width=%100 to fill up the whole screen.. then everyone will be happy..

Any ideas on this.

 

The 100% width can look kinda crappy on bigger monitors (widescreen, etc) if your site is not designed to fill that space... I prefer to work with set widths that match the maximum space my widgets on a page are designed to take up.

For instance, no one wants to read an article that spans 1600 pixels wide... it is just too difficult to read... Keep those sections under controlled widths... etc.

 

The first idea is to avoid tables!

Seriously you should look at using CSS as that offers the greatest compatibility across not only browsers but all over devices too.

There is no magic bullet - the best way to do it is to keep testing and testing in all the different browsers so you only design one step at a time so you can catch errors early...we've all been in a situation where the finished design looks great in Firefox but is broken in IE and it requires a huge amoutn of recoding to fix it!

 

I'm on a screen resolution of 800x600 how much screen with should I set
it for & do you think html 4.01 Strict would OK.

 

Hi MattD,


First Page 2006 has some css templates it that I could use.

I plan on using the design mode (WYSIWYG) do you think
this will work.

 

I have no idea what the output of First Page is like (never even heard of it!). It depends on the editor really - some make decent output, some make crap output! If it has the option to use CSS (and XHTML if it offers some sort of compatibility for that), go for that option!

 

FrontPage is ew.

I suggest you learn coding, w3 or wherever or use Maccy otherwise it'll come out in tables.

 

I should have put 1st instead First Page 2006.

1st Page 2006 has been out for a while with 500,000
downloads.

Anyway First Page 2006 is vary bugy I'm not going to use it.

I'm going to use kompozer & use html tidy to clean the code.

 

Tried Dreamweaverr yet? this is an excellent piece of software i would reccommend. Below is a link, which will allow you to download a 30 day trial

https://www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver&loc=en_us

Best of luck

Ash

 

The very best way to write code for a design is to use xHTML strict and use CSS for everything else.

Using xHTML strict will not allow you to have any inline CSS styles, ex.

<p style="font-size: 12px;">Paragraph</p>

Code (markup):

This will also keep you focused on using the xHTML for the content! You need to analyze the design and use the least about of divs & spans as possible. Realize the power of CSS and use it control the entire presentation of the website.

If you write for Firefox first, and use clean xHTML and CSS for presentation, and include this at the top of your CSS :

* { margin: 0; padding: 0 }

Code (markup):

Clears all default padding & margin, usually a cause of problems with beginners working in Firefox then in IE6 (IE7 ignores that, I am pretty sure).

Again, if you write for Firefox first then you will have a well formed document that will look 90% perfect in every other browser. You will unfortunately always run into problems, but just use the under score hack (IE6 only) to add CSS specifically to cure the IE6 woes, and use CSS IE7 only comments to add the cures to the CSS woes, and the same applies for Opera, etc.

Remember this always for best results : xHTML is for CONTENT, CSS is for Presentation!

 

I think you should pay extra attention to the code. make it valid and always validate it in the w3 tools.
what I do when developing a website is check it against defferent web browsers. on my PC I have IE6,IE7,Firefox,Netscape,Opera and I check against all of them. I also have a mac emulator so I can check how it looks on Safari.
A long time ago there was a post here with a link to a website that you input the website address and the browsers you wished to check and the website produced a screenshot.

 

That site would be www.totalvalidator.com

 

Frontpage doesnt produce 4.01 compliant code.
To avoid browser compatibility issues, keep testing your site on multiple browsers during development.