...

View Full Version : problems with IE's CSS code interpretation: margin-bottom disappeared



jedi
07-05-2005, 08:31 PM
Hi, guys! I experience some problems with IE's CSS code interpretation (well,the fault may be on my side as well)
look at this page: http://www.jedi.aktualne.cz/test.php

in Opera8+7 & Firefox it works fine i.e. change colour and bg image of the link, but in IE6 space between menu items is sprawling and shrinking and I have no idea how to fix it, or whats the cause. Just look at the link above and check relevant code below.
HTML code


<body>

<div id="menu-left"><br><br>
<div class="menu-separator">whatever</div>
<a href="index.php?include=xhtml/entrance.php" title="úvodní strana">úvodní strana</a>
<a href="index.php?include=xhtml/reference.php" title="úvodní strana">Alpha</a>
<a href="index.php?include=xhtml/programy.php" title="úvodní strana">Beta</a>
<a href="index.php?include=xhtml/kontakt.php" title="úvodní strana">Gamma</a>

<div class="menu-separator">other</div>
<a href="index.php?include=xhtml/kontakt.php" title="úvodní strana">Kach</a>
</div>

</body>

... and CSS code


body {
padding: 0px;
margin: 0px;
background-color: #CDE2FA;
color: Black;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: normal;
background-repeat: repeat;
background-image: url(skins/blue/bg.gif);
}
/*======= MENU ===========*/
.menu-separator{
background-color: #345E8F;
background-image: url(skins/blue/menu/separator-right.gif);
width: 135px;
height: 21px;
background-repeat: no-repeat;
background-position: right top;
margin-bottom: 4px;
margin-top: 25px;


border-bottom: 1px solid Black;
padding-left: 30px;
color: #CDE2FA;
font-weight: bold;
line-height: 21px;
}
#menu-left {
margin-top: 25px;
}
#menu-left a {
display: block;
width: 135px;
height: 19px;
margin-bottom: 4px;
padding-left: 30px;

text-decoration: none;
font-family: Arial, sans-serif;
color: Black;
text-align: left;
font-weight: bold;

border: 1px solid Black;
border-left: none;
border-top: 1px solid White;

background-color: White;
background-image:url(skins/blue/menu/sipka.gif);
background-repeat: no-repeat;
}
#menu-left a:hover {
margin-bottom: 4px;

color: Red;

border: 1px solid Black;
border-left: none;
border-top: 1px solid White;

background-position: left bottom;

}


Problem looks like like to be somewhere around that 4px margin-bottom, but everything seems to be alright to me... :(

_Aerospace_Eng_
07-06-2005, 12:06 AM
IE needs all of the psuedo classes to work properly. Try this

#menu-left a, #menu-left a:link, #menu-left a:visited, #menu-left a:active {
display: block;
width: 135px;
height: 19px;
margin-bottom: 4px;
padding-left: 30px;

text-decoration: none;
font-family: Arial, sans-serif;
color: Black;
text-align: left;
font-weight: bold;

border: 1px solid Black;
border-left: none;
border-top: 1px solid White;

background-color: White;
background-image:url(skins/blue/menu/sipka.gif);
background-repeat: no-repeat;
}
#menu-left a:hover {
margin-bottom: 4px;

color: Red;

border: 1px solid Black;
border-left: none;
border-top: 1px solid White;

background-position: left bottom;

}

jedi
07-06-2005, 06:07 AM
hmm, it doesnt work, still the same problem...

_Aerospace_Eng_
07-06-2005, 06:58 AM
Hmm one thing I noticed was your doctype. I've never seen that doctype before. Are you serving different doctypes depending on the browser? You should really be using an unordered or ordered list for your links. Use this as the markup

<div id="menu-left"><br><br>
<div class="menu-separator">whatever</div>
<ul>
<li><a href="index.php?include=xhtml/entrance.php&amp;PHPSESSID=09beb34b1d6521c48b4d1e7ea506e9f2" title="úvodní strana">úvodní strana</a></li>
<li><a href="index.php?include=xhtml/reference.php&amp;PHPSESSID=09beb34b1d6521c48b4d1e7ea506e9f2" title="úvodní strana">Alpha</a></li>
<li><a href="index.php?include=xhtml/programy.php&amp;PHPSESSID=09beb34b1d6521c48b4d1e7ea506e9f2" title="úvodní strana">Beta</a></li>
<li><a href="index.php?include=xhtml/kontakt.php&amp;PHPSESSID=09beb34b1d6521c48b4d1e7ea506e9f2" title="úvodní strana">Gamma</a></li>
</ul>
<div class="menu-separator">other</div>
<ul>
<li><a href="index.php?include=xhtml/kontakt.php&amp;PHPSESSID=09beb34b1d6521c48b4d1e7ea506e9f2" title="úvodní strana">Kach</a></li>
</ul>
</div>
and this as the CSS for the links.

#menu-left ul {
margin:0;
padding:0;
list-style:none;
}
#menu-left li {
margin-bottom:4px;
}
#menu-left a, #menu-left a:link, #menu-left a:visited, #menu-left a:active {
display: block;
width: 135px;
height: 19px;
padding-left: 30px;
text-decoration: none;
font-family: Arial, sans-serif;
color: Black;
text-align: left;
font-weight: bold;

border: 1px solid Black;
border-left: none;
border-top: 1px solid White;

background-color: White;
background-image:url(skins/blue/menu/sipka.gif);
background-repeat: no-repeat;
}
#menu-left a:hover {
color: Red;
border: 1px solid Black;
border-left: none;
border-top: 1px solid White;

background-position: left bottom;

}
CSS should really be lowercase as well.

jedi
07-06-2005, 05:16 PM
I made the menu as a list and it work. As for the doctype, its copied from amaya browser/editor a long time ago, i ll take a look and possibly replace it with a simple (but sufficient) one. Anyway, I dont use those languages defined in doctype (like mathml). to reply your q, Its used for all browsers.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum