fellas,
would anyone be so kind and have a look at this product: <!-- m --><a class="postlink" href="http://www.steffiweismann.de/lager/CSS_Overs/positioning_bSimpler.html">http://www.steffiweismann.de/lager/CSS_ ... mpler.html</a><!-- m --> - this looks as supposed to in MSIE on MacOSX.
Mozilla/MacOSX displays the long div in the middle narrower, positions it a bit higher, leaves away the left border, and makes to bottom cell somewhat higher, too. (Please have a look at <!-- m --><a class="postlink" href="http://www.steffiweismann.de/lager/CSS_Overs/moz.gif">http://www.steffiweismann.de/lager/CSS_Overs/moz.gif</a><!-- m -->)
(and by the way, it looks totally ****ty in Opera 6.03 on OSX.)
I have no clue what the error might be that makes Mozilla behave that way.
Here's how it's supposed to look: <!-- m --><a class="postlink" href="http://www.steffiweismann.de/lager/CSS_Overs/msie.gif">http://www.steffiweismann.de/lager/CSS_Overs/msie.gif</a><!-- m -->
any idea?
thanks a lot
P.You may be running into a problem with Netscape/Mozilla running in Quirks Mode. To force the browser (and all new browsers for that matter) into standards compliance mode, use the following doctype instead of the one you have:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
More information on doctypes can be found at <!-- m --><a class="postlink" href="http://www.w3schools.com/tags/tag_doctype.asp">http://www.w3schools.com/tags/tag_doctype.asp</a><!-- m -->
I don't have access to a MacOSX machine right now so I haven't been able to test the results of using the doctype above.
Browsers will not work in standards compliance mode unless the doctype with the full URL to the Document Type Definition is in the doctype tag.That's a very interesting idea; the doctype proposed here isn't doing it, though. It still looks the same - and I just tested i tunder WinXP, it's almost the same there (Netscape has a problem, MSIE has less of a problem, but strange enough seems to think that a dashed line is a dotted line.)
Is the css itself written correctly?Hi Pierre
The css itself is correct, but I think I would redesign the html itself, and the way in which you've applied it. I'll have a look and see what I can do.
DaveIs this something like what you want? or does this screw up as well? (it doesn't on MOZ 1.4 PC).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>simpler</title>
<style type="text/css">
<!--
body {
background-color: #ffffff;
margin: 0px;
padding:0px;
}
#menu {
width: 120px;
border: 1px dotted #000000;
}
#menuspacer {
height: 200px;
}
a:link{
display:block;
border-bottom: 1px dotted #000000;
color: #000000;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size:9px;
}
a:visited{
display:block;
border: 1px dotted #000000;
color: #000000;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size:9px;
}
a:hover{
display:block;
border: 1px dotted #000000;
color: #ffffff;
background:#000000;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size:9px;
}
a:active{
display:block;
border: 1px dotted #000000;
color: #000000;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size:9px;
}
-->
</style>
</head>
<body>
<div id="menu">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"somewhere.htm">aktuell</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"somewhere.htm">arbeiten</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"somewhere.htm">steffiweismann</a>
<div id="menuspacer"></div>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"somewhere.htm" style="border-top: 1px dotted #000000;">kontakt</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"somewhere.htm">Hilfe und Impressum</a>
</div>
</body>
</html>Do you want the full explanation of why, how and wherefore?Thank you very much.
First of all, for anyone interested to have a look, I uploaded the html posted above: <!-- w --><a class="postlink" href="http://www.steffiweismann.de/lager/CSS_Overs/simpler_dave.html">www.steffiweismann.de/lager/CSS_Overs/simpler_dave.html</a><!-- w -->
Now, let me try to structure this a little bit.
A
In <!-- w --><a class="postlink" href="http://www.steffiweismann.de/lager/CSS_Overs/simpler_dave_Mod1.html">www.steffiweismann.de/lager/CSS_Overs/s ... _Mod1.html</a><!-- w -->, I inserted a different height for the .menu - definition. This seems to **** it all up. Why?
B
Some appearance details:
B.1
I found a different solution, please see <!-- w --><a class="postlink" href="http://www.steffiweismann.de/lager/CSS_Overs/positioning_e.html">www.steffiweismann.de/lager/CSS_Overs/p ... ing_e.html</a><!-- w -->. Decisive is the padding in the #comment - definition. This seems to be working, but MSIE/WinXP as well as Opera on the same platform take dashes for dots. Why is that? And how can one make them show dots?
B.2
In hover state, Mozilla makes the dotted line on the right (and only on the right) disappear. What kind of a bug is that? Or am I miscoding? And is there a workaround? (It could all be so nice...)
thank you.I haven't got time just now to go through all of that, but
a) I believe you've added a height of 20px on that div. This is shorter than the height of the contents, so the contents have overflowed underneath. I left the div without a height so it would stretch to it's contents. Try increasing the height value, or leaving it off.
would anyone be so kind and have a look at this product: <!-- m --><a class="postlink" href="http://www.steffiweismann.de/lager/CSS_Overs/positioning_bSimpler.html">http://www.steffiweismann.de/lager/CSS_ ... mpler.html</a><!-- m --> - this looks as supposed to in MSIE on MacOSX.
Mozilla/MacOSX displays the long div in the middle narrower, positions it a bit higher, leaves away the left border, and makes to bottom cell somewhat higher, too. (Please have a look at <!-- m --><a class="postlink" href="http://www.steffiweismann.de/lager/CSS_Overs/moz.gif">http://www.steffiweismann.de/lager/CSS_Overs/moz.gif</a><!-- m -->)
(and by the way, it looks totally ****ty in Opera 6.03 on OSX.)
I have no clue what the error might be that makes Mozilla behave that way.
Here's how it's supposed to look: <!-- m --><a class="postlink" href="http://www.steffiweismann.de/lager/CSS_Overs/msie.gif">http://www.steffiweismann.de/lager/CSS_Overs/msie.gif</a><!-- m -->
any idea?
thanks a lot
P.You may be running into a problem with Netscape/Mozilla running in Quirks Mode. To force the browser (and all new browsers for that matter) into standards compliance mode, use the following doctype instead of the one you have:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
More information on doctypes can be found at <!-- m --><a class="postlink" href="http://www.w3schools.com/tags/tag_doctype.asp">http://www.w3schools.com/tags/tag_doctype.asp</a><!-- m -->
I don't have access to a MacOSX machine right now so I haven't been able to test the results of using the doctype above.
Browsers will not work in standards compliance mode unless the doctype with the full URL to the Document Type Definition is in the doctype tag.That's a very interesting idea; the doctype proposed here isn't doing it, though. It still looks the same - and I just tested i tunder WinXP, it's almost the same there (Netscape has a problem, MSIE has less of a problem, but strange enough seems to think that a dashed line is a dotted line.)
Is the css itself written correctly?Hi Pierre
The css itself is correct, but I think I would redesign the html itself, and the way in which you've applied it. I'll have a look and see what I can do.
DaveIs this something like what you want? or does this screw up as well? (it doesn't on MOZ 1.4 PC).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>simpler</title>
<style type="text/css">
<!--
body {
background-color: #ffffff;
margin: 0px;
padding:0px;
}
#menu {
width: 120px;
border: 1px dotted #000000;
}
#menuspacer {
height: 200px;
}
a:link{
display:block;
border-bottom: 1px dotted #000000;
color: #000000;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size:9px;
}
a:visited{
display:block;
border: 1px dotted #000000;
color: #000000;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size:9px;
}
a:hover{
display:block;
border: 1px dotted #000000;
color: #ffffff;
background:#000000;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size:9px;
}
a:active{
display:block;
border: 1px dotted #000000;
color: #000000;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size:9px;
}
-->
</style>
</head>
<body>
<div id="menu">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"somewhere.htm">aktuell</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"somewhere.htm">arbeiten</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"somewhere.htm">steffiweismann</a>
<div id="menuspacer"></div>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"somewhere.htm" style="border-top: 1px dotted #000000;">kontakt</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"somewhere.htm">Hilfe und Impressum</a>
</div>
</body>
</html>Do you want the full explanation of why, how and wherefore?Thank you very much.
First of all, for anyone interested to have a look, I uploaded the html posted above: <!-- w --><a class="postlink" href="http://www.steffiweismann.de/lager/CSS_Overs/simpler_dave.html">www.steffiweismann.de/lager/CSS_Overs/simpler_dave.html</a><!-- w -->
Now, let me try to structure this a little bit.
A
In <!-- w --><a class="postlink" href="http://www.steffiweismann.de/lager/CSS_Overs/simpler_dave_Mod1.html">www.steffiweismann.de/lager/CSS_Overs/s ... _Mod1.html</a><!-- w -->, I inserted a different height for the .menu - definition. This seems to **** it all up. Why?
B
Some appearance details:
B.1
I found a different solution, please see <!-- w --><a class="postlink" href="http://www.steffiweismann.de/lager/CSS_Overs/positioning_e.html">www.steffiweismann.de/lager/CSS_Overs/p ... ing_e.html</a><!-- w -->. Decisive is the padding in the #comment - definition. This seems to be working, but MSIE/WinXP as well as Opera on the same platform take dashes for dots. Why is that? And how can one make them show dots?
B.2
In hover state, Mozilla makes the dotted line on the right (and only on the right) disappear. What kind of a bug is that? Or am I miscoding? And is there a workaround? (It could all be so nice...)
thank you.I haven't got time just now to go through all of that, but
a) I believe you've added a height of 20px on that div. This is shorter than the height of the contents, so the contents have overflowed underneath. I left the div without a height so it would stretch to it's contents. Try increasing the height value, or leaving it off.