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

Posted on 2007-12-02
Last Modified: 2010-04-25
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
Question by:cahoonm
  • 6
  • 6
  • 2
  • +2

Expert Comment

by:Rob Siddell
ID: 20393739
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.
LVL 36

Expert Comment

by:Loganathan Natarajan
ID: 20393746
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..

Expert Comment

ID: 20393813
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>
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.


Expert Comment

ID: 20393821
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.
LVL 70

Expert Comment

by:Jason C. Levine
ID: 20393834
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.


Author Comment

ID: 20393899
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?
LVL 70

Expert Comment

by:Jason C. Levine
ID: 20393921
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.  

Author Comment

ID: 20395613
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
LVL 70

Expert Comment

by:Jason C. Levine
ID: 20397423
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.

Author Comment

ID: 20397551
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,
LVL 70

Accepted Solution

Jason C. Levine earned 500 total points
ID: 20397598
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.

Author Closing Comment

ID: 31412265
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
LVL 70

Expert Comment

by:Jason C. Levine
ID: 20400713

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.

Author Comment

ID: 20402180
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.
LVL 70

Expert Comment

by:Jason C. Levine
ID: 20404939
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.

Author Comment

ID: 20405148
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

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Applications / Web Apps that enable highlighting text on Web Pages 3 30
Button and js nou working 3 19
Index on a Table 6 25
Alert after MVC form submitted 1 22
This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

792 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question