View Full Version : CSS in Opera

01-10-2008, 08:29 PM
I use some hacks so my layout would look the same in different browsers.
They work, but not in Opera :(


<div id="footer">
<li class="current">.Home</li>
<li><a href="portfolio.php">.Portfolio</a></li>
<li><a href="bericht.php">.contact</a></li>

#footer {
position: relative;
background-image: url(images/footer.gif);
background-repeat: no-repeat;
background-position: top center;
width: 634px;
height: 40px;
background-color: #fbf4f4;
#footer ul {
position: absolute; right: 15; bottom: -10; _bottom:3;
#footer li {
font-size: 1em;
color: #26393d;
font-weight: bold;
list-style: none;
display: inline;
padding: 0 0 0 3;
#footer a:link, a:visited {
text-decoration: none;
color: #26393d;
#footer a:hover {
color: #fbf4f4;
background-color: #26393d;
text-decoration: none;
I have also tried this, but the result is the same

#footer ul {
position: absolute; bottom: -10 !important; right: 15; bottom /**/:5;

In IE6, IE7, FF and Safari
In Opera

What would be the best way to solve this?

Thx in advance

01-10-2008, 09:12 PM
This is the result of validating the css. Also we really do need to see all your code or preferably a url. Also you do not show a doctype, which is essential.


URI : file://localhost/TextArea
11 #footer ul Value Error : right only 0 can be a length. You must put an unit after your number : 15
11 #footer ul Value Error : bottom only 0 can be a length. You must put an unit after your number : -10
11 #footer ul Property _bottom doesn't exist : 3
20 #footer li Value Error : padding only 0 can be a length. You must put an unit after your number : 0 0 0 3

01-10-2008, 11:46 PM
This is only part of the code, the complete page validates.

#footer ul Property _bottom doesn't exist : 3
This is a working hack for IE.

Anyway, like I said, this works in all browsers except Opera

01-11-2008, 12:33 AM
this is overcomplicated for no reason.

why not float the list right and apply a padding to it?

let's say :

#footer ul {
padding: 0 15px 10px 0

EDIT : bottom padding not even required, you can use a line-heigh equal of the graphic if you want it centered.

01-11-2008, 01:17 AM
Thx for the reply

#footer ul {
clear: right;
padding: 6px 15px 0px 0px;
_padding: 20px 15px 0px 0px;
seems to work in IE6, IE7, FF, Opera and Safari