SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26
  1. #1
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Layout falling apart in ie6

    Hi everyone,

    I have a layout that works perfectly in internet explorer 7 and 8 but it seems to be falling apart a bit in ie6.

    http://files.officelinkonline.com.au/test/

    I wondered if anyone could take a quick look to see what the problem might be. I'm not sure if it's a double margin problem. I'm using the ie7-js script which fixes transparency issues in this browser but apparently it also fixes the double margin bug so I'm not sure that that's the problem.

    If anyone has any idea what the issue might be, could you let me know.

    As always, appreciate the assistance.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,I haven't looked at the code yet but I see that IE6 is showing a missing image icon which is probably the blank image that most pngfix solutions require. Check whether you have missed this out (and whether your script requires it).

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Ignore the above - you do have a missing image (/images/consumer_flash_static.jpg) but its not from the pngfix.

    The problem in IE6 is the double margin bug on the floats (see faq on floats) and the fact that you have placed inner elements inside info-consumer which are the same width as the parent but you have added 20px margins to them making them 40px too big.

    add/change as follows:

    Code:
    * html div#nav_main {top: 260px}/* not sure why this is 10px out but there's probably a reason*/
    
    div#content {
        background-color: rgb(22,50,92);
        min-height: 476px;
        overflow: auto;
            width:100%;
    }
    
    div#content_main {
        width: 696px;
        min-height: 436px;
        margin: 20px;
        float: right;
        background-color: #fff;
            display:inline;
    }
    div#flash {
        width: 318px;
        height: 396px;
        margin: 20px;
        float: left;
            display:inline;
    }
    div#info_consumer {
        width: 318px;
        min-height: 396px;
        float: right;
        margin-right: 20px;
        font-size: 12px;
            display:inline;
    }
    div#info_wrapper_top {
        width: 318px;
        height: 188px;
        margin: 20px 0 0 0;
    }
    div#info_wrapper_bottom {
        width: 318px;
        height: 188px;
        margin: 20px 0 0 0;
    }

  4. #4
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much for that - now I know about the double margin bug.

    Could I ask another question? As mentioned before I'm using the ie7-js script to fix transparency problems on the page for ie6. I have some links in the sidebar with some images in the background. I'm also using a:hover for some rollover effects, eg.

    Code:
    div#sidebar li#formal a {
        display: block;
    	background: url(../images/formal_btn-trans.png) no-repeat top center;
        width: 148px;
        height: 53px;
    }
    div#sidebar li#formal a:hover {
    	    height: 53px;
        background-position: center -53px;
    	background-image: url(../images/formal_btn-trans.png);
        background-repeat: no-repeat;
    }
    It all works perfectly well in all browsers except ie6. When you hover in this browser, the image all gets squashed into the <a> tag even though I've created a rule that should offset it -53px - just showing the rollover portion of the image.

    Is this another bug in ie6 and if so, is there a workaround? Or could it be a transparency issue that's not fixed by the script I'm using.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hover changes for png images using the position property don't usually work for IE6. For ie6 you would need two different images and swap the whole image on hover.

    I didn't check which png script you were using but the one I usually use is this one.

  6. #6
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hover changes for png images using the position property don't usually work for IE6. For ie6 you would need two different images and swap the whole image on hover.

    I didn't check which png script you were using but the one I usually use is this one.
    I had to create separate images for ie6 (bit of a pain) as you suggested and this has worked so thank for that.

    I used the code at the following address:

    http://code.google.com/p/ie7-js/

    Since there was background repeat transparent images in the layout the code fixed this. I'm not sure if the twinhelix code supports tiling for transparent images, does it?

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It supports every kind of image . I wouldn't use that IE7 js code. It can massively slow down your site and there are a few quirks with it
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You know the page in question has a semi-transparent png image loading over the top of another image which gives the illusion that the image behind the semi-transparent one is fading to transparency. Currently, the fully opaque image is loading first and then the semi-transparent one. This isn't a good look because I wanted the viewer to see the effect of the transparency right from the beginning. Is there a way to force the semi-transparent image to load before the opaque one? Would the twinhelix code ensure this?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    If you are talking just about IE then no the filter image will always load afterwards.

    Why don't you just use a single transparent image instead of 2 if it worries you? Obviously that won't allow you to change the image without creating another transparent one.

  10. #10
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    If you are talking just about IE then no the filter image will always load afterwards.

    Why don't you just use a single transparent image instead of 2 if it worries you? Obviously that won't allow you to change the image without creating another transparent one.
    I can't believe I didn't think of using just one image in the first place. I've actually got 3 images making up that top banner. This would have simplified the layout so much. If I do make just the one and say put it in the body tag, will this affect the sticky footer? I mean I'd be removing these elements which are currently holding all those images:

    <div id="fullWidthHeader">
    <div id="tile_trans">
    <div id="inner"> </div>
    </div>
    </div>

    I'd also be removing fullWidthFooter_inner, ie. inside fullWidthFooter as below:

    </div>
    <div id="fullWidthFooter">
    <div id="fullWidthFooter_inner"> </div>
    </div>

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Putting an image on the body element won't affect the sticky footer whatsoever . It's just an image after all.

    If the fullWidthHeader contains the border-top (or whatever) equal to the footers height/the negative top margin on the wrapper element (or container) then that will pose a problem.

    Otherwise let it kick the bucket .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Putting an image on the body element won't affect the sticky footer whatsoever . It's just an image after all.

    If the fullWidthHeader contains the border-top (or whatever) equal to the footers height/the negative top margin on the wrapper element (or container) then that will pose a problem.

    Otherwise let it kick the bucket .
    I just found that I only needed to adjust the negative top margin of the outerWrapper then everything worked.

    Thanks again for all the help.

  13. #13
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry to come back to this. Just regarding the sticky footer, I noticed that I had to adjust the margin-top in the following style rule:

    Code:
    div#outerWrapper {
        min-height:100%;
        background-color: transparent;
        margin: 0 auto 0;
        margin-top:-260px;
        text-align: left;
        width: 900px;
      position: relative;
        z-index: 3;
    }
    And then I had to adjust the top setting in the following style rules to get it to work:

    Code:
    div#branding {
        position: relative;
        height: 124px;
        padding-top: 260px;
    }
    
    div#nav_main {
        position: absolute;
        top: 350px;
        left: 260px;
        bottom: 0;
        right: 0;
        background: url(../images/nav_grad.jpg) repeat-x 0 0;
        z-index:99
    }
    
    div#nav_sub {
        position: absolute;
        top: 253px;
        left: 570px;
        z-index:99;
        color: #00274c;
    }
    The only problem with this is that for it to work it depends on the height of the outerWrapper div. So even though I got it to work on the home page, on some of the inner pages where the div expands due to there being more content, there's still some white space below the footer on these pages. So does that mean that I have to create different style rules for all these different pages in order for the sticky footer to work on all of them? Surely there must be an easier way to do this?

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, the point of a sticky footer is to stick to teh bottom of the browser if there isn't enough content. If there is enough content then it will push the footer down.

    The inners of the structure of the sticky footer code (where the content is) can't be absolute positiioned. It gets removed from the flow of the document and thus broken easily .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  15. #15
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But the following two elements need to be positioned relative to the outerWrapper:

    div#nav_main {
    position: absolute;
    top: 350px;
    left: 260px;
    bottom: 0;
    right: 0;
    background: url(../images/nav_grad.jpg) repeat-x 0 0;
    z-index:99
    }

    div#nav_sub {
    position: absolute;
    top: 253px;
    left: 570px;
    z-index:99;
    color: #00274c;
    }

    I can't do this any other way except with absolute positioning. So does that mean this layout is impossible if I want a sticky footer to work on all pages?

    http://files.officelinkonline.com.au/test

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It doesn't matter that you have absolutely placed the above 2 elements because they are not interrupting the normal flow of the page.

    You shouldn't need to change anything as the sticky footer height and the negative margin are the only things that should match and will never change.

    The page is always a minimum of 100&#37; high but will grow as required when there is more content and the footer will move down accordingly like a normal footer.

    It makes no difference what content you add. On pages where there is not content the sticky footer stick to the bottom of the viewport. On longer pages it sist at the bottom of the document.

    Now that you have removed the images from the top you can simplify the page a bit and use a negative bottom margin instead and that will allow the footer to overlap a bit as you seem to have it too far away.

    This is the revised code.

    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>Untitled</title>
    <link href="css/screen.css" rel="stylesheet" type="text/css" />
    <style>
    /* Normalizes margin, padding */
    html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
        margin : 0;
        padding : 0;
    }
    /* Normalizes font-size for headers */
    h1, h2, h3, h4, h5, h6 {
        font-size : 100%;
    }
    /* Removes list-style from lists */
    ol, ul {
        list-style : none;
    }
    /* Normalizes font-style and font-weight to normal */
    address, caption, cite, code, dfn, em, strong, th, var {
        font-style : normal;
        font-weight : normal;
    }
    /* Removes list-style from lists */
    table {
        border-collapse : collapse;
        border-spacing : 0;
    }
    /* Removes border from fieldset and img */
    fieldset, img {
        border : 0;
    }
    /* Left-aligns text in caption and th */
    caption, th {
        text-align : left;
    }
    /* Removes quotation marks from q */
    q:before, q:after {
        content :'';
    }
    /*---------site colours--------------
    
    beige: #ded5b3;
    navy: #00274c
    
    */
      
    html, body {
        height:100%; /* for sticky footer*/
    }
    body {
        background-color: #fff;
        color: #00274c;
        font: 75%/1.3 Arial, Helvetica, sans-serif;
        text-align: center;
        position: relative;
        background: url(http://files.officelinkonline.com.au/test/images/top_repeat.jpg) repeat-x;
    }
    html {
        min-width: 1000px
    }
    /*Opera Fix*/
    body:before {/* for sticky footer*/
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;/* - negate effect of float*/
    }
    #outerWrapper:after {/* for sticky footer – instead of using display table for ie8*/
        clear:both;
        display:block;
        height:1%;
        content:" ";
    }
    div#outerWrapper {
        min-height:100%; /* for sticky footer*/
        background-color: transparent;
        margin: 0 auto 0;
        margin-bottom:-240px;/* for sticky footer*/
        text-align: left;
        width: 900px;
        /*min-height: 476px;*/
      position: relative;
        z-index: 3;
    }
    * html #outerWrapper {
        height:100%; /* for sticky footer */
    }
    /*h2, h3, h4, p, ul, { 
    margin : 0 20px .75em; }
    */
    h2, h3, h4 {
        font-weight : bold;
    }
    h3 {
        font-weight : normal;
    }
    strong {
        font-weight: bold;
    }
    p {
        font-size : 100%;
        padding-bottom: 10px;
    }
    /*---------------------Links---------------------*/
    
    a {
        color: #00274c;
        text-decoration: none;
    }
    a:visited {
        color: #00274c;
    }
    a:focus, a:hover, a:active {
        color: #ded5b3;
    }
    ul#nav_bar a:link, ul#nav_bar a:visited {
        color: #ded5b3;
    }
    ul#nav_bar a:hover {
        color: #fff;
    }
    div#nav_sub ul#nav_bar a:hover {
        color: #fff;
    }
    /*---------------------Branding---------------------*/
    
    div#branding {
        position: relative;
        height: 124px;/*padding-top: 260px;  for sticky footer*/
    }
    div#branding h1 {
        width: 224px;
        height: 114px;
        background: url(http://files.officelinkonline.com.au/test/images/kc_logo.png) no-repeat left bottom;
        margin-bottom: 10px;
    }
    div#branding h1 a {
        display: block;
        width: 224px;
        height: 124px;
        text-indent: -9999px;/*outline: none;*/
    }
    /*---------------------Main Navigation---------------------*/
    
    
    div#nav_main {
        position: absolute;
        top: 90px;
        left: 260px;
        bottom: 0;
        right: 0;
        background: url(http://files.officelinkonline.com.au/test/images/nav_grad.jpg) repeat-x 0 0;
        z-index:99
    }
    ul#nav_bar {
        padding-left: 20px;
    }
    ul#nav_bar li {
        display: inline;
        width: auto;
        list-style: none;
        margin-right: 0.5em;
        padding-right: 0.75em;
        border-right: 1px solid #fff;
        font-weight: bold;
        text-align: center;
    }
    ul#nav_bar a {
        line-height: 35px;
        font-weight: normal;
        color: #00274C;
        text-decoration: none;
    }
    ul#nav_bar li.last {
        border-right: 0;
    }
    div#nav_main h2 {
        position: absolute;
        top: -9999px;
    }
    /*---------------------Sub Navigation---------------------*/
    
    div#nav_sub {
        position: absolute;
        top: -7px;
        /*left: 368px;*/
        left: 570px;
        z-index:99;
        color: #00274c;
    }
    /*ul#nav_bar {
    padding-left: 20px;
    }
    */
    
    div#nav_sub ul#nav_bar li {
        display: inline;
        width: auto;
        list-style: none;
        margin-right: 0.5em;
        padding-right: 0.75em;
        border-right: 1px solid #fff;
        font-weight: bold;
        text-align: center;
    }
    div#nav_sub ul#nav_bar a {
        line-height: 35px;
        font-weight: normal;
        color: #00274c;
        text-decoration: none;
    }
    div#nav_sub ul#nav_bar li.last {
        border-right: 0;
    }
    div#nav_sub h2 {
        position: absolute;
        top: -9999px;
    }
    /*---------------------Supplementary Navigation---------------------*/
    
    div#nav_supp {
        width:100%;
        position: absolute;
        top:0;
        left:0;
        z-index:99;
    }
    div#nav_supp h4 {
        text-indent: -9999px;
    }
    div#nav_supp ul li {
        text-indent: -9999px;
    }
    div#nav_supp li#site_entry a {
        position: absolute;
        left: 0px;
        top: 280px;
        display: block;
        background: url(http://files.officelinkonline.com.au/test/images/site_entry_btn.gif) no-repeat top left;
        width: 30px;
        height: 127px;
        z-index:99;
    }
    div#nav_supp li#business_site a {
        position: absolute;
        top: 280px;
        right: 0px;
        display: block;
        background: url(http://files.officelinkonline.com.au/test/images/consumer_site_btn.gif) no-repeat top left;
        width: 30px;
        height: 127px;
        z-index:99;
    }
    div#nav_supp li#consumer_site a {
        position: absolute;
        top: 280px;
        right: 0px;
        display: block;
        background: url(http://files.officelinkonline.com.au/test/images/business_site_btn.gif) no-repeat top left;
        width: 30px;
        height: 127px;
        z-index:99;
    }
    /*---------------------Content---------------------*/
    
    
    div#content {
        background-color: rgb(22,50,92);
        min-height: 476px;
        overflow: auto;
    }
    div#content_main {
        width: 696px;
        min-height: 436px;
        margin: 20px;
        float: right;
        background-color: #fff;
    }
    div#sidebar {
        width: 164px;
        min-height: 456px;
        float: left;
        background-color: #00274c;
        background-image:url(http://files.officelinkonline.com.au/test/images/sidebar_fade.jpg);
        background-repeat: no-repeat;
        background-position: left bottom;/*background-image: url(http://files.officelinkonline.com.au/test/images/pattern.gif);
        background-repeat: repeat;
        background-position: left top;*/
    }
    div#sidebar h3 {
        height: 40px;
        text-indent: -9999px;
        background: url(http://files.officelinkonline.com.au/test/images/sidebar_h3.jpg) no-repeat 0 0;
    }
    div#sidebar ul#consumer_nav li {
        text-indent: -9999px;
        padding-bottom: 12px;
    }
    div#sidebar li#formal a {
        display: block;
        background: url(http://files.officelinkonline.com.au/test/images/formal_btn.png) no-repeat top center;
        width: 164px;
        height: 53px;
    }
    div#sidebar li#formal a:hover {
        background-position: center -53px;
        background-image: url(http://files.officelinkonline.com.au/test/images/formal_btn.png);
        background-repeat: no-repeat;
    }
    div#sidebar li#formal {
        padding-top: 10px;
    }
    div#sidebar li#boys {
        padding-bottom: 12px;
    }
    div#sidebar li#suits a {
        display: block;
        background: url(http://files.officelinkonline.com.au/test/images/suits_btn.png) no-repeat top center;
        width: 164px;
        height: 53px;
    }
    div#sidebar li#suits a:hover {
        background-position: center -53px;
        background-image: url(http://files.officelinkonline.com.au/test/images/suits_btn.png);
        background-repeat: no-repeat;
    }
    div#sidebar li#leather a {
        display: block;
        background: url(http://files.officelinkonline.com.au/test/images/leather_btn.png) no-repeat top center;
        width: 164px;
        height: 53px;
    }
    div#sidebar li#leather a:hover {
        background-position: center -53px;
        background-image: url(http://files.officelinkonline.com.au/test/images/leather_btn.png);
        background-repeat: no-repeat;
    }
    div#sidebar li#boys a {
        display: block;
        background: url(http://files.officelinkonline.com.au/test/images/boys_btn-trans.png) no-repeat top center;
        width: 164px;
        height: 53px;
    }
    div#sidebar li#boys a:hover {
        background-position: center -53px;
        background-image: url(http://files.officelinkonline.com.au/test/images/boys_btn-trans.png);
        background-repeat: no-repeat;
    }
    div#garment_display {
        width: 664px;
        height: 198px;
        margin: 20px 12px 10px 20px;
        background: url(http://files.officelinkonline.com.au/test/images/garment_display.jpg) no-repeat 0 0;
    }
    div#garment_display h2 {
        text-indent: -9999px;
    }
    div#flash {
        width: 318px;
        height: 396px;
        margin: 20px;
        float: left;
    }
    div#info_consumer {
        width: 318px;
        min-height: 396px;
        float: right;
        margin-right: 20px;
        font-size: 12px;
    }
    div#info_consumer p {
        margin: 0;
        padding: 0;
    }
    div#info_consumer p#learn {
        paddong-top: 5px;
    }
    div#info_wrapper_top {
        width: 318px;
        height: 188px;
        margin: 20px 20px 0 0;
    }
    div#info_wrapper_top p {
        line-height: 14px;
        padding-top: 10px;
    }
    div#info_wrapper_top div#mtm {
        width: 149px;
        float: left;
    }
    div#info_wrapper_top div#ready_made {
        width: 149px;
        float: right;
    }
    div#info_wrapper_top div#mtm h2 {
        height: 100px;
        background: url(http://files.officelinkonline.com.au/test/images/mtm_cons_home.jpg) no-repeat 0 0;
        text-indent: -9999px
    }
    div#info_wrapper_top div#ready_made h2 {
        height: 100px;
        background: url(http://files.officelinkonline.com.au/test/images/suits_cons_home.jpg) no-repeat 0 0;
        text-indent: -9999px
    }
    div#info_wrapper_bottom {
        width: 318px;
        height: 188px;
        margin: 20px 20px 0 0;
    }
    div#info_wrapper_bottom p {
        line-height: 14px;
        padding-top: 10px;
    }
    div#info_wrapper_bottom div#boys {
        width: 149px;
        float: left;
    }
    div#info_wrapper_bottom div#formal {
        width: 149px;
        float: right;
    }
    div#info_wrapper_bottom div#boys h2 {
        height: 100px;
        background: url(http://files.officelinkonline.com.au/test/images/boys_cons_home.jpg) no-repeat 0 0;
        text-indent: -9999px
    }
    div#info_wrapper_bottom div#formal h2 {
        height: 100px;
        background: url(http://files.officelinkonline.com.au/test/images/formal_cons_home.jpg) no-repeat 0 0;
        text-indent: -9999px
    }
    /*---------------------Hours of Opening---------------------*/
    
    body#hours {
        background-color: #10284b;
    }
    div#tablewrap {
        width: 400px;
        height: 210px;
        font-size: 13px;
        background-color: #10284b;
        padding-top: 45px;
    }
    div#tablewrap table {
        width: 300px;
        font-size: 11px;
        color: #fff;
        margin: 0 auto;
    }
    div#tablewrap td, th {
        border: 1px solid #fff;
        background-color: rgba(22, 50, 92, 0.9);
    }
    div#tablewrap table td {
        width: 50%;
        text-align: center;
        padding: 7px 0;
    }
    div#tablewrap table th {
        text-align: center;
        padding: 7px 0;
        font-weight: bold;
    }
    div#tablewrap table {
        border-collapse:separate
    }
    div#tablewrap th {
        -webkit-border-top-left-radius: 10px;
        -webkit-border-top-right-radius: 10px;
        -moz-border-radius-topleft: 10px;
        -moz-border-radius-topright: 10px;
        border-top-left-radius:10px;
        border-top-right-radius:10px;
        padding:10px;
    }
    /*--------------Catalogue Navagation Tips ----------------------*/
    
    
    body#tips {
        background-color: #10284b;
    }
    #cat_nav_tips {
        background-color: #00274c;
        padding: 30px;
        min-height: 200px;
        width: 340px;
        text-align: left;
        color: #fff;
    }
    #cat_nav_tips h4 {
        font-size: 14px;
        padding-bottom: 5px;
    }
    #cat_nav_tips ul {
        margin-left: 15px;
        padding-left: 0;
        list-style-position: outside;
        list-style-type: disc;
    }
    /*--------------Newsletter Form ----------------------*/
    
    div#newsletter {
        font-size: 11px;
        line-height: 12px;
        color: #fff;
        width: 144px;
        padding: 0 10px 0;
    }
    div#newsletter input {
        width: 150px;
        height: 15px;
        margin-bottom: 10px;
        font-size: 11px;
    }
    div#newsletter input.submit {
        height: 20px;
        width: 100px;
        margin: 0;
    }
    div#newsletter input#fullname {
        height: 15px;
    }
    div#newsletter label {
        position: absolute;
        left: -9999px;
    }
    /*---------------------Footer/Site_info---------------------*/
    
    
    #siteinfo {
        color: #00274c;
        clear:both;
        padding:10px 0 75px;/* space before footer*/
    }
    #fullWidthFooter {
        width:100%; /*for sticky footer */
        clear:both; /*for sticky footer */
        background: url(http://files.officelinkonline.com.au/test/images/bottom_repeat.jpg) repeat-x;
        height: 240px;/* + for sticky footer */
    }
    .clear {
        clear:both; /*for sticky footer */
    }
    </style>
    <!--[if lte IE 8]>
     <script src="http://files.officelinkonline.com.au/test/ie7/IE8.js" type="text/javascript"></script>
     <script src="http://files.officelinkonline.com.au/test/ie7/ie7-squish.js" type="text/javascript"></script>
    <![endif]-->
    <!--[if lt IE 7]>
    <link href="css/IE6.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    <script type="text/javascript" src="http://files.officelinkonline.com.au/test/../diva/divaCommon.js"></script>
    <script type="text/javascript">
    <!--
    var gDivaPOP=";.html|hours|x|c,c,400,210|x||localhost:8888/New_Site";
    //-->
    
    </script>
    <script type="text/javascript" src="http://files.officelinkonline.com.au/test/../diva/divaPOP/divaPOPgold.js"></script>
    <link href="../diva/divaPOP/divaPOP    gold.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="nav_supp">
        <h4>Supplementary navigation</h4>
        <ul id="nav_supp">
            <li id="site_entry"><a href="../index.php">Site entry</a></li>
            <li id="consumer_site"><a href="../business/index.php">Consumer site</a></li>
        </ul>
    </div>
    <div id="outerWrapper">
        <div id="branding">
            <h1><a href="index.php">Site</a></h1>
            <div id="nav_main" class="round">
                <h2>Main navigation</h2>
                <ul id="nav_bar">
                    <li ><a href="#">Link 1</a></li>
                    <li ><a href="#">Link 2</a></li>
                    <li ><a href="#">Link 3</a></li>
                    <li ><a href="#">Link 4</a></li>
                    <li ><a href="#">Link 5</a></li>
                    <li ><a href="#">Link 6</a></li>
                    <li id class="last"><a href="#">Link 7</a></li>
                </ul>
            </div>
            <div id="nav_sub">
                <h2>Sub navigation</h2>
                <ul id="nav_bar">
                    <li id="contact"><a href="contact.php">Contact us</a></li>
                    <li id="map"><a href="map.php">Location map</a></li>
                    <li id="hours" class="last"><a href="hours.html">Store opening hours</a></li>
                </ul>
            </div>
        </div>
        <div id="content">
            <div id="content_main">
                <div id="flash">
                    <div id="garment_display_cons"> <img src="http://files.officelinkonline.com.au/test/../images/consumer_flash_static.jpg" width="318" height="396" alt="" /> </div>
                </div>
                <div id="info_consumer">
                    <div id="info_wrapper_top">
                        <div id="mtm">
                            <h2>Subject 1</h2>
                            <p>Loriti quatemo loremporibea nem as deroreroviti ommolori int fugita atae et.</p>
                            <p id="learn"><a href="mtm.php">Learn more...</a></p>
                        </div>
                        <div id="ready_made">
                            <h2>Subject 2</h2>
                            <p>Loriti quatemo loremporibea nem as deroreroviti ommolori int fugita atae et.</p>
                            <p id="learn"><a href="ready_made.php">Learn more...</a></p>
                        </div>
                    </div>
                    <div id="info_wrapper_bottom">
                        <div id="boys">
                            <h2>Subject 3</h2>
                            <p>Loriti quatemo loremporibea nem as deroreroviti ommolori int fugita atae et.</p>
                            <p id="learn"><a href="boyswear.php">Learn more...</a></p>
                        </div>
                        <div id="formal">
                            <h2>Subject 4</h2>
                            <p>Loriti quatemo loremporibea nem as deroreroviti ommolori int fugita atae et.</p>
                            <p id="learn"><a href="formalwear.php">Learn more...</a></p>
                        </div>
                    </div>
                </div>
            </div>
            <div id="sidebar">
                <h3 class="round2">Categories</h3>
                <ul id="consumer_nav">
                    <li><a href="/index.php?subcatID=6&itemTypeID=1">Link1</a></li>
                    <li><a href="/index.php?subcatID=7&itemTypeID=1">Link2</a></li>
                    <li><a href="/index.php?subcatID=8&itemTypeID=2">Link3</a></li>
                    <li><a href="/index.php?subcatID=9&itemTypeID=1">Link4</a> </li>
                </ul>
            </div>
            <div class="clear"></div>
        </div>
        <div id="siteinfo">
            <p>&copy; 2010. All rights reserved. <a href="#">Privacy Policy</a> | <a href="#">Terms and Conditions</a> | <a href="#">Ordering</a> | <a href="#">Shipping</a> | <a href="#">Returns</a></p>
        </div>
    </div>
    <div id="fullWidthFooter"> </div>
    </body>
    </html>
    All you need to is add content. There is no need to change any of the settings.

  17. #17
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the revised code,

    I copied and pasted it into a test document and viewed in the browser but it seemed to be all over the place. I took a screenshot so you can see what I mean. Not sure what happened to the code?
    Attached Images Attached Images

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by gwh View Post
    Thanks for the revised code,

    I copied and pasted it into a test document and viewed in the browser but it seemed to be all over the place. I took a screenshot so you can see what I mean. Not sure what happened to the code?

    You must have copied it wrong or mixed the code somewhere along the line

    I've just copied what I posted above and then viewed in straight in my browser it looks like the attachment.

    You'll have to put an online version of it if you want me to debug again
    Attached Images Attached Images

  19. #19
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://files.officelinkonline.com.au/test

    If you wouldn't mind taking a look, I'd be grateful.

    Thanks

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Read my comments for explanation
    Code:
    div#content_main, div#info_consumer, div#flash{display:inline;}/*IE6 double float margin bugs*/
    div#info_wrapper_top,div#info_wrapper_bottom{width:298px;}/*You set 318px width on these to match the parent. But you add 20px right margin thus making these two elements 20px too wide. Decrease the width 20px*/
    Also be aware you are having PHP errrors. Example, (taken from your source)
    Code:
    <style type="text/css">
    
    <br />
    <b>Warning</b>:  include_once(__ROOT__/includes/breadcrumbs_cons.inc.php) [<a href='function.include-
    
    once'>function.include-once</a>]: failed to open stream: No such file or directory in 
    
    <b>/home/officelink/www/files/test/index.php</b> on line <b>32</b><br />
    <br />
    <b>Warning</b>:  include_once() [<a href='function.include'>function.include</a>]: Failed opening 
    
    '__ROOT__/includes/breadcrumbs_cons.inc.php' for inclusion (include_path='.:/usr/local/php5/lib/php') in 
    
    <b>/home/officelink/www/files/test/index.php</b> on line <b>32</b><br />
    
    </style>
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  21. #21
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I understand about the IE6 problems - I have a separate style sheet for this. I'm just trying to get it to work generally first.

    Your suggestion about div#info_wrapper_top and div#info_wrapper_bottom didn't do anything to fix the layout.

    It's just a copy of the code that Paul O'B provided which is why I don't know why it's not working.

  22. #22
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well my code worked locally and I'm 100&#37; sure about that. THe code for hte display:inlines DO indeed work.

    Your IE6 file is missing
    http://files.officelinkonline.com.au/css/IE6.css
    And htis
    http://files.officelinkonline.com.au/css/IE.css

    You have it selecting that. THe real place is

    http://files.officelinkonline.com.au/test/css/IE6.css
    And
    http://files.officelinkonline.com.au/test/css/IE.css

    You need to update these rules. FOr future reference, the ../ goes down a folder, in this case, the root directory.
    Code:
    <!--[if lt IE 7]>
    <link href="../css/IE6.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    
    <!--[if gt IE 5.5]>
    <link href="../css/IE.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    To this
    Code:
    <!--[if lt IE 7]>
    <link href="css/IE6.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    
    <!--[if gt IE 5.5]>
    <link href="css/IE.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    That might be it
    PS-the code I gave you doesn't have to be in an IE6 sheet. The display:inlines are fine for a regular stylesheet and the widths needed to be updated anyway
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  23. #23
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I've updated the path to the css files in the conditional comments but this still doesn't solve the problem.

    Your comments about div#info_wrapper_top and div#info_wrapper_bottom don't fix the layout though. If you look at the url previously provide, it's still everywhere. There's nothing currently wrong with the elements within div#info_wrapper_top and div#info_wrapper_bottom. It's the sticky footer that isn't working.

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

    My code is still working - I dot know how I can say it differently

    You didn't change the branding styles.

    Code:
    div#branding {
        position: relative;
        height: 124px;
        /*padding-top: 260px;  not needed now*/
    }
    You didn't change the nav-supp:

    Code:
    div#nav_supp {
        width:100&#37;;
        position: absolute;
        top:0;
        left:0;
        z-index:99;
    }
    If its not removed from the flow it will take up space and add extra height that is not wanted.

    You didn't change the nav_main IE styles to match.

    Code:
    div#nav_main {top: 100px}/* not sure why this is 10px out but there's probably a reason*/
    That's the main culprits and as Ryan says you have a few php errors in places:
    Code:
                    <li id="formal">Subject 1</a>"?></li>
                    <li id="suits">Subject 2</a>"?></li>
                    <li id="leather">Subject 3</a>"?></li>
                    <li id="boys">Subject 4</a>"?> </li>

  25. #25
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry about all those mistakes. I'm getting so confused on this project because there's been so many changes. Guess I'm learning though.

    All is working again - thanks for the continued help.


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
  •