Jump to content

IE bugs - Breaks layout

Cep

By Cep
in CSS Help

Recommended Posts

Cep Regular Member

Cep

Posted
Posted
Hello,

I am moving away from a table layout to a CSS layout. In the images below you can see how Mozilla FF shows the layout how I want it, yet the second shows the layout being displayed by IE.

Doe's anyone know why this is and if there is a fix for this problem?

FF
[img]http://www.cepsworld.com/images/firefox.jpg[/img]

IE
[img]http://www.cepsworld.com/images/ie.jpg[/img]


Here is my style sheet :)

[code]
/* Default Style Sheet - Ceps World */

/* Main Tags */
* {
  margin: 0;
  padding: 0;
}

body {
color: #000000; /* Black */
font-family: Tahoma, Helvetica;
font-size: 12px;
background-color: #009900; /* Pool table Green */
}

img {
border-width: 0px;
}

a:link, a:visited, a:active {
color: #FFFFFF; /* White */
text-decoration: none;
}

h1 {
  color: #FFFFFF; /* White */
  font-family: Tahoma, Helvetica;
  font-size: 16px;
  font-weight: bold;
}

h2 {
  color: #000000; /* Black */
  font-family: Tahoma, Helvetica;
  font-size: 16px;
  font-weight: bold;
}

h3 {
  color: #FFFFFF; /* White */
  font-family: Tahoma, Helvetica;
  font-size: 14px;
  font-weight: bold;
}

h4 {
  color: #000000; /* Black */
  font-family: Tahoma, Helvetica;
  font-size: 14px;
  font-weight: bold;
}

/* Font Classes */
.xlfont {
font-size: 16px;
}

.lfont {
font-size: 14px;
}

.sfont {
font-size: 10px;
}

.xsfont {
font-size: 9px;
}

.str {
font-weight: bold;
}

.ita {
font-style: italic;
}

.textcenter {
text-align: center;
}

.textleft {
text-align: left;
}

.textright {
text-align: right;
}



/* Colour Classes */
.edge {
background-color: #FFFFFF; /* White */
}

.main {
background-color: #F5F5F5; /* Light Grey */
border: thin #000000 solid;
padding: 2px;
}

.section {
color: #000000; /* Black */
background-color: #CCFF66; /* Lime Green */
border: thin #000000 solid;
padding: 2px;
}

.heading {
color: #FFFFFF; /* White */
background-color: #66CC66; /* Medium Green */
border: thin #000000 solid;
padding: 2px;
}

.tbl {
  border-collapse: collapse;
}

.black {
  color: #000000; /* Black */
}

.white {
  color: #FFFFFF; /* White */
}

/* Misc Classes */
.clsCursor {
  cursor: pointer;
}

/* Div sections */
#header {
  padding: 8px;
}

#leftcol {
  float: left;
  width: 200px;
  padding: 10px;
  text-align: center;
}

#lefthead {
  float: left;
  width: 100px;
  padding: 8px;
  margin-left: 50px;
  text-align: center;
  display: inline;
  background-color: #CFCFCF;
}

#leftbox {
  float: left;
  width: 100px;
  padding: 8px;
  margin-left: 50px;
  text-align: center;
  display: inline;
  background-color: #E3E3E3;
}

#rightbox {
  float: right;
  width: 200px;
  padding: 8px;
}

#centercol {
  margin-right: 215px;
  margin-left: 215px;
  padding: 8px;
  background-color: #ffffff;
  text-align: center;
}

#centerhead {
  width: 500px;
  padding: 8px;
  margin-left: 175px;
  text-align: center;
  background-color: #CFCFCF;
}

#centerbox {
  width: 500px;
  padding: 8px;
  margin-left: 175px;
  text-align: center;
  background-color: #E3E3E3;
}

#footer {
  clear: both;
  padding: 8px;
  font-weight: bold;
  font-size: 9px;
  color: #FFFFFF; /* White */
  text-align: center;
}

#leftcol, #rightcol, #centercol {
  padding-bottom: 32767px;
  margin-bottom: -32767px;
}

#wrapper {
  overflow: hidden;
}
[/code]
Link to comment
https://forums.phpfreaks.com/topic/35819-ie-bugs-breaks-layout/
Share on other sites
Cep Regular Member

Cep

Posted
  • Author
Posted
Sure thing,

