Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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
    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
    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...

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    IE needs all of the psuedo classes to work properly. Try this
    Code:
    #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;
      
    }

  • #3
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    another idea?

    hmm, it doesnt work, still the same problem...

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Code:
    <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.
    Code:
    #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.
    Last edited by _Aerospace_Eng_; 07-06-2005 at 06:13 AM.

  • #5
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thanks!

    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •