Jump to content

IE bugs - Breaks layout

Cep

By Cep
in CSS Help

 Share

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
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
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
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
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
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.