SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Location
    London, United Kingdom, United Kingdom
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy CSS Tables, dotnetnuke aargh! Please help

    Ok guys..

    I have a huge problem. I am building a website for my company and came in half way through a project to finish of a website. The site is designed using dreaded tables and dot net nuke.
    Naturally tables are not my option but the option of the project manager, however that is not the problem..

    I am having trouble with a header, navigation gap in internet explorer and have tried every trick in the book to make it vanish..
    This would normally be very easy to fix, however take not ethat I am talking about a cms with its own set of resets and tables..this may be an easy fix but I just cant see it

    lpa-group.directcms.co.uk is the testing server that I am building the site on.

    The problem is that in IE the gap is to big between the header and the nav

    I look forward to your advice
    Hayden

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,322
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Which IE are you seeing this on? There are 4 different ones in common use, all quite different.

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Location
    London, United Kingdom, United Kingdom
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am seeing this in IE 7 and have tried almost every hack and workaround possible to get the gap to disappear

    If I was not bound to a deadline I would have started the thing from scracth unfortunately time does not allow for this

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

    The first thing would be to check whether there is some extra padding getting applied.

    Code:
    table.header td{padding:0}
    You have a number of css files that are showing the BOM (Byte order mark) at the start of the file and may corrupt some styles in some browsers.

    Code:
    /* background color for the content part of the pages */
    Remove the BOM.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,322
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    If find it nearly impossible to debug IE unless I have the files on my own computer. But maybe you could try removing the height from here:

    Code:
    .logo {
      background-image: url("back_header_left.gif");
      background-position: left top;
      background-repeat: no-repeat;
      height: 164px;
      padding: 15px 0 0 30px;
    }
    Dunno, though. Just clutching at straws.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Ok, the main problem is as I suspected and you have set the logo to have a height and some padding which makes it bigger than the parent.

    Code:
    .logo {
        padding:15px 0px 0px 30px;
        background-image:url(http://lpa-group.directcms.co.uk/Portals/0/Containers/LPA-Group/back_header_left.gif);
        background-repeat:no-repeat;
        background-position:top left;
        height:164px;
    }
    Remove the top padding or reduce the height by 15px.

    The parent td is only 164px high:

    Code:
    td.header {
        background-image:url(http://lpa-group.directcms.co.uk/Portals/0/Containers/LPA-Group/back_header.gif);
        background-repeat:repeat-x;
        background-position:top;
        height:164px;
        padding:0px;
        margin-bottom:0px;
    }

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Location
    London, United Kingdom, United Kingdom
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Unfortunately that solution did not work

    I reduced the logo size down by 15 pixels to no avail and event tested by removing the css of the two elements mentioned above. However the nav stayed put in IE

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    That fixed it in IE8 as that was broken before also. The problem is these two empty floated divs that are holding the page open in IE7.

    Code:
                        <!-- End_Module_387 -->
                                                </div>
                                         <div style="float:left;"></div>
                                                <div style="float:right;"></div>
                                            </div></td>
    What are they for? If you don't need them then remove them.

  9. #9
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Location
    London, United Kingdom, United Kingdom
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that Paul. Sorry for not getting back sooner it took me long enough to find the darn container in dnn that had the code..but yes that worked a treat.

    DNN has a bit of a learning curve, had this been a flat html site I would never had these problems..IN any case you saved my bacon as I would never had found that code..and I certainly would not have made empty divs

    Thanks again
    Hayden


Tags for this Thread

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
  •