View Full Version : IE Problem

04-23-2009, 09:12 PM
Actually probably not an IE problem but something to do with CSS & HTML and the way IE handles it.

On a web site I am trying to work with http://www.canadianrallyo.ca/events_trials_listing.shtml appears correctly in Firefox, Chrome, Opera etc but not IE. There is a large amount of white space at the beginning os the body, after the header. Can anybody help correct this?



04-24-2009, 03:11 AM
You should check the validation (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.canadianrallyo.ca%2Fevents_tr ials_listing.shtml) of your page for problems that can impact rendering. There are several.

For this immediate matter, try modifying the following styling:

.twoColFixLtHdr #sidebar1 {
background:#CCFFCC none repeat scroll 0 0;
padding:15px 10px 15px 20px;
display:inline; /* to avoid IE's doubled-margin float bug */


04-24-2009, 08:24 PM
Thanks Cary

I am just learning all about CSS & HTML and have taken over this web site. Greatly appreciate your assistance.


04-26-2009, 02:59 PM
I applied that change to my css but still have the problem - I have not yet tried to validate the page - that is next on the list - but any other help to correct the problem would be appreciated.

04-26-2009, 05:50 PM
The thing about fixing CSS problems is they can often arise from problems in the html. You can't really narrow down any CSS problems until the structural problems in the html are resolved. It may simply be that IE doesn't know what to make of your page because of missing opening or closing tags and the use of the same ID more than once on the page.

It will be much easier to narrow down and fix any CSS problems once the CSS is being built upon a solid foundation.

04-26-2009, 06:31 PM

I will work on the html - thanks


04-26-2009, 07:29 PM
The page(s) that I am trying to fix are a combination of Dreamweaver predesigned html pages and the Spry Menu - all part of CS4.

When I run validation on the page we have been looking at I get the following (In part)

Line 21, Column 81: document type does not allow element "LINK" here
ůss" rel="stylesheet" type="text/css" >
The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).
One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the
beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

My html does not have the problem code on line 21 (which is blank) - My html code is:=

1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
4.<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5.<title>Current Trials</title>
6.<link href="CSS/caro.css" rel="stylesheet" type="text/css">
7.<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
10.<body class="twoColFixLtHdr">
11.<div id="container">
12. <div id="header">
13.<div id="caroname"><img src="Images/caroheader.jpg" width="780" height="189" alt="caroheader"></div>
16. <!-- end #header -->
17. <div id="sidebar1">
18. <h3> MENU</h3>
19. <p>
20. <!--#include virtual="/menu.html" -->
21. </p>

It would therefore appear that the problem code comes from the "menu" code which is from Spry and states in part:

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="homepage.shtml">Home</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">CARO</a>
<li><a href="about_caro_what_is_rally.shtml">What is Rally</a></li>
<li><a href="about_caro-history.shtml">History</a></li>
<li><a href="about_caro_purpose.shtml">Purpose</a></li>
<li><a href="about_caro_representatives.shtml">Directors</a></li>

And there is the offending code to which the validation program objects,

My question (or at least one of them) is can the offending line in this Spry code be safely removed. Of course, I could just remove it and see what happens but I hate to bring down the site because of something that I do not fully understand.



04-27-2009, 10:54 PM
Nearly there!!

html is now validated. CSS is validated with a couple of exceptions which I do not understand.

1. Property text-color doesn't exist : #004000- this color is used more than once but validation picks up 2 instances. Why only two and why pick this color?

2. There are some errors in

1. attempt to find a semi-colon before the property name. add it
2. Parse Error null
3. Property opacity doesn't exist in CSS level 2.1 but exists in [css3] : 0.1
4. Parse Error 0.1);
5. Parse Error }

These five errors come through DM CS4 and the Spry system.
I do not know if:-
They can be changed (and if so how)
They can be left and not have CSS validation.

04-28-2009, 01:49 PM
1. Property text-color doesn't exist : #004000- this color is used more than once but validation picks up 2 instances. Why only two and why pick this color? The hex color is just fine, it's the CSS property that does not exist. You made it up ;) The correct way to set color is to use the property 'color'

04-28-2009, 02:28 PM
I always try to be inventive <vbg>

Anybody got ideas on the second part of the problem?


05-02-2009, 10:05 PM
If you are still having trouble with this (I don't know if the page at your link is current) then try the following styling:

.twoColFixLtHdr #mainContent {
margin: 0 0 0 180px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background-color: #fff;
border-top-color: #004000;
border-right-color: #004000;
border-bottom-color: #004000;
border-left-color: #004000;
color: #004000;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 80%;
zoom: 1; /* for IE */

DW was warning of possible 3-pixel jog (http://www.adobe.com/cfusion/communityengine/index.cfm?event=findByTextId&productid=1&textid=THREE_PIXEL_JOG) problem with this element.

05-03-2009, 11:08 PM

Thanks - that seems to have fixed the problem BUT when I try to validate the CSS I get this :

Property zoom doesn't exist : 1

I do not knwo if that is important but with that code I cannot seem to get CSS validation. Is that important?

05-03-2009, 11:59 PM
It won't hurt anything, but you could put it in an IE specific style sheet, if you like, and place the link to that style sheet within IE conditional tags. So you might use this styling by itself:

.twoColFixLtHdr #mainContent {
zoom: 1;

And then put the link to the style sheet in the head of the page using code that looks something like this (depending on what you call the style sheet):

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css">

Only IE will see that code. Validators will ignore it and the style sheet it links to.

05-04-2009, 05:49 AM
Don't get too hung up in validation. It's really useful to use to discover errors you were not aware of, but remember that the main goal is for the page to work in the real world.

05-04-2009, 03:48 PM

Thanks - I will give that a try.