IE6!! CSS display problem.
Discussion
First things first, I know I should be redirecting IE6 users to www.thebackofbeyond.com but I have a customer who has some on his network and they pay me a handsome retainer so IE6 problems it is 
I've got a div and there are three tables that sit neatly below each other exactly as they should in IE>6 and other browsers but in IE6 they cascade down and across like a flight of stairs
Now I'm assuming this is to do with IE6's s
tty rendering engine not following the rules but how do I track down what's causing it to misbehave?
The tables fit within the div (I have another version of this form with a single table that behaves perfectly) but as soon as I add a second table they start cascading by what I assume is double the margin etc.
Help, it's driving me mad!
I've got a div and there are three tables that sit neatly below each other exactly as they should in IE>6 and other browsers but in IE6 they cascade down and across like a flight of stairs
Now I'm assuming this is to do with IE6's stty rendering engine not following the rules but how do I track down what's causing it to misbehave?The tables fit within the div (I have another version of this form with a single table that behaves perfectly) but as soon as I add a second table they start cascading by what I assume is double the margin etc.
Help, it's driving me mad!
try loading the IE developer toolbar that should show you which div is actually causing the problem
http://www.microsoft.com/downloads/details.aspx?fa...
And use the proprocessor directives to override the css classes for ie so that you dont stuff up the other browsers.
http://www.microsoft.com/downloads/details.aspx?fa...
And use the proprocessor directives to override the css classes for ie so that you dont stuff up the other browsers.
So what idiosyncrasy of IE6 did I trip over this time and what did that do to correct it?Right, I've been brushing up on my knowledge of css so I can better understand for the next time I hit a bugette.
Is my understanding of the following correct?
A div applies to a block level element and is invoked with a style= tag.
A span applies to an inline element and is invoked with a class= tag.
The css may contain instructions that relate to both inline and block elements, ie. font size and colour.
In the actual css :
A class tag begins with a dot.
An ID is unique within an HTML document and is defined with a hash.
Is my understanding of the following correct?
A div applies to a block level element and is invoked with a style= tag.
A span applies to an inline element and is invoked with a class= tag.
The css may contain instructions that relate to both inline and block elements, ie. font size and colour.
In the actual css :
A class tag begins with a dot.
An ID is unique within an HTML document and is defined with a hash.
BliarOut said:
Right, I've been brushing up on my knowledge of css so I can better understand for the next time I hit a bugette.
Is my understanding of the following correct?
A div applies to a block level element and is invoked with a style= tag.
A span applies to an inline element and is invoked with a class= tag.
The css may contain instructions that relate to both inline and block elements, ie. font size and colour.
In the actual css :
A class tag begins with a dot.
An ID is unique within an HTML document and is defined with a hash.
span and div both take the same parametersIs my understanding of the following correct?
A div applies to a block level element and is invoked with a style= tag.
A span applies to an inline element and is invoked with a class= tag.
The css may contain instructions that relate to both inline and block elements, ie. font size and colour.
In the actual css :
A class tag begins with a dot.
An ID is unique within an HTML document and is defined with a hash.
class="foobar" allows you to refer to .foobar {} in the css
style="float: left; border: 1px ..." allows you to style an individual element, eg. for one offs which don't warrant their own class
BliarOut said:
Just figured that one 
So <div class="myClass"></div>
and <span class="myClass"></span>
and <span style="color: red;"></span>
are identical when the css contains
.{myClass
color: red;
}
and I would end up with an area of red text until I overrode it?
Yes. So <div class="myClass"></div>
and <span class="myClass"></span>
and <span style="color: red;"></span>
are identical when the css contains
.{myClass
color: red;
}
and I would end up with an area of red text until I overrode it?
If the css read:
.myClass {
color:red;
}
There are certain rules around when to use spans and divs (span spans objects, divs are divisions IIRC) but essentially the same.
...or if there was a section of the page that was unique, sometimes it's better to use id instead of class e.g:
<div id="myID">This is some text</div>
then the css:
{{{ #myID {
color:red;
}
}}}
^ Please ignore {{{ above, it was formatting the hash to the number 1
You should only use an id once in a page, but you can reference a class as much as you like.
<div id="myID">This is some text</div>
then the css:
{{{ #myID {
color:red;
}
}}}
^ Please ignore {{{ above, it was formatting the hash to the number 1
You should only use an id once in a page, but you can reference a class as much as you like.
Edited by evenflow on Friday 26th February 16:53
Gassing Station | Computers, Gadgets & Stuff | Top of Page | What's New | My Stuff