How do I get my website to look the same in all browsers? Draemweaver CS3

I built a website for my daughter who is in ballet in Austria. The site looks great in Microsoft IE but slams to the right in Mozilla on PC and Safari on MAC . I have carefully followed CSS code to keep it clean. I even validated each page against WC3 validater.  The site I built is You can see the source code from the ste.
Using HTML 4.01 Transitional. I hope there is some little trick that i am missing.
Let me know oh yeah great gurus out there in cyber space. Migo
Who is Participating?
Jason C. LevineNo oneCommented:
Not sure what you mean by "nice and clean" but if you run the Code Format command in DW, it should clean stuff up.

Flash is not that hard, but your experience may vary.
Rob SiddellCommunity Educator IICommented:
every browser displays pages a little different usually. So short of just using plain text with no formatting you would need to do a conditional statement to see what browswer is being used and then basically use slightly different code for each browser.
Loganathan NatarajanLAMP DeveloperCommented:
You have to optimize it for all the browsers like moliza, opera, netscape other than IE..again.. may be you can have different css designs to be followed to do that.. or else you may need sacrifice few designs to optimize it in all the browsers..
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

You just need to edit some of your css? Here is what I would do
1-create div that centers on the page
2- inside of that either
a- create a table to hold your stuff
b- create more divs that are centered.

I personally would choose a but its up to you if you want to do b here is the code let me know if it works for you

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Heather Cahoon Ballet</title>
<link href="Assets/BlackCSS.css" rel="stylesheet" type="text/css">
<style type="text/css">
      background-color: #000000;
      text-align: center;
      height: auto;
      width: auto;
      border-top-style: none;
      border-right-style: none;
      border-bottom-style: none;
      border-left-style: none;

.Photo {
      position: fixed;
      height: 600px;
      width: 400px;
      left: auto;
      top: auto;
      right: auto;
      bottom: auto;
.style2 {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 1.2em;
      background-color: #000000;
      text-align: center;
      width: auto;
      border-top-width: 1px;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 1px;
      border-top-color: #FFFFFF;
      border-right-color: #FFFFFF;
      border-bottom-color: #FFFFFF;
      border-left-color: #FFFFFF;
      margin-top: 10px;
      padding-top: 10px;
      left: 192px;
      top: 81px;
      color: #FFFFFF;
<body class="body">
<div style="position:relative; margin:0 auto; width: 780px; height: 1251px; background-image: url(images/01_home2.png); layer-background-image: url(images/01_home2.png);" border="0" align="center" cellpadding="0" cellspacing="0">
  <p><img src="Welcome Heather Berkely.png" alt="Heather Cahoon Ballet" width="370" height="50"></p>
<p align="center"><a href="Assets/Images/Heather_Coppelia_300dpi_2005.jpg"></a><a href="Assets/Images/Heather_Coppelia_300dpi_2005.jpg"><img src="Heather_Coppelia_300dpi_2005.jpg" alt="0" width="400" height="600" border="0" class="Photo"></a><br>
<div class="style2">Enter</div>
Also if you use tables to make it show up correctly in all browsers you dont want to use %'s which is what dreamweavers default setting is, you want to use pixals to adjust the size of the tables and its feilds.
Jason C. LevineNo oneCommented:
Just because the code validates doesn't mean it's correct code.  The reason things are moving to the left in Mozilla is that you are not using the correct method to center things.

The H1 tag is set to have a width of 400 pixels, so it will center within the 400 pixels.

The #Photo id margin property should look like this so the div centers:

margin: 0px auto;

I suggest you do a bit more reading and research on CSS to learn how to do these things and pay special attention to the difference between text and blocks.  Just because a property says it will center (e.g. text-align) doesn't mean it works for block objects.  Text align works on text...margin: auto works on everything else.

Finally, consider putting a container div in your code.  It make these things easier.

cahoonmAuthor Commented:
Jason I adjusted the id margin 1st page per "margin: 0px auto;" and it fixed it. I started this project last Sunday. I bought DCS3 and started reading and learning on Internet. I could not do much this week but started again yesterday morning. There is no way I can learn all of this coding in short time. However I have read and watch Lynda videos where they all discourage tables except in certain applications so i have tried to avoid that where possible. For instance on the other pages they are not as straightforward as intro page. Is there any easy solutions to correcting those as there was in 1st?
Jason C. LevineNo oneCommented:
I'm not going to be able to troubleshoot each issue, but they all appear to be a variation of the same margin: auto issue.

If you want to center the divs, you have to have that property set that way.  
cahoonmAuthor Commented:
Jason I went into properties and on box change right and left margins to "auto" on my style sheets which seems to have fixed it! Since you did not specifically instruct me to do that and no one else did, is it really fixed? Did I do it correctly? To me it seems to be working, both on MAC, Mozilla and famous IE.

Also what is the best DOCTYPE to use?

Thanks, Mike
Jason C. LevineNo oneCommented:
I thought I did instruct you to use margin: auto.  I said it in each post :)  Yes, that is the correct way to do it.  If it looks the same in all browsers, then it worked.

There really isn't one true doctype to use.  Whichever one you pick, make sure your HTML validates.
cahoonmAuthor Commented:
Jason Well thank you very much. I think you took me to code itself when I am REAL new but Dreamweaver ability to go back and forth between design and code is what made the light go on. I was taking margin: 0px auto; and trying to insert in code before I figured it out. Anyway you helped me and I will award you the points. Also is there a way that I can make the CSS code nice and clean like I did on 1st page but don't know how I did that?

I have gotten lots of compliments on the website and learned a lot.
Is Flash hard to learn? Thanks,
cahoonmAuthor Commented:
Jason knows his stuff. I can build apartments blindfolded it seems, Jason is same way with DW. However I assume people know what I am eluding to & that I think "they should know". I think Jason feels same way based on his response to my question. He felt his answer was complete and for someone with more than a few day experience he would be right. In my case he gave me general direction that got me there. I am grateful in any case. Thanks Jason & Merry Christmas 2007
Jason C. LevineNo oneCommented:

in re your grading comments, the only things I know about you are what you write here.  You indicated that you were intermediate on this subject and I answered in that same vein.  Had you indicated you were a beginner, my response would have been more detailed.

The fact that you were able to produce a styled page meant that you had some familiarity with CSS and it appeared to me all you needed was a push in the right direction to finish.  

I'm happy to elaborate on my answers but what I will not do is answer a generic question (how do I center with CSS) and then go and troubleshoot each CSS issue on subsequent pages.
cahoonmAuthor Commented:
Jason I don't understand your being defensive? I followed the grading criteria and I noted my appreciation for your help.

If you had said "go to the particular CSS style that needs alignment > properties > box > right margin set to auto > left margin sent to auto"  That would have been clearer. Instead I got code of "margin: 0px auto;"

In any case I made a point to say people that have a greater level of expertise often assume people understand what they are saying.

I cannot recall anyway being upset when I rewarded them 500 points, said thank you, that I appreciated their help and I followed the grading criteria to help keep the integrity of the site up.

Last once again THANK YOU for your help. I will continue paying and subscribing to expert-exchange.
Jason C. LevineNo oneCommented:
I'm not being defensive, sorry if it came out that way.  

I was explaining why I answered the way I did and providing you with some feedback that will assist you here in the future.  I'm not here for the points anymore, so 50 or 500 make little difference to me.
cahoonmAuthor Commented:
Jason i am very appreciative of your help and the others who tried. I enjoy DW and look forward to doing cool things with it. I hope you have a Merry Christmas and Happy New Year.Mike
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.