Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Jul 2010
    Location
    Montreal, Quebec, Canada
    Posts
    18
    Thanks
    5
    Thanked 1 Time in 1 Post

    Internet Explorer Problem with float in CSS, working in all versions of IE except IE8

    Hello everyone,

    I've been struggling with this problem. I coded a website up and it works perfectly fine in all the versions of IE, but when someone opens it in IE8, this happens :

    Broken Website

    It should actually look like this :

    Working Website

    The floats completely break, I'm really not sure what's happening, I'm dumbfounded. If possible, and if there's an easy fix, I'd love if I were to keep the code as is, without a 'if IE8, if IE7, if IE6' in the css as it's pretty big and complex as is, I don't want to make it anymore complicated.

    I cannot actually link the website itself, since it's internal to the company I'm on contract with, as in intranet. Here is the coding though,

    HTML

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <link rel="stylesheet" type="text/css" href="../styles/default.css"> 
    <style type="text/css"> 
    <!--
    .style1 {color: #d42121}
    -->
    </style>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Supplier Training</title>
    <script language="javascript" src="searchbox.js"></script>
    <script language="javascript" src="../includes/Common/common.js"></script>
    </head>
     
    <body>
     
    <div ID="maincontainer">
    	
        
        <div ID="leftheader">
          <img src="../Images/Common/header-left.jpg" alt="" width="34" height="115" /> <br />
    	</div>
        
      <div id="mainbackground">  
      <div id="leftcolumn">
    	  <img src="../Images/EN/logo_en.gif" alt="CN Logo" />
        <ul class="leftcontent">
          <hr size="1px" width="168px" noshade="noshade" color="#E1E1E1" />
          <li class="nobullet"><a href="index.asp" class="list"><span class="style1">Supplier Training</span><img src="../Images/Common/nav_arrow.gif" name="arrowselected" border="none" id="arrowselected" /></a></li>
          <hr size="1px" width="168px" noshade="noshade" color="#E1E1E1"/>
        </ul>      
      </div>
        
        
    <div ID="rightheader">
        
          <img src="../Images/Common/top-logo-shadowtest.jpg" name="shadow" id="shadow" /><div id="topnav">
          <a href="http://www.cn.ca/en/contacts.htm">Contacts</a><a href="http://www.cn.ca/en/about-cn.htm">About CN</a><a href="http://www.cn.ca/en/sitemap.htm">Site Map</a><a href="../FR/index.asp" class="bluelink">Français</a></div>  
          <img src="../images/EN/DTL_Banner_EN.gif" alt="header" /></div>
          <br />
        <div id="maincolumn4">
          <iframe src="../../../TMS3.5StudentSites/DTL/DTLLogin.aspx?BodyOnly=1&languageCode=EN" width="100%" height="0" frameborder="0" id="myiframe" onload="resizeIframeToFitContent(this)" scrolling="no"></iframe>
        </div>
        
      <div id="maincolumn3">
        	<div id="contact">
        	<p id="contactinner">Contact Us</p>
            </div>
            <div id="questions">
            <p>Blah Blah ma!<br />555-555-555<br /><a href="mailto:esupermeme@videotron.ca" class="bluelink3">esupermeme@videotron.ca</a></p>
            <hr size="1px" width="240px" noshade="noshade" color="#E1E1E1"/>
            </div>
        </div>
        </div>
        
        <div id="bottomnav2">
        <div id="footernav">
          <ul>
            <li><a href="#" class="list2">Terms &amp; Conditions</a></li>
            <li><a href="#" class="list2">Privacy</a></li>
            <li><a href="#" class="list2">About CN</a></li>
            <li><a href="#" class="list2">RSS</a></li>
        </ul>
     	</div>
    <div id="copyright"><p>© 2010, Canadian National Railway Company</p></div>
    </div>
    </div>
     
    </body>
    </html>
    And the CSS

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    body {
    	background-color: #ededed;
    	font-size:90%;
    }
    
    h3 {
    	font-family: "Humnst777 BT";
    	font-size:1.15em;
    	color: #4d4d4d;
    	margin-left: 5px;
    }
    
    a {
    	font-size: 11px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;	
    	color: #4d4d4d;
    	text-decoration: none;
    	border-right:thin solid 1px;
    	padding-left: 8px;
    	padding-right: 8px;
    }
    
    a:visited {
    	font-size: 11px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;	
    	color: #4d4d4d;
    	text-decoration: none;
    	border-right:thin solid 1px;
    	padding-left: 8px;
    	padding-right: 8px;
    }
    
    a:hover {
    	font-size: 11px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;	
    	color: #4d4d4d;
    	text-decoration: none;
    	border-right:thin solid 1px;
    	padding-left: 8px;
    	padding-right: 8px;
    }
    
    a.bluelink {
    	font-size: 11px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;	
    	text-decoration: none;
    	border-right:thin solid 1px;
    	padding-left: 8px;
    	padding-right: 8px;
    	color: #5f90cb;
    }
    
    a:visited.bluelink {
    	font-size: 11px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;	
    	text-decoration: none;
    	border-right:thin solid 1px;
    	padding-left: 8px;
    	padding-right: 8px;
    	color: #5f90cb;
    }
    
    a:hover.bluelink {
    	font-size: 11px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;	
    	text-decoration: none;
    	border-right:thin solid 1px;
    	padding-left: 8px;
    	padding-right: 8px;
    	color: #5f90cb;
    }
    
    a.bluelink2 {
    	font-size: 14px;
    	font-family: "Humnst777 Cn BT";
    	text-decoration: none;
    	border: none;
    	padding-left: 8px;
    	padding-right: 8px;
    	color: #5f90cb;
    }
    
    a:visited.bluelink2 {
    	font-size: 14px;
    	font-family: "Humnst777 Cn BT";
    	text-decoration: none;
    	border: none;
    	padding-left: 8px;
    	padding-right: 8px;
    	color: #5f90cb;
    }
    
    a:hover.bluelink2 {
    	font-size: 14px;
    	font-family: "Humnst777 Cn BT";
    	text-decoration: none;
    	border: none;
    	padding-left: 8px;
    	padding-right: 8px;
    	color: #5f90cb;
    }
    
    a.bluelink3 {
    	font-size: 11px;
    	font-family: "Humnst777 Cn BT";
    	text-decoration: none;
    	border: none;
    	margin-left: 0px;
    	padding-left: 0px;
    	color: #5f90cb;
    }
    
    a:visited.bluelink3 {
    	font-size: 11px;
    	font-family: "Humnst777 Cn BT";
    	text-decoration: none;
    	border: none;
    	margin-left: 0px;
    	padding-left: 0px;
    	color: #5f90cb;
    }
    
    a:hover.bluelink3 {
    	font-size: 11px;
    	font-family: "Humnst777 Cn BT";
    	text-decoration: none;
    	border: none;
    	margin-left: 0px;
    	padding-left: 0px;
    	color: #5f90cb;
    }
    
    a.list {
    	font-size: 14px;
    	font-family: "Humnst777 BlkCn BT";
    	color: #4d4d4d;
    	text-decoration: none;
    	border:none;
    	padding-left: 8px;
    	padding-right: 8px;
    }
    
    a:visited.list {
    	font-size: 14px;
    	font-family: "Humnst777 BlkCn BT";
    	color: #4d4d4d;
    	text-decoration: none;
    	border:none;
    	padding-left: 8px;
    	padding-right: 8px;
    }
    
    a:hover.list {
    	font-size: 14px;
    	font-family: "Humnst777 BlkCn BT";
    	color: #5f90cb;
    	text-decoration: none;
    	border:none;
    	padding-left: 8px;
    	padding-right: 8px;
    }
    
    a.list2 {
    	font-size: 12px;
    	font-family: "Humnst777 Cn BT";
    	color: #4d4d4d;
    	text-decoration: none;
    	border:none;
    	padding-left: 8px;
    	padding-right: 8px;
    }
    
    a:visited.list2 {
    	font-size: 12px;
    	font-family: "Humnst777 Cn BT";
    	color: #4d4d4d;
    	text-decoration: none;
    	border:none;
    	padding-left: 8px;
    	padding-right: 8px;
    }
    
    a:hover.list2 {
    	font-size: 12px;
    	font-family: "Humnst777 Cn BT";
    	color: #e42121;
    	text-decoration: none;
    	border:none;
    	padding-left: 8px;
    	padding-right: 8px;
    }
    
    a.list3 {
    	font-size: 12px;
    	font-family: "Humnst777 Cn BT";
    	color: #e42121;
    	text-decoration: none;
    	border:none;
    	padding-left: 8px;
    	padding-right: 8px;
    }
    
    a:visited.list3 {
    	font-size: 12px;
    	font-family: "Humnst777 Cn BT";
    	color: #e42121;
    	text-decoration: none;
    	border:none;
    	padding-left: 8px;
    	padding-right: 8px;
    }
    
    a:hover.list3 {
    	font-size: 12px;
    	font-family: "Humnst777 Cn BT";
    	color: #e42121;
    	text-decoration: none;
    	border:none;
    	padding-left: 8px;
    	padding-right: 8px;
    }
    
    #maincontainer {
    	position: absolute;
    	left: 0px;
    	top: 0px;
    	width: 1024px;
    	height: auto;
    }
    
    #mainbackground {
    	background-color: #FFFFFF;
    	height: 100%;
    	width: 955px;
    }
    
    #leftheader {
    	float: left;
    	left: 0px;
    	margin: 0px;
    	padding: 0px;
    	width: auto;
    }
    
    #leftcolumn {
    	float: left;
    	height: 300px;
    	width: auto;
    }
    
    #rightheader {
    	float: left;
    }
    
    #mainheader {
    	top: 0px;
    }
    
    #topnav {
    	width: 741px;
    	text-align: right;
    	float: left;
    	position: absolute;
    	background-color: #FFFFFF;
    	top: 0px;
    	padding-top: 2px;
    	padding-bottom: 2px;
    }
    
    #arrowselected {
    	margin-left: 45px;
    }
    
    #search {
    	background-color:#FFFFFF;
    	float: left;
    	top: 0px;
    	padding-top: 1px;
    	padding-bottom: 8px;
    	position: absolute;	
    	width: 195px;
    }
    
    ul.leftcontent{
        list-style:none;
        margin: 0 0 0 5px;
        padding: 0;
    	padding-left: 0px;
    }
    
    li.leftcontent{
    	list-style-type: none;
    	list-style:none;
        line-height:1.1em;
    	margin-left: 0px;
        padding: 0 0 0 5px;
        background:url(../Images/Common/nav_level1_bullet.gif) no-repeat 0 8px;
    }
    
    li.nobullet {
    	background-image:none;
    	list-style:none;
    }
    
    #maincolumn1 {
    	padding: 10px;
    	float: left;
    	width: 741px;
    	height: auto;
    	border-left: 4px solid #ededed;
    }
    
    #maincolumn4 {
    	padding: 10px;
    	float: left;
    	width: 485px;
    	height: auto;
    	border-top: 4px solid #ededed; 
    	border-left: 4px solid #ededed;
    	border-right: 4px solid #ededed;
    }
    
    #contact {
    	float:left;
    	width: 240px;
    	background-image: url(../Images/Common/Contactus.gif);
    	background-repeat: no-repeat;
    	height: 60px;
    	margin-top: 12px;
    	margin-left: 5px;
    	margin-bottom: 0px;
    }
    
    #contactinner {
    	margin-left: 12px;
    	margin-top: 12px;
    	font-size: 14px;
    	font-family: "Humnst777 BlkCn BT";
    	color: #4d4d4d;
    }
    
    #questions {
    	float: left;
    	width: 240px;
    	font-family: "Humnst777 Cn BT";
    	margin-left: 5px;
    	margin-top: 0px;
    	font-size: 14px;
    	color: #4d4d4d;
    }
    
    #questions p {
    	margin-bottom: 0px;
    }
    
    #maincolumn2 {
    	float: left;
    	margin-left: 5px;
    	width: 250px;
    	height: 441px;
    	background-color: #FFFFFF;
    }
    
    #maincolumn3 {
    	float: left;
    	width: 252px;
    	height: 100%;
    	border-top: 4px solid #ededed; 
    }
    
    #bottomnav {
    	float: left;
    	width: 1024px;
    	height: 100px;
    	background-image: url(../Images/Common/footer_two_column_bg.jpg);
    	background-repeat: no-repeat;
    	position: inherit;
    }
    
    #bottomnav2 {
    	float: left;
    	width: 1024px;
    	height: 100px;
    	background-image: url(../Images/Common/footer_three_column_bg.jpg);
    	background-repeat: no-repeat;
    }
    
    #footernav {
    	margin-top: 75px;
    	margin-right: 45px;
    	float: right;
    	width: 900px;
    }
    
    #footernav ul {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	text-align: right;
    	font-size: 11px;
    	font-family: "Humnst777 Cn BT";
    	border: none;
    }
    
    #footernav ul li { 
    	display: inline;
    	border: none;
    }
    
    #copyright {
    	float: right;
    	width: 900px;
    	margin-top: 5px;
    	margin-right: 52px;
    }
    
    #copyright p {
    	font-size: 11px;
    	font-family: "Humnst777 Cn BT";
    	border: none;
    	color: #4d4d4d;
    	text-align: right;
    }
    
    #login {
    	float: left;
    	padding-top: 12px;
    	padding-left: 4px;
    	padding-bottom: 0px;
    	width: 761px;
    	background-color: #ededed;
    }
    
    #maincolumn4 p {
    	color: #4d4d4d;
    	font-family: "Humnst777 Cn BT";
    	font-size: 14px;
    }
    It's pretty big yes, and usually I can troubleshoot these myself, but I'd really appreciate the community's help on this one. Thank you very much in advance at anyone that can provide any tips or even better a solution to the problem!
    Last edited by Drakius; 07-16-2010 at 08:04 PM.

  • #2
    Regular Coder
    Join Date
    Jul 2009
    Posts
    136
    Thanks
    0
    Thanked 7 Times in 7 Posts
    I'm only posting as no one else has.

    Your HTML doesn't validate. You don't even have your link to the stylesheet in the HEAD element. You are using an outdated way to call the Javascript. You are mixing HTML styling (not allowed in this DOCTYPE), embedded CSS and external styles for no apparent reason.

    I haven't worked through the whole thing but as far also, as i could see, you also have not reset the browser defaults. I'm thinking margins, padding and borders. I don't know what default differences there might be in IE8 but maybe the float doesn't happen because the child elements no longer fit?

    Of course it probably won't work reliably until you fix the other problems anyway. I hope that your contract is not to supply this page as you are clearly not ready to charge for your Web work.

    Sorry if that sounds harsh but I am fed up with incompetent developers who ruin the market for the competent ones. Maybe I have judged you wrong in which case I apologise in advance.

  • #3
    New Coder
    Join Date
    Jul 2010
    Location
    Montreal, Quebec, Canada
    Posts
    18
    Thanks
    5
    Thanked 1 Time in 1 Post
    It was harsh, and completely unnecessary. I'm on contract with this company working with a senior web developer, and she pointed none of these problems out.

    You shouldn't be on a helping site if you're going to be an all around know it all jerk. So yea, thanks for nothing.

    And instead of adding "Maybe I have judged you wrong in which case I apologise in advance." at the end of your post, how about not posting at all?

    Honestly, yes I'm starting (In the workforce), yes I forgot to validate, this is my first job and it's nerve wracking as it is. Yes this website went live and yes, it's working just fine for everyone. The only problem was the IE8 compatibility issues. But obviously I'm a complete incompetent asshole to you and I should not be in the field I went to college for three years for, my apologies.

    Here I thought a forum where you may request help would be a nice place to request help and not be bashed into the ground and called an incompetent that ruins it for competent ones, well that'll sure show me to ask help anywhere on this site ever again.
    Last edited by Drakius; 07-19-2010 at 08:56 PM.

  • #4
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Hi,

    You mentioned the site went live, is this just via intranet still or do you have a link as it could help a bit more if we can re-create the problem..

    Have you tried removing/disabling the JS just temporarliy to see if it has an effect at all?

    As previously mentioned you do have a few markup errors which could cause browser inconsistencies since we have no idea on how a browser would/should treat invalid code. You can check your site using a validator like this one here. Some of the errors seem like minor ones though which won't have much of an impact but you never know.

    Also as mentioned all the different browsers have different browser defaults (e.g different margins and paddings) for elements e.g headings and form elements, so if you don't set/or reset these then the defaults will be used which can sometimes cause minor differences in the appearence on different browsers.

  • Users who have thanked Scriptet for this post:

    Drakius (07-20-2010)

  • #5
    New Coder
    Join Date
    Jul 2010
    Location
    Montreal, Quebec, Canada
    Posts
    18
    Thanks
    5
    Thanked 1 Time in 1 Post
    Yes, it's still all intranet, so I can't provide a link, sorry.

    I took out the searchbox.js, since they won't be using it on the site. I tried disabling the common.js but it's necessary to the site's functionality.

    To go into further detail, this is a copy of the company's main website. http://www.cn.ca/ Even their main website has some validation errors, I did not build that one.

    I also see what you mean by the default browser settings. So I should give everything a value, even if I'm not technically using them?

  • #6
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    To go into further detail, this is a copy of the company's main website. http://www.cn.ca/ Even their main website has some validation errors, I did not build that one.
    Yeah a lot of sites have validation errors, it's just that sometimes these can help identify problems although other times errors may be ignored if you know that there isn't a problem with that portion of code.

    Code:
    I took out the searchbox.js, since they won't be using it on the site. I tried disabling the common.js but it's necessary to the site's functionality.
    The reason I asked you to try this is because if I copy your HTML and CSS exactly as it is into it's own document and view it in IE8 there is no problem with it. So I assumed possibly the JS could be affecting it since it wasn't provided.



    I also see what you mean by the default browser settings. So I should give everything a value, even if I'm not technically using them?
    You can add:

    *{ margin:0; padding:0; }

    To the top of your stylesheet will reset the margins and paddings for all elements in every browser back to 0 (* is the universal selector which selects all elements)..

    The last thing I can think of is the iFrame since I don't have access to this either like the JS, try taking this out temporarliy and see how it looks in IE8
    Last edited by Scriptet; 07-19-2010 at 09:54 PM.

  • Users who have thanked Scriptet for this post:

    Drakius (07-20-2010)

  • #7
    New Coder
    Join Date
    Jul 2010
    Location
    Montreal, Quebec, Canada
    Posts
    18
    Thanks
    5
    Thanked 1 Time in 1 Post
    Well you taught me a few things today. I'm currently working through the validation errors in my HTML and CSS, then I'll try your tips if it still doesn't work.

    What about the Doctype? Is it fine? I didn't really bother with that first replier's jerk of a comment, but I did see doctype. I never really truly wrapped my head around the concept.

    I ask because of this validation error, which I don't know if it could be causing a problem

    <div ID="maincontainer">

    You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

    This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

    How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.
    This error repeats for one or two more of my elements, but not all of them.

    EDIT: Also, about it working in IE8, it does work with compatibility view on, but when you turn that off that's when it breaks.
    Last edited by Drakius; 07-20-2010 at 02:25 PM.

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,928
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Drakius, if you’re new then you may not know rule number one in web development yet: Never ever use Internet Explorer (at least up until and including version 7) as base to develop and test your websites. IE 8 is pretty decent but I still don’t quite trust it yet (and other browsers have developer tools that make it so much easier). So, when you develop a website use a modern browser with good web standards support (e. g. Opera, Safari/Chrome, Firefox, IE8 if nothing else is available …) and check your site in different browsers while you’re developing, ideally after each step. If you finish your website and have only checked in one browser, and then you see that in some other browser it doesn’t work, it’s a pain in the *** to figure out where the error occurs.

    Now, a doctype tells the browser what these characters in the document actually are that it has to render. In your case you tell the browser that it should interpret the characters in the file as XHTML, and you are transitioning from old, non-standard code (a. k. a. “tag soup”) to modern, standards compliant code. Ideally, if you’re creating a new website and don’t transition a website from the early 90’s into a modern one, you would only use a strict doctype, whether HTML or XHTML doesn’t matter all that much (as long as you know and adhere to the difference). Do a search for “doctype” and you’ll get a lot of explanations.

  • Users who have thanked VIPStephan for this post:

    Drakius (07-20-2010)

  • #9
    New Coder
    Join Date
    Jul 2010
    Location
    Montreal, Quebec, Canada
    Posts
    18
    Thanks
    5
    Thanked 1 Time in 1 Post
    Thanks for the answer, yes I've only beein checking in IE8 Compatibily mode through my whole build, I shouldn't have. I work at the company though and well that's all they want, IE8.

    I'm working on location and most computers are locked, so it's no possible to get other browser versions. I have gotten an unlocked PC now and I downloaded other browser versions. Their entire intranet website is looking pretty bad on other browsers.

    I've also noticed that the part I built, it does not even read the external CSS. Until I fix that, I can't use other browsers to test. I did some research on it, and I believe it has to do with the meta type set on the actual servers themselves. It's set as "text/html" automatically, I've tried force changing it to "text/css" with .htaccess, but got no where fast. I also don't have access to their servers, I think they're Apache servers, and I'm pretty sure that whoever the system administrator is could change it to text/css. I've told this to my supervisor, but nothing's been done so far. So I continue using IE8 only.

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,928
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    OK, if it’s an intranet where IE is the only browser used anyway then technically you don’t actually have to care about valid code and cross-browser support and all that. However, it certainly does help to have valid and semantic HTML and CSS since you never know what the next update will bring. Also, my experience is that if you write proper code then the problems between different versions of IE and/or other browsers can be reduced to a minimum because IE does get it right in many cases. It’s only if your layout is based on erroneous code you may get problems elsewhere.

    In your case, check in IE8 compatibility mode and standard mode. Or, if all computers in the company have IE 8 anyway you don’t even have worry about compatibility mode, wouldn’t you? There is a way to force IE8 into one mode or the other. There’s a great article on A List Apart about that (which also explains doctype a little bit), most notably the “X-UA-Compatible” part.

    Regarding the wrong MIME type: Would it help to put the CSS internally into the head of the HTML file?
    Last edited by VIPStephan; 07-20-2010 at 04:07 PM.

  • #11
    New Coder
    Join Date
    Jul 2010
    Location
    Montreal, Quebec, Canada
    Posts
    18
    Thanks
    5
    Thanked 1 Time in 1 Post
    I tried putting the CSS internally, and it does work (albeit broken, like other IE versions which is what I'm trying to fix as well) but my senior developer doesn't want the CSS in the header. There's 8 pages (4 french, 4 english) linking to the CSS and more might be added, so it would be a pain to individually upgrade them all if a change in the design or the CSS needs to be done.

    Meanwhile, I've still been working on finding the proper doctype and validating it properly. I'm weeding out the errors slowly but surely. I'll try posting the code here again when I've made the most progress I can.

  • #12
    New Coder
    Join Date
    Jul 2010
    Location
    Montreal, Quebec, Canada
    Posts
    18
    Thanks
    5
    Thanked 1 Time in 1 Post
    UPDATE

    Alright, here's the new code, I changed the Doctype, didn't touch the <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> as I'm 90% sure that's correct, I could be wrong.

    Code:
    <!doctype html>
    <head>
    <link rel="stylesheet" type="text/css" href="../styles/default.css"> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Supplier Training</title>
    <script src="../includes/Common/common.js" type="text/javascript"></script>
    </head>
    
    <body>
    
    <div ID="maincontainer">
    	
        
        <div ID="leftheader">
          <img src="../Images/Common/header-left.jpg" alt="" width="34" height="115" /> <br />
    	</div>
        
      <div id="mainbackground">  
      <div id="leftcolumn">
    	  <img src="../Images/EN/logo_en.gif" alt="CN Logo" />
          <hr class="linestyle" />
        <ul class="leftcontent">
          <li class="nobullet"><a href="index.asp" class="list"><span class="style1">Supplier Training</span><img src="../Images/Common/nav_arrow.gif" id="arrowselected" /></a></li>
        </ul>
         <hr class="linestyle" />      
      </div>
        
        
    <div ID="rightheader">
        
          <img src="../Images/Common/top-logo-shadowtest.jpg" id="shadow" /><div id="topnav">
          <a href="http://www.cn.ca/en/contacts.htm">Contacts</a><a href="http://www.cn.ca/en/about-cn.htm">About CN</a><a href="http://www.cn.ca/en/sitemap.htm">Site Map</a><a href="../FR/index.asp" class="bluelink">Français</a></div>  
          <img src="../images/EN/DTL_Banner_EN.gif" alt="header" /></div>
          <br />
        <div id="maincolumn4">
          <iframe src="../../../TMS3.5StudentSites/DTL/DTLLogin.aspx?BodyOnly=1&amp;languageCode=EN" width="480" height="0" frameborder="0" id="myiframe" onload="resizeIframeToFitContent(this)" scrolling="no"></iframe>
        </div>
        
      <div id="maincolumn3">
        	<div id="contact">
        	<p id="contactinner">Contact Us</p>
            </div>
            <div id="questions">
            <p>Richard Masterton<br />514-697-9888<br /><a href="mailto:ecobec@videotron.ca" class="bluelink3">ecobec@videotron.ca</a></p>
            <hr id="linestyle1" />
            </div>
        </div>
        </div>
        
        <div id="bottomnav2">
        <div id="footernav">
          <ul>
            <li><a href="#" class="list2">Terms &amp; Conditions</a></li>
            <li><a href="#" class="list2">Privacy</a></li>
            <li><a href="#" class="list2">About CN</a></li>
            <li><a href="#" class="list2">RSS</a></li>
        </ul>
     	</div>
    <div id="copyright"><p>© 2010, Canadian National Railway Company</p></div>
    </div>
    </div>
    
    </body>
    </html>
    As you can see, it's mostly validated, the problem is still with the iframe. It tells me to use CSS, but I don't think that's possible with iframes, since there's no frameborder or scrolling attributes in CSS. I even tried border instead of frameborder, but it still puts a border around the iframe...

    Any hints, or clue how to get rid of those warnings? Thanks in advance!

    PS: Removing the iframes entirely is not a possibility, since they're essential to the running of the site.

    PPS: My CSS is completely validated now, so it shouldn't cause any problems

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    body {
    	background-color: #ededed;
    	font-size:90%;
    }
    
    h3 {
    	font-family: "Humnst777 BT";
    	font-size:1.15em;
    	color: #4d4d4d;
    	margin-left: 5px;
    }
    
    a {
    	font-size: 11px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;	
    	color: #4d4d4d;
    	text-decoration: none;
    	border-right: thin;
    	border-right: solid;
    	border-right: 1px;
    	padding-left: 8px;
    	padding-right: 8px;
    }
    
    a:visited {
    	font-size: 11px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;	
    	color: #4d4d4d;
    	text-decoration: none;
    	border-right: thin;
    	border-right: solid;
    	border-right: 1px;
    	padding-left: 8px;
    	padding-right: 8px;
    }
    
    a:hover {
    	font-size: 11px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;	
    	color: #4d4d4d;
    	text-decoration: none;
    	border-right: thin;
    	border-right: solid;
    	border-right: 1px;
    	padding-left: 8px;
    	padding-right: 8px;
    }
    
    a.bluelink {
    	font-size: 11px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;	
    	text-decoration: none;
    	border-right: thin;
    	border-right: solid;
    	border-right: 1px;
    	padding-left: 8px;
    	padding-right: 8px;
    	color: #5f90cb;
    }
    
    a:visited.bluelink {
    	font-size: 11px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;	
    	text-decoration: none;
    	border-right: thin;
    	border-right: solid;
    	border-right: 1px;
    	padding-left: 8px;
    	padding-right: 8px;
    	color: #5f90cb;
    }
    
    a:hover.bluelink {
    	font-size: 11px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;	
    	text-decoration: none;
    	border-right: thin;
    	border-right: solid;
    	border-right: 1px;
    	padding-left: 8px;
    	padding-right: 8px;
    	color: #5f90cb;
    }
    
    a.bluelink2 {
    	font-size: 14px;
    	font-family: "Humnst777 Cn BT";
    	text-decoration: none;
    	border: none;
    	padding-left: 8px;
    	padding-right: 8px;
    	color: #5f90cb;
    }
    
    a:visited.bluelink2 {
    	font-size: 14px;
    	font-family: "Humnst777 Cn BT";
    	text-decoration: none;
    	border: none;
    	padding-left: 8px;
    	padding-right: 8px;
    	color: #5f90cb;
    }
    
    a:hover.bluelink2 {
    	font-size: 14px;
    	font-family: "Humnst777 Cn BT";
    	text-decoration: none;
    	border: none;
    	padding-left: 8px;
    	padding-right: 8px;
    	color: #5f90cb;
    }
    
    a.bluelink3 {
    	font-size: 11px;
    	font-family: "Humnst777 Cn BT";
    	text-decoration: none;
    	border: none;
    	margin-left: 0px;
    	padding-left: 0px;
    	color: #5f90cb;
    }
    
    a:visited.bluelink3 {
    	font-size: 11px;
    	font-family: "Humnst777 Cn BT";
    	text-decoration: none;
    	border: none;
    	margin-left: 0px;
    	padding-left: 0px;
    	color: #5f90cb;
    }
    
    a:hover.bluelink3 {
    	font-size: 11px;
    	font-family: "Humnst777 Cn BT";
    	text-decoration: none;
    	border: none;
    	margin-left: 0px;
    	padding-left: 0px;
    	color: #5f90cb;
    }
    
    a.list {
    	font-size: 14px;
    	font-family: "Humnst777 BlkCn BT";
    	color: #4d4d4d;
    	text-decoration: none;
    	border:none;
    	padding-left: 8px;
    	padding-right: 8px;
    }
    
    a:visited.list {
    	font-size: 14px;
    	font-family: "Humnst777 BlkCn BT";
    	color: #4d4d4d;
    	text-decoration: none;
    	border:none;
    	padding-left: 8px;
    	padding-right: 8px;
    }
    
    a:hover.list {
    	font-size: 14px;
    	font-family: "Humnst777 BlkCn BT";
    	color: #5f90cb;
    	text-decoration: none;
    	border:none;
    	padding-left: 8px;
    	padding-right: 8px;
    }
    
    a.list2 {
    	font-size: 12px;
    	font-family: "Humnst777 Cn BT";
    	color: #4d4d4d;
    	text-decoration: none;
    	border:none;
    	padding-left: 8px;
    	padding-right: 8px;
    }
    
    a:visited.list2 {
    	font-size: 12px;
    	font-family: "Humnst777 Cn BT";
    	color: #4d4d4d;
    	text-decoration: none;
    	border:none;
    	padding-left: 8px;
    	padding-right: 8px;
    }
    
    a:hover.list2 {
    	font-size: 12px;
    	font-family: "Humnst777 Cn BT";
    	color: #e42121;
    	text-decoration: none;
    	border:none;
    	padding-left: 8px;
    	padding-right: 8px;
    }
    
    a.list3 {
    	font-size: 12px;
    	font-family: "Humnst777 Cn BT";
    	color: #e42121;
    	text-decoration: none;
    	border:none;
    	padding-left: 8px;
    	padding-right: 8px;
    }
    
    a:visited.list3 {
    	font-size: 12px;
    	font-family: "Humnst777 Cn BT";
    	color: #e42121;
    	text-decoration: none;
    	border:none;
    	padding-left: 8px;
    	padding-right: 8px;
    }
    
    a:hover.list3 {
    	font-size: 12px;
    	font-family: "Humnst777 Cn BT";
    	color: #e42121;
    	text-decoration: none;
    	border:none;
    	padding-left: 8px;
    	padding-right: 8px;
    }
    
    #maincontainer {
    	position: absolute;
    	left: 0px;
    	top: 0px;
    	width: 1024px;
    	height: auto;
    }
    
    #mainbackground {
    	background-color: #FFFFFF;
    	height: 100%;
    	width: 955px;
    }
    
    #leftheader {
    	float: left;
    	left: 0px;
    	margin: 0px;
    	padding: 0px;
    	width: auto;
    }
    
    #leftcolumn {
    	float: left;
    	height: 300px;
    	width: auto;
    }
    
    #rightheader {
    	float: left;
    }
    
    #mainheader {
    	top: 0px;
    }
    
    #topnav {
    	width: 741px;
    	text-align: right;
    	float: left;
    	position: absolute;
    	background-color: #FFFFFF;
    	top: 0px;
    	padding-top: 2px;
    	padding-bottom: 2px;
    }
    
    #arrowselected {
    	margin-left: 45px;
    }
    
    #search {
    	background-color:#FFFFFF;
    	float: left;
    	top: 0px;
    	padding-top: 1px;
    	padding-bottom: 8px;
    	position: absolute;	
    	width: 195px;
    }
    
    ul.leftcontent{
        list-style:none;
        margin: 0 0 0 5px;
        padding: 0;
    	padding-left: 0px;
    }
    
    li.leftcontent{
    	list-style-type: none;
    	list-style:none;
        line-height:1.1em;
    	margin-left: 0px;
        padding: 0 0 0 5px;
        background:url(../Images/Common/nav_level1_bullet.gif) no-repeat 0 8px;
    }
    
    li.nobullet {
    	background-image:none;
    	list-style:none;
    }
    
    #maincolumn1 {
    	padding: 10px;
    	float: left;
    	width: 741px;
    	height: auto;
    	border-left: 4px solid #ededed;
    }
    
    #maincolumn4 {
    	padding: 10px;
    	float: left;
    	width: 485px;
    	height: auto;
    	border-top: 4px solid #ededed; 
    	border-left: 4px solid #ededed;
    	border-right: 4px solid #ededed;
    }
    
    #contact {
    	float:left;
    	width: 240px;
    	background-image: url(../Images/Common/Contactus.gif);
    	background-repeat: no-repeat;
    	height: 60px;
    	margin-top: 12px;
    	margin-left: 5px;
    	margin-bottom: 0px;
    }
    
    #contactinner {
    	margin-left: 12px;
    	margin-top: 12px;
    	font-size: 14px;
    	font-family: "Humnst777 BlkCn BT";
    	color: #4d4d4d;
    }
    
    #questions {
    	float: left;
    	width: 240px;
    	font-family: "Humnst777 Cn BT";
    	margin-left: 5px;
    	margin-top: 0px;
    	font-size: 14px;
    	color: #4d4d4d;
    }
    
    #questions p {
    	margin-bottom: 0px;
    }
    
    #maincolumn2 {
    	float: left;
    	margin-left: 5px;
    	width: 250px;
    	height: 441px;
    	background-color: #FFFFFF;
    }
    
    #maincolumn3 {
    	float: left;
    	width: 252px;
    	height: 100%;
    	border-top: 4px solid #ededed; 
    }
    
    #bottomnav {
    	float: left;
    	width: 1024px;
    	height: 100px;
    	background-image: url(../Images/Common/footer_two_column_bg.jpg);
    	background-repeat: no-repeat;
    	position: inherit;
    }
    
    #bottomnav2 {
    	float: left;
    	width: 1024px;
    	height: 100px;
    	background-image: url(../Images/Common/footer_three_column_bg.jpg);
    	background-repeat: no-repeat;
    }
    
    #footernav {
    	margin-top: 75px;
    	margin-right: 45px;
    	float: right;
    	width: 900px;
    }
    
    #footernav ul {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	text-align: right;
    	font-size: 11px;
    	font-family: "Humnst777 Cn BT";
    	border: none;
    }
    
    #footernav ul li { 
    	display: inline;
    	border: none;
    }
    
    #copyright {
    	float: right;
    	width: 900px;
    	margin-top: 5px;
    	margin-right: 52px;
    }
    
    #copyright p {
    	font-size: 11px;
    	font-family: "Humnst777 Cn BT";
    	border: none;
    	color: #4d4d4d;
    	text-align: right;
    }
    
    #login {
    	float: left;
    	padding-top: 12px;
    	padding-left: 4px;
    	padding-bottom: 0px;
    	width: 761px;
    	background-color: #ededed;
    }
    
    #maincolumn4 p {
    	color: #4d4d4d;
    	font-family: "Humnst777 Cn BT";
    	font-size: 14px;
    }
    
    .style1 {
    	color: #e42121;
    }
    
    .linestyle {
    	height: 1px;
    	width: 168px;
    	color: #E1E1E1;
    }
    
    #linestyle1 {
    	height: 1px;
    	width: 220px;
    	color: #E1E1E1;
    }
    
    #arrowselected {
    	border: 0;
    }
    Last edited by Drakius; 07-20-2010 at 09:36 PM.

  • #13
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by Drakius View Post
    ...As you can see, it's mostly validated, the problem is still with the iframe. It tells me to use CSS, but I don't think that's possible with iframes, since there's no frameborder or scrolling attributes in CSS. I even tried border instead of frameborder, but it still puts a border around the iframe...
    To get rid of the border on the iframe try adding this to the CSS:
    Code:
    #myiframe{border:0;}
    To use CSS to control whether scroll bars are visible you need to make use of one or more of the following, depending on what your goal is:
    Code:
    overflow:auto;
    overflow:hidden;
    overflow:scroll;
    overflow:visible;
    overflow-y:auto;
    overflow-y:hidden;
    overflow-y:scroll;
    overflow-y:visible;
    overflow-x:auto;
    overflow-x:hidden;
    overflow-x:scroll;
    overflow-x:visible;
    Setting the -x or -y value independently will not affect the other value. Using just the overflow:<whatever>; style will change both the -x and -y styles.
    Last edited by Rowsdower!; 07-23-2010 at 06:13 PM. Reason: I forgot to include "visible"
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #14
    New to the CF scene
    Join Date
    Jul 2010
    Location
    Portland Oregon
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE Problems

    IE have lots of problems, and its a bit tough work for any web developer or web designer to solve the web pages errors.

    Portland website design

  • #15
    New Coder
    Join Date
    Jul 2010
    Location
    Montreal, Quebec, Canada
    Posts
    18
    Thanks
    5
    Thanked 1 Time in 1 Post
    Thanks for the info Rowsdower. I did learn the overflow attribute a few days ago, it does work. Border works as well for most browser, but not so well in IE8, I haven't tried without the compatibility yet.

    Right now I've scratched trying to troubleshoot. I actually started building the pages from the ground up this time and checking them in the browsers every few steps making sure nothing breaks. So far so good.

    Thank you for your help again everyone!


  •  

    Posting Permissions

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