SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Max-width of Objects?

    Is it possible to define a max-width for objects (i.e. a flash movie) like you can for images?

    object {max-width: 400px;} didn't seem to have an effect.
    Cheap cables and more.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You could do something like this for Firefox/opera/safari.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    object{
        max-width:380px;
        overflow:hidden;
        background:yellow;
        padding:10px;
        display:block;
    }
    .test{
        width:200px;
        height:20px;
        background:green;
    }
    .t2{background:blue;width:300px}
    .t3{background:orange;width:600px}
    
    </style>
    </head>
    <body>
    <div>
        <object>
            <div class="test"></div>
        </object>
        <object>
            <div class="test t2"></div>
        </object>
        <object>
            <div class="test t3"></div>
        </object>
    </div>
    </body>
    </html>
    It won't work in IE though.

    For IE7 you could wrap the object in a div.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    div{
        max-width:380px;
        overflow:hidden;
        background:yellow;
        padding:10px;
        display:block;
    }
    .test{
        width:200px;
        height:20px;
        background:green;
        padding:0;
    }
    .t2{background:blue;width:300px}
    .t3{background:orange;width:600px}
    
    </style>
    </head>
    <body>
    <div>
        <object>
            <div class="test"></div>
        </object>
        <object>
            <div class="test t2"></div>
        </object>
        <object>
            <div class="test t3"></div>
        </object>
    </div>
    </body>
    </html>
    Ie6 doesn't understand max-width anyway so you will just have to use a width for IE.


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
  •