SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2002
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Nested divs in IE5/6 don't obey CSS rules, why?

    Hi All

    I am trying to create a popup window effect using <div>. The "window" consists of a series of nested <div>s. the 'outer' one creates a grey border effect around the 'inner' one. The rest of the three <div>s make up the contents within 'inner'.

    Everything thing works fine in NS6, Mozilla, galeon, etc. Things start getting really messed up when viewed with IE5/6. In IE 'outer' and 'inner' have some alignment issues. They seem to be out be several pixels. Also the background color of 'outer' is not coming through.

    Any ideas on why? Is there anything in my CSS that IE doesn't support?

    Thanks, Ben

    Here is the CSS
    Code:
    div.outer {
    	position: 		fixed;
    	left:			400px;
    	top:			50%;
    	height: 		300px;
    	width:			400px;
    	margin-left:		-200px;
    	margin-top:		-150px;
    	padding:		0px;
    	background-color: 	grey;
    	border:			1px solid black;
    	z-index:		7;
    	visibility:		hidden;
    }
    div.inner {
    	position:		absolute;
    	left:			2px;
    	top:			2px;
    	height: 		296px;
    	width:			396px;
    	padding:		0px;
    	background-color: 	#ffffff;
    	border-width:		0px dotted yellow;
    	z-index:		2;
    }
    div.header {
    	position:		absolute;
    	left:			0px;
    	top:			0px;
    	height: 		40px;
    	width:			100%;
    	margin:			0px;
    	padding:		0px;
    	background-color: 	#000066;
    	border-width:		0px dotted green;
    	z-index:		3;
    }
    div.content {
    	position:		absolute;
    	left:			0px;
    	top:			40px;
    	height:			226px;
    	width:			396px;
    	margin:			0px;
    	padding:		0px;
    	border-width:		2px solid green;
    	z-index:		8;
    	overflow:		auto;
    }
    div.footer {
    	position:		absolute;
    	left:			0px;
    	bottom:			0px;
    	height: 		30px;
    	width:			100%;
    	margin:			0px;
    	padding:		0px;
    	background-color:	#d3d3d3; 
    	border:			0px dotted red;
    	z-index:		3;
    }
    div.back {
    	position:		absolute;
    	left:			800px;
    	top:			0px;
    	width:			400px;
    	height:			100%;
    	background-color:	black;
    }
    Here is the HTML
    Code:
    <div id="menu" class="outer">
       <div class="inner">
          <div class="header"></div>
          <div id="popup_content" class="content">Body</div>
          <div class="footer"></div>
       </div>
    </div>
    Experience is that thing which lets you know you've made the same mistake yet again.

  2. #2
    Rabble Rouser bronze trophy
    Join Date
    Jan 2003
    Location
    Mountain View, CA
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just a guess, but it's probably IE suffering from box-model issues. Try the tantek hack.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Apart from the box model issues for ie5 5.5 (mentioned by Paul_C above) IE6 also doesn't understand position fixed (except for background images on the body).

    You can giv IE position absolute and then use the child selector to give mozilla and OPera etc position fixed.

    e.g.
    Code:
    div.outer {
    position:absolute;
    left:400px;
    top:50%;
    height:300px;
    width:400px;
    margin-left:-200px;
    margin-top:-150px;
    padding:0px;
    background-color:gray;
    border: 1px solid black;
    z-index:7;
    }
    html>body .outer {position:fixed}
    (Not exactly what you want but the nearest you can get in IE.)

    Also note that IE likes the colour keyword as gray not grey which is why it doesn't show in IE.
    Code:
    background-color:gray;
    Also note that this shorthand version is incorrect:
    Code:
    border-width:0px dotted yellow;
    It should be :
    Code:
    border:0px dotted yellow;
    But obviously if it's 0px then you don't need to use it all as it isn't there. (I assume you've set it to 0 for testing etc.)

    Anyway hope some of this is of use.

    Paul

  4. #4
    SitePoint Zealot
    Join Date
    Feb 2002
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the "gray" tip. I am starting to think that perhaps it is the quirky box model thing. I have looked at the "bockmodel hack" but am not clear on how to implement it. In my style sheet, do I need to make two references to a particular element (one containing normal formatting the other with the hack, or should it all be included in the same reference).

    Thanks, Ben
    Experience is that thing which lets you know you've made the same mistake yet again.

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2002
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have been reading up on the "box model hack" but I still don't get it. Given my understanding of the problem, I can't see anything in my CSS that would be causing the problem given that I am not making use of any padding. How would I modify my current CSS to impliment the "box model hack"?

    On a side note, I have fixed the IE and "position: fixed" problem using a bit of JS. I also tried changing "fixed" to "absolute". No effect with regards to my problem.
    Experience is that thing which lets you know you've made the same mistake yet again.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The code I posted earlier would make the display identical in Mozilla1.2 and IE6 (except for position fixed of course - which would only show when you scroll etc).

    Perhaps you could post the code you are using now (or a link) as IE6 should be ok. (Please don't format your code when you post (as you did above) as it didn't work when I cut and pasted without taking all the space out [img]images/smilies/wink.gif[/img] ).

    You will need the box model hack for IE5 5.5 because you have used 1 px borders which will make a 2px difference overall on each div.

    So you will need to add the hack to all divs that have borders that rely on being positioned accurately. (There are other ways around the boxmodel hack by enclosing elements in elements without padding or borders and only applying borders and padding to the inside elements and not specifying a width.You should be able to look this up for yourself [img]images/smilies/wink.gif[/img] )

    e.g.
    Code:
    div.outer { 
    position:absolute; 
    left:400px; 
    top:50%; 
    height:302px; /* IE5 5.5 gets this height */
    width:402px; /* IE5 5.5 gets this width */
    margin-left:-200px; 
    margin-top:-150px; 
    padding:0px; 
    background-color:gray; 
    border: 1px solid black; 
    z-index:7; 
    voice-family: "\"}\"";
    voice-family: inherit;
    height:300px; /* other browsers get this height */
    width:400px; /* other browsers get this width */
    
    } 
    */ be kind to Opera */
    html>body div.outer {
    height:300px;
    width:400px;
    }




    Hope this helps.

    Paul

  7. #7
    SitePoint Zealot
    Join Date
    Feb 2002
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much Paul O'B, that did the trick for IE5.5. As for the position fixed thing, that one I have already sorted out using a bit of javascript I got off the web FIxed position in IE .

    The only remaining problem is IE6, which is still displaying the <div>s like IE5.5 used to do. In your first post you mentioned a problem with IE6, but I assume you were talking about the "position:fixed" thing, right?

    Here is the full code, for your reference:

    CSS:
    Code:
    /* Start experience Popups */ 
    
    div.outer {
      position:fixed; 
      left:400px; 
      top:50%; 
      height:302px; /* IE5 5.5 gets this height */ 
      width:402px; /* IE5 5.5 gets this width */ 
      margin-left:-200px; 
      margin-top:-150px; 
      padding:0px; 
      background-color:gray; 
      border: 1px solid black; 
      z-index:7; 
      visibility: hidden;
      voice-family: "\"}\""; 
      voice-family: inherit; 
      height:300px; /* other browsers get this height */ 
      width:400px; /* other browsers get this width */ 
    } 
    */ be kind to Opera */ 
    html>body div.outer { 
       height:300px;
       width:400px; 
    }
    div.inner {
    	position: relative;
    	left: 2px;
    	top: 2px;
    	height: 296px;
    	width: 396px;
    	background-color: #ffffff;
    	border:	0px solid gray;
    	z-index: 2;
    }
    div#popup_header {
    	position: absolute;
    	left: 0px;
    	top: 0px;
    	height: 40px;
    	width: 100%;
    	margin:	0px;
    	padding: 0px;
    	background-color: #000066;
    	border-width: 0px dotted green;
    	z-index: 3;
    }
    div#popup_content {
    	/* Structural formatting */
    	position: absolute;
    	left: 0px;
    	top: 40px;
    	height:	226px;
    	width:	396px;
    	margin:	0px;
    	padding: 0px;
    	border-width: 2px solid green;
    	z-index: 8;
    	overflow: auto;
    	/* Text formatting */
    	font-family: "Book Antiqua", "Times New Roman", "Times", "serif";
    
    	font-size: 13px;
    
    	font-style: normal;
    
    	font-weight: normal;
    
    	color: #000000;
    
    	text-decoration: none;
    
    }
    div#popup_footer {
    	position: absolute;
    	left: 0px;
    	bottom: 0px;
    	height: 30px;
    	width: 100%;
    	margin: 0px;
    	padding: 0px;
    	background-color: #d3d3d3; 
    	border:	 0px dotted red;
    	z-index: 3;
    }
    .popup_button {
    	/* Structure formatting */
    	position: absolute; 
    	bottom: 3px; 
    	left: 	50%; 
    	height: 20px; 
    	width: 80px; 
    	margin-left: -40px; 
    	padding: 0px;
    	z-index: 4;
     	/* text formatting */
    	text-align: center;
    	font-family: "Book Antiqua", "Times New Roman", "Times", "serif";
    
    	font-size: 13px;
    
    	font-style: normal;
    
    	font-weight: normal;
    
    	color: 	black;
    
    	text-decoration: none;
    	
    }
    A.popup_button:hover {
    	color: gray;
    }
    
    /* End experience Popups */
    HTML:
    Code:
    <div id="menu" class="outer">
       <div class="inner">
    	<div id="popup_header">
    	   <img  style="position: absolute; z-index: 1; top: 3px; left: 3px;" src="../images/small_logo16.gif">
    	</div>
    	<div id="popup_content">Body</div>
    	<div id="popup_footer">
     	    <a class="popup_button" href="#" onclick="hide_popup();">Close</a>
    	    <div id="arrow" style="position: absolute; z-index: 4; bottom: 3px; right: 3px; font-size: 12px;"><a href="#" onclick="javascript:opener.location.href = '../comp_profile/experience/experience.php';"><img id="imgArrow" src="../images/arrow_goto_exp_out.png" onmouseover="" onmouseout="" alt="Go to Company Experience main page" border="0"></a></div>
    	</div>
       </div>
    </div>
    Experience is that thing which lets you know you've made the same mistake yet again.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    The only remaining problem is IE6, which is still displaying the <div>s like IE5.5 used to do
    It looks ok on my system!

    What doctype are you using? If you are using a doctype without a uri then IE6 will be in quirks mode and use the broken box model as IE5 etc but unlike IE5, IE6 does understand the voice family hack. This means it feeds itself the wrong dimensions back again.

    The solution is to specify a full doctype (with uri) and then IE6 displays in correct box model mode. (If you are using an xhtml doctype then leave out the first line (the xml prologue) as this also puts IE6 into quirks mode.

    I think that thuis may be the problem if you've sorted the other problems out ok .

    Paul

  9. #9
    SitePoint Zealot
    Join Date
    Feb 2002
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B I am really impressed, you certainly know your stuff. You hit the nail on the head. IE6 was running in quirks mode. I changed the doctype header to "<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">" and sure enough it fixed my problem. However, the change has now effected my JS function which dynamically positions the "bottomRow" <div> below the others.

    I have looked at my JS function and identified the problem. In my script I make use of "document.body.clientHeight" to calculate the height of the client window. The problem is that IE5 and IE6 report it differently. IE5 returns a value of "590" while IE6 returns "112". If I remove the URI from the doctype header it works fine, but then the "<div> box model" problem comes back because IE6 is in quirks mode again. I have tried experimenting with different doctypes and have discovered that the problem only occurs if IE6 is run is strict mode. Do you have any idea of why this would happen?

    Sorry to monopolize your time with these questions.

    Regards, Ben
    Experience is that thing which lets you know you've made the same mistake yet again.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This article may explain why it's happening :

    http://www.howtocreate.co.uk/tutoria...?tut=0&part=16

    You may have to change your script to accomodate.

    I don't know which script ypu are using but theres a fixed script here that might be better :

    http://www.doxdesk.com/software/js/fixed.html

    If that has the same problems as your original script then you may have to re-jig your layout so that padding and borders aren't set at the same time as heights and widths (as dougbtx suggestion ). (e.g. apply height width to outer element and borders and padding to the inner element (without width/height)- it may be a bit fiddly as you have a lot of nested elements.) Then you can run in quirks mode OK.

    Sorry I can't be more specific but I will have a look again later today

    Paul

  11. #11
    SitePoint Zealot
    Join Date
    Feb 2002
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B

    You did it again. That first link was exactly what I needed. While I am a believer in having a go before asking questions, I think it would have taken me days to figure out the whole "document.documentElement" thing. Thanks so much.

    Thanks for the link to the fixed script. I actually stumbled across that one while searching the forums the other day.

    Regards, Ben
    Experience is that thing which lets you know you've made the same mistake yet again.

  12. #12
    SitePoint Zealot
    Join Date
    Feb 2002
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B

    Sorry to take up your time again, but I have another issue which I think may also be a IE6 rendering bug. I have already done a search of the net, but haven't found anything. The problem is with the rendering of two different styles on the same page. I actually posted this one elsewhere, however I have yet to find an answer. Are you aware of any such bug?

    Regards, Ben
    Experience is that thing which lets you know you've made the same mistake yet again.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Ben,

    This may or may not be causing the problem but is certainly incorrect code anyway.

    You have got your block levels in a twist! You are not allowed to do this :
    Code:
    <p><div>content</div></p>
    It must be :
    Code:
    <div><p>Content</p></div>
    or just:
    Code:
    <p>Content</p>

    As you have already defined a style for the <p> in the stylesheet, in order for it to render differently you will need to overide the settings that you made for it by adding the class to the <p> tag e.g. <p class="main_title">

    The div element can contain other block level elements such as divs and <p> etc.The <p> tag can only contain inline content. e.g. <span> <a> etc.

    In your example you have wrapped a div in a paragraph which may confuse the browser and cause it to render incorrectly. (However in my version of IE6 it seemed to display it as I think you meant it.)

    Try to resolve the conflict and then run your code through the validator which will pick the above error up straight away.

    If this doesn't completely solve the problem then post a link or more code as you may have made further errors higher up in the code that are cascading through.

    Also note that generic font families (such as serif) should not be quoted in the css. http://www.w3.org/TR/REC-CSS2/fonts....ef-font-family

    (Font names that contain spaces should be quoted although most browsers are forgiving in this respect.)
    correct:
    Code:
    font-family: "Times New Roman", Times, serif;
    Incorrect
    Code:
    font-family: "Times New Roman", "Times", "serif";
    Hope this solves the problem otherwise post some more code etc.

    Paul

  14. #14
    SitePoint Zealot
    Join Date
    Feb 2002
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul O'B

    Sorry I haven't got back to you sooner. I have not had access to my computer for a while. I read what you said and have tried the following solutions - none of which have worked:

    * Replaced <div> with <span>
    * Remove <div> and modify <p> - e.g. <p class="sub_title">
    * Removed quotations from single word font family names.
    * Validate the html page. Only one error, use of height property in one of the tables.

    I just don't get it. The problem only occurs in IE5.5/6 and Konquerer. This is driving me crazy

    Here is the full code (sorry):

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Pollution Management Services</title>
    <link href="../../css/sinosphere.css" rel="stylesheet" type="text/css">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script language="JavaScript" type="text/javascript" src="../../scripts/functions.js"></script>
    <script language="JavaScript" type="text/javascript" src="../../scripts/fixed.js"></script>
    </head>
    
    <body ONLOAD="preloadImages(); footerpos();">
    	<div id="topRow">
    			<img src="../../resources/title_bar/title_bar.gif" alt="title bar" border="0" width="776" style="margin: 0px; padding: 0px;" /><br>
    
    			<!-- Start map bar -->
    				<table bgcolor="#ebebff" border="0" width="776" height="16" style="margin: 0px; padding: 0px;">
    					<tr>
    						<td align="left" style="padding-left: 10px;"> 
    							<div class="link">
    								<a href="../../index.html" target="_parent">Home</a>&nbsp;&nbsp;&gt;&nbsp; 
                  <a href="../ehs.html" target="_parent">Environmental and Health 
                  &amp; Safety Services</a>&nbsp;&nbsp;&gt;&nbsp; <span class="current">Pollution 
                  Management</span>
    
    							</div>
    						</td>
    					</tr>
    				</table>
    			<!-- End map bar -->
    	</div>
    	<div id="centRow">
    		<!-- Start content -->
    				<p class="main_title">POLLUTION MANAGEMENT SERVICES</p>
    
    				<p><em>SINOSPHERE</em> in association with leading national institutes and professionals offers a range of pollution management services ranging from comprehensive indoor air quality testing and improvement for commercial and residential buildings to waste water treatment systems that offer significant industrial cost savings.</p>
    
    				<!-- Start indoor air quality -->
    				<p class="sub_title">INDOOR AIR QUALITY TESTING &amp; ANALYSIS SERVICE</p>
    				<p><img class="main_image" src="test.jpg" alt="Pollution Services" align="left" width="100" height="130">The rapidly developing real estate sector and ever increasing demands for modern office and residential space has resulted in the use of obsolete and potentially hazardous building materials increasing the incidence of indoor air pollution.  The use of urea as a cement curing agent under cold weather conditions for example results in the release of ammonia from cement surfaces during hot weather even in some major buildings in northern China. Ammonia is one of many indoor air pollutants including solvent fumes, formaldehyde and other volatiles that contribute to indoor air pollution in China.  Furthermore, inappropriately designed and inadequately maintained HVAC systems in many high-rises and exclusive residential estates provide an ideal environment for cultivation of bacteria, molds and viruses. Already health impacts from these sources have been implicated in a range of acute and chronic respiratory diseases and allergies resulting in indoor air quality standards to be released by the Chinese government.</p>
    
    <p>According to official statistics released by various agencies of the Chinese government, each year in China 111,000 people die as a result of indoor air pollution. Reports in national and international publications suggest that more than 50% of office buildings in Beijing have been contaminated by Legionella (the virus responsible for Legionnaires Disease) and other harmful micro-organisms that may cause serious health problems. The Environmental Monitoring Center of China's Interior Decorating Association (10 October, 2002) stated that surveys of 1,524 office and domestic buildings revealed indoor ammonia, formaldehyde and ozone concentrations exceeded national standards by 80%, 42% and 50% respectively. In some buildings indoor air pollutants exceeded national standards by as much as six times. Statistics for radon levels are also alarming with 50,000 radon-induced lung cancer cases being reported each year.</p>
    
    <p>Indoor Air Quality issues are often exasterbated in countries such as China where building regulations, and construction and maintainence standards are still developing. Domestic indoor air quality is vulnerable to degradation due to biological and chemical contaminents from a variety of sources including concrete foundations, airconditioners, ducted heating, water heaters, gas stoves, paint, glues, resins, furniture and floor board polishes.</p>
    
    <p><em>SINOSPHERE</em> offers an indoor air quality testing program that evaluates physical, chemical and and biological risks and identifies sources.  Furthermore through associated subcontractors <em>SINOSPHERE</em> manages systematic cleaning and sanitization for residences and office buildings and establish the benchmark for a regular maintenance program.</p>
    
    <p>For a full range of indoor air quality and other pollution management services please contact <em>SINOSPHERE</em>.</p>
    
    				<!-- End indoor air quality //-->
    
    		<!-- End content -->
    	</div>
    	<div id="bottomRow">
    		<table align="center" bgcolor="#ebebff" border="0" width="776" height="22">
    				<tr>
    					<td width="35" align="center"><img src="../../resources/footer_bar/triangle.gif" border="0" alt="triangle" height="13" width="9"></td>
    					<td width="171" align="left">
    
    						<span class="link"><a href="../../ehs/ehs.html" target="_self">Environmental, Health &amp; Safety</a></span>
    					</td>
    					<td width="171" align="left">
    						<span class="link"><a href="../../market/market.html" target="_parent">Market Research &amp; Development</a></span>
    					</td>
    					<td width="200" align="left">
    
    						<span class="link"><a href="../../improvement/improvement.html" target="_parent">Efficiency &amp; Continuous Improvement</a></span>
    					</td>
    					<td width="154" align="left">
    						<span class="link"><a href="../../comp_profile/profile.html" target="_parent">Company Information</a></span>
    					</td>
    				</tr>
    			</table>
    
    	
    	</div>
    </body>
    </html>
    Code:
    A {
    	text-decoration: none;
    	font-style: normal;
    	font-weight: normal;
    	color: #000066;
    }
    A:hover {
    	color: #E3040A;
    }
    a.button:hover
    {
    	font-size: 12px;
        	border-style: solid; 
    	border-width: 1px; 
    	border-color: #666666;
    	padding: 5px 20px 5px 20px;
    	text-decoration: none; 
    	color: #000000;
    }
    a.button
    {
    	font-size: 12px;
    	border-style: solid; 
    	border-width: 1px; 
    	border-color: #d3d3d3; 
    	padding: 5px 20px 5px 20px;
    	text-decoration: none; 
    	color: #000000;
    }
    body {
       scroll: auto;
       margin: 0px;
       padding: 0px;
       left: 0px;
       top: 0px;
       background-image: url(../images/background.jpg);
       background-repeat: repeat-y;
       background-color: #ffffff;
    }
    .ch_content {
    	font-family: "MS Song", Simsun, Beijing;
    	font-size: 16px;
    	font-style: normal;
    	font-weight: normal;
    	color: #000066;
    	text-decoration: none;
    	padding-left: 0px;
    }
    table#contact_table {
       position: relative;
       top: 30px;
       left: 70px;
       width: 350px;
       height: 250px;
       border-style: solid; 
       border-width: 1px;
       border-color: #990000;
       /*padding:15px;*/ 
       /*padding-bottom: 20px;*/ 
       /*margin-left: 150px;*/ 
       /*margin-top: 20px;*/ 
       /*margin-bottom: 20px;*/
    }
    .content {
    	font-family: "Book Antiqua", "Times New Roman", Times, serif;
    	font-size: 13px;
    	font-style: normal;
    	font-weight: normal;
    	color: #000000;
    	text-decoration: none;
            /* padding-left: 10px; */
    }
    .current {
    	color: #000000;
    }
    
    /* Regular pages */
    
    div#topRow {
       position: fixed;
       top: 0px;
       left: 0px;
       height: 88px;
       width: 776px;
       z-index: 3;
       border: 0px solid green;
       background-color: #ffffff;
    }
    div#centRow {
       position: absolute;
       width: 760px;
       top: 88px;
       left: 0px;
       z-index: 2;
       padding-left: 10px;
       /* padding-top: 5px; */
       padding-right: 5px;
       border: 0px solid yellow;
    }
    div#bottomRow {
       position: fixed;
       bottom: 0px;
       left: 0px;
       height: 22px;
       width: 776px;
       z-index: 3;
       border: 0px solid blue;
    }
    
    /* home page */
    
    div#laybox {
       position:relative; 
       left: 0px;
       top: 0px;
       width: 776px;
       height: 600px;
       z-index: 1;
    }
    div#laySitemap {
    }
    
    /* Company profile pages */
    
    div#topRow_prof {
       position: fixed;
       top: 0px;
       left: 0px;
       height: 108px;
       width: 776px;
       z-index: 3;
       border: 0px solid green;
       background-color: #ffffff;
    }
    div#centRow_prof {
       position: absolute;
       width: 760px;
       top: 108px;
       left: 0px;
       z-index: 2;
       padding-left: 10px;
       //padding-top: 5px;
       padding-right: 5px;
       border: 0px solid yellow;
    }
    div#bottomRow_prof {
       position: fixed;
       bottom: 0px;
       left: 0px;
       height: 22px;
       width: 776px;
       z-index: 3;
       border: 0px solid blue;
    }
    
    /* Start experience Popups */ 
    
    div.outer {
      position:fixed; 
      left:400px; 
      top:50%; 
      height:302px; /* IE5 5.5 gets this height */ 
      width:402px; /* IE5 5.5 gets this width */ 
      margin-left:-200px; 
      margin-top:-150px; 
      padding:0px; 
      background-color:gray; 
      border: 1px solid black; 
      z-index:7; 
      visibility: hidden;
      voice-family: "\"}\""; 
      voice-family: inherit; 
      height:300px; /* other browsers get this height */ 
      width:400px; /* other browsers get this width */ 
    } 
    */ be kind to Opera */ 
    html>body div.outer { 
       height:300px;
       width:400px; 
    }
    div.inner {
    	position: relative;
    	left: 2px;
    	top: 2px;
    	height: 296px;
    	width: 396px;
    	background-color: #ffffff;
    	border:	0px solid gray;
    	z-index: 2;
    }
    div#popup_header {
    	position: absolute;
    	left: 0px;
    	top: 0px;
    	height: 40px;
    	width: 100%;
    	margin:	0px;
    	padding: 0px;
    	background-color: #000066;
    	border-width: 0px dotted green;
    	z-index: 3;
    }
    div#popup_content {
    	/* Structural formatting */
    	position: absolute;
    	left: 0px;
    	top: 40px;
    	height: 226px;
    	width: 396px;
    	margin:	0px;
    	padding: 0px;
    	border-width: 2px solid green;
    	z-index: 8;
    	overflow: auto;
    	/* Text formatting */
    	font-family: "Book Antiqua", "Times New Roman", Times, serif;
    	font-size: 13px;
    	font-style: normal;
    	font-weight: normal;
    	color: #000000;
    	text-decoration: none;
    }
    div#popup_footer {
    	position: absolute;
    	left: 0px;
    	bottom: 0px;
    	height: 30px;
    	width: 100%;
    	margin: 0px;
    	padding: 0px;
    	background-color: #d3d3d3; 
    	border:	0px dotted red;
    	z-index: 3;
    }
    .popup_button {
    	/* Structure formatting */
    	position: absolute; 
    	bottom: 3px; 
    	left: 50%; 
    	height: 20px; 
    	width: 80px; 
    	margin-left: -40px; 
    	padding: 0px;
    	z-index: 4;
     	/* text formatting */
    	text-align: center;
    	font-family: "Book Antiqua", "Times New Roman", Times, serif;
    	font-size: 13px;
    	font-style: normal;
    	font-weight: normal;
    	color: black;
    	text-decoration: none;
    	
    }
    A.popup_button:hover {
    	color: gray;
    }
    
    /* End experience Popups */ 
    
    EM {
    	font-family: Arial, Helvetica, Verdana;
    	font-size: 11px;
    	font-style: normal;
    	font-weight: bold;
    }
    .header {
    	font-family: "Book Antiqua", "Times New Roman", Times, serif;
    	font-size: 10px;
    	font-style: normal;
    	font-weight: normal;
    	color: #000000;
    	text-decoration: none;
    }
    .left_cell {
    	padding-left: 15px;
    	color: #000066;
    }
    .link {
    	font-family: Arial, Helvetica, Verdana;
    	font-size: 10px;
    	font-style: normal;
    	color: #000066;
    	margin: 0px;
    	padding: 0px;
    	text-decoration: none;
    }
    
    p {
    	font-family: "Book Antiqua", "Times New Roman", Times, serif;
    	font-size: 13px;
    	font-style: normal;
    	font-weight: normal;
    	color: #000000;
    	text-decoration: none;
    }
    .main_title {
    	font-family: Arial, Helvetica, Verdana;
    	font-size: 15px;
    	font-style: normal;
    	font-weight: bold; 
    	color: #000066;
    	margin: 0px;
    	padding-top: 10px;
    	text-decoration: none;
    }
    .main_image {
      	float: left;
    	margin-top: 5px; 
    	margin-right: 10px; 
    	margin-bottom: 5px;
    }
    .NoMargins {
    	margin: 0px;
    	padding: 0px;
    }
    p.list_title {
    	clear: both;
    	font-weight: bold;
    }
    ul {
    	font-family: "Book Antiqua", "Times New Roman", Times, serif;
    	font-size: 13px;
    	font-style: normal;
    	font-weight: normal;
    	color: #000000;
    	text-decoration: none;
    	clear: both;
    }
    ol {
    	font-family: "Book Antiqua", "Times New Roman", Times, serif;
    	font-size: 13px;
    	font-style: normal;
    	font-weight: normal;
    	color: #000000;
    	text-decoration: none;
    	clear: both;
    }
    li {
    	font-family: "Book Antiqua", "Times New Roman", Times, serif;
    	font-size: 13px;
    	font-style: normal;
    	font-weight: normal;
    	color: #000000;
    	text-decoration: none;
    	clear: both;
    }
    .para_title {
    	color:  #000066; 
    	font-weight: bold; 
    	font-size: 14px;">
    }
    .right_cell {
    	padding-bottom: 15px;
    	color: #000066;
    }
    .sino {
    	font-family: Arial, Helvetica, Verdana;
    	font-size: 11px;
    	font-weight: bold;
    }
    .sub_head {
    	color:  #990000; 
    	font-weight: bold; 
    	font-size: 14px;
    }
    .sub_title {
    	font-family: Arial, Helvetica, Verdana;
    	font-size: 12px;
    	font-style: normal;
    	font-weight: bold; 
    	color: #000066;
    	text-decoration: none;
    }
    Experience is that thing which lets you know you've made the same mistake yet again.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The error is here:
    Code:
    .para_title {
     color:  #000066; 
     font-weight: bold; 
     font-size: 14px;">
    }
    You have an erroneous quotation mark and angle bracket!

    It should be this:
    Code:
    .para_title {
     color:  #000066; 
     font-weight: bold; 
     font-size: 14px;
    }
    That should solve the problem

    Paul

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you'd run your code through the CSS validator you could save yourself a lot of headaches.

    Here are the results of your CCS file and as you can see the error I pointed out above is at the end of a long list of warnings. Some (or all) may have an effect on your layout and should be fixed.
    Code:
    Errors
    
    URI : file://localhost/TextArea
    • Line: 0 Context : body Property scroll doesn't exist : auto
    • Line: 0 Context : div#centRow_prof Parse Error - //padding-top: 5px;
    • Line: 0 Context : padding-right Parse Error - padding-right: 5px;
    • Line: 0 Context : border Parse Error - border: 0px solid yellow;
    • Line: 0 Context : border Parse error - Unrecognized : }
    • Line: 0 Parse error - Unrecognized : */ be kind to Opera */ html>body div.outer { height:300px; width:400px; }
    • Line: 0 Context : div#popup_header Invalid number : border-widthdotted is not a width value : 0 dotted green
    • Line: 0 Context : div#popup_content Invalid number : border-widthsolid is not a width value : 2px solid green
    • Line: 0 Context : .para_title Parse Error - ;"> }
    Work your way through the above to avoid any more problems. (Shout if you don't know how to rectify them )

    Paul

  17. #17
    SitePoint Zealot
    Join Date
    Feb 2002
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul. I had actually tried validating the CSS, but the link to the download was not working. Other than the 3w.org, are there any other places I can get a CSS validator from?

    Thanks, Ben
    Experience is that thing which lets you know you've made the same mistake yet again.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I just use the w3c's css online validation. It's pretty quick, you can just cut and paste your code into the text area which I find the easiest option.

    Paul


Bookmarks

Posting Permissions

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