Solved

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

Posted on 2007-12-02
16
295 Views
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
0
Comment
Question by:cahoonm
  • 6
  • 6
  • 2
  • +2
16 Comments
 
LVL 7

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.
0
 
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..
0
 
LVL 4

Expert Comment

by:aumudin
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">
<html>
<head>
<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">
<!--
.body
{
      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;
}
</style>
-->
</head>
<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>
  <br>
<div class="style2">Enter</div>
</div>
</body>
0
 
LVL 4

Expert Comment

by:aumudin
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.
0
 
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.

0
 

Author Comment

by:cahoonm
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?
0
 
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.  
0
 

Author Comment

by:cahoonm
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
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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.
0
 

Author Comment

by:cahoonm
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,
0
 
LVL 70

Accepted Solution

by:
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.
0
 

Author Closing Comment

by:cahoonm
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
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 20400713
Cahoon,

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.
0
 

Author Comment

by:cahoonm
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.
0
 
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.
0
 

Author Comment

by:cahoonm
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
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

760 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now