white space in IE

[Feliciaf]

Hi there

Does anyone know how to fix this white space at the bottom of the nav menu? It only happens in IE. See attached image highlighted with red border.

The background banner image is longer in IE but in other browsers it's the same height as the navigation menu. Any ideas?

Here's the CSS if needed:
http://www.tagdesign.co.nz/jornas/css/menu.css

and here's the css container the image sits in:

#navbanner-container {
background-color: #015945;
height: 128px;
background: url(../images/banner-image.jpg) no-repeat right top;
}

Thanks so much.

[Dan Schulz]

Unfortunately I don't have the ability to approve images, otherwise I'd be able to help you right now.

[Feliciaf]

Oh bugger - I wasn't aware that it had an approval status on it. OK - here is the html page to view:

http://www.tagdesign.co.nz/jornas/index.html
Thanks so much.

[markbrown4]

The background shorthand properties overrides the long winded versions.

#navbanner-container {
	height: 128px;
	background: #FDDB9A url(../images/banner-image.jpg) no-repeat right top;
}

But your real problem is that you are relying on the font-size / line-height to be pixel perfect unless it breaks the design. It's best to not make requirements like this.

[Feliciaf]

OK thanks. What should I rely on instead though - padding and pts for the font sizing?

[Nadia P]

This type of layout is going to break if someone resizes the text size in their browser (does so now using Firefox and an increase of one). It doesn't break completely, just your menu expands way down and after a couple of increases, the content is way down the page. I saw a site a while back on how to overcome this issue - but for the life of me I can't find the link now that I need it - sorry ! PS: You shouldn't really use pt for font size (its a unit used mostly in print work), use %ages or ems or px instead.

Nadia

[markbrown4]

OK thanks. What should I rely on instead though - padding and pts for the font sizing?

I was talking about page layout and design.
Don't make a design that requires the font-size to be an exact size. In your example it's having a menu that needs to be exactly the same height as an image.
Try and make design elements flexible with their heights.

[Feliciaf]

I was talking about page layout and design.
Don't make a design that requires the font-size to be an exact size. In your example it's having a menu that needs to be exactly the same height as an image.
Try and make design elements flexible with their heights.

Ah - OK I see what you are saying. Unfortunately I didn't design the site. But yes, I totally agree. It's a lesson learned for the next time though. Cheers.

[Feliciaf]

This type of layout is going to break if someone resizes the text size in their browser (does so now using Firefox and an increase of one). It doesn't break completely, just your menu expands way down and after a couple of increases, the content is way down the page. I saw a site a while back on how to overcome this issue - but for the life of me I can't find the link now that I need it - sorry ! PS: You shouldn't really use pt for font size (its a unit used mostly in print work), use %ages or ems or px instead.

Nadia

wow - it would be great to get that information from that site as that's something I would cherish to learn. Yes - agree about pts. But I haven't used them in this template. Not sure where you saw them being used. Also, I'm not experiencing the breaking of the nav menu in any of my browser testing yet - which version browser did you see the break in?

[Dr John]

It breaks in Firefox 2 when you increase the font size a couple of steps, by pushing down the centrecontent div. In IE7 it breaks by letting the menu text flow out of the green coloured section into the section below.

You simply need a basic two-col with header and footer template.
Place the company logo in the header on a white background
Place the nav in a list in the left hand div, that way you style the list to be green and when the text gets bigger, the green area expands
Place the main body content in the second column.

Borrow one of paul's tried and tested designs from www.pmob.co.uk.

Like this one http://www.pmob.co.uk/temp/2columnce...equalising.htm - youjust have to adjust the widths a bit then the colours, and it will soon be like yours. But crash-proof.

[Feliciaf]

It breaks in Firefox 2 when you increase the font size a couple of steps, by pushing down the centrecontent div. In IE7 it breaks by letting the menu text flow out of the green coloured section into the section below.

You simply need a basic two-col with header and footer template.
Place the company logo in the header on a white background
Place the nav in a list in the left hand div, that way you style the list to be green and when the text gets bigger, the green area expands
Place the main body content in the second column.

Borrow one of paul's tried and tested designs from www.pmob.co.uk.

Like this one http://www.pmob.co.uk/temp/2columnce...equalising.htm - youjust have to adjust the widths a bit then the colours, and it will soon be like yours. But crash-proof.

Oh brilliant! Thanks very much for your help. I will soldier on. Thanks again.

[Feliciaf]

Hey there Dr John
I tried the http://www.pmob.co.uk/temp/2columnce...equalising.htm and yes it's great but the one thing that really is problematic is the background colouring for the left column. It doesn't work. It seems that only one area for colours works and that is in the container. I can't get the bg image in the left to work. Any ideas?

[Dr John]

Look at this bit in paul's code
#content {
border: 1px solid #000;
padding: 0;
background-image: url(images/navbg.gif);/*this is the background colour of the left column */
background-repeat: repeat-y;
background-position: left top;
}

It is using an image as the backgound to the #content div
The left hand side appears coloured as the image for the .content div shows through - it's called faux columns - fake columns - don't set a colour for the left column at all.

It's a fake because your left column may only be 100px or 200 px high, but the bigger content area's image shows all the way down the page. Indeed in your case the real left column colour will be that of the navigation list itself, and that will expand as needed.

So make an image of your own that is the colour you wish and the width desired for the left column, and use that where navbg.gif is. You can just call yours navbg.gif and it will work automatically. (the image needs to be the width you require, but only a few pixels high.)

[Paul O'B]

Hi,

As Dr John already said the easiest way to fake columns is simply to use a background image on the parent.

For example in this layout I use this image to replicate all three column colours and even their borders. You can do it without images but it gets far too complicated when there are other alternatives available.

Here's another example of using a background image to good effect.

[Feliciaf]

OK. got that and I do understand it. But the image that I have been using in the bg is not working at all check this out - http://www.tagdesign.co.nz/jornas/index-2.html

I need the image in the left side to go all the way down to the footer and the colour should be a orangey colour. I have the nav-bg image in there repeating y but still nothing. Am I being particularly useless here? OK, you don't have to answer that.

CSS - http://www.tagdesign.co.nz/jornas/css/main-2.css

[Feliciaf]

Well I have finally sorted it and have used your layout thanks Paul. I have used background images with a height in the right column to get the images to show but that works OK.

One wee problem is that the footer floats too high in Opera and the banner image is ever so slightly longer (by about 2 pixels) in Opera and IE. Not sure how to fix these two wee things.

[Paul O'B]

Not sure how to fix these two wee things.

If you are still having issues then post the updates code or link