Results 1 to 4 of 4

Thread: centering problem with lightbox-esque script

  1. #1
    Join Date
    Jul 2005
    Location
    UK
    Posts
    159
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default centering problem with lightbox-esque script

    i'm using multibox, to have a pop-up mp3 player in a lightbox kind of script. it is supposed to load centered in the screen. I have a long vertical scrolling page, so when the multibox pops up, it is in the literal center of the page, and i have to scroll down to see it.

    I'm sure this is a simple css problem, but I'm not good with positioning. The page is here, click on any of the mp3 files to active multibox:

    http://metrosonic.net/showcase-multibox.html

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    It actually works OK in Opera. In Firefox it works like you say. In IE 7 the player appears in the upper left corner.

    The first thing I would try is using a strict HTML 4.01 DOCTYPE with URL:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    I suggest this because I see your 'box' script uses mootools, and many of these libs (mootools included) require a standards compliant environment in order to get the dimensions they require for calculating positioning.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2005
    Location
    UK
    Posts
    159
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    that works great, but it messes up the nav bar at the top. can you help me fix that? look at this page to see what i mean:

    www.metrosonic.net/showcase-multibox2.html

  4. #4
    Join Date
    Feb 2009
    Posts
    303
    Thanks
    18
    Thanked 36 Times in 36 Posts

    Default

    Remove all the <FONT> tags from the menu, then add this code to your CSS file:
    Code:
    #table1 tbody tr td a, #table1 tbody tr td a:hover, #table1 tbody tr td a:active, #table1 tbody tr td a:visited {
    color:#fff;
    text-decoration:none;
    }
    And where you have the dividing image, remove the BGCOLOR:
    Code:
    <td width="20" bgcolor="#336699">
    <img width="20" height="20" border="0" src="images/ms_menu_left.gif"/>
    </td>
    And if you can - try to get away from tables and use a CSS menu!

    Hope this helps,

    // X96 WD \\
    Alex Blackie, X96 Design
    My Website
    I specialize in: HTML5, CSS3, PHP, Ruby on Rails, MySQL, MongoDB, Linux Server Administration

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
  •