#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2008
    Posts
    2
    Rep Power
    0

    CSS Issues Opera


    Hey everyone, My page renders correctly in Safara, Firefox and Internet Explorer. However Opera 9.27 causes a bit of concern.

    The stylesheet is as follows
    Code:
    html, body, h1, h2, h3, h4, ul, li {
    	margin: 0;
    	padding: 0;
    }
    h1 img {
    	display: block;
    }
    img {
    	border: 0px none;
    }
    a {
    	color: #464544;
    }
    a:hover {
    	color: #FFA405;
    }
    .left {
    	float: left;
    }
    .right {
    	float: right;
    }
    
    .clear {
    	clear: both;
    }
    
    
    body {
    	background: #ECF4F7;
    	text-align: center;
    	font: 11px verdana, arial, sans-serif;
    	color: #695F4C;
    	padding-bottom: 10px;
    }
    
    /** layout **/
    #wrapper {
    	text-align: left;
    	margin: 37px auto;
    	width: 839px;
    	background: #ffffff;
    	position: relative;
    	padding: 0;
    }
    
    #header {
      background: #D9D1BC url('images/logo.jpg') no-repeat;
      height: 192px
    }
    
    
    #nav {
      background: #4B5360;
      position: absolute;
      top: 153px;
      left: 339px;
      width: 499px;
      height: 20px;
      padding: 9px 0px;
      text-align: center;
      margin: 0;
    }
    
    #nav li {
      list-style: none;
      display: inline;
      color: #fff;
    }
    #nav a {
      text-decoration: none;
      color: #fff;
    }
    
    
    #body {
      background-color:#FFF;
    }
    
    #postheadb {
      font: 10px verdana, arial, sans-serif;
      font-weight: bold;
      color: #FFFAF0;
      float: right;
      width: 500px;
      background: #2dbaa7;
    }
    #postheadb .inner {
      padding: 6px 12px;
      width/**/:/**/ 501px;
      Height/**/:/**/ 10px;
    }
    #postheadab p {
      margin: 0.9em 0;
    }
    
    #posthead {
      font: 10px verdana, arial, sans-serif;
      font-weight: bold;
      color: #FFFAF0;
      float: right;
      width: 839px;
      background: #2dbaa7;
    }
    #posthead .inner {
      padding: 6px 12px;
    }
    #posthead p {
      margin: 0.9em 0;
    }
    
    #contentb{
      font: 12px verdana, arial, sans-serif;
      color: #cad10e;
      float: right;
      background: #40789d;
      
    }
      
    #contentb .inner {
      padding: 6px 12px;
      width/**/:/**/ 476px;
      Height/**/:/**/ 52px;
    }
    
    #contentb p {
      margin: 0.9em 0;
    }
    
    #content{
      font: 12px verdana, arial, sans-serif;
      color: #cad10e;
      float: right;
      width: 839px;
      background: #40789d;
    }
      
    #content .inner {
      padding: 12px 12px;
    }
    
    #content p {
      margin: 0.9em 0;
    }
    
    #copyright {
      text-align: center;
      background: #030303;
      font-size: 9px;
      padding: 2px;
      width/**/:/**/ 92.8em;
      Height/**/:/**/ 3em;
    }
    
    
     input
    {
      color: #FFFAF0;
      background: #40789d;
      vertical-align: middle;
    }
    
    .email input
    {
    position:absolute;
    left: 40px;
    top: 20px;
    color: #781351;
    width: 225px;
    background: #fee3ad;
    
    }
    
    #sidebar
    {
    margin-bottom:0;
    float: left;
    background: #D3D3D3;
    padding: 395px 169px;
    Height/**/:/**/ 70px;
    }
    
    .videobar {
    position:absolute;
    left: 20px;
    top: 200px;
    height: 600px;
    width: 300px;
    float: right;
    padding: 10px;
    }
    
    .password input
    {
    position:absolute;
    left: 40px;
    top: 60px;
    color: #781351;
    width: 225px;
    background: #fee3ad;
    
    }
    
    #login{
     font: 10px verdana, arial, sans-serif;
      font-weight: bold;
      color: #FFFAF0;
      float: right;
      width: 839px;
      background: #2dbaa7;
    }
    
    #searchTerm{
    width: 125px;
    height: 15px;
    }
    
    #submitsearch{
    height: 22px;
    }
    
    #login .inner {
      padding: 90px 12px;
    }
    #login p {
      margin: 0.9em 0;
    }
    
    .submit input{
    position:absolute;
    left: 40px;
    top: 90px;
    width: 55px;
    height: 22px;
    padding: 0;
    }
    
    fieldset {
    
    border: 1px solid #781351;
    position: absolute;
    left: 300px;
    height: 130px;
    top: 215px;
    width: 300px;
    }
    
    legend {
    background-color: #ffa20c;
    border: 1px solid #781351;
    line-height: 1.5em;
    position: relative;
    top: -0.75em;
    }
    The website displayed in Firefox can be seen here
    Firefox

    and Opera here
    Opera

    many thanks,
    Doug
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, Doug.

    Next time please start your own thread. I split your reply off to make a new thread for you.

    New users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".".
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    It seems the URLs are only stripped when the page is displayed. As a moderator I can see them in the edit page. Here they are:

    Here's the page.

    The website displayed in Firefox can be seen here
    Firefox

    and Opera here
    Opera

    @Doug
    The first step in debugging should always be making sure that your code is valid.
    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/

    A big issue is that you're not using a valid doctype. You've combined two different ones. You must decide if you want to use HTML 4.01 Strict or XHTML 1.0 Strict. I recommend you read the XHTML vs HTML FAQ.


    Edit: *** Note to self: clean up other thread later ***
    Last edited by Kravvitz; April 21st, 2008 at 01:14 AM.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo