When working with div's and span's in Expression Web, nearly all current browsers work fine, EXCEPT Firefox 2.0, which completely destroys the layout, as if everything were a block element (there's a carriage return after every object). Inline elements aren't kept that way.
This is a sample of the code, with image and div id's changed (it looks a bit convoluted, but it makes sense to be, and it works in most browsers):
CSS:
body {
text-align: center;
}
.BlockContainer {
display: block;
margin: 2px;
}
.InlineBlockContainer {
display: inline-block;
vertical-align: top;
}
#Section1 {
position: absolute;
visibility: visible;
margin: 0 auto; <!-- this is not needed for any browser, but most people say it's a "best practise" for FF, even though it still doesn't work for me in FF2 -->
width: 100%;
left:0%; <!-- this, along with the width:100% will center a div easily -->
HTML:
<body>
<div id="Section1">
<span id="SubSection1"> <!-- there is no CSS for this object yet, but there will be -->
<span class="InlineBlockContainer" >
<span class="BlockContainer">
<img src="images/object1img.jpg" alt="Object1" />
</span>
<span class="BlockContainer">
<img src="images/object1logo.jpg" alt="Object1Logo" />
</span>
</span>
<span class="InlineBlockContainer">
<span class="BlockContainer">
<img src="images/object2img.jpg" alt="Object2" />
</span>
<span class="BlockContainer">
<img src="images/object2logo.jpg" alt="Object2Logo" />
</span>
</span>
</span>
<span id="SubSection2"> <!-- similar to #Subsection1 -->
.
.
.
</span>
</div></body>So what this gives me is a row of subsection "boxes" (i know that's not the code term, but i'm using it here for simplicity sake) that are side-by-side, inside each subsection box is 2 further sub-section boxes, also side-by-side. Then, inside each of those boxes are 2 images, which need to be one on top of the other. It took me awhile to figure out which CSS options to use, but this does work in all the mentioned browsers, EXCEPT FF2, and I'm not supporting legacy browsers like FF1.x, IE6, NS-anything, etc. I'm having enough trouble as it is with "current" browsers (FF2) than have to worry about backwards compatibility. Quite frankly, if Safari 3 and Opera 9 are supposed to be as standards-compliant as they say they are, then I don't know how Firefox 2 can really by touting the same, considering that both Safari 3 and Opera 9 render identically to IE7.
So how do I go about fixing this? It would seem that this is either an absolute positioning bug in FF2, or FF2 just isn't respecting normal flow for block and inline[-block] objects....
Ok, another problem:
Firefox 3b5 gets the layout right, but it has problems with javascript code for the onclick property.
This is a sample of the javascript code for the onclick property of an img tag:
onclick="javascript:document.getElementById('Logo1').setAttribute('src','images/logo1bold.jpg');document.getElementById('Logo2').setAttribute('src','images/logo2.jpg');document.getElementById('Section1').style.visibility='visible';document.getElementById('Section2').style.visibility='hidden';"Basically what should happen is that when someone clicks on the Logo1 image, it should show the "bold" version (it's text, rendered as an image), should set the Logo2 image as plain, and should show the Section1 layer, while hiding the Section2 layer.
Now I know that in the supported browsers (IE7/8, Opera9, Safari3), I can also use the abbreviation for the style property, so instead of using
document.getElementById('[I]id[/I]').style.visibility, I can shorten it to just
[I]id[/I].style.visibility, but either option works.
It just doesn't work at all in either Firefox 2 or 3b5, either way I write it. At this point, it looks like it's just the javascript stuff, and not CSS support in FF, since the underlying layer doesn't show through the spaces in the top layer. So how is my syntax flawed in such a way that FF doesn't support it?
Just out of curiosity, is there a way to similarly shorten the .setAttribute part? It doesn't seem to let me shorten the object down to just the id. It would seem that it requires the top level DOM object classifications, unlike the .style part....
