SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2006
    Location
    Windsor, Berkshire
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    This shouldn't be doing this in IE?! :S

    Hi all, can't work out for the life of me why this is happening in IE, basically the sidebar is dropping down about 30px and i can't work out why! I tried removing the positioned elements as I thought that may be the problem but it isn't! Anyoe care to take a look? Much obliged

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>The portfolio website of Andrew Dover || Welcome</title>
    <link href="style.css" rel="stylesheet" type="text/css" /><!--[if IE 5]>
    <style type="text/css"> 
    /* place css box model fixes for IE 5* in this conditional comment */
    .twoColFixRtHdr #sidebar1 { width: 220px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css"> 
    /* place css fixes for all versions of IE in this conditional comment */
    .twoColFixRtHdr #sidebar1 { padding-top: 30px; }
    .twoColFixRtHdr #mainContent { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]-->
    </head>
    
    <body class="twoColFixRtHdr">
    
    <div id="container">
      <div id="header">
      <ul id="nav">
        	<li><a href="index.html">home</a></li>
            <li><a href="#" style="color:#FC0;">background</a></li><li><a href="cv.html">cv</a></li><li><a href="portfolio.html">portfolio</a></li><li><a href="contact.html" style="padding-right:18px;">contact</a></li></ul></div>
      <div id="sidebar1"><div id="side1"><img src="images/needimg.jpg" width="297" height="285" alt="need solution" /></div>
       <div id="side2">
         <p> 2009 Andy Dover. All rights reserved. [<a href="sitemap.html">site map</a>]</p>
    </div>
       <div id="side3"><h1>talk to me!</h1>
       <p>Get in touch to discuss how I can help you with all things design...</p>
       <p>T: 07851 643 759</p>
       <p>E: <a href="mailto:andrew_dover@hotmail.com">andrew_dover@hotmail.com</a></p>
       </div> 
      <!-- end #sidebar1 --></div>
      <div id="mainContent">
      <div id="logo"></div>
      <div id="sideyellow"></div>
      <div id="sideorange"></div>
        <h1>all about me...</h1>
        <p>I'm a 26 year old graphic and web designer living in Maidenhead, Berkshire. I am able to operate remotely to anywhere over the world although I can offer face to face consultancy throughout south east England. </p>
        <p>&nbsp;</p>
        <p>I have always had an interest in art and design from a very early age, starting with doodling all over walls from the age of 4 (I can still remember my mum flaming me for it!). For some reason I found certain aspects came very easily to me, especially graphical design and technical drawings in secondary school where I ended up doing work experience in an architects. Although interesting, I found this too rigid and felt a need to express myself more creatively. </p>
        <p>&nbsp;</p>
        <p>After leaving college at the age of 16 wholly unfulfilled with a Maths and IT A Level I decided to start teaching myself HTML and commissioned my first website named &quot;In the bag pets.&quot; This was designed for someone who wanted an online base from where to sell pet food products, and, although shocking by todays standards of design and useability caught the eye of a fledgling design agency - <a href="http://www.webexpectations.com" target="_blank">WebExpectations.com</a>. My time at WebExpectations thrust me into the Web design scene, with me honing my skills in HTML and Flash at an alarming rate thanks to some very good teachers. </p>
        <p>&nbsp;</p>
        <p>After 2 years at WebExpectations I became slightly disillusioned with design for a time and tried different lines of work, these ranged from the extreme polar - building and plastering, to downright bizarre - skycard testing (although it paid extremely well I could never have done a much more boring job!). Eventually though, after 3 years of blisteringly cold winters, cracked hands, and getting worked like a dog for a pittance of a wage, I found my way back into the design arena, and, after reaquanting myself with everything design related, found myself working for my current company - <a href="http://www.alite.co.uk">Alite Ltd</a>.</p>
        <p>&nbsp;</p>
        <p>Specialising in creating educational resources for schools, Alite took me on initially to design the company website, but soon saw my worth and ambition and kept me on to work on interactive resources for their products. Now, almost 3 years down the line I am in charge of creating some of Alites most adventurous products to date.</p>
        <p>&nbsp;</p>
        <h2>so why build this site? </h2>
        <p>&nbsp;</p>
        <p>Now, as I have such a passion for design again, I am taking on freelance work wherever possible in a view of starting my own consultancy, my knowledge of the internet and a general knack for getting it right with customers stands me in good stead to create brilliant websites which will inspire and impress.</p>
        <p>&nbsp;</p>
        <p>For more information about me, <a href="contact.html">contact me</a>!</p>
        <p>&nbsp;</p>
        <h2>
          <!-- end #mainContent -->
        </h2></div>
      <!-- end #container -->
    </div>
    </body>
    </html>
    and the css...
    Code:
    @charset "utf-8";
    *{
    	margin:0;
    	padding:0;
    }
    h1{
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-size:18pt;
    	font-weight:normal;
    	color:#ffffff;
    	padding-left: 9px;
    }
    p{
    	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size:9pt;
    	color: #FFF;
    }
    body  {
    	font:100% Arial, Helvetica, sans-serif;
    	background-image:url(images/bg.jpg);
    	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    	padding: 0;
    	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    	color: #000000;
    	background-color: #688A19;
    	background-repeat: repeat-x;
    	background-attachment: scroll;
    }
    .twoColFixRtHdr #container {
    	width: 700px;
    	margin: 0 auto;
    	text-align: left; /* this overrides the text-align: center on the body element. */
    } 
    
    .twoColFixRtHdr #header {
    	padding: 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    	height: 100px;
    } 
    .twoColFixRtHdr #header h1 {
    	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    }
    .twoColFixRtHdr #sidebar1 {
    	float: right; /* since this element is floated, a width must be given */
    	width: 319px; /* the background color will be displayed for the length of the content in the column, but no further */
    	padding: 0;
    	vertical-align: top;
    }
    .twoColFixRtHdr #mainContent {
    	margin: 0 319px 0 0; /* the right margin on this div element creates the column down the right 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: 20px 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    	background-image: url(images/bgmain.jpg);
    	background-color: #3E6E00;
    	background-repeat: no-repeat;
    	position: relative;
    	min-height:36em;
    } 
    .twoColFixRtHdr #footer { 
    	padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    	background:#DDDDDD; 
    } 
    .twoColFixRtHdr #footer p {
    	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    }
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { /* this class can be used to float an element left in your page */
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
    #side2 {
    	height: 80px;
    	padding: 10px;
    }
    #side3 {
    	background-color: #F60;
    	height: 80px;
    	padding: 10px;
    }
    #side1 {
    	border: 10px solid #FC0;
    	height: 285px;
    }
    #nav{
    	font-size:10pt;
    	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    	width:381px;
    	height: 100px;
    	background-color:#666;
    	background-image:url(images/navbg.jpg);
    	background-repeat:repeat-x;
    
    }
    
    #nav li{
    list-style-type:none;
    display:inline;
    
    }
    
    #nav a:link, #nav a:visited {
    	color:#FFF;
    	padding:76px 16px 6px 16px;
    	float:left;
    	width:auto;
    	text-decoration: none;
    	font-weight: bold;
    }
    #nav a:hover {
    	color:#FFF;
    	background:#0CF;
    		background-image:url(images/navhbg.jpg);
    	background-repeat:repeat-x;
    	padding:76px 16px 6px 16px;
    	float:left;
    	width:auto;
    	text-decoration: none;
    	font-weight: bold;
    }
    
    #logo {
    	position: absolute;
    	height: 306px;
    	width: 100px;
    	top: 80px;
    	left: -87px;
    	background-image: url(images/logo.jpg);
    	background-repeat: no-repeat;
    }
    #mainContent p {
    	padding-left: 10px;
    	padding-right: 10px;
    }
    #sideyellow {
    	background-image: url(images/yellowside.jpg);
    	background-repeat: no-repeat;
    	height: 33px;
    	width: 33px;
    	position: absolute;
    	left: 348px;
    	top: 272px;
    }
    #sideorange {
    	background-image: url(images/orangeside.jpg);
    	background-repeat: no-repeat;
    	height: 33px;
    	width: 33px;
    	position: absolute;
    	left: 352px;
    	top: 405px;
    }
    #side2 p {
    	color: #426600;
    }
    #side3 h1 {
    	padding: 0px;
    }
    #side3 p {
    	font-size: 7pt;
    }
    #side3 a:link, #side3 a:active, #side3 a:visited {
    	color: #712D00;
    	text-decoration: none;
    }
    #side3 a:hover {
    	color: #FFFFFF;
    	background-color: #712D00;
    	text-decoration: none;
    }
    #mainContent h2 {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	color: #E1FEAB;
    	font-size: 16pt;
    	font-weight: normal;
    	padding-left: 10px;
    }
    #print {
    	padding: 10px;
    	margin: 20px;
    	border: 1px dotted #78B900;
    }
    #print ul {
    	padding-left: 20px;
    }
    #print li{
    	list-style-image:url(images/bullet.png);
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 9pt;
    	color: #C6FF6F;
    }
    #mainContent #print p {
    	font-size: 11pt;
    	font-weight: normal;
    }
    #mainContent a:link,#mainContent a:active,#mainContent a:visited {
    	color: #3C5A01;
    	text-decoration: none;
    }
    #mainContent a:hover{
    	background-color: #3C5A01;
    	color: #fff;
    	text-decoration: none;
    }
    #side2 a:link, #side3 a:active, #side3 a:visited {
    	color:#559600;
    	text-decoration: none;
    }
    #side2 a:hover {
    	color: #FFFFFF;
    	background-color: #559600;
    	text-decoration: none;
    }
    /*form elements*/
    #dropdown{
    width:100px;
    font-size:0.8em;
    }
    #search2{
    border:1px solid #0082d1;
    font-size:11px;
    padding:4px 4px 2px 4px;
    }
    #gobtn{
    width:20px;
    font-size:1em;
    }
    #r1{
    border:1px solid #0082d1;
    font-size:11px;
    padding:2px;
    width:110px;
    }
    #r11{
    border:1px solid #0082d1;
    font-size:11px;
    padding:2px;
    width:320px;
    }
    #r2{
    border:1px solid #0082d1;
    font-size:11px;
    padding:2px;
    width:130px;
    }
    #rl1{
    border:1px solid #0082d1;
    font-size:11px;
    padding:2px;
    width:160px;
    }
    #pg{
    	padding-top:30px;
    	padding-left: 0px;
    	padding-bottom:10px;
    
    
    
    padding:right:0;
    	background-image: url(images/parentguides.jpg);
    	background-repeat: no-repeat;
    	float: left;
    	width: 90%;
    }
    
    #btn{
    padding:2px;
    }
    td {
    	padding: 5px;
    	border-bottom-style: dotted;
    	border-bottom-color: #8BA35A;
    	border-bottom-width: 1px;
    }
    .trc {
    	background-color: #72A21B;
    }
    .trc2{
    		background-color: #5E9400;
    }
    
    .trs {
    	background-color:#324D0F;
    	}
    	.text-input{
    	width: 150px;
    	border: 1px solid #8BA35A
    }
    #contact table tr td {
    	border-top-style: none;
    	border-right-style: none;
    	border-bottom-style: none;
    	border-left-style: none;
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 9pt;
    }
    Should be easy for a jedi I'll be forever in your debt!

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

    You have a rule in your iE only file that puts 30px top padding on the sidebar.

    Code:
    <!--[if IE]>
    <style type="text/css"> 
    /* place css fixes for all versions of IE in this conditional comment */
    .twoColFixRtHdr #sidebar1 { padding-top: 30px; }
    .twoColFixRtHdr #mainContent { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]-->

    Are you sure you want ie8 to see all those hacks? You should exclude it with "lt IE 8".

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2006
    Location
    Windsor, Berkshire
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lol! No wonder I didn't find it in the css file! My bad!

  4. #4
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey dude, have you tried this with any other browsers like Firefox, Safari. Might be it working with Safari.

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2006
    Location
    Windsor, Berkshire
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tried it in chrome, ff and opera... seems fine there!


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
  •