The ol/li problem

Posted on 01/07/2009 by Charalampos Chrysikopoulos

I was setting up a web site with joomla and at last the time for the data input has come. Evething seemed to work well. I checked evething in Safari, Firefox and IE8 but in IE7 there was a problem. The first number (1) of an ol/li list has gone.

Trying to solve the problem I isolated the code with the problem in a html and a css file.

In Firefox 3 the result looks lite this:
In Safari 4 it looks like this:

The html page code is this:

Here is the title

tool1
tool2


and the css code:

body {

}

.page {
width: 100%;
height: 500px;
}

.content {
width: 300px;
}

.toolbar {
background: #ECECEC none repeat scroll 0 0;
border-top: 1px solid #DDDDDD;
clear: both;
display: block;
float: left;
margin-bottom: 15px;
width: 100%;
}

.leftToolbar {
float: left;
padding: 5px;
width: 80%;
}

.rightToolbar {
loat: right;
width: 15%;
}

.menu {

}

I could not find a solution but luckily I found a work around. The problem occurs because the first element of the list doesn't have enough space to show up in the right position. Making the content boarder (try resizing the browser, or try resizing the content with firebug) solves the problem. Not a nice solution be an acceptable workaround.

This entry was posted in css, html, riddle and tagged by Charalampos Chrysikopoulos