Problem with right-margin with css 100% - 350px layout

Question

could anyone please help me with a problem I have been having with a 100% - 350px layout for embedding vimeo video?

It seems like the right-margin property is getting ignored here, and the layout is overflowing to the right. I'm hoping this a simple mistake, but seems like I've tried everything. I'm running out of time.

Help would be really appreciated.

css:

#container {
 position:absolute;
 width:100%;
    height:100%;
}

#content {
 width:100%;
 height:100%;
 margin-left:350px;
 margin-right:350px;
}

.video {
 padding:0 0 0 0;
 height:100%;
 width:100%;
}

html (the vimeo embed code has been reformatted for validation):

<div id="container">
   <div id="content">
      <object class="video" type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=8808526&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=ffffff">
     <param name="allowfullscreen" value="true" />
     <param name="allowscriptaccess" value="always" />
        <param name="color" value="ffffff" />
     <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526" />
      </object>
     <div style="clear:both; height:1px; line-height:0">&nbsp;</div>
  </div>
</div>

EDIT: Another solution I have tried:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#container {
    position:absolute;
    width:100%;
    height:100%;
}

#content {
    margin-left: 350px;
    margin-right: 0px;
}

.video {
    padding:0 0 0 0;
    width:100%;
    height:100%;
}
</style>
</head>

<body>

<div id="container">
   <div id="content">
      <object class="video" type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=8808526&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=ffffff">
     <param name="allowfullscreen" value="true" />
     <param name="allowscriptaccess" value="always" />
        <param name="color" value="ffffff" />
     <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526" />
      </object>
  </div>
</div>

</body>
</html>
</head>

Edit: I'm using the solution for this type of positioning from this thread: How can I do width = 100% - 100px in CSS?

Erik · Answer 1 · 2010-01-21T01:15:11.773

0

The width of an element does not necessarily prevent elements contained within it from overflowing that element.

If you wish things outside your DIV not to display, set its overflow to hidden: overflow: hidden.

I'm not even sure if I'm understanding your issue properly, to be honest. A clarification of what you're actually hoping to achieve might be helpful if I'm complete misreading you.

EDIT BELOW

Your approach is a bit strange, try this:

<div id="container">
    <object> ... </object>
</div>


<style>
  #container { position: absolute; right: 5px; }
</style>

Additionally, you're trying to size the video with CSS -- CSS isn't going to have any effect on an object. If you were to change, say, to video { width: 50px; } it would not make your video 50px wide.

edited Jan 21 '10 at 01:15

answered Jan 20 '10 at 23:20

Erik

20,526
8
45
76

Thanks for your quick response. The problem with the code I have now is the video is overflowing to the right. I'd like the video to stop at the edge of the screen. Here's a screenshot: http://s877.photobucket.com/albums/ab334/0000ffo/?action=view&current=screen.png. – Emile Jan 21 '10 at 00:03
I'm confused by your edit. The Object CSS style is indeed effecting the width of the video. I would like to make the video object a 100% width and height - 350px layout and the reason why I'm doing it this way is because of the solutions that can be found on this thread: http://stackoverflow.com/questions/899107/how-can-i-do-width-100-100px-in-css – Emile Jan 21 '10 at 01:25
Thankyou very much for your time Erik, I really appreciate it. I have posted the solution as a 'new solution'. – Emile Jan 21 '10 at 02:15
Actually, CSS **does** have an effect on the object. At least when he's not using the DOCTYPE. How do you explain this? And what is the 'correct' way of sizing a video object? – littlegreen Jan 21 '10 at 08:03
Look at the embed code from any youtube video; object tags have height and width attributes -- like img tags do. – Erik Jan 21 '10 at 10:53

littlegreen · Answer 2 · 2010-01-30T12:35:25.350

0

In order to make the video smaller to stop at the right hand side of the screen (fit to the screen), you'll have to drop some of the 100% attributes and make a few more edits. Here's the new CSS and HTML.

CSS

#container {
    width:100%;
    height:100%;
}

#content {
    margin-left: 350px;
    margin-right: 0px;
}

.video {
    padding:0 0 0 0;
    width:100%;
    height:90%;
}

HTML

<div id="container">
   <div id="content">
      <object class="video" type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=8808526&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=ffffff">
     <param name="allowfullscreen" value="true" />
     <param name="allowscriptaccess" value="always" />
        <param name="color" value="ffffff" />
     <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526" />
      </object>
  </div>
</div>

EDIT As Emile rightly pointed out, for some reason this only works if you don't set a DOCTYPE for your document. Otherwise it works in Chrome, but Firefox shows a blank screen. After some testing I concluded that this has to do with the percentage widths given for the video object. Firefox doesn't support that.

As Vimeo (unlike YouTube) doesn't allow URL parameters to be passed for determining the video size, and percentage widths apparently have quirks, my only other suggestion would be to specify a fixed width and height on the video object (like on this page, see the page source), set the visibility of the content DIV to invisible, use a Javascript or jQuery function to determine the page width, change the width/height attributes of the OBJECT tag accordingly, and set the object to visible again. It's not very neat, but it'll probably work, and it would be independent of doctype.

EDIT I have implemented this solution, and it works in all browsers. See my separate new answer about it.

edited Jan 30 '10 at 12:35

