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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question IE is driving me nuts!!!

    Hello everyone.

    I'm a web developer and I'm working on a new css layout for my cms. I'm normally a tables guy. I really want to move to css but I'm finding it difficult to make my code cross-browser compatible. I've been pulling my hair out trying to get this layout to display in IE in someway that resembles that of Firefox.

    Anyhow I got the layout looking exactly how I want it in FireFox and am seeking help to make it look the same in IE.

    Please bear in mind I have used hacks from websites I have come across (I don't really understand what they do) only to get the layout looking like I want. Feel free to remove anything you think is unnecessary, and thank you in advance.

    Here is the code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
    <title>Header, Footer and Scrollbar</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <style type="text/css">
    /* Reset margins and paddings */
    * { margin: 0; padding: 0; }
     
    /* All browsers */
    #message, #footer {
        left            : 218px;
        right           : 8px;
    }
    #message {
    	top             : 8px; 
    	right						: 8px;
    	position        : absolute;
    	height          : 25px;
    	border					: thin solid #549FE3;
    }
    #footer {
    	height          : 20px;
    	left            : 218px;
    	border					: thin solid #549FE3;
    }
    #grid {
    	left            : 218px;
    	height          : 200px;
    	border					: thin solid #549FE3;
    }
    
    
    /* Non-IE and IE 7 */ /* could be done better using fixed positioning */
    html>body #box {
    	overflow        : auto;
    	position        : absolute;
    	top             : 253px;
    	bottom          : 38px;
    	left            : 218px;
    	right           : 8px;
    	border					: thin solid #549FE3;
    }
    html>body #grid {
    	overflow        : auto;
    	position        : absolute;
    	top             : 43px;
    	left            : 218px;
    	right           : 8px;
    	height					: 200px;
    }
    
    html>body #menu {
    	position        : absolute;
    	top             : 8px;
    	bottom          : 8px;
    	left            : 8px;
    	width           : 200px;
    	border					: thin solid #549FE3;
    }
    
    html>body #footer {
        position        : absolute;
        left            : 218px;
    		bottom					: 8px;
        right           : 8px;
    }
    
    /* IE 5.5 and IE 6 */
    
    * html      { padding: 0px; height: 100%; overflow: hidden; }
    * html body { height: 100%; }
    * html #box {
    	height: 100%;
    	overflow: auto;
    	background: yellow;
    }
    
    /* IE 5.5 */
    @media tty {
     i{content:"\";/*" "*/}}@m; * html body { padding: 100px 0; height: 100%; overflow: hidden; } * html #box { height: 100%; overflow: auto; background: lime;} /*";}
    }/* */
    </style>
    
    </head>
    
    <body>
    <div id="menu">
    	<p><strong>Navigation</strong></p>
    	<p>&nbsp;</p>
    	<p>This area will hold a menu tree for the different areas of the cms</p>
    	<p>&nbsp;</p>
    	<p>(fixed width, fluid height)</p>
    </div>
    <div id="message"><strong>Status messages appear here</strong> (fixed height, fluid width)</div>
    <div id="grid"><strong>This is a scrollable area that will typically hold a master grid, linked to the details form below</strong> (fixed height, fluid width)</div>
    
    <div id="box">
    <p><strong>This area will display the form/details of the item selected in the grib above.</strong> (fluid height, fluid width, scrollable)</p>
    <p>&nbsp;</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac odio. Vivamus venenatis. Mauris vel est. In nisi lorem, vehicula quis, gravida et, placerat et, nisi. Donec blandit interdum nisi. Integer volutpat, sapien ut ultrices rhoncus, ante elit scelerisque arcu, a egestas nulla augue ac risus. Ut ut mauris eget nibh lacinia fringilla. Vestibulum ligula diam, mattis vitae, pretium quis, lacinia eget, quam. Morbi ut sapien quis metus consectetuer ultrices. Suspendisse potenti. Nulla nonummy fringilla metus. Quisque ultrices ante ultricies tortor. Aliquam urna dui, lobortis ac, nonummy quis, fringilla non, est. Mauris vel neque nec justo commodo rutrum. Proin placerat pulvinar magna. Mauris ultricies pellentesque dui. Integer tincidunt metus scelerisque orci. In hac habitasse platea dictumst. Praesent semper quam porta mauris imperdiet vulputate.</p>
    <p>Suspendisse viverra pede vel est. Aenean tempus bibendum mi. Ut elit eros, fermentum nec, interdum ut, blandit quis, lectus. Nullam tempor. Integer quis velit vel tortor fermentum cursus. Aenean id nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam ut eros. Proin ac lacus vel nisi rhoncus lobortis. Vivamus laoreet adipiscing orci. In leo urna, mollis sed, mattis ut, vestibulum ultricies, nibh. Aliquam suscipit consequat dolor. Sed vitae nisl. Nullam vehicula porta nisl. Donec porttitor, felis a mollis vestibulum, erat dui imperdiet turpis, nec imperdiet elit turpis id enim. Aenean adipiscing sollicitudin massa. Aenean tempus sem vel mi. Pellentesque vel erat quis turpis venenatis consequat.</p>
    <p>Donec at nisi id nibh tempor vulputate. Sed lobortis mauris ac erat. Curabitur vel metus. Duis quis leo quis enim scelerisque ornare. Aenean porttitor dignissim nibh. Ut quis erat in nibh sagittis pharetra. Sed id turpis. Morbi sed risus sed tellus hendrerit bibendum. Aliquam lobortis pulvinar erat. Nam sed tellus. Etiam eleifend justo et arcu. Integer dapibus tellus et quam. Aenean et metus et sapien pretium volutpat. Suspendisse fermentum, ipsum lacinia lobortis scelerisque, elit purus fringilla nunc, id posuere erat orci et nibh. Donec ut nunc vitae mi hendrerit hendrerit. Ut facilisis fermentum pede.</p>
    <p>Nam tristique. Praesent pulvinar eros ut pede. Suspendisse molestie odio in justo. Mauris molestie elementum turpis. Donec tempor adipiscing urna. Phasellus est. Praesent in velit. Quisque scelerisque neque at ante. Phasellus ultricies. Donec est libero, euismod ultrices, adipiscing in, lacinia nec, eros. Mauris iaculis, magna vel varius blandit, arcu lacus sollicitudin sem, ullamcorper porttitor tellus nibh non sem. Phasellus non justo quis felis sagittis sodales. Nam ipsum risus, scelerisque nec, venenatis ut, feugiat ut, dui. Nunc tempus nisl ut neque. Aenean lacus. Quisque imperdiet condimentum nisi. Vivamus interdum, neque id mollis tincidunt, lacus arcu fringilla ipsum, id lobortis dui nibh vitae ligula.</p>
    <p>Maecenas molestie nunc in lacus. Morbi ligula. Nulla facilisi. Aliquam erat volutpat. Suspendisse lacinia accumsan nisi. Duis felis. Maecenas mattis adipiscing arcu. Aenean quis augue. Nunc dolor lacus, iaculis id, iaculis in, vestibulum id, leo. Etiam sagittis.</p>
    </div>
    
    <div id="footer"><strong>This is the footer area </strong>(fixed height, fluid width)</div>
    </body>
    </html>

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    First off I would wrap your div within a div.
    Second why do you use <p>&nbsp;</p>? use <br />
    Why are you using position: absolute. Float your divs.

    Do you have this uploaded where we can see it?


    BTW: you have a very different way of arranging your CSS, I like it.
    Last edited by twodayslate; 05-15-2007 at 01:43 PM.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    ^ By that he means you should wrap your whole page within a div called something like container. That way you can position the whole page where you like more easily.

    We really do need something more substantial to look at than just code. Post a link to your page if at all possible.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Goodmorning R3N3GADE,
    I much prefer to do a layout without hacks. It certainly saves a lot of problems.
    Try this for your CSS instead:
    Code:
    body {
    text-align: left;
    }
    /* Reset margins and paddings */
    * { margin: 0; padding: 0; }
     
    /* All browsers */
    #menu {
    width: 200px;
    float: left;
    margin: 8px;
    }
    #message {
    height: 25px;
    margin: 8px 8px 8px 228px;
    }
    #grid {
    height: 200px;
    margin: 8px 8px 8px 228px;
    }
    #box {
    margin: 8px 8px 8px 228px;
    	overflow: auto;
    
    }
    #footer {
    	height          : 20px;
    margin: 8px 8px 8px 228px;
    }
    
    #menu,
    #message,
    #grid,
    #box,
    #footer {
    	border: thin solid #549FE3;
    padding: 0 5px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by R3N3GADE View Post
    Anyhow I got the layout looking exactly how I want it in FireFox and am seeking help to make it look the same in IE.
    It may turn out to be quite difficult to get it working in IE6 using pure CSS.

    The main problem is that your code relies on browser support for simultaneous specification of opposing offsets for absolutely positioned elements. This is not supported in IE6.

    For example, when you simultaneously specify top and bottom offset for an absolutely positioned element, the bottom offset is ignored in IE6.

    Similarly, when you simultaneously specify the left and right offset, the right offset is ignored in the ltr writing direction. (The opposite holds for the rtl writing direction).

    You will need to find an entirely different method for IE6. Maybe you could try using a dynamic expressions. Effectively, that would mean JavaScript.

    You have really many CSS hacks. I suggest that you concentrate on one browser at a time. Create one style sheet per browser you need support for. Then, when you are finished, figure out how to deliver the correct styles to each browser. Exploiting CSS parsing bugs is not the only method. Conditional comments may be a better option.

    Finally, you may want to re-think your layout. Do you really need the page to follow the height of the viewport? This is what is giving you the trouble. But still, it is an interesting problem.


  •  

    Posting Permissions

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