SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Location
    Nottingham England
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Page layout & Opera 7

    I recently purchased the Sitepoint HTML Utopia book and have found it interesting reading.

    I have designed a page layout which I planned to use as a basis for a new site, it looks great in the later versions of Explorer but I hit a couple of problems when viewing in Opera7. Due to this I decided to check out the Footbag Freaks site in Opera7 also to see how they got around the problems., however Footbag Freaks seems to experience the same probelms I do when viewd in Opera 7, namely, a top margin appears above the header even though a top margin is explicitly not specified, I cured that problem by specifying absolute positioning for my header section which cured the problem but messed things up in explorer.

    Has anyone else noticed that Footbags has problems in Opera and are there any known cures without messing up the Explorer view? I've tried all sorts of techniques but can't seem to get it to sit happily in both.
    It was working when I left last night!

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    If you have something like this in your CSS:
    Code:
    body {
      margin: 0;
    }
    Add "padding: 0;" to the rule. Opera uses padding to create space between your site and the browser window, while IE and Mozilla/Netscape use margins.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Location
    Nottingham England
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply.

    I do actually already have the piece of code you suggested in my body tag. I have tried all sorts of stuff to get this working but can't seem to eradicate that top margin no matter what.
    It was working when I left last night!

  4. #4
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you give the URL to the page on which you're having this problem?

    -Sam
    Sam Hastings

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Location
    Nottingham England
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Th url is http://www.ken-wake.co.uk/csstrial/styletrial.html .

    This is the page so far, I have yet to add a footer and other content but I wanted to get it right to this point. The CSS code is below.

    Code:
    body {
      margin: 0;
      padding: 0;
    }
    #top {
      margin: 0px;
      border-bottom: 2px solid;
      border-color: #FFCF31;
      padding-left: 10px;
      background-color: #306;;
      height: 102px;
      width: 100%;
    }
    #left {
      position: absolute;
      left: 0px;
      top: 102px;
      width: 20%;
      padding: 10px;
      border-top: 1px solid;
      border-color: #306;
      background: #306; 
      height: 500px;
    }
    #center {
      margin-top: 0;
      margin-left: 20%;
      margin-right: 20%;
      padding: 20px;
    }
    #right {
      position: absolute;
      right: 0px;
      top: 102px;
      width: 20%;
      padding: 10px;
      Border: 1px solid;
      Border-color:#306;
      background-color: #FFCF31;
      height: 500px;
    }
    #topright {
    position: absolute;
    margin-right: 20px;
    margin-left: 50%;
    background: transparent;
    margin-top: 2px;
    width: 50%;
    }
    
    ul#mainnav {
     list-style: none;
     margin: 0;
     padding: 0;
     background-color: #CCC;
     }
      
    ul#mainnav li {
     border-top: 1px solid #A5B5C6;
     }
    ul#mainnav li a {
     text-decoration: none;
     display: block;
     width: 88%;
     padding: 2px;
     background-color: #FFCF31; 
     font: bold 0.7em /1.5 arial, sans-serif;
     color: #fff;
     }
    ul#mainnav li a:hover {
     background-color: #306;
     color: #eee;
     }
    Thanks in advance for any help.
    It was working when I left last night!

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Location
    Nottingham England
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just in case anyone is interested, I believe I have now solved the problem.

    By specifying a margin-top: -18px in the body, the display is now ok in Opera without ruining the Explorer display.
    It was working when I left last night!


Bookmarks

Posting Permissions

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