4 replies [Last post]
abe-css
Offline
newbie
UK
Last seen: 12 years 29 weeks ago
UK
Joined: 2009-10-26
Posts: 9
Points: 16

Hi All,

I have been working on a website and it displays absolutely nothing in IE! I've seen little differences before but this is a new one on me! I figured I would post my code and hopefully someone could tell me what is wrong... Great forums by the way, I have found all I need so far in this place Smile . Some of the code isn't mine so please no jibs about the use of it (I'm the repair man lol).

<html>
<head>
<link href="css/styleSheet.css" rel="stylesheet" type="text/css" />
<title>Chemdoc.ie</head>
<body>
<div class="page-container">
   <div id="header" class="header">
		    <div id="header-top" class="header-top">
		    </div>
		    <div id="header-logo" class="header-logo">
			   <div id="DcmLogo" class="header-logo-dcm">
 
			 	 </div>
		   </div>
	</div>
	<div class="menu">
	 <div class="menu-list">
  	<a href="index.php">Main</a>
	<a href="latestNews.php">Latest News</a>
	<a href="REACh.php">REACh</a>
 
	<a href="DCMCompliance.php">DCM Compliance</a>
	<a href="contactUs.php">Contact us</a>
</div>  </div>
     <div class="main-column1">
 
<div id="content1">
<img src="images/cemicals3width.jpg" alt="REACh compliant website" width="100%" height="200px"/>
<br />	<br />
<h3>Welcome </h3>
 
<br />			
<h4>Chemdoc allows you to access safety information for the chemical products used in your organisation.
Please login to view the safety data sheets.</h4>
 
 
</div>
 
 
     </div>
     <div class="sideBar"> 
      <div class="sideBar-content">
      	<form id="login_form">   	
      	<p>
        <label for="nameInUserText" style="width:50%;float:center; padding:0px;margin-botton:0px;	font-size:12px;" >Username:&nbsp;  </label>
 
      	<input type="text"  style="width:50%; float:center; " class="smallInputTextbox" name="nameInUserText" id="nameInUserText" value=""/>
 
        <br />       
 
        <label for="nameInUserText" style="width:50%;float:center;padding:0px;margin-botton:0px; 	font-size:12px;" >Password:&nbsp;&nbsp; </label>      	
      	<input type="password" style="width:50%; float:center; " class="smallInputTextbox" name="logInPasswordText" id="logInPasswordText" value=""/>
        </p>
        <br /> 
        <div id="login-submit-area" > 
        <p>
          <a style="float:center; text-align:center; display:block; margin-left:auto; margin-right:auto;" href=webPages/notLoggedIn/lostPassword.php>forgot your password</a>       
       </p>
 
       <br />
        <p>
       <input class="coolLookingButton" style="float:center; text-align:center; display:block; margin-left:auto; margin-right:auto;" type="submit" value="Submit" name="logInSubmitButton" >
        </p>  
      	</form>
      	</div>
      </div>
     </div>
     <div class="footer">
 
        <p> DCM Compliance Ltd. 31 Cecil Street Limerick. Phone 00353 61 405455 Fax : 00353 61 405454 </p>
     </div>
</div>
</body>
</html>

abe-css
Offline
newbie
UK
Last seen: 12 years 29 weeks ago
UK
Joined: 2009-10-26
Posts: 9
Points: 16

Oh! And the CSS: *{padding:0;

Oh! And the CSS:

*{padding:0; margin:0;}
 
body 
{
	margin: 0;
	padding: 0;
	margin-right:auto;
	margin-left:auto;
	height:100%;
	width:100%;
	font-size: 0.8em;
	line-height: 20px;
	font-family: "Trebuchet MS", Arial;
	/*border: 1px solid #666;*/
	/*background:url(../test.jpg);*/
	background: url("../images/Whole Background.jpg") repeat-y center top;
}
 
.page-container {width:1000px; 	margin-right:auto;
	margin-left:auto;
	width:1000px;
   font-size:1.0em;} 
.header
{
	height:140px;
	width: 100%;
}
 
.header-top { 	background: url(../images/topOfPage.jpg) repeat-x; 	height:20px; width: 100%;}
.header-logo { height:100%;	background: url(../images/ChemdocLogo.jpg) top left no-repeat #FFF; padding:0px 30px 10px 0px; }
.header-logo-dcm{ height:100%; background: url(../images/DCMLogo.JPG) top right no-repeat; /*border: 1px solid #666;*/ } 
 
.menu { height:29px; background: url(../images/maunBackground.jpg) top left repeat-x; }
.menu-list { padding: 5px 0px 0px 0px; text-align:center; }
.menu a {	color:#0066FF; font-size:14px; font-weight:bold; display:inline-table; margin-right: 50px; }
.menu a:hover { color:#33CCFF; }
 
.main-column1 { width:73%; padding:20px 0px 20px 10px; float:left; }
.main-column2 {	width:100%; padding:0px 10px 10px 10px; }
 
.sideBar { float:left;	width:260px; background: url(../images/LogInSplitter.jpg) top left repeat-y #FFFFFF; height: 700px;}
.sideBar-content { padding:30px 10px 20px 20px; }
.sideBar-content p { line-height:100%; text-align: middle; 	font-size:12px; }
.footer {	width:100%; height:100%; text-align:center; float:left;}
 
.smallInputTextbox 
{
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
	background-color:#DDDDDD;
	border:1px solid #7E94A6;
	padding-left:2px;
	padding-right:2px;
	width:95%;
	/*width:10em;*/
}
 
.coolLookingButton
{
	/*margin-top:18px; */
	display:block; 
	border:1px solid #000000; 
	width:100px; 
	height:20px;
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	font-size:11px; 
	padding-left:2px; 
	padding-right:2px; 
	padding-top:0px; 
	padding-bottom:2px; 
	line-height:14px; 
	background-color:#EFEFEF
}
 
a
 
{
 
color: #0099ff;
 
text-decoration: none;
 
}
 
a:hover (line 153)
 
{
 
color: #00ccff;
 
}
 
h1
{
	color:#990000;
}
 
 
h2
{
 
	font-size:18px;	
	font-weight:bold;	
}
 
h3
{
 
	font-size:14px;	
	font-weight:501;
}
 
 
h4
{
	font-size:12px;
	font-weight:lighter;
}
 
h4.standOutText
{
	color:#FF6633;
	text-align:center;
}

abe-css
Offline
newbie
UK
Last seen: 12 years 29 weeks ago
UK
Joined: 2009-10-26
Posts: 9
Points: 16

Half way there

Ok found I was missing the closing tag.

Although now the body is not staying in the page container, and is too far left. Any ideas? Sad

EDIT:
Ok I've now made two stylesheets, one for IE and one for FF. I can fix the issue by using margins but that only works for a specific screen size. Any ideas on how to make dynamic margins?

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 11 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

If that is all of your HTML,

If that is all of your HTML, then you need to find a strict DOCTYPE and validate your code.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

abe-css
Offline
newbie
UK
Last seen: 12 years 29 weeks ago
UK
Joined: 2009-10-26
Posts: 9
Points: 16

I found the problem, I

I found the problem, I changed the following two... objec/classes/whatever you call them.

*{padding:0; margin:0;}
body
{
margin: 0;
padding: 0;
margin-right:auto;
margin-left:auto;
height:100%;
width:1000px;
font-size: 0.8em;
line-height: 20px;
font-family: "Trebuchet MS", Arial;
/*border: 1px solid #666;*/
/*background:url(../test.jpg);*/
background: url("../images/Whole Background.jpg") repeat-y center top;
display:block;
text-align:center;
}

.page-container { clear:both; width:1000px; margin-right:0px; margin-left:auto; font-size:1.0em; display:block; text-align:justify}