Jump to content

[SOLVED] IE problem, could not solve it yet.


Rommeo

Recommended Posts

I have a left menu that keeps all my links. But that does not work with IE. I tried most of the things like "clear:both;" "position : relative" etc. Could not solve it yet. Can someone please help me to solve this problem ?

 

Here is the problem : 

2m79riw.jpg

http://i36.tinypic.com/2m79riw.jpg

 

My html code ;

<body>
        <div id="button">
                        <ul>
<li><a href="tourism.html">Tourism</a></li>
<ol>
  <li><a href="cities.html"><img src="arrow.gif">Cities</a></li>
	<li><a href="beaches.html"><img src="arrow.gif">Beaches</a></li></ol>
<li><a href="education.html">Education</a></li>
<ol><li><a href="universities.html"><img src="arrow.gif">Universities </a></li>
	<li><a href="highschool.html"><img src="arrow.gif">High School</a></li>	</ol>
<li><a href="maps.html">Maps</a></li>
                        </ul>
    </div>
</body>

 

My CSS file

#button {
width: 175px;
padding: 0 0 1em 0;
    margin-bottom: 1em; 
font-family: Tahoma, Arial, sans-serif;
font-size : 12px;
background-color: #90bade;
color: #333;
font-weight: bold;
        }

        #button ul {
                list-style: none;
                margin: 0;
                padding: 0;
                border: none;


                }

#button li {
    border-bottom: 1px solid #90bade; 
margin: 0;
list-style: none;
list-style-image: none;
padding: 0px;
width: 175px;		
                }
			        #button ol {
margin: 0px;
list-style: none;
list-style-image: none;
font-size : 10px;
padding: 0px;
text-align: left;
width: 175px;
                }

        #button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #3366cc;
color: #fff;
text-decoration: none;


}


#button img {
border: 0px;
}



        html>body #button li a {
                width: auto;
                }

        #button li a:hover {
                border-left: 10px solid #1c64d1;
                border-right: 10px solid #5ba3e0;
                background-color: #2586d7;
                color: #fff;
                }

        #button li #active {
                border-left: 10px solid #1c64d1;
                border-right: 10px solid #5ba3e0;
                background-color: #2586d7;
                color: #fff;
                }

It's because your code structure is wrong, and your code is invalid. Use the w3c validator to see why.

I entered the website : http://jigsaw.w3.org/css-validator/validator

it says

"Congratulations! No Error Found.

This document validates as CSS level 2.1 !"

 

I would like to hear if you have noticed any errors please, I need to solve asap.

 

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.