| Author |
 Topic  |
|
|
MarcelG
Retired Support Moderator
Netherlands
2625 Posts |
 Posted - 21 April 2008 : 06:39:32
|
Guys, I'm having a bit of a situation with IE6 (who doesn't...)
I've created a website for my online photo portfolio, and it's 100% div based with CSS. In fact, it's XHTML 1.0 Strict. 
The structure of the page is like this:
<body>
<div id="wp-cont0">
<div id="wp-container">
<div id="wp-header">header</div>
<div id="wp-menu-main">menu</div>
<div id="wp-content">
<div id="wp-content-pri">
<div class="post">
CONTENT
</div>
</div>
</div>
</div>
<div id="wp-footer">footer</div>
<div id="bottommiddle">footer2</div>
</div>
</body>
This all validates, and works in all browsers the same.
Now the tricky part starts.
As 'content', I post this:
<div class="fullscreen" id="fullscreen">
the semi-transparent fullscreen layer
</div>
<div class="fsframe" id="fsframe">
<div class="fscontent" id="fscontent">
<div id='closex'>backbutton</div>
<p>real content (object)
</p>
</div>
</div>
The real content is an object, embedding an external webpage (as Iframe is not XHTML 1.0 Strict).
For these divs, the CSS is this:
div#fullscreen {
clear: both;
padding:0px;
border: 0px #FFFFFF solid;
background-color: #151515;
opacity:0.6;
-moz-opacity:0.6;
filter: alpha(opacity=60);
position:absolute;
top:0px;
left:0px;
width:100%;
height:1400px;
z-index:9998;
text-align: center;
}
div#fsframe {
clear: both;
padding:0px;
border: 0px #FFFFFF solid;
position:absolute;
top:0px;
left:0px;
width:100%;
height:1400px;
margin: 0px auto 0px auto;
z-index:9999;
text-align: center;
}
div#fscontent {
padding:10px;
clear: both;
border-top: 5px #FFFFFF solid;
border-bottom: 5px #FFFFFF solid;
border-right: 5px #FFFFFF solid;
border-left: 5px #FFFFFF solid;
background-color: #151515;
position:relative;
margin: 14px auto 0px auto;
width:840px;
text-align:left;
height:auto;
z-index:10000;
}
Now, the problem is that IE7, FireFox (2), Opera ánd Safari render the page correctly.
But, IE6 decides that width:100% for fullscreen and fsframe should not exceed the width of the parent div #wp-content, even though it's positioned absolute.
#wp-content{
min-height: 35em;
height: auto;
width: 920px;
}
Example: http://www.phomago.com/test/galleries/landshaftsparkduisburg_nord/
This page is valid XHTML Strict.
The only 'trick' to make IE6 render it as I want it to, is to close those parent divs before posting the content.
So instead of posting the above, I have to post this:
</div></div></div></div></div>
<div class="fullscreen" id="fullscreen">
the semi-transparent fullscreen layer
</div>
<div class="fsframe" id="fsframe">
<div class="fscontent" id="fscontent">
<div id='closex'>backbutton</div>
<p>real content (object)
</p>
</div>
</div>
Example: http://www.phomago.com/test/galleries/rick-2007-2008/
This renders ok in IE7, IE6 (I haven't dared to in Opera, Safari and FF) but...it's absolutely no valid XHTML 1.0 Strict.
Now....who can help me figure out to get this working in IE6, ánd retain valid XHTML 1.0 Strict ?
Somehow I need to get rid of the inheritence of the width of the parent div's.....but I have no idea.
Another thing I'm having trouble with is how I can make the the semi-transparent fullscreen layer (div fullscreen) to keep in it's place, when scrolling the page.
Now I've put it to 1400px height, as I don't expect any page shown in this wrapper to be taller than that, but that's not a decent way of doing this, and it gives a scrollbar even though there's nothing to scroll for. |
portfolio - linkshrinker - oxle - twitter |
Edited by - MarcelG on 21 April 2008 06:49:04 |
|
|
HuwR
Forum Admin
United Kingdom
20579 Posts |
Posted - 21 April 2008 : 08:02:08
|
I don't think you can get IE6 to behave with XHTML 1.0 strict, probably best to try XHTML 1.0 transitional rtaher than strict, don't forget that XHTML 1.0 is a much newer standard than IE 6 and was therefor never intended to work in IE6 which to all intents and purposes doesn't really follow any standards, IE6 only really works well in quirks mode which will almost certainly not work in other browsers.
You could try some javascript css hacks to get it to work in IE6, don't have them to hand, but will dig them out when I get home.
To keep your transparent div in place I think you use position:fixed,but I don't think that works in IE 6 either IE6 really is a bugger of a browser to code css for |
 |
|
|
MarcelG
Retired Support Moderator
Netherlands
2625 Posts |
Posted - 21 April 2008 : 08:45:58
|
Indeed...that's what I have found out too....IE Sux....But, let's not get into a IE-bashing topic.
I'm not really into the W3C standards, so can you give me any good reason why I would not want XHTML 1.0 transitional ? I just assumed XHTML 1.0 Strict is the best way to go....
By the way ; I already fixed the height of those divs, by setting the body height to 100% in the stylesheet; only with that IE6 accepts a DIV with 100% height. The 1400px height is now no longer needed.
So, two issues remain:
- How do I get IE6 to stop making the fsframe and fullscreen divs inheriting the width of wp-content.
- How do I keep the fullscreen div at a fixed position, keeping it in front of the background at all times.
|
portfolio - linkshrinker - oxle - twitter |
|
|
|
HuwR
Forum Admin
United Kingdom
20579 Posts |
Posted - 21 April 2008 : 09:08:43
|
mainly because even FF which is currently the most 'standards' compliant will be difficult to get everything to work using XHTML 1.0 strict, with transitional you may fair better, that is why I chose transitional for the .net version, but that is XHTML 1.1 not 1.0
to keep th div ontop you should just have to use z-index for everything, as for the width problem in IE6 there probably isn't much you can do, I took the view that if I wanted to be standards comliant with the .net version then IE6 would have to be ignored since it is not standards comliant at all.
it is not really about IE bashing, IE 6 just isn't compliant with the standards because the standards did not exist when IE6 was written, IE7 and FF both have a few quirks and neither are fully compliant, but it is generally easier to get a site to work with both IE7 and FF without having to be non standard.
also, don't forget that just because tables are frowned upon does not mean they are standards comliant, they are and they have there place, for instance in a forum where data IS tabulated, that is what tables are for
Just wait till you use IE8, which is even more standards compliant than FF, then you will see how uncompliant FF and IE7 really are. |
|
|
|
MarcelG
Retired Support Moderator
Netherlands
2625 Posts |
|
|
muzishun
Senior Member
United States
1079 Posts |
Posted - 21 April 2008 : 11:38:51
|
It sounds to me like the problem lies more in the absolute positioning of the divs rather than the doctype you're using. I have been using XHTML Strict for some time now, and the only time I had *major* issues with IE6 (other than the slew of CSS rendering problems that are a given) was when I built a site with absolute positioning.
That being said, I am not sure if I can offer a suggestion to fix it other than to see if there is a way to do what you want without using AP. |
Bill Parrott
Senior Web Programmer, University of Kansas
Co-Owner and Code Monkey, Eternal Second Designs (www.eternalsecond.com)
Personal Website (www.chimericdream.com) |
|
|
|
MarcelG
Retired Support Moderator
Netherlands
2625 Posts |
Posted - 21 April 2008 : 13:52:05
|
Mmmm, I've found something for keeping the semi-transparant div in it's place, but since I'm now at home, and don't have IE6 here (I only have 2 Vista stations...) I cannot test it. Will try some more tomorrow.
At the moment I've applied position:fixed; to the fullscreen div and that seems to do the trick, in both IE7 but in FireFox 2 that positions the div óver the embedded object....
[edit]That part is sorted too now ; it seems FireFox keeps seperate Z-index lists for fixed and absolute positioned divs.
I had to make the fsframe fixed too... That doesn't help....much either, as this means that the content of the fsframe div can not be viewed by scrolling....
Position:fixed; is out.
[edit2]
I've given up on CSS to perform the static div trick for me, and resorted to using the dreaded (but functional) javascript fix ; http://www.javascriptkit.com/javatutors/static3.shtml
It flickers, but it works in IE7 and FireFox, and it's better than nothing.
Now only one issue remains, and that is the wretched inheritence of the width of a parent div.
Let's get back to Google. |
portfolio - linkshrinker - oxle - twitter |
Edited by - MarcelG on 21 April 2008 14:16:03 |
|
|
|
phy1729
Average Member
USA
589 Posts |
Posted - 21 April 2008 : 17:56:23
|
[rant]
quote:
Originally posted by MarcelG
I'm not really into the W3C standards, so can you give me any good reason why I would not want XHTML 1.0 transitional ? I just assumed XHTML 1.0 Strict is the best way to go....
I use XHTML 1.1 and fall back to HTML 4.01 Strict when the browser doesn't support XHTML using this code. This gives a decent comparison of Transitional vs. Strict. But you should not write in XHTML if you do not send the application/xhtml+xml MIME type with it.
quote:
Originally posted by HuwR
mainly because even FF which is currently the most 'standards' compliant will be difficult to get everything to work using XHTML 1.0 strict, with transitional you may fair better, that is why I chose transitional for the .net version, but that is XHTML 1.1 not 1.0
FF is not the most standards compliant as it does not pass Acid 2 or 3. Although FF3 does pass 2 but not 3 which Safari and Opera both pass. There's not much difference between Strict an Transitional except for strict I tend to use CSS more. And 1.1 does not have the strict transitional differentiation.
quote:
Originally posted by HuwR
Just wait till you use IE8, which is even more standards compliant than FF, then you will see how uncompliant FF and IE7 really are.
IE8 is not more standards compliant than FF as it does worse on Acid 3
Note: I know Acid is not the final word on standard compliance but it is most easily used.
[/rant] |
|
|
| |
Topic |
|
|
|
Topic Locked
