I have been using the HouseMenu (v1.3) on my DNN site for over 7 months. I am currently trying to modify my site's main skin so that the site's logo is in the top left hand corner and a horizontal Nav bar runs to the logo's immediate right hand side (see the nav bar on www.ventrian.com for a indication of what I am aiming for).

I have created a skin that does this in Firefox v2, Opera v9 and Safari. However in IE6 or IE7 the nav bar 'refuses' to go to the right of the site's logo, and instead it runs horizontally just under the logo. To see this in action visit this test page on the site. I am pretty sure this is a CSS issue. I have been wrecking my brain to find a solution but - so far - no luck.

Below are relevant excerpts from my skin's index.html and skin.css file that reveal the set up.

From the skin's index.html



Here from the skin.css are the definitions of the various "id" styles used above in the index.html:



For the sake of completion here are the CSS STYLES FOR HouseMenu SkinObject


The full skin.css file can be accessed here.

I think it might be something to do with "float". I also thought I I may need some "clear" declarations in the css file however I tried various permutations but none worked.

Can anybody help me with this Internet Explorer issue? Anybody have some insight? It must be well understood somewhere?!

Thanks

Eoghano

Okay, the excerpt from the skin's index.html didn't work - the disucssion forum here, of course, went and rendered them. Here is the code from the skin's index.html in graphic format:

You could try the position absolute method, ie:
#logo
{
    padding: 1px 0 1px 0px; /*margin: 0 0 15px 0; */
  position: absolute;
    top: 10px;
    left: 10px;
}

This takes the logo out of the flow of the document so you can actually place the div id logo code at the end of the source code and it will appear in the same position. - This is the technique I now use for getting the content panes at the top of the source code and the logo etc at the end of the source code.

Because the logo is now out of the flow of the document you will see that the Google ads move up, you can move them back down by increasing the bottom margin of the menu ie:

#mainmenu
{
    width: 100%;
    height: 32px;
    background-color: #9999ff;
    margin: 2px 0 17px 0px;
}

Does this help?

Lee,

Thanks for that. First up I haven't yet tried your CSS suggestions above. Will do so tonight.

I have to say that absolte positioning did cross my mind, I even briefly tried something but I noted that when logged in as admin (or host) the control panel (that can now be 'folded' away with DNN 4.5) was 'hiding' the site logo & nav bar. How can I do absolute positioning in such a way that the logo & nav bar will be 'pushed down' the page by the control panel (and hence still be visible? Ideas?!

Eoghano



Eoghan

I place my control panel at the bottom of the page rather than the top - just put it at the end of the source code

Lee,

I tried out absolute positioning for the logo, as you suggested, and it worked fine in all major browsers (IE, Opera, Firefox and Safari).

Instead of putting the control panel at the bottom of the page (as you do) I chose to place it just below the nav bar (as I did not want to have to scroll down to see it) and it works fine and does not inteerfere with the main content panes (it pushes them down when open).

Aside: with the recent release of the Safari browser for Windows (v3, a public beta) browser compatabilty testing of a DNN site for Safari users just got so much easier for those of us without access to a Mac. My website stats show that 5% of my site's visitors are using the Safari browser so testing for it is worth the effort. Being able to run Safari myself also meant I could see in action for myself the famous incompatabilty of the FCK Editor with Safari. FCK simply does not work in Safari! I strongly recommend anybody who is serious about their DNN site to download and install Safari for Windows (sure it has a nice enough UI as well).

Eoghano

Glad to hear you got it working. - Great info on the Safari browser - I'm trying it out now as I write ;-) (interesting view from FCKEditor ;-)) Cheers,