Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Junior Member
    Join Date
    May 2010
    Posts
    10
    Member #
    21992
    This is my first time in here, so hello to all!

    I am creating a site and things are moving along nicely except for in IE6. I would like to get this sorted as Im sure someone will enter the site with this browser and I dont want them to leave because of a few important errors.

    I can see that certain divs are pushing others down and creating a gap, also the padding is a problem in the footer. There are a couple of screenshots taken in IE6. Also here is a link to the page.

    http://www.***x/home.html

    If anyone can point me in the right direction as to how to fix this I would appreciate it greatly. I realise that these topics have been covered greatly but while I have done my best to research this I have come up with zero.

    http://www.***/picture1.png
    http://www.***xx/picture2.png

    I have attached the code if that helps.

    Thanks all

    Code:
    /* http://meyerweb.com/eric/tools/css/reset/ */
    /* v1.0 | 20080212 */
    
    /* font face */
    
    
    @font-face {
       font-family: 'CenturyGothicRegular';
       src: url('http://www.***xx.co.uk/fonts/century_gothic-webfont.eot');
       src: local('?'), url('http://www.***xx.co.uk/fonts/century_gothic-webfont.woff') format('woff'), url('http://www.******.co.uk/fonts/century_gothic-webfont.ttf') format('truetype'), url('http://www.***xx.co.uk/fonts/century_gothic-webfont.svg#webfonto5IOqZom') format('svg');
       font-weight: normal;
       font-style: normal;
    }
    @font-face {
       font-family: 'BaskervilleMTStdRegular';
       src: url('http://www.***xx.co.uk/fonts/baskervillemtstd-regular-webfont.eot');
       src: local('?'), url('http://www.******.co.uk/fonts/baskervillemtstd-regular-webfont.woff') format('woff'), url('http://www.***xx.co.uk/fonts/baskervillemtstd-regular-webfont.ttf') format('truetype'), url('http://www.******x.co.uk/fonts/baskervillemtstd-regular-webfont.svg#webfontRKLy8lJx') format('svg');
       font-weight: normal;
       font-style: normal;
    }
    
    @font-face {
       font-family: 'BaskervilleMTStdBoldItalic';
       src: url('http://www.******.co.uk/fonts/baskervillemtstd-boldit-webfont.eot');
       src: local('?'), url('http://www.***xx.co.uk/fonts/baskervillemtstd-boldit-webfont.woff') format('woff'), url('http://www.***xx.co.uk/fonts/baskervillemtstd-boldit-webfont.ttf') format('truetype'), url('http://www.******.co.uk/fonts/baskervillemtstd-boldit-webfont.svg#webfontRKLy8lJx') format('svg');
       font-weight: normal;
       font-style: normal;
    }
    
    
    /* font face Ends */
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
       margin: 0;
       padding: 0;
       border: 0;
       outline: 0;
       font-size: 100%;
       vertical-align: baseline;
       background: transparent;
    }
    
    body {
       line-height: 1.846em;
       background-color: #b7a99d;
       color: #f2f1f1;
       text-shadow: #524339 1px 1px 2px;
    }
    
    ol, ul {
       list-style: none;
    }
    blockquote, q {
       quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
       content: '';
       content: none;
    }
    
    .clear{
       clear: both;
    }
    
    /* remember to define focus styles! */
    :focus {
       outline: 0;
    }
    
    /* remember to highlight inserts somehow! */
    ins {
       text-decoration: none;
    }
    del {
       text-decoration: line-through;
    }
    
    /* tables still need 'cellspacing="0"' in the markup */
    table {
       border-collapse: collapse;
       border-spacing: 0;
    }
    
    .opacity {
       color: rgba(0,0,255,0.2)
       width: 250px;
       height: 250px;
    }
    
    
    /* General Styles */
    p{
       font-family: CenturyGothicRegular,century gothic, verdana, sans-serif;
       font-size: 0.813em;
       line-height: 1.846em;
       color: #f2f1f1;
       text-shadow: #524339 1px 1px 2px;
       
    }
    p span{
          font-family: CenturyGothicRegular,century gothic, verdana, sans-serif;
       font-size: 1em;
       line-height: 1.846em;
       color: #83d3fe;
       text-shadow: #524339 1px 1px 2px;
    }
    
    h2{
       font-family: BaskervilleMTStdRegular;
       color: white;
       font-weight:lighter;
       line-height: 1.43em;
       font-size:2.4em;
       text-shadow: #604f44 1px 2px 5px;
    }
    
    h2 span{
       font-family: BaskervilleMTStdBoldItalic;
       font-weight: 400;
       color: #83d3fe;
    }
    
    h3{
       font-family: CenturyGothicRegular,century gothic, verdana, sans-serif;
       color: #f2f1f1;
       font-size: 0.813em;
       font-weight: 100;
       margin-top: 0.1em;
       margin-left: 0em;
       margin-bottom: 1.3em;
       text-shadow: #604f44 1px 1px 2px;
    }
    
    h3 span{
       font-family: CenturyGothicRegular,century gothic, verdana, sans-serif;
       font-weight: 300;
       color: #83d3fe;
    }
    
    h4{
       font-family: BaskervilleMTStdRegular;
       text-transform: uppercase;
       font-size: 1.6em;
       text-shadow: #604f44 1px 2px 5px;
       font-weight: 100;
    }
    
    
    a.general_link{
       text-decoration: none;
       color: #eb8c15;
       
    }
    
    .general_link:hover{
       text-decoration: none;
       color: #83d3fe; 
       
    }
    
    /* HM General Styles Ends */
    
    #header{
       background-color: transparent;
       background-image:url(../images/bg_header.jpg);
       height:74px;
       background-repeat: repeat-x;
       width:100%;
       position: relative;
       z-index: 1000;
    }
    
    #centered_header{
       width: 960px;
       margin: 0 auto;
       height: 74px;
       
    }
    
    #logo{
       background-image: url(../images/logo.png);
       margin-top: 0;
       margin-left: 0;
       width: 156px;
       height: 170px;
       float:left;
       clear: both;
       z-index: 2000;
    }
    
    ul#navbar{
          position: relative;
          margin-right: -14px;
          
          
    }
       ul#navbar li{
          display: inline;
             
    }
          ul#navbar li a{
             display: block;
             height:94px;
             text-indent: -9999px;
             float: right;
          }
          
          
          ul#navbar li a.home{
             width: 100px;
             background: url(../images/nav_home.png);
             background-position:top center;
             background-repeat: no-repeat;
          }
          ul#navbar li a.services{
             width: 100px;
             background: url(../images/nav_services.png);
             background-position:top center;
             background-repeat: no-repeat;
          }
          ul#navbar li a.projects {
             width: 100px;
             background: url(../images/nav_projects.png);
             background-position:top center;
             background-repeat: no-repeat;
          }
          ul#navbar li a.contact {
             width: 100px;
             background: url(../images/nav_contact.png);
             background-position:top center;
             background-repeat: no-repeat;
          }
          
          ul#navbar li a.home:hover, ul#navbar li a.home:active,
          ul#navbar li a.services:hover, ul#navbar li a.services:active,
          ul#navbar li a.projects:hover, ul#navbar li a.projects:active,
          ul#navbar li a.contact:hover, ul#navbar li a.contact:active{
             background-position: bottom center;
          }
          
          body#home ul#navbar li a.home,
          body#services ul#navbar li a.services,
          body#projects ul#navbar li a.projects,
          body#contact ul#navbar li a.contact{
             background-position: bottom center;
          }
          
    /* End header */
    
    /* Slide Show Begins */
    
    
    #slideshow_bg{
       background: url(../images/bg_slideshow.jpg);
       height:389px;
       background-repeat: repeat-x;
       width:100%;
       position: relative;
       padding-top: 55px;
    }
    
    
    #laptop{
       background:url(../images/ss_laptop.png) no-repeat;
       width:683px;
       height: 412px;
       margin: 0 auto;
       position: relative;
       z-index: 100;
    }
    
    #slideshow{
       
    }
    div#slideshow ul#nav_slide {
       list-style: none;
       position: relative; 
       top: 120px; 
       left:-160px;
       z-index: 20;
       width:960px;
    }
       div#slideshow ul#nav_slide li#prev {
          float: left; margin: 0 0 0 1px;
       }
       div#slideshow ul#nav_slide li#next {
          float: right; margin: 0 -24px 0 0;
       }
       div#slideshow ul#nav_slide li a {
          display: block; 
          width: 65px; 
          height: 65px; 
          text-indent: -9999px;
       }
          div#slideshow ul#nav_slide li#prev a {
             background: url(../images/prev.png);
             background-position:bottom center;
             background-repeat: no-repeat;
          }
          div#slideshow ul#nav_slide li#next a {
             background: url(../images/next.png);
             background-position:bottom center;
             background-repeat: no-repeat;
          }
          
             div#slideshow ul#nav_slide li#prev a:hover {
             background: url(../images/prev.png);
             background-position:top center;
             background-repeat: no-repeat;
          }
          div#slideshow ul#nav_slide li#next a:hover {
             background: url(../images/next.png);
             background-position:top center;
             background-repeat: no-repeat;
          }
             
    
       div#slideshow ul#slides {
          list-style: none;
       }
          div#slideshow ul#slides li {
             margin: 0 0 20px 0;
          }
    
    
    div#slideshow ul#slides {
          list-style: none;
          width: 560px;
          height:360px;
          position: absolute;
          display: block;
          right:30px;
          top:27px;
          background: transparent;
    }
          div#slideshow ul#slides li {
          width:496px;
          height:309px;
    }
    
    /* Slide Show Ends */
    
    /* Index Text Container Begins */
    
    #index_text_bg{
       background:url(../images/bg_index_grain.jpg) repeat-x;
       width:100%;
       height: 650px;
       z-index: 220;
       margin-top: -56px;
    }
    #text_container{
       margin: 0 auto;
       width: 960px;
       position: relative;
       
    }
    #text_intro{
       width:960px;
       padding-top:130px;
       position: relative;
    }
    p.index{
       font-family: CenturyGothicRegular,century gothic, verdana, sans-serif;
       font-size: 0.813em;
       line-height: 1.846em;
       color: #f2f1f1;
       text-shadow: #524339 1px 1px 2px;
       padding-top: 20px;
       
    }
    
    img.icon{
       padding-right: 10px;
       margin-bottom: -3px;
       position: relative;
       z-index: 5000
    }
    
    img.footer_icon{
       padding-right: 10px;
       margin-bottom: -3px;
       height:27px;
       position: relative;
       z-index: 5000
    }
    #available{
       background:url(../images/icon_available.png) no-repeat;
       width:143px;
       height: 142px;
       position: absolute;
       z-index: 500;
       margin-top: 100px;
       margin-left: 590px;
    }
    
    #bio{
       background:url(../images/mini_bio.png) no-repeat;
       width:309px;
       height: 184px;
       position: absolute;
       z-index: 400;
       margin-top: 140px;
       margin-left: 655px;
    }
    /* Index Text Container Ends */
    
    /*Footer Begins */
    #footer_bg{
       background:url(../images/bg_footer.jpg) repeat-x;
       width:100%;
       height: 453px;
       padding-bottom: 0px;
       padding-top: 0px;
       
    }
    #mainfooter_centered{
       width:960px;
       margin: 0 auto;
       padding-top: 2.5em;
    }
    #left{
       width: 280px;
       height: 370px;;
       float: left;
       border-right: solid;
       border-color: #7d6b5e;
       border-width: thin;
       padding-right: 10px;
       
    }
    
    #middle{
       width: 280px;
       height: 370px;
       float: left;
       border-right: solid;
       border-color: #7d6b5e;
       padding-right: 40px;
       padding-left: 30px;
       border-width: thin;
    }
    
    #right{
       width: 280px;
       height: 370px;
       float: left;
       padding-left: 30px;
    }
    
    #dark_footer{
       background:url(../images/bg_footer_grain.jpg) repeat-x;
       width:100%;
       height: 135px;
       position: absolute;
       bottom: 0: 
    }
    #darkfooter_centered{
       width: 960px;
       margin: 0 auto;
       padding-top: 25px;
       font-size: 0.94em;
    }
    /*Contact Area*/
    
    #contact-area {
       width: 300px;
       margin-top: 10px;
    }
    
    p.footer{
       font-family: CenturyGothicRegular,century gothic, verdana, sans-serif;
       font-size: 0.813em;
       line-height: 1.846em;
       color: #000;
       text-shadow: #7d6b5e 1px 1px 2px;
    }
    
    #contact-area input, #contact-area textarea {
       padding: 3px;
       width: 250px;
       font-family: CenturyGothicRegular,century gothic, verdana, sans-serif;
       font-size: 0.8em;
       color: #eb8c15;
       margin: 0px 0px 0px 0px;
       border: 1px solid #ccc;
    }
    
    #contact-area textarea {
       height: 80px;
       margin-bottom: 15px;
       background-color: #7d6b5e;
       background-image: url(../images/bg_contact_message.jpg);
       background-repeat: no-repeat;
    }
    
    #contact-area textarea:focus, #contact-area input:focus {
       border: 1px solid #7e6c5f;
    }
    
    #contact-area input.submit-button {
       width: 100px;
       float: left;
       background-image: url(../images/bg_contact_send.jpg);
       font-family: CenturyGothicRegular,century gothic, verdana, sans-serif;
       font-size: 0.813em;
       color: #f2f1f1 1px 2px 3px;
       cursor: pointer;
       
    }
    #contact-area input#Name {
       background-image: url(../images/bg_contact_name.jpg);
       background-color: #7e6c5f
    }
    #contact-area input#Email {
       background-image: url(../images/bg_contact_name.jpg);
       background-color: #7e6c5f
    }
    
    label {
       float: left;
       text-align: left;
       margin-right: 0px;
       width: 100px;
       padding-top: 10px;
       font-size: 0.813em;
       color:#f2f1f1 1px 1px 3px;
       font-family: CenturyGothicRegular,century gothic, verdana, sans-serif;
    }
    
    /*Contact Area Ends*/
    
    /*Testimonial Area Begins*/
    
    #testimonial{
          background-image: url(../images/bg_testimonial.png);
          height: 284px;
          width: 292px;
          background-repeat: no-repeat;
          margin-top: 30px;
          margin-left: -2px;
    }
    
    p.testimonial{
       padding: 25px 25px 25px 25px;
       font-family: CenturyGothicRegular,century gothic, verdana, sans-serif;
       text-shadow: #604f44 1px 1px 2px;
       color: black;
       font-size: 0.9em;
    }
    /*Testimonial Area Ends*/
    
    /*Tweet Area Begins*/
    
    #twitter{
          background-image: url(../images/bg_twitter.png);
          height: 284px;
          width: 292px;
          background-repeat: no-repeat;
          margin-top: 30px;
          margin-left: -2px;
          overflow: hidden;
       }
    #twitter ul#twitter_update_list{
       padding: 21px 30px 25px 27px;
       height: 190px;
       width: 250px;
       overflow: hidden;
    }
       #twitter ul {
          list-style: none; 
          
          color: black;
          font-size: 0.95em;
          line-height: 1.4em;
       }
          
          #twitter ul li {
          padding-top: 10px;
    }
             #twitter ul li a {
                display: block;
                font-family: CenturyGothicRegular,century gothic, verdana, sans-serif;
                font-size: 0.7em;
                color: #fff;
                
             }
                #twitter ul li a:hover { 
                color: #eb8c15;
                font-size: 0.7em;
                 }
    
          #twitter ul li span {
             font-family: CenturyGothicRegular,century gothic, verdana, sans-serif;
                font-size: 0.9em;
                color: #000;
                
    
          }
             #twitter ul li span a {
                font-family: CenturyGothicRegular,century gothic, verdana, sans-serif;
                font-size: 0.7em;
                color: #fff;
    
             }
    
    /*Tweet Area Ends*/

  2.  

  3. #2
    Junior Member petew86's Avatar
    Join Date
    Apr 2010
    Location
    Australia, Gold Coast
    Posts
    12
    Member #
    21800
    Im currently using Google Chrome, and there is an issue with the contact form being offset at the bottom. You may wish to play around with z-index and absolute positioning, in theory should fix it. I tend to use margins with the absolute positioning rather than pixel point. Works for me at least lol. Overflow set to hidden has cleared up gapping divs for myself in the past, although its IE we are talking about here.

  4. #3
    Junior Member
    Join Date
    May 2010
    Posts
    10
    Member #
    21992
    Thanks pete, Ill try the overflow thing.

    I know about the contact form, its fine I just didnt have time to finish what I was doing yesterday,

    cheers
    nathan

  5. #4
    Junior Member
    Join Date
    Jun 2010
    Posts
    13
    Member #
    22297
    Aren't most developers not supporting IE 6 anymore?

  6. #5
    WDF Staff MikeB's Avatar
    Join Date
    Jun 2010
    Location
    Lincolnshire, UK
    Posts
    88
    Member #
    22274
    Quote Originally Posted by simonb89
    Aren't most developers not supporting IE 6 anymore?
    I know I'm not, what's the point in all these new technologies / methods coming out if we have to resort to fall back methods or even using ie6 (or even ie in general) stylesheets.
    Waste of time and effort which could be easily better spent elsewhere.

    So yeah, I'd say don't worry about ie6, the more we keep trying to support the less of an incentive it is for people to upgrade!
    Mike Barlow
    WDF Co-Owner

    Need help? PM Me!

  7. #6
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    I agree. I wrote a post on this about 6 months ago, basically saying this:

    "It is OUR fault people still have IE6! If our sites still work in IE6, then people will continue to use it!"

    The other thing is that some people don't know there are different browsers or that they need to update their browser. They are computer illiterate and need to be educated.

    I'm done with it. Demographic or not.

  8. #7
    WDF Staff Wired's Avatar
    Join Date
    Apr 2003
    Posts
    7,656
    Member #
    1234
    Liked
    137 times
    Windows updates nags about IE, so their own ignorance is constantly challenged in that respect.
    The Rules
    Was another WDF member's post helpful? Click the like button below the post.

    Admin at houseofhelp.com

  9. #8
    Junior Member
    Join Date
    Jul 2005
    Posts
    6
    Member #
    10800
    Try this:
    * html #laptop {display: inline;}

    Not sure will this help, but it's my first idea for fixing your problem.

  10. #9
    Senior Member paintingtheweb's Avatar
    Join Date
    Jul 2007
    Location
    Las Vegas
    Posts
    128
    Member #
    15503
    Maybe it's just me but I'm not seeing any issues in the screenshots you have up (nice design btw).

  11. #10
    Member WPExplorer's Avatar
    Join Date
    Apr 2010
    Location
    USA
    Posts
    89
    Member #
    21716
    Why would you be worrying about IE6?

    hopefully you are just selling the "design" aspect of website development because if you are planning to design and code websites for businesses and you are having trouble with CSS padding then there is a bigger issue here.

    On a good note: Your design is really beautiful


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:04 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com