tags:

views:

300

answers:

4
Q: 

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

Hi, 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;amp;server=vimeo.com&amp;amp;show_title=0&amp;amp;show_byline=0&amp;amp;show_portrait=0&amp;amp;color=ffffff"&gt;
     <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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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;amp;server=vimeo.com&amp;amp;show_title=0&amp;amp;show_byline=0&amp;amp;show_portrait=0&amp;amp;color=ffffff"&gt;
     <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: http://stackoverflow.com/questions/899107/how-can-i-do-width-100-100px-in-css

A: 

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.

Erik  2010-01-20 23:20:49
Emile  2010-01-21 00:03:07
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  2010-01-21 01:25:43
Thankyou very much for your time Erik, I really appreciate it. I have posted the solution as a 'new solution'.
Emile  2010-01-21 02:15: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  2010-01-21 08:03:12
Look at the embed code from any youtube video; object tags have height and width attributes -- like img tags do.
Erik  2010-01-21 10:53:03
Looked it up after posting, you're right.
littlegreen  2010-01-21 11:03:24
A: 

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;amp;server=vimeo.com&amp;amp;show_title=0&amp;amp;show_byline=0&amp;amp;show_portrait=0&amp;amp;color=ffffff"&gt;
     <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.

littlegreen  2010-01-21 00:39:35
Emile  2010-01-21 01:10:46
Oh, And I'd like to get the video to stop at the right hand side of the screen.
Emile  2010-01-21 01:11:49
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  2010-01-21 01:21:44
Correction, IE doesnt display the video, but the videoframe is the right size though. See also here: http://www.antiflu.dds.nl/so3/
littlegreen  2010-01-21 01:29:30
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  2010-01-21 01:30:54
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  2010-01-21 01:39:48
Not a good idea it seems, formatting not allowed here, I'll add it to the first post.
Emile  2010-01-21 01:40:27
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  2010-01-21 02:10:43
I'm having trouble implementing this script, could you please explain?
Emile  2010-01-23 01:23:21
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  2010-01-25 09:02:54
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  2010-01-28 02:33:48
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  2010-01-28 08:36:12
I have posted new answer, that code should work in IE/Firefox/Chrome. Hope that Opera/Safari work too ^^
littlegreen  2010-01-30 12:49:53
Sorry (again_), about being slow on the uptake. Thanks very much for this, I'll check it out.
Emile  2010-01-31 11:48:22
A: 

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.

Emile  2010-01-21 02:08:56
???? that is indeed rather weird! Anyhow, glad, you got it to work :)
littlegreen  2010-01-21 07:58:30
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  2010-01-21 09:04:45
update: it works!
littlegreen  2010-01-21 22:53:35
Great, will try this. Thanks.
Emile  2010-01-23 00:27:46
A: 

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<title>Vimeo test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"&gt;&lt;/script&gt;
<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;amp;server=vimeo.com&amp;amp;show_title=1&amp;amp;show_byline=1&amp;amp;show_portrait=0&amp;amp;color=&amp;amp;fullscreen=1" />
            <embed class="video" src="http://vimeo.com/moogaloop.swf?clip_id=8808526&amp;amp;server=vimeo.com&amp;amp;show_title=1&amp;amp;show_byline=1&amp;amp;show_portrait=0&amp;amp;color=&amp;amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="225"></embed>
        </object>
    </div>
</div>

</body>
</html>
littlegreen  2010-01-30 12:41:35
Your an absolute legend! Thanks, it works.
Emile  2010-01-31 11:59:33
Cool. Welcome to the wonderful world of Stack Overflow :-)
littlegreen  2010-01-31 23:38:05

related questions

IE7 HTML/CSS margin-bottom bug.
IE7: header above menu
How to create an all browser-compatible hanging indent style in CSS in a span
How can you customize the numbers in an ordered list?
style.display not working in Firefox, Opera, Safari - IE7 OK
Best WYSIWYG CSS editor?
How important is W3C XHTML/CSS validation when finalizing work?
Solve the IE select overlap bug
IE8 overflow:auto with max-height
Autosizing Textarea
What is the best way to create rounded corners using CSS?
FF3 WinXP != FF3 Ubuntu - why?
Is there a business reason for striving for pure CSS layout?
How to set up a CSS switcher in ASP.NET
Setting a div's height in HTML with CSS
Wrapping lists into columns
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
What sites offer free, quality web site design templates?
Can you recommend a good CSS online resource or book?
Html CSS Editor
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?