SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    North Vancouver
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    No dice in internet explorer...

    Well... basically the problem is that the site I designed views like crap in IE, and I was just wondering if it was something that could be fixed.

    www.fizix.org/temp/index.html
    www.fizix.org/temp/styles.css

    Thanks for any help.
    Qest

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For some reason I can't download your CSS file, but it looks as if you've borked the centering declarations. It should look something like this:
    HTML Code:
    body {
    text-align: center;
    }
    
    #container {
    margin: 0 auto;
    width: 500px;
    text-align: left;
    }

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

    Ie won't position using top, bottom etc to set its dimensions. Ie only likes width and height so your layout won't work at all I'm afraid.

    Have a look at my FAQ on 100% height if you want a footer. Also look at the thread on floats because of the 3 pixel jog.

    Buddy was also right in your centereing being out also. Heres the code tidied up and most of the answers are in the FAQ thread so read that first and then ask questions later.

    You will also need to do a couple of the box model hacks although I've eliminated some by taking out widths where not needed.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>CABC</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    /* commented backslash hack v2 \*/ 
    html, body{height:100%;} 
    /* end hack */ 
    body {
    margin: 0px;
    padding: 0px;
    text-align:center;
    min-width:802px;/*for mozilla*/
    }
    .header_logo {
    background-image:url(http://www.fizix.org/temp/logo.png);
    background-repeat: no-repeat;
    height: 128px;
    width: 400px;
    float: right;
    }
    .header_title {
    background-image:url(http://www.fizix.org/temp/name.png);
    background-repeat: no-repeat;
    height: 128px;
    width: 500px;
    position: absolute;
    }
    .header {
    height: 128px;
    background-color: #99CC99;
    border: 1px solid #006600;
    background-image: url(http://www.fizix.org/temp/header.png);
    }
    .footer {
    height: 30px;
    line-height:30px;
    background-color: #99CC99;
    border-top: 1px solid #006600;
    border-bottom:1px solid #006600;
    position: absolute;
    bottom: 0px;
    background-image: url(http://www.fizix.org/temp/footer.png);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #000000;
    text-align: center;
    width:100%;
    }
    .navigation_title {
    background-color: #99CC99;
    border: 1px solid #006600;
    height: 20px;
    margin: 1px;
    text-align: right;
    background-image: url(http://www.fizix.org/temp/navigation_title.png);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #FFFFFF;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    font-variant: small-caps;
    }
    .navigation_content {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-align: left;
    background-color: #F2F2F2;
    background-image: url(http://www.fizix.org/temp/greybg1.png);
    background-repeat: repeat-y;
    background-position: left;
    border: 1px solid #006600;
    margin: 1px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    }
    .navigation {
    width: 200px;
    float: right;
    }
    * html .navigation {margin-left:-3px;}/* 3 pixel jog*/
    .main {
    border: 1px solid #006600;
    background-color: #EAEAEA;
    padding-bottom:30px;/*room for footer*/
    }
    #mainwrap { margin-right: 202px;}
    /* commented backslash mac hiding hack \*/ 
    * html #mainwrap {height:1%;margin-right:197px} 
    * html .main {height:1%}
    /* end hack */ 
    .box_title {
    border: 1px solid #006600;
    background-color: #99CC99;
    position: relative;
    margin-top: 1px;
    margin-left: 1px;
    height: 20px;
    text-align: left;
    background-image: url(http://www.fizix.org/temp/box_title.png);
    background-repeat: no-repeat;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #FFFFFF;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    font-variant: small-caps;
    }
    .box_content {
    text-align: left;
    border: 1px solid #006600;
    position: relative;
    margin-top: 1px;
    margin-left: 1px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #F2F2F2;
    background-image: url(http://www.fizix.org/temp/greybg2.png);
    background-repeat: repeat-y;
    background-position: right;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    }
     
    #center {
    position:relative;
    width:80%;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
    min-height:100%;
    border: 1px solid #006600;
    background-color: #EAEAEA;
    }
    * html #center {height:100%}
    </style>
    </head>
    <body>
    <div id="center"> 
    <div class='header'> 
    	<div class='header_logo'></div>
    </div>
    <div class='main'> 
    	<div class='navigation'> 
    	 <div class='navigation_title'><span>Navigation</span></div>
    	 <div class='navigation_content'>Link #1</div>
    	</div>
    	<div id="mainwrap"> 
    	 <div class='box_title'>Welcome</div>
    	 <div class='box_content'>CSS allows complete and total control over the 
    		style of a hypertext document. The only way this can be illustrated in 
    		a way that gets people excited is by demonstrating what it can truly be, 
    		once the reins are placed in the hands of those able to create beauty 
    		from structure. To date, most examples of neat tricks and hacks have been 
    		demonstrated by structurists and coders. Designers have yet to make their 
    		mark. This needs to change.</div>
    	 <div class='box_title'>Welcome</div>
    	 <div class='box_content'>CSS allows complete and total control over the 
    		style of a hypertext document. The only way this can be illustrated in 
    		a way that gets people excited is by demonstrating what it can truly be, 
    		once the reins are placed in the hands of those able to create beauty 
    		from structure. To date, most examples of neat tricks and hacks have been 
    		demonstrated by structurists and coders. Designers have yet to make their 
    		mark. This needs to change. CSS allows complete and total control over 
    		the style of a hypertext document. The only way this can be illustrated 
    		in a way that gets people excited is by demonstrating what it can truly 
    		be, once the reins are placed in the hands of those able to create beauty 
    		from structure. To date, most examples of neat tricks and hacks have been 
    		demonstrated by structurists and coders. Designers have yet to make their 
    		mark. This needs to change. CSS allows complete and total control over 
    		the style of a hypertext document. The only way this can be illustrated 
    		in a way that gets people excited is by demonstrating what it can truly 
    		be, once the reins are placed in the hands of those able to create beauty 
    		from structure. To date, most examples of neat tricks and hacks have been 
    		demonstrated by structurists and coders. Designers have yet to make their 
    		mark. This needs to change.</div>
    	</div>
    </div>
    <div class='footer'>Design Copyright 2004</div>
    </div>
    </body>
    </html>
    Now looks the same in ie and firefox and the footer doesn't overlap the content as yours did

    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
  •