SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Brazil
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Browser versions problem

    Hi there,

    I desgined a web site for the company I work for, but when I got it to work in some other version of IE I found out the site is completely messed up, I really need a help to find out if my code is all wrong or it is something else. Also I canīt seem to get this code work fine in mozilla browsers. Hope you guys can help me out somehow.

    Hereīs the site preview: http://www.wizsyst.com/wiz/index.htm

    Thanks all!


  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Berlin
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It mostly looks OK to me in Mozilla and IE6. You need to give more detail about which version of IE fails and what doesn't work in Mozilla. People are more likely to respond to a specific problem than to run your entire site through a complete test in every browser.

  3. #3
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Some of your problems will clear themselves up if you make your code validate to W3C specifications. You can validate your site with: http://validator.w3.org/check?verbos.../wiz/index.htm

    Make sure that you can only use a specific id (e.g. id="ID1a") once and only once. Instead of using the same id over and over again, you should define classes (e.g. class="MyClass"). Also if you develop using Firefox, you can get the "Web Developer" extension that will allow you to validate your HTML and CSS on the fly making development much easier. Also as Firefox much more strictly adheres to W3C specifications, as such there will be fewer cross browser display issues by starting with Firefox and then doing a once over with IE. IE on the other hand is not very compliant to W3C specifications and as a result those who use it as their primary development browser have a lot more difficulties making their sites work correctly in other web browsers.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As KLB said you have a lot of errors in there

    There is no such thing as negative padding or #silver ! You have used that quite a few times. You have also missed out the hyphen in a lot of places.

    Heres your code tidied up and added a full doctype added and some box model hacks fixed. However now that its fixed it may not look the way you want. I've fixed the left nav that was in the middle of the page in ie5.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    Code:
    /* CSS Document */
    /* The text-align: center; is used to prevent the following browsers from not centering the containing blocks: * NN4 (Mac and Win) * Win/IE4 * Win/IE5 * Win/IE5.5 * Win/IE6 (when in quirks-mode) using this will only take effect in those browser, the CSS code will overall it in browsers tha support the code */
    body { text-align: center;
    background-color: #EBEBEB; }
    /* Entire Page (Container) */
    #container {
    background-image: url(http://www.wizsyst.com/wiz/Assets/jpgs/bg_6.jpg);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-color: #fff;
    width: 759px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    color: #333;
    border: 1px solid gray;
    line-height: 130%;
     
    }
    * html #container {width:761px;w\idth:759px}
    /* Heading (Cabe?alho) */
    #top {
    background: #fff url(http://www.wizsyst.com/wiz/Assets/top_2.gif) no-repeat right top;
    height:90px;
    border-bottom: 1px solid gray; 
    position:relative;
    } 
     
    /* Exemplo de "Descendant Selector" */
    #top h1 {
    padding: 0;
    margin: 0; }
    /* Flah utilizado no topo da p?gina */ 
    #flash_topo { 
    margin-top:-0.4em;
    float: left; }
     
    /* Leftnav (Navega??o da Esquerda */
    #leftnav {
    float: left;
    width: 160px;
    margin: 0;
    margin-left: 3px;
    padding: 10px;
    }
    * html #leftnav { display:inline;width:180px;w\idth:160px}
    /* Links - Navega??o Esquerda */ 
    #leftnav a { text-decoration: none; }
    #leftnav a:hover { color: red;
    text-decoration: underline;
    width: 100%; }
    /* Rightnav (Navega??o da Direita) */
    /* Content (Corpo - Coluna Principal) */
    /* The max-width: 36em, sets the maximum width on the main content. Although IE browsers will ignore the rule, the other standard compliant browsers will not alow the content area to go wider than the width you specify. */
     
    #content {
    font-family: Helvetica, sans-serif;
    font-size: 12px;
    color: #000;
    margin-left: 210px;
    margin-right: 0px;
    padding-top: 0;
    border-left: 1px solid gray;
    }
    /* commented backslash hack \*/ 
    * html #content {height:1%}
    /* end hack */
     
    #content h1 { font-family: Helvetica, sans-serif;
    font-size: 17px;
    border: 1px solid gray;
    border-left: none;
    border-right: none;
    background-color: #DDDDDD;
    }
     
    #img1 img { padding-top: 0;
    margin-right: -50em; }
     
    #content h4 { font-size: 14px;
    color: green;
    border-bottom: 1px solid black;
    }
    #content h2 { font-size: 16px;
    color: #999;
    padding-bottom: 0;
    margin-bottom: 0; }
     
    #content a { font-size: 11px; }
    #content a:hover { font-size: 11px;
    color: green;
    border: 1px solid silver;
    background-color: #F8F8F8;
    width: auto; }
    #content p { margin-left: 4px; }
    /* Alinhamento das imagens da p?gina Principal. */
    #img2 img { float: left;
    margin-left: 0;
    padding-left: 0;
    }
    #img2 { float: left;
    }
     
    #img3 { float: right;
    margin-left: 10px;
    padding-left: 10px;
    margin-top: -3.5em;
    }
     
     
    /* Footer (Rodap?) */
    /* The clear: both; command will force the footer below any floated elements above. */
    #footer {
    background: #ddd url(http://www.wizsyst.com/wiz/Assets/jpgs/rodape.jpg) no-repeat right bottom;
    clear: both;
    margin: 0;
    padding: .5em;
    color: #333;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    padding-top: 2.2em;
    margin-top: 2.2em; }
     
    /* To remove the space above content in the "lefnav", "rightnav" and "content" */
    #leftnav p { margin: 0 0 10px 0; }
    #content h2 { margin: 0 0 .5em 0; }
    /* Este id serve para alinha os campos de preenchimento de acordo com o gr?fico, assim como customizar os campos */
    #campo1 input {
    font-family: Tahoma, Arial, sans-serif;
    color: #000;
    background-color: #fff;
    border: 1px solid gray;
    font-size: 10px;
    } 
    #campo1 {
    font-family: Tahoma, Arial, sans-serif;
    font-size: 11px;
    color: #000;
    position:absolute;
    top:56px;
    left:395px;
    width:433px;
    }
    * html #campo1 {top:58px;left:396px;}
     
     
    /* Bordas Navega??o Esquerda */ 
     
    div.Article {
    background: url(http://www.wizsyst.com/wiz/Assets/bo...cao/e_topo.gif) top left no-repeat;
    width: 180px; 
    }
     
    div.Article h2 {
    background: url(http://www.wizsyst.com/wiz/Assets/bo...cao/d_topo.gif) top right no-repeat;
    font-family: Helvetica;
    font-size: 14px;
    padding: 22px;
    margin: 0;
    padding-bottom: 1.2em;
    padding-top: 10px;
    }
     
    div.ArticleBody {
    background:url(http://www.wizsyst.com/wiz/Assets/bo...o/d_borda1.gif) top right repeat-y;
    margin: 0;
    margin-top: 0;
    padding-left: 14px;
    padding-top: 0px; 
    }
     
    div.ArticleBody ul {
    font-family: Helvetica, sans-serif;
    font-size: 12px;
    margin-left: 0;
    padding-left: 0;
    }
     
    div.ArticleBody li { list-style: none;
    padding-left: 14px;
    background-image: url(http://www.wizsyst.com/wiz/Assets/lista/type_10.gif);
    background-repeat: no-repeat;
    background-position: 0.1em;
    }
    div.ArticleFooter {
    background: url(http://www.wizsyst.com/wiz/Assets/bo...ao/e_fundo.gif) bottom left no-repeat;
    }
     
    div.ArticleFooter p {
    background: url(http://www.wizsyst.com/wiz/Assets/bo...o/d_fundo2.gif) bottom right no-repeat;
    display: block;
    padding: 30px;
    margin-top: 45px;
    }
     
    /* Comando Universal de margens */
    * { margin: 0; padding: 0; }
     
    /* Quem Somos */
    #publico { font-size: 13px;
    border: 1px solid gray;
    border-right: none;
    border-left: none;
    background: silver;
    width: auto;
    }
     
    #privado { font-size: 13px;
    border: 1px solid gray;
    border-right: none;
    border-left: none;
    background: silver;
    width: auto;
    }
    #privado img { padding-top: 0;
    margin-top: 3.5em; }
     
    #business { font-size: 13px;
    border: 1px solid gray;
    border-right: none;
    border-left: none;
    background:silver;
    width: auto;
    }
     
    /* Diferencial */
     
    #instalacoes img { margin-left: 22px;
    border: 4px double silver;
    white-space: nowrap; }
     
    /* Qualidade */
    #textoInovacao1 { margin-right: 365px;
    border: 1px solid gray;
    border-top: none;
    border-left: none;
    background-color: silver; }
    #textoInovacao2 { margin-right: 182px;
    margin-left: 184px;
    margin-top: -4.1em;
    border: 1px solid gray;
    border-top: none;
    background-color: silver; }
    #textoInovacao3 { margin-left: 367px;
    margin-top: -4.2em;
    border: 1px solid gray;
    border-right: none;
    background-color: silver; }
     
    #textoJgrade { margin-left: 290px;
    margin-top: -9.2em;
    border: 1px solid gray;
    border-top: none;
    border-left: none;
    border-right: none;
    }
     
    #textoSigem { 
    margin-left: 290px;
    margin-top: -10.4em;
    border: 1px solid gray;
    border-top: none;
    border-left: none;
    border-right: none; }
     
    #textoBusiness { 
    margin-left: 290px;
    margin-top: -9em;
    border: 1px solid gray;
    border-top: none;
    border-left: none;
    border-right: none; }
     
    /* Bordas - Not?cias */
    div.News {
    background: url(http://www.wizsyst.com/wiz/Assets/bo...ias/e_topo.gif) top left no-repeat;
    width: 450px;
    margin-left: 35px; }
     
    div.News img { float: right; }
    div.News h5 { background: url(http://www.wizsyst.com/wiz/Assets/bo...ias/d_topo.gif) top right no-repeat;
    font-family: Helvetica, sans-serif;
    font-size: 16px;;
    padding: 22px;
    margin: 0;
    padding-bottom: 1.2em;
    padding-top: 10px; }
    div.News h6 { font-family: Helvetica, sans-serif;
    font-size: 11px;
    border-bottom: 1px solid olive;
    width: 97%; } 
     
    div.NewsBody { background: url(http://www.wizsyst.com/wiz/Assets/bo...s/d_borda1.gif) top right repeat-y;
    margin: 0;
    margin-top: 0;
    padding-left: 14px;
    padding-top: 0px; }
     
    div.NewsFoot { background: url(http://www.wizsyst.com/wiz/Assets/bo...s/e_fundo1.gif) bottom left no-repeat; }
     
    div.NewsFoot p { background: url(http://www.wizsyst.com/wiz/Assets/bo...s/d_fundo1.gif) bottom right no-repeat;
    display: block;
    padding: 30px;
    margin-top: 16px; }
    Hope that helps.

    Paul

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Brazil
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks!

    Hi there!

    First of all, thanks Paul and KLB, I know thereīs a lot of errors : P, but anyway Iīm doing my best to learn CSS as I run : ) Iīd really like to thank you guys for helping me out. I hope someday I can do the same for people as you guys been doing.



    Till the next post!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •