HTML Tutorial


 Forum HomeForum Home   FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
RegisterRegister - Not registered yet? Got something to say? Join HTML Code Tutorial!
Problem with <div> tag and Internet Explorer
Post new topic   Reply to topic    HTML Help Forum Index -> HTML Frame
View previous topic :: View next topic  
Author Message
skendall



Joined: 25 Aug 2008
Posts: 5

PostPosted: Mon Aug 25, 2008 7:59 am     Problem with <div> tag and Internet Explorer Reply with quote

Our company is working to create a survey using Instant Survey (www.instantsurvey.com), which has a template for creating your questions and possible answers, but we would also like to include our own flash videos to play along-side the questions.

We have been able to achieve this effect using the code below which embeds the .swf and then moves it up and to the right so that it is beside the questions. The only problem is that using Internet Explorer adds a 350 pixel gap where our code is placed (the height of the video), which pushes the "Next" button at the bottom of the page down 350 pixels. Using Firefox drastically reduces this problem only adding about 50 pixels of space where the code is located. Is there a way to achieve the same result we have, but without the spacing problem we are having with Internet Explorer?

Unfortunately, due to the way the template is layed-out we can't put the code below the "next" button. It has to come before it. If we put the code anywhere else in the questions it will put the same gap, so the bottom is the best place, but we need to eliminate the huge gap.


Here is the code we are using:

Code:
<DIV id="video" style="POSITION: relative; TOP:-500; left:650; width:0; height:0; BACKGROUND-COLOR: #01B128; layer-background-color: #01B128"><object width="1" height="1"><embed src="http://www.kipphoto.com/Vguide01.swf" type="application/x-shockwave-flash" allowfullscreen="false" width="200" height="350"></embed></object></DIV>


Thanks
sticks464



Joined: 31 Dec 2006
Posts: 1173

PostPosted: Mon Aug 25, 2008 11:51 am     Reply with quote

Not enough code, give the whole page code and css or a live link.
skendall



Joined: 25 Aug 2008
Posts: 5

PostPosted: Tue Aug 26, 2008 4:44 am     Reply with quote

Ok, here is the link to the page. Like I said before, we are restricted by the template the survey company provides so our code must go inside a question. We can add script to the page and we're able to add any html code, but we're restricted on where it is located on the page.

http://is-nri.com/take/?i=137009&r=28182312&h=6ckx6UWnWaNU_71r41T4lw

Thanks
sticks464



Joined: 31 Dec 2006
Posts: 1173

PostPosted: Tue Aug 26, 2008 6:02 am     Reply with quote

This will put the video between the header (SURVEY) and the first question in the dark green area and centered.

Code:
<table border="0" cellpadding="10" width="100%" cellspacing="0">
<tr>
<td align="center"><span name="p" align="left"><font size="7" face="Verdana, Arial, Helvetica, sans-serif" color="Khaki"><b>Survey</b></font></span></td>
</tr>
<tr>
<td>
<DIV id="video" style="POSITION: relative; width:200px; height:350px; BACKGROUND-COLOR: #01B128; layer-background-color: #01B128; margin:0 auto;"><object width="1" height="1"><embed src="http://www.kipphoto.com/Vguide01.swf" type="application/x-shockwave-flash" allowfullscreen="false" width="200" height="350"></embed></object></DIV>
</td>
</tr>
</table>
skendall



Joined: 25 Aug 2008
Posts: 5

PostPosted: Tue Aug 26, 2008 7:19 am     Reply with quote

I appreciate the suggestion, but unfortunately that won't work. I'm not allowed enough space to put in the code where the header is located. They only allow you 64 characters. Also, the way they have the template set up, the header is the same for every page and thus we couldn't use a separate video for each page if we put the code there.

Not only that, but we want to keep the videos out to the side of the questions, not right in the middle and above them.

If you know of a way I could achieve this let me know.

Oh, one more thing. Make sure you don't finish the survey, otherwise it won't let you back in.

Thanks
sticks464



Joined: 31 Dec 2006
Posts: 1173

PostPosted: Tue Aug 26, 2008 8:32 am     Reply with quote

Unfortunately what you want will not work if a users resolution is 800X600, anything outside the survey box will be off the screen. Check your current form in different resolutions to see what is happening. An alternative would be to make the flash movie with a transparent background and use absolute positioning to put it over the right side of the survey form so it doesn't cover the radio buttons that need to be checked.. That would take it out of the normal flow and would stay in the same location on each page.

If I understand this correctly, only the survey form gets refreshed on submit. If this is true the movie will not change unless it is written into the javascript to do so. However if a new page loads each time then a different movie can be included as you are trying to do. It can also go just above the submit button
Code:
</table><INPUT type="hidden" name="SurveyId" ><input type="hidden" name="r" value='28182312' ><input type="hidden" name="h" value='6ckx6UWnWaNU_71r41T4lw' ><input type="hidden" name="instanceid" value='137009' ><input type="hidden" name="redirurl" value='' ><input type="hidden" name="questionn" value="" ><input type="hidden" name="categoryn" value="" ><input type="hidden" name="prevquestionn" value="" ><input type="hidden" name="prevcategoryn" value="" ><INPUT type="hidden" name="PageID" value="1"><table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td>
<DIV id="video" style="POSITION: relative; width:200px; height:350px; BACKGROUND-COLOR: #01B128; layer-background-color: #01B128; margin:0 auto;"><object width="1" height="1"><embed src="http://www.kipphoto.com/Vguide01.swf" type="application/x-shockwave-flash" allowfullscreen="false" width="200" height="350"></embed></object></DIV>
</td>
</tr>
<tr>
<td><br><br><hr>
<center><INPUT value="Next" style="font-weight: bold;font-family:Arial, Helvetica, Sans-serif;" alt="submit form" type="submit"><br><br></center>
skendall



Joined: 25 Aug 2008
Posts: 5

PostPosted: Tue Aug 26, 2008 10:34 am     Reply with quote

The width of the survey is 640px, so we may need to make it a little thinner. I haven't addressed this yet because I was working on just getting the video to work the way we wanted first, but that is something I can easily change.

We actually started out using an "absolute" position, but changed to relative because if someone resized the browser window the video would stay in the same spot, sometimes covering up question and buttons, etc.

I suppose we could go back to this method if no other solution is possible, but it was much better having the video scroll and reposition with the window.

As far as the scripting goes, I was using some script to begin with (when I was using an absolute position), but didn't find it necessary after switching to a relative position. I'm not extremely savvy with the scripting, mostly gathering what I needed from other sources online and piecing it together, but I'll post you what I was using initially. I have the option in the survey template to include script that loads when the page loads.

Code:
var bbla = document.getElementById("video");
bbla.style.left = "50%"
var bblaleft = bbla.offsetLeft
bbla.style.left = bblaleft + 350
skendall



Joined: 25 Aug 2008
Posts: 5

PostPosted: Tue Sep 02, 2008 11:57 am     Reply with quote

Still no solution to this problem.
Display posts from previous:   
Post new topic   Reply to topic    HTML Help Forum Index -> HTML Frame All times are GMT - 8 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group
HTML Help topic RSS feed 

 
HOSTING / DESIGN
MAKE MONEY

Home
  |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   About
Copyright ©1997-2002 Idocs and ©2002-2007 HTML Code Tutorial