odd behaviour, resizing not working and phantom margins
Hi Guys,
I'm currently finishing the development of the new website for the University of Hull, the website uses two stylesheets, one for IE6 and one for everything else.
The IE6 template needs quite a bit of tweaking, but now I seem to have some problems with it whcih I cannot figure out.
Firstly, only the left column will allow me to resize it, if I try to increase or decrease the centre/right columns there are no changes whatsoever.
Secondly, there is a margin either just after the centre, or just before the right column which I cannot find in my CSS.
It could just be me being stupid, I wrote this CSS many months ago and its been a hell of a long hard summer getting this sorted and I'm completely burned out, so if it is a simple thing then i'm sorry to pester you lot with it, but its one week till deadline and I'm starting to go bananas.
I don't really have time at the moment to investigate where the problem is exactly but IE6 does have a bug where left margin's are doubled on floated elements.
All you need to do is apply display: inline; at the end of these styles to fix this issue.
Hope that helps but I can probably have a look in the morning if you've not managed to solve the problem.
it seems to me that if I can get the 'useful' div to resize to stay inline with the rest of the left menu everything will be in place then. However it doesnt seem to want to resize.
Keep in mind that if you're using conditional comments and are using multiple IE versions on your machine then they'll assume that the IE you are using is the latest installed on your machine.
i.e. If you have IE7 installed then the browser will ignore lte IE 6 comments even if you are using IE6.
Thats not really an issue for us so we dont mind that too much Turns out that it was a simple fix in the end... there was a width applied to a <li> tag which I'd completely forgotten about... I set that to 100% and bob's your uncle!
The issue I raised about conditional comments isn't really an issue on the web as presumably people using earlier versions of IE only have those installed. The reason I raised the issue is purely because it can cause problems when testing the site as you may not be seeing exactly how an IE6 user will see the site.
Glad you've sorted it although unless you're applying display: inline; or a float to the <li> you shouldn't need a width on the <li> at all. An <li> is a block element and will therefore always expand to take up the remaining space available within it's parent's container.
You shouldn't be using the whole css file in the IE only file as that will make all IE users load the first file and then have to load the file again and that is a complete waste of bandwidth and rather annoying .
The IE only file should only contain specific IE only code and usually only runs to half a dozen lines of code (if you have more than that then you either have a very large site or you are doing something wrong). The normal stylesheet is loaded and then you just add the fixes via the conditional comment linked file. There is no need to include all the styles again and in fact makes maintenance and debugging a nightmare.
I would guess that you wouldn't need more that a few IE hacks for that page.
Completely agree, only include the bug fixes in your IE stylesheet as you should have a default stylesheet anyway that is applied to all browsers and the just specific styles should be over written in your conditional commented stylesheet as Paul has already advised.
I'd not looked in the IE css file so presumed that you'd only added the bug fixes so well done to Paul for spotting that one
odd behaviour, resizing not working and phantom margins
Turns out that it was a simple fix in the end... there was a width applied to a <li> tag which I'd completely forgotten about... I set that to 100% and bob's your uncle! 
Bookmarks