[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Site</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
<link rel="stylesheet" type="text/css" href="./css/default.css" />
</head>
<body>
<div id="header" align="center">
    <h1>Welcome to site.</h1>
    <br />
    <br />

    <span class="white sfont">Description
    <br />
    additional note</span>
</div>
<div id="wrapper">
    <div id="leftcol">
          <div id="lefthead">
              This is the title box
          </div>
          <div id="leftbox">
              this is the data box
          </div>
    </div>
    <div id="rightbox">

    </div>
    <div id="centercol">
          <div id="centerhead">
              This is the title box
          </div>
          <div id="centerbox">
              this is the data box
          </div>
    </div>
</div>
<div id="footer">
<p>
  Site developed and ran by Cep &copy; Cepsworld.com 2007
  <br />

  <br />
  <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.cepsworld.com/css/default.css" target="_blank">
      <img style="border:0;width:80px;height:15px" src="http://www.cepsworld.com/images/css.png" title="Valid CSS!" alt="Valid CSS!" />
  </a>
  &nbsp;
  <a href="http://validator.w3.org/check?uri=referer" target="_blank">
      <img style="border:0;width:80px;height:15px" src="http://www.cepsworld.com/images/xhtml10.png" title="Valid XHTML 1.0 Transitional" alt="Valid XHTML 1.0 Transitional" />
  </a>
  &nbsp;

  <a href="http://www.php.net" target="_blank">
      <img style="border:0;width:80px;height:15px" src="http://www.cepsworld.com/images/php.gif" title="Powered by PHP!" alt="Powered by PHP!" />
  </a>
  &nbsp;
  <a href="http://www.mozilla.com" target="_blank">
      <img style="border:0;width:80px;height:15px" src="http://www.cepsworld.com/images/mozilla.png" title="Get Mozilla Firefox!" alt="Get Mozilla Firefox!" />
  </a>
</p>
</div>
</body>

</html>
[/code]
Link to comment
https://forums.phpfreaks.com/topic/35819-ie-bugs-breaks-layout/#findComment-172736
Share on other sites
cmgmyr Regular Member

cmgmyr

Posted
Posted
Your new css: [code]/* Default Style Sheet - Ceps World */

/* Main Tags */
* {
  margin: 0;
  padding: 0;
}

body {
color: #000000; /* Black */
font-family: Tahoma, Helvetica;
font-size: 12px;
background-color: #009900; /* Pool table Green */
}

img {
border-width: 0px;
}

a:link, a:visited, a:active {
color: #FFFFFF; /* White */
text-decoration: none;
}

h1 {
  color: #FFFFFF; /* White */
  font-family: Tahoma, Helvetica;
  font-size: 16px;
  font-weight: bold;
}

h2 {
  color: #000000; /* Black */
  font-family: Tahoma, Helvetica;
  font-size: 16px;
  font-weight: bold;
}

h3 {
  color: #FFFFFF; /* White */
  font-family: Tahoma, Helvetica;
  font-size: 14px;
  font-weight: bold;
}

h4 {
  color: #000000; /* Black */
  font-family: Tahoma, Helvetica;
  font-size: 14px;
  font-weight: bold;
}

/* Font Classes */
.xlfont {
font-size: 16px;
}

.lfont {
font-size: 14px;
}

.sfont {
font-size: 10px;
}

.xsfont {
font-size: 9px;
}

.str {
font-weight: bold;
}

.ita {
font-style: italic;
}

.textcenter {
text-align: center;
}

.textleft {
text-align: left;
}

.textright {
text-align: right;
}



/* Colour Classes */
.edge {
background-color: #FFFFFF; /* White */
}

.main {
background-color: #F5F5F5; /* Light Grey */
border: thin #000000 solid;
padding: 2px;
}

.section {
color: #000000; /* Black */
background-color: #CCFF66; /* Lime Green */
border: thin #000000 solid;
padding: 2px;
}

.heading {
color: #FFFFFF; /* White */
background-color: #66CC66; /* Medium Green */
border: thin #000000 solid;
padding: 2px;
}

.tbl {
  border-collapse: collapse;
}

.black {
  color: #000000; /* Black */
}

.white {
  color: #FFFFFF; /* White */
}

/* Misc Classes */
.clsCursor {
  cursor: pointer;
}

/* Div sections */
#header {
  padding: 8px;
}

#leftcol {
  float: left;
  width: 200px;
  padding: 10px;
  text-align: center;
}

#lefthead {
  float: left;
  width: 100px;
  padding: 8px;
  margin-left: 50px;
  text-align: center;
  display: inline;
  background-color: #CFCFCF;
}

#leftbox {
  float: left;
  width: 100px;
  padding: 8px;
  margin-left: 50px;
  text-align: center;
  display: inline;
  background-color: #E3E3E3;
}

#rightbox {
  float: right;
  width: 200px;
  padding: 8px;
}

#centercol {
  margin-right: 215px;
  margin-left: 215px;
  padding: 8px;
  background-color: #ffffff;
  text-align: center;
}

#centerhead {
  width: 500px;
  padding: 8px;
  text-align: center;
  background-color: #CFCFCF;
  margin:0px auto;
}

#centerbox {
  width: 500px;
  padding: 8px;
  text-align: center;
  background-color: #E3E3E3;
  margin:0px auto;
}

#footer {
  clear: both;
  padding: 8px;
  font-weight: bold;
  font-size: 9px;
  color: #FFFFFF; /* White */
  text-align: center;
}[/code]

I changed the margins in center box and center head, I also got rid of the last 2 groups in the css. works fine in ie 7 now and in FF.
Link to comment
https://forums.phpfreaks.com/topic/35819-ie-bugs-breaks-layout/#findComment-172744
Share on other sites
cmgmyr Regular Member

cmgmyr

Posted
Posted
well you don't need a set margin if you can just "center" it by using margin:0px auto; and I'm not really sure why you had the last 2 entries in your css.

try not to put too many things in your css file. the whole point of css is to keep the code clean, sometimes the more you add the harder it is to work with...and the more problems you could potentially have...

Please let me know if you have any other questions. :)
Link to comment
https://forums.phpfreaks.com/topic/35819-ie-bugs-breaks-layout/#findComment-172749
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.