CSS Tables, dotnetnuke aargh! Please help

HTML & CSS
1

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 :slight_smile:

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 :slight_smile:

I look forward to your advice :slight_smile:
Hayden

2

Which IE are you seeing this on? There are 4 different ones in common use, all quite different.

3

I am seeing this in IE 7 and have tried almost every hack and workaround possible to get the gap to disappear :frowning:

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

4

Hi,

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


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.


[B][/B]/* background color for the content part of the pages */

Remove the BOM.

5

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:

.logo {
  background-image: url("back_header_left.gif");
  background-position: left top;
  background-repeat: no-repeat;
  [COLOR="Red"]height: 164px;[/COLOR]
  padding: 15px 0 0 30px;
}

Dunno, though. Just clutching at straws.

6

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.


.logo {
   [B] padding:15px 0px 0px 30px;[/B]
    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;
  [B]  height:164px;[/B]
}

Remove the top padding or reduce the height by 15px.

The parent td is only 164px high:


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;
   [B] height:164px;[/B]
    padding:0px;
    margin-bottom:0px;
}
7

Thanks. Unfortunately that solution did not work :frowning:

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

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.


                    <!-- End_Module_387 -->
                                            </div>
                                    [B] <div style="float:left;"></div>
                                            <div style="float:right;"></div>[/B]
                                        </div></td>

What are they for? If you don’t need them then remove them.

9

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 :slight_smile:

Thanks again
Hayden