SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2007
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Template working in MOZ and not IE, HELP!

    Hi all,

    Desperately in need of help. Trying to setup a template of a site and got it working just the way I want in mozilla, but IE isn't cooperating. I've looked over the code and can't see what about it IE doesn't like but Moz is ok with. If you have a spare second and could look at the code to see if you see anything that sticks out as problematic to IE please let me know..

    I appreciate any time you can spend.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
       <title>YUI Base Page</title>
       <link rel="stylesheet" href="http://yui.yahooapis.com/2.3.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
       <!-- for default tab skin, which includes tabview-core.css and skins/sam/tabview-skin.css -->
    
    
    <style type="text/css">
    .wrap {
    	width: 820px;
    	background: #CCC url(content.jpg) repeat-y center top;
    	margin: 0 auto;
    	text-align: left;
    	
    }
    
    .footer{
    	color: #666666;
    	background: #CCC url(footer.jpg) no-repeat center top;
    	clear: both;
    	width: 820px;
    	height: 55px;
    	text-align: center;	
    	font-size: 92%;
    	margin: 0px;
    	padding: 0px;
    }
    
    body {
    	background-color: #CCC;
    	padding: 0px;
    	margin: 0px;
    }
    
    #hd {	
    	width: 820px;
    	position: relative;
    	height: 41px;
    	background: #CCC url(header2.jpg) no-repeat center top;
    	padding: 0;
    	font-size: 14px;
    	color: #FFF;
    }
    
    #bd {
    min-height: 600px;
    }
    
    #custom-doc { width:62.92em;*width:61.41em;min-width:820px; margin:auto; text-align:left; }   
       
    
    
    .roundedcornr_box_640602 {
       background: #c4ecc7 url(mygrad.gif) repeat-x top left;
    }
    .roundedcornr_top_640602 div {
       background: url(roundedcornr_640602_tl.gif) no-repeat top left;
    }
    .roundedcornr_top_640602 {
       background: transparent url(roundedcornr_640602_tr.gif) no-repeat top right;
    }
    .roundedcornr_bottom_640602 div {
       background: url(roundedcornr_640602_bl.gif) no-repeat bottom left;
    }
    .roundedcornr_bottom_640602 {
       background: transparent url(roundedcornr_640602_br.gif) no-repeat bottom right;
    }
    
    .roundedcornr_top_640602 div, .roundedcornr_top_640602,
    .roundedcornr_bottom_640602 div, .roundedcornr_bottom_640602 {
       width: 100%;
       height: 20px;
       font-size: 1px;
    }
    .roundedcornr_content_640602 { margin: 0 20px; }
    
    #banner {
     margin-left:  30px;
     margin-right: 30px;
     margin-top: 15px;
    }
    
    .menu
    {
    	background: url(bluegrad.gif) repeat-x center top;
    	width: 100%;
    	color: white;
    	font-size: 16px;
    	font-weight: bold;
    	margin:0px;
    	padding:0px;
    
    }
    
    ul#navlist
    {
    padding: 0;
    margin: 0;
    list-style-type: none;
    float: left;
    width: 100%;
    color: #fff;
    background: url(bluegrad.gif) repeat-x center top;
    }
    
    ul#navlist li { display: inline; }
    
    ul#navlist li a
    {
    float: left;
    color: #fff;
    padding: 0.2em 1em;
    text-decoration: none;
    border-right: 1px solid #fff;
    }
    
    ul#navlist li a:hover
    {
    color: #000;
    background: url(selgrad.gif) repeat-x center top;
    }
    
    #mainContent
    {
    	margin-left: 30px;
    }
    
    #navContent
    {
    	margin-right: 15px;
    }
    
    </style>
    </head>
    <body class="yui-skin-sam">
    <div class="wrap">
     <div id="custom-doc" class="yui-t4">
      <div id="hd">&nbsp;
       <div id="banner">
        <div class="roundedcornr_box_640602">
         <div class="roundedcornr_top_640602"><div></div></div>
         <div style="float: right;">other stuff</div>
         <div class="roundedcornr_content_640602" style="display: inline;">
         LOGO<br>GOES<br>HERE
         </div>
         
        </div>
        <div class="menu">
    	<ul id="navlist">
    	<li><a href="#">Home</a></li>
    	<li><a href="#">Browse&nbsp;Rewards</a></li>
    	<li><a href="#">Browse Sites</a></li>
    	</ul>
    
        		
        </div>
       </div>	<!-- end  banner -->
      </div>
      <div id="bd">
       <div id="yui-main">
        <div class="yui-b">
         <div class="yui-g" id="mainContent">
         Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body 
         Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body 
         Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body 
         </div>
        </div>
       </div>
       <div class="yui-b" id="navContent">
       NNavNa vNavN avNavNa vNavNa NavNavNa vNavNavN  gdavNav NavNa vNavNav  gNavavNav
       </div>
      </div>
      <div id="ft" class=footer>Footer is here.</div>
     </div>
    </div>
    
    </body>
    </html>
    Attached Images Attached Images

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2007
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For anyone interested, I posted a working (well broken in IE) version of the code here...

    http://www.apsquared.net/test/test.html

  3. #3
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HI I only had a very quick look: if you add position: relative and top: 150px, or whatever amount of pixels from the top the body should start from in your bd style, it seems to do the trick? In IE7 that is.

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've only tested this without images but it looks like you need to give layout to the #banner for IE6

    Code:
    * html #banner {
    	height: 1&#37;;	
    }
    This certainly makes it work the same without images in IE6 compared with Firefox so should hopefully do the trick for you

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2007
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks,

    After playing around I got it. Not sure exactly why it worked, but it did. I hate the trial and error feeling I get working with CSS.

  6. #6
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You shouldn't have to use a trial and error approach really though as even with IE6 there are certain things that we know will cause problems (even though they shouldn't).

    If you'd used the fix for IE6 that I provided then it should have fixed the problem as it looked like the banner simply wasn't expanding to contain it's children.


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
  •