<h1> not wide enough

[Croontje]

Little question:

http://www.croontje.be/fotoalbum.php

When you click on a link on this page you see a photo album, when you enlarge a pic everything looks ok unless you use a low resolution like 800x600. Then you can see that the title isnt as wide as the picture itself.

You can see the same effect on this page (not only at 800x600 but also at higher res)

http://www.croontje.be/cartoon.php

Is there a solution for this problem?
It only occurs in IE. I use firefox and with this program it looks always ok

Btw. is my css correct? I recently changed all my tables to css but i hope i use it correctly ...

[Paul O'B]

Hi,

The problem is that your table is about 520px wide with the images and you also have margins on the side which make it larger than 600px. When the browser resizes and meets the table then the other elements keep on re-sizing smaller such as your h1 but the table is held wide.

Mozilla still collapses the background but behind the table.

You could give your table a width and take out the margins to make it look ok at 600pxl

.inhoud{
 border: 1px dashed;
 border-color: #909090;
 margin: 10px 10px;
 width:520px;
 z-index: 2;
 text-align: left;
 padding: 0px 0px 0px 10px;
 font-size: 12px;
}

Alternatively just float your images left (not in a table) and then the page can resize at leisure. You should try and make your images the same size so that it looks neater.

Paul

[Croontje]

Hi,

The problem is that your table is about 520px wide with the images and you also have margins on the side which make it larger than 600px. When the browser resizes and meets the table then the other elements keep on re-sizing smaller such as your h1 but the table is held wide.

Mozilla still collapses the background but behind the table.

You could give your table a width and take out the margins to make it look ok at 600pxl

.inhoud{
 border: 1px dashed;
 border-color: #909090;
 margin: 10px 10px;
 width:520px;
 z-index: 2;
 text-align: left;
 padding: 0px 0px 0px 10px;
 font-size: 12px;
}

Alternatively just float your images left (not in a table) and then the page can resize at leisure. You should try and make your images the same size so that it looks neater.

Paul

But the width from the "inhoud" DIV is set in % so when i view my site on a high res it still fills up my screen ....

[Paul O'B]

But the width from the "inhoud" DIV is set in % so when i view my site on a high res it still fills up my screen

I thought I just explained that the minmum width of your table (with margins) is greater than 600px so that is the reason it won't fit into 600px or smaller. You can't have it fluid and also want a fixed width item inside. You would need to set a min-width to hold the layout intact but your min-width looks to be about 860px wide. Of course Ie doesn't understand min-width so you'd have to use one of the script/expression options if you went that route.

You could either float the images (recommended) as I mentioned earlier or change your design so the headers don't have background colours. You could put background images in the parent which would then stay full width.

.inhoud{ background: url(images/bg.gif) repeat-x left top;}

Of course you could always put your headers inside a table cell and then they would stop with the images.

I think you may need to re-think your design a little bearing in mind that you have a large width element in the middle of your pages.

Sorry I can't offer a full solution but this seems to be more of a design issue than a problem with the css.

Paul

[Croontje]

I thought I just explained that the minmum width of your table ...

.inhoud{ background: url(images/bg.gif) repeat-x left top;}

...

Paul

Ok, i didn't understand it the first time but now i do and i think the solution with the small background pic is a nice one so i ll try that one. Thanx a lot

/me is a happy new sitepoint member

[Paul O'B]

me is a happy new sitepoint member

Glad to hear it

Just shout if you need any more help.

Paul