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

Thread: CSS in Opera

  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    73
    Thanks
    26
    Thanked 0 Times in 0 Posts

    CSS in Opera

    I use some hacks so my layout would look the same in different browsers.
    They work, but not in Opera

    HTML
    Code:
    <div id="footer">
    <ul>
    <li class="current">.Home</li>
    <li><a href="portfolio.php">.Portfolio</a></li>
    <li><a href="bericht.php">.contact</a></li>
    </ul>
    </div>
    CSS
    Code:
    #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-family:Arial,sans-serif;
    	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
    Code:
    #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

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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.

    Frank

    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New Coder
    Join Date
    Oct 2007
    Posts
    73
    Thanks
    26
    Thanked 0 Times in 0 Posts
    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
    Last edited by friz; 01-11-2008 at 01:18 AM. Reason: Removed link

  • #4
    New Coder
    Join Date
    Jun 2007
    Location
    Quebec, Canada
    Posts
    64
    Thanks
    4
    Thanked 3 Times in 3 Posts
    this is overcomplicated for no reason.

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

    let's say :

    Code:
    #footer ul {
    	float:right;
    	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.
    Last edited by vexen; 01-11-2008 at 12:35 AM.

  • #5
    New Coder
    Join Date
    Oct 2007
    Posts
    73
    Thanks
    26
    Thanked 0 Times in 0 Posts
    Thx for the reply

    #footer ul {
    float:right;
    clear: right;
    padding: 6px 15px 0px 0px;
    _padding: 20px 15px 0px 0px;
    }
    seems to work in IE6, IE7, FF, Opera and Safari
    Last edited by friz; 01-11-2008 at 01:24 AM. Reason: Found solution


  •  

    Posting Permissions

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