[solved]display issues: Browser and resolution!

[GIM]

Hi,

Firstly let me say I am a noob who has probably caused the issues with sloppy editing.

I have been working from CMSMS 1.2.3 Using an edited version of the flowered theme.

Working in FF at the resolution of 1024x768 I was just starting to feel the site looked ok.

In IE the menu and header are some 5px over on the right ?

At higher resolution the header and menu shrink width wise though the main text body warp to fit.

The site URL is : http://dev.thirdwave.org.uk

I have been through the CSS and template many times and can not figure out how to set a fixed width for all or how to get the header and menu to adjust along with the rest of the page.

Any help would be greatly appreciated 

[rhys]

You should try and set widths for your divs - make them the same width as the header image/slideshow thing. #menuwrapper, #body etc. It seems here like you are trying to square the circle between fluid and fixed layouts.

[GIM]

Thanks Rhys , That helped with the width issues 

I am now confused by a 10px discrepancy between IE and FF/

All displays fine in IE but menu and text have a 10px gap when viewed in firefox.
If I set the #main-text , margin-top to -10px it looks fine in FF but cropped in IE.

Is this something to do with the menu wrapper settings?

The overflow value seems to affect it but I am not familiar with the values.

If you or anyone can shed some light I would be very grateful.

Thanks again to Rhys for his reply 

url :http://dev.thirdwave.org.uk/

[GIM]

So thanks to Rhys pointing me in the right direction I added a width value to the various Divs that did not have set values.

problem solved!

Thanks a lot 

[Dr.CSS]

It still looks funky in Firefox, the menu items are too wide and push the last one down below...

[Nullig]

Yes, there are still some problems.

- The Home page has a light green bar below the menus, but it doesn't cover the entire area, there's a gap which grows as your browser window expands.
- Some pages have white space covering half of the screen at the bottom.
- The whole page is off-center (shifted left) - perhaps that's by design, but it doesn't really look right.

Nullig

[GIM]

Ok so in IE at 1024x768 resolution the layout looks fine. it is the 10px gap between menu nav and main text area that allows the background to be seen and the white line where they don't meet depending how high your screen res is set. And yes it seems to set to the left as resolution is increased.

I am at a loss 
Any settings I change can make good at one resolution and in one browser.
Surely there must be some way to get uniformed display ??

I mean can anyone even suggest an alternate template + css that has the basis to give the simple layout I am after?

That is header ( with image rotator) One text area and a horizontal menu with sub nav.

I will happily start again but lack the skills to build template + css from scratch.

The flowered theme seemed closest to the layout I wanted but perhaps in adapting I have messed the delicate balance that had it working in its original form?


Any suggestions welcome!!


http://dev.thirdwave.org.uk/

[Nullig]

Try this:

For the #main-text div set

margin-top: -10px;

Then add an IE6 specific setting:

* html #main-text {
margin-top: 0px;
}

Nullig

Actually, I would change your stylesheet to the attached...

[GIM]

Thank you so very much for your help 

IE 7 Seems to display the menu with 10px cropped ? Did I add the IE hack to the wrong place?

The display in FF is spot on - awesome job Nullig.

[GIM]

OK ,

I sill seem to get the 10 px cropping in IE when viewing, is this because it is IE 7 ??

I have yet to confirm if IE 6 behaves the same.

It seems I can get either FF or IE to display correctly using the suggestions from Nullig.

Is there a way to have both browsers display the same ??

Any help greatly appreciated, I am not sure what else to do.

Cheers 

[Nullig]

It looks like you've left out the IE javascript menu fix in your template.

Add:

Code: Select all

<!--[if IE]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->
{* The above JavaScript is required for CSSMenu to work in IE *}

somewhere between the and tags in your template.

Nullig

[GIM]

Thank you once again for your reply and help 

I have added the javascript to the template and still seem to get the 10px cropping.

Do I need to add anything to the template content in menu manager?

Is the hack in the right place in the CSS ?

Your patience and guidance are greatly appreciated!

GIM

[Nullig]

Change the menuwrapper div to:

Code: Select all

#menuwrapper {
        overflow: hidden;
        background-color: #7E917E;
        border-bottom: 3px solid #013302;
        width: 800px;
        font-size: .65em;
        color: white;
        margin-bottom: 10px;
        }

Nullig

[Nullig]

Also, add:

Code: Select all

* html #menuwrapper {
        margin-bottom: 0px;
        }

just after the #menuwrapper div, to correct it for IE6.

Nullig

[GIM]

Wow 

Great job Nullig , That seems to have done the trick !

Many many thanks for all your solutions and replies.

What great community support CMSMS has.

Give yourself a big pat on the back and I shall applaud thee.

GIM