answered Jan 21 '10 at 00:39

littlegreen

7,290
9
45
51

Thanks, Unfortunately I have already tried this solution and I get the following results: Chrome - works well: Screenshot - http://s877.photobucket.com/albums/ab334/0000ffo/?action=view&current=screen2.png&newest=1 IE8 - video sits too high on the screen: Screenshot - http://s877.photobucket.com/albums/ab334/0000ffo/?action=view&current=iescreen.png&newest=1 Firefox - Video is missing: Screenshot - http://s877.photobucket.com/albums/ab334/0000ffo/?action=view&current=firefoxscreen.png&newest=1 I have the overflow-x and overflow-y set to hidden. – Emile Jan 21 '10 at 01:10
Oh, And I'd like to get the video to stop at the right hand side of the screen. – Emile Jan 21 '10 at 01:11
OK, I've narrowed down my answer to reflect your clarification. By the way, I tested my code, and it's working in Chrome, Firefox and IE. Did you copypaste my code literally? – littlegreen Jan 21 '10 at 01:21
Correction, IE doesnt display the video, but the videoframe is the right size though. See also here: http://www.antiflu.dds.nl/so3/ – littlegreen Jan 21 '10 at 01:29
I did copy paste the code literally, it's strange. There must be something else on the page messing with this. Thanks for this clarification, I'll have to do some code sifting. – Emile Jan 21 '10 at 01:30
This is indeed puzzling, I have trimmed the page right down to the bare bones and the problem still exists. I'll post my code in a following comment. Hopefully you'll see something. – Emile Jan 21 '10 at 01:39
Not a good idea it seems, formatting not allowed here, I'll add it to the first post. – Emile Jan 21 '10 at 01:40
Thankyou so much for your time. I have found the solution thanks to your posting of this on your website. It's been added as a solution on the thread. I can't thank you enough! This has been bugging me for about 8 hours. – Emile Jan 21 '10 at 02:10
I'm having trouble implementing this script, could you please explain? – Emile Jan 23 '10 at 01:23
What kind of trouble? You have to copypaste it into the header of your HTML file. It will include the "jQuery" JavaScript library and implement a function on the event of loading of the window. This function will affect the items with class=video and id=content. You can debug the function behaviour with FireBug in Firefox or Ctrl-Shift-J in Chrome. Anyway, please tell me what kind of problems you have and I can help you again :) – littlegreen Jan 25 '10 at 09:02
Sorry for the late reply on this, I have been super busy. I have put the code into the head of the page and left the css and html as it was. What happens: Chrome - works well, Firefox - placement not working (smaller) (no errors in error console) and infinite loading for video, IE - Correct positioning/ scale but infinite loading screen. – Emile Jan 28 '10 at 02:33
hi emile, no problem, nice that you still followup though. the source code i had worked in Firefox and Chrome, and I had the infinite loading screen in IE. I put some time into the IE issue until I found out that it is a frequently occurring issue with Vimeo and IE. Does IE work in your other page? Could u put the HTML online somewhere? – littlegreen Jan 28 '10 at 08:36
I have posted new answer, that code should work in IE/Firefox/Chrome. Hope that Opera/Safari work too ^^ – littlegreen Jan 30 '10 at 12:49
Sorry (again_), about being slow on the uptake. Thanks very much for this, I'll check it out. – Emile Jan 31 '10 at 11:48

score 0 · Answer 3 · answered Jan 21 '10 at 02:08

0

Thankyou very much Erik and littlegreen. I have found the problem. It seems that you can't use a DOCTYPE if you want to do this. I just took out the Doctype and xmlns it worked. Wierd but effective.

answered Jan 21 '10 at 02:08

Emile

55
1
7

I've run the code through the W3C validators with several doctypes, nothing comes up.. the solution still feels very 'icky' to me, what if some future browser decides to guess the standard doctype differently? I've edited my solution to suggest a Javascript approach that would be independent of Doctype. Ugly, but it'll probably work. – littlegreen Jan 21 '10 at 09:04

littlegreen · Accepted Answer · 2010-01-30T12:48:30.737

Here is a jQuery solution that works with multiple doctypes and in Chrome, Firefox and IE. IE will possibly show a blank page, but this is a Vimeo issue and can be solved by updating the IE flash plugin as discussed here and very extensively here.

I have also placed the code online.

<!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>
<title>Vimeo test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">

    jQuery(function($){
        $(window).load(function() {
            var h = $(window).height() * 0.9;
            var w = $("#content").width();
            $(".video").width(w);
            $(".video").height(h);
            $("#content").css('visibility', 'visible');
        });
    });

</script>
<style type="text/css">

#container {
    width:100%;
    height:100%;
}

#content {
    margin-left: 350px;
    margin-right: 0px;
    visibility: hidden;
}

</style>
</head>
<body>

<div id="container">
    <div id="content">
        <object class="video" width="400" height="225">
            <param name="allowfullscreen" value="true" />
            <param name="allowscriptaccess" value="always" />
            <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" />
            <embed class="video" src="http://vimeo.com/moogaloop.swf?clip_id=8808526&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="225"></embed>
        </object>
    </div>
</div>

</body>
</html>

Problem with right-margin with css 100% - 350px layout

4 Answers4

Linked