# Fixing IE CSS Errors



## matt-h (Apr 30, 2006)

http://www.uwmcc.co.uk

My latest project. And full of IE bugs!

I'm not very familiar with what cause IE bugs, so am not sure what to look for.

For instance, there are random page breaks (more in IE6 than IE7), and the Club > Players page doesn't work properly (it's meant to be a list displayed in table-form (makes it easier to update and keep in alphabetical order. I only changed it from a table last night, and it works perfectly in FF)).

If anyone can see anything in the css that they know IE doesn't like, it would be appreciated.

And does anyone know of a plugin for IE that can edit CSS, HTML in real-time?


----------



## matt-h (Apr 30, 2006)

Update - fixed the players page finally. After several failed hacks, I got one to work, although it causes the CSS to fail validation. If anyone has any suggestions to make it pass validation whilst keep the same output, that'd be great.


----------



## amanxman (Mar 28, 2006)

Hey,

The best bet for you would be to stick to your original css, and then add the IE fixes to an IE specific style sheet. This way you aren't applying 'hacks' that invalidate, you're simply having some different styles for IE.

This is a copy of a previous post of mine:

You can define different style sheets to be rendered by IE.

You should be able to fix it with IE specific style sheets... create a style sheet just read by IE (Internet Explorer) which amends the layout of the bits which are 'broken'.

To include a IE only style sheet, put this into the of your page:



NOTE: On the ie.css (IE style sheet) you only need to put the elements which need extra work for IE -- i.e. you don't need to copy everything from the main style sheet... IE will read main style sheet, and then read IE style sheet, and whatever is in IE style sheet will overrule anything in main style sheet...

So an example:
style.css:
#main
{
padding: 10px 20px 10px 20px;
}
#sub
{
padding: 10px;
}

ie.css
#main
{
padding: 10px 0px 10px 0;
}

You'll have Firefox having 10px 20px 10px 20px for #main, and IE will have 10px 0px 10px 0px. And both browsers will have 10px for #sub (even thou ie.css doesn't contain the #sub div it'll read from main style sheet)

I hope that helps...

PS - good to help a fellow "Warwickian" - graduated from there back in 03! Have they rebuilt Union South yet?!!

Cheers
amx


----------



## matt-h (Apr 30, 2006)

The Union Rebuild is in progress, we've got a huge temporary structure on Tocil Field atm. The new union should be done for next years freshers. Good thing I didn't take a gap year, got to enjoy the proper union as a fresher and have all the Leamington stuff to enjoy now.


And as for the answer, that should help me implement the fixes. But, the problem is that I don't know what is causing the errors.


----------



## amanxman (Mar 28, 2006)

Good old Leamington! Sugar still there, doing it's VodBull nights on Tuesday? They were painful...

Re the answer - some of the invalidating stuff will never validate :

117 #corecenter li Value Error : display -moz-inline-stack is not a display value : -moz-inline-stack
119 #corecenter li Property zoom doesn't exist : 1

These two won't ever so we'll have to look at the root of the problem to fix without using them.

The others should be fixable.

Can you post a few details of any problems with the actual site you're experiencing (in whatever browser) - or is it now just a case to fix the validation?

Cheers
Rob


----------



## matt-h (Apr 30, 2006)

"For instance, there are random page breaks (more in IE6 than IE7)"

Random page breaks - The footer block, parts of the pop out menu, and areas between h1 and text on pages like the Bulletin Board. In IE6, there's a gap between the date and the main area top line.


----------



## matt-h (Apr 30, 2006)

5 days later... bump...

Can anyone see anything that could be causing the mentioned issues?


----------



## pedja (Nov 5, 2008)

For the img src, make sure you add attributes hspace="0" vspace="0" align="top" or whatever align you want to use, 'cause ie needs those to display pages correctly, ff is much smarter


----------



## pedja (Nov 5, 2008)

yes!! the warwick logo picture is a problem! you have to set border to 0 and align to top and it works!


----------



## matt-h (Apr 30, 2006)

I've tried that but see no difference in IE6 or IE7  Which bit in particular should it fix?


----------

