Small CSS Problem with Borders

  gplatt2000 21:24 10 Oct 06
Locked

Hi all

I'm working on a site for a label printers based near where I live. I'm nearing the end of the job (or feel to be - however I'm sure loads of small irritating problems will still come up, as well as some bigger ones I'm sure!)

The site so far is up at click here

Firstly, I'm new to CSS with this being my first site, so please bear with me!

As I said, it's not finished yet, e.g. forms need completing, other little jobs aswell.

The main thing annoying me at the miinute is that I can't seem to get the bottom border to show up in IE. It works fine in Firefox.

I'm really not sure why this is. I have left, top and right borders for the #wholesite div, and then a bottom border for the #content div (which I left purple to illustrate better), as I thought this would allow for any extra content being added and thus the site growing downwards. If that makes sense.

Again, I'm new to this, so I'm sure I've not gone about this the best way anyway - basically, I want to be able to easily add to the content whilst still keeping the layout/borders/white background etc intact. Firefox seems to understand, as it does exactly this! however, IE isn;t being quite as cooperative...

I've realised just how badly I've worded this problem, so I apologise and just hope you understand my problem - let me know if anything needs clarifying.

Any help as to why this might be happening and how to fix it would be great,a s would suggestion for how to keep the site 'flexible' in terms of keeping the layout intact as more content is added and the site grows vertically.


Thanks a lot

Gavin

  harristweed 09:28 11 Oct 06

CSS is still a bit of a mystry to me also, but I do know that IE doesn't recognise min-height (min-height: 250px;). The problem could be that the image is covering the boarder in IE and also the boxes on the right may also be covering the boarder.
Therefore try a fixed height (height: 300px;)and see if that cures it.

  gplatt2000 14:45 12 Oct 06

Hi

Thanks for the quick reply, much appreciated.

Thanks for the info on min-height - I wasn;t aware of IE's lack of support for this, although I really shuld be expecting this by now...

Unfortunately I don't think it is image/boxes covering the border, as I've tried experimenting with different heights and this doesn't seem to help.

Also, I want to try stay clear of specifying exact heights for the main content div, as this makes it awkward when adding/removing content. Firefox seems to be happy with having no height specified at all, just letting the dive 'grow' to the size of the content - which is exactly what I'm looking for, so any way of getting IE to do the same would be brilliant!

Thanks again, keep your suggestions coming!

Gavin

  Eric10 17:07 12 Oct 06

harristweed is correct in saying that the image is covering the bottom border.

The 'Yorkshire Trade Labels Ltd' is also in a higher position with IE. If you specify a margin-top of 20px to h1.home it drops this down without adversely affecting Firefox or Opera and also pushes the bottom of the 'content' area lower so that it clears the image. If you want to push the bottom border far enough down to get the border to run all the way to the right in IE then you can add a margin-bottom of 15px to main2 in order to achieve this. Also, if you want the top purple border to run all the way to the right then change top:0px to top:2px in the 'boxes' definition.

  gplatt2000 19:11 12 Oct 06

Thanks for your reply Eric.

Please accept my apoologies for being stupid! Didn;t realise we were looking at the homepage, and completely forgot that the bottom images were overlapping! So thanks a lot for reminding me of that and letting me know how to fix.

The pages I'm still having trouble with are the 'bigger' ones, e.g. Products, which seem to have no bottom border (despite no obvious overlap of anything), and I really can't work out why (these are the pages I was referring to in my first post, as like I said I'd completely forgotten about the homepae so cheers for that!)

Any ideas?

Thanks again

  gplatt2000 18:42 15 Oct 06

Just an update - still not having any luck! Tried a few things just finddling with margins/positions etc but nothing seems to be curing it, it really is confusing me!

So yeah, please, any ideas at all would be brilliant.

Thanks a load

  imacd 20:07 15 Oct 06

If it is any consolation the bottom border shows up in IE7, but alas on my laptop (IE6) it doesn't.
Keep trying and good luck!

  slightlymad 20:50 15 Oct 06

You've specified border colours for the other elements in your page, but not for the content div.

Worth a try?!

Marie

  gplatt2000 11:38 16 Oct 06

Thanks Marie, good spot, I hadn't noticed that! I'm ready to try anything cos this is really bugging me now, but unfortunately that didn't solve it :(

Any more suggestions guys?

Cheers

  harristweed 13:22 16 Oct 06

index page.
I think the problem is the div 'wholesite' has a height set at 300px.

Remove this and see the effect!

  gplatt2000 15:06 16 Oct 06

Thanks again for your reply, hugely appreciated.

I thought that was indeed going to solve it, getting pretty excited! But unfortunately no luck :(

When I remove the height attribute, the 'wholesite' div shrinks to about 30px high (just enough to accomodate the 'peeling corner' img, top right hand side)

So, it seems for some reason none of the rest of the content is actually 'in' the wholesite div? Which seems strange... Could it be becasue I've used absolute positioning on a lot of the other divs? Although that wouldn't really seem to make sense, as using absolute positiong set as top: 0; left: 0 for the Logo div ahs put it in the top left corner of the wholesite div - suggesting it is infact inside that div?? All getting a bit too confusing!

Any more ideas, especially on thsi issue of the 'wholesite' div not actually containing the whole site at all, would be brilliant.

Thanks a lot once again

Gavin

This thread is now locked and can not be replied to.

How to get Windows 10 for free | How to install Windows 10: There is still a way to avoid paying…

1995-2015: How technology has changed the world in 20 years

Alex Chinneck’s giant ice cube Christmas tree at Kings Cross

Apple rumours & predictions 2017: The iPhone 8, new iPads, and everything else you should expect fr7…