Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


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

Posted on 2007-12-02
Medium Priority
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  www.heathercahoon.com. 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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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" "http://www.w3.org/TR/html4/loose.dtd">
<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>
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.


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 1500 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

636 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