Browser versions problem

**Belerofonte** · Oct 24, 2004, 10:33

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!

**JamesCrompton** · Oct 24, 2004, 12:13

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.

**KLB** · Oct 24, 2004, 13:39

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.

**Paul O'B** · Oct 24, 2004, 14:45

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

**Belerofonte** · Oct 24, 2004, 18:19

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!

The SitePoint Forums have moved.

User Tag List

Thread: Browser versions problem

Thread Tools

Display

Browser versions problem

Thanks!

Bookmarks

Bookmarks

Posting Permissions