Forum Moderators: not2easy
The issue is a tableless-design, and the different elements are colored - to see what Mozilla is thinking I have made the layers transparent, and the code for this is the only thing with makes the page invalid complying to the W3c-recommandations.
Both Opera and Internet Explorer renders correctly, and everything looks fine - but Mozilla is making the container-layer stay in background, and the last element (a footer) just behind. It looks pretty wierd.
Hopefully someone can help, or give a hint about what to change so the layout looks nice in Mozilla too.
Best regards
Troels Thomsen
[edited by: heini at 3:11 pm (utc) on June 23, 2003]
[edit reason] Removed url / please see charter - thanks! [/edit]
I wonder if it is something to do with you doctype definition. You are trying to conform to XHTML1.0 strict, right?
Try this DTD:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Also, in your style rules, use lowercase instead of uppercase. Instead of:
DIV { margin: 0; padding: 0; border: 0; text-align: left; }
DIV.transparent { filter: alpha(opacity=30); -moz-opacity: 0.3; }
Try:
div {...}
div.transparent {...}
HTH
<added>
Please see the TOS [webmasterworld.com] regarding posting URL's. In the CSS Forum (in particular) we ask that people only post to authentative sites (eg W3C). A mod/admin will more than likely remove the link unless you get there first! Try posting small and relevant code snippets of where you think the problem lies. This can also help with you figuring out the cause and a solution to your problem.
</added>
<BODY style="TEXT-ALIGN: center">
<DIV
style="BORDER-RIGHT: purple 2px solid; BORDER-TOP: purple 2px solid; MARGIN: 0px auto; BORDER-LEFT: purple 2px solid; WIDTH: 700px; BORDER-BOTTOM: purple 2px solid; BACKGROUND-COLOR: silver">
<DIV style="FLOAT: none; WIDTH: 700px">
<DIV class=transparent
style="FLOAT: left; WIDTH: 250px; BACKGROUND-COLOR: red"><BR><BR><BR><BR><BR><BR></DIV>
<DIV class=transparent
style="FLOAT: right; WIDTH: 450px; BACKGROUND-COLOR: green"><BR><BR><BR><BR><BR><BR></DIV>
<DIV class=transparent
style="FLOAT: right; WIDTH: 450px; BACKGROUND-COLOR: yellow"><BR><BR><BR><BR><BR><BR></DIV><div style="clear:both"></div></DIV>
<DIV class=transparent
style="FLOAT: none; WIDTH: 700px; HEIGHT: 50px; BACKGROUND-COLOR: blue">
</DIV></DIV></BODY></HTML>
Moz likes the clearing div's. Not sure why, but knowing their bug squashing prowess, I doubt that it's a bug...
Cheers!
That is exactly what the link were meant for, for illustrating what happends - since I have no clue on which part of the code that is causing the error.
The page is also valid (due to W3c-recommandations), the only thing causing errors is (as I wrote) the opacity-settings - and by removing these the design is still creating the same issue.
But the idea with using the clearing <DIV> worked. I won't add the XML-declaration, because the person who needs the code has a lot of data which does not comply with the XML-scheme.
But thanks for the help.
Best regards,
Troels Thomsen
But thanks for the help.
Is there still a problem with the code?
