HTML - Div Positioning Issue

You can view my site at www.palermostaging.com. It appears fine in IE but in firefox, the alignment is thrown off a little, I think the orange column is too tall. How can I fix this without changing the text size or placement?

Any suggestions are appreciated, source is viewable on the page.

Thanks,
Anders

Alright so basically what I want to do is take this site:
http://insightahoy.com/innuendo/plug...rogress.php?s=
and iFrame JUST the center part were it has the bosses and the progress, I just want that part of the site.
How would I create an iFrame to suck up just that part of the side and nothing else, what would the code be,
I am very new to the whole HTML iframe thing. So any help would be much appreciated.

I inserted an swf using the object tag.
I used hspace and vspace to position it.
Some browsers (opera/firefox) don't seem to be reading the vspace.

Can I use CSS to position an object tag? I tried giving it a class name but it still doens't seem to work. Any suggestion?

I'm having trouble positioning a music file... it works with Firefox but not with any version of IE.

Problem: Music file ends up at the top left corner of the page in IE, but works fine in Firefox.

What's wrong with the code, or is there another way to position the file?


<div style="Z-INDEX: 10; POSITION: absolute; LEFT: 335px; TOP: 640px">
<EMBED src="http://womeninboxes.com/He_Sawed_Mary_Sue_II.mp3" width="203" height="16" autoplay="false"
controller="true" loop="false" pluginspage='http://www.apple.com/quicktime/download/'></div>

Hey guys.

I have been racking my brain for days now and I cannot find a solution. What I need to do is the following:
The position of the entire bar (navigation, title, title background, and flash) needs to be about 200px down in the document or about 30%. In that 200px above the bar, I want to run a <td> that runs a pattern. I need both of those things done so that the alignment of the bar items stay the same.

Here is the test link: http://www.diversionguild.com/test/
Here is the link to the CSS: http://www.diversionguild.com/test/style.css

That should give you everything you that you would need documentation wise.

Thanks for your help and guidance.

Hello All-

I'm trying to create a website and I am using Dreamweaver. While I'm fairly versed with Dreamweaver's nuances, there's one thing that I've never been able to do. I've created a white rectangle box in photoshop that I want to use as the main part of my site where all the text and pictures go. I want the rectangle positioned vertically and to go "off-screen." I have a blue background behind it. My problem is, the rectangle doesn't go to the furthest point of the top and bottom of the browser.

Here is an example of what I want done:

http://www.logoworks.com/

If you check out that website, you'll notice the rectangle shape in the middle behind the text and graphics. It goes to the furthest part of the top "off-screen."

The picture I've attached is what happens to me what I try to play around with the padding and positioning (i've tried both html and css).


Any help would be great.

Thanks!

hi,

i want to have a search box, and i would like it to be in the same line as my horizontal menu.
how can i display a form inline with the rest of my menu? if i use div align right for my form it can be pushed right , but doesnt display properly in ie. I assume its not a right way to do it. could someone please help me out? thanks.

<li><a href="" title="Miscellaneous">Misc.</a>
<ul>
<li><a href="">Miscellaneous</a></li>
<li><a href="#">News Feed</a></li>
</ul><span></span>
</li>

<form method="get" id="searchform" action="">
<input type="text" class="search1" style="color: #696565" value="Search " onfocus="if(this.value==this.defaultValue)this.value=''; this.style.backgroundColor='#FFCC99'" onblur="if(this.value=='')this.value=this.defaultValue; this.style.backgroundColor='#FFFFCC'"/>
<button class="image" title="Submit Search">Go</button>
</form>

</ul>

Which is the better way to position the div tags? Should I use float or some fixed position?

I could get two columns positioned with float left and right, but what about a third column?

Thanks

I am trying to position 3 images above my main drop down menu at the top of my webpages. the center image has been positioned using the <center> tag. the other 2 are used as links (dont think that makes a difference but thought i would mention it) and they are posing a problem.

I have only inserted one of them at the moment and I am assuming that if I can figure that out then the second will be the same.

The problem is that to position the image exactly where I want it I have used absolute positioning and as im sure most of you know, that causes porblems when other users have different sized monitors or adjust the size of the window.

Is there a work around or another way for me to position this acuratly?

thanks in advance,

heres the code i have before the drop down menu...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Doonhamer Pool League</title>
<script src="dbMenu.js" type="text/javascript">
</script>
<link href="global.css" type="text/css" rel="stylesheet" media="screen">
<link href="dropDown.css" type="text/css" rel="stylesheet" media="screen">
</head>
<body bgcolor="000000">


<a href="albums.html">
<img STYLE="position:absolute; TOP:15px; LEFT:150px; height:105px; border:0" src="photosicon.jpg">
</a>
<center>
<img src="banner.gif">
<p>

Hi!

I'm having trouble positioning the footer <div> on my webpage, containing links to my counter and guestbook. I want it to go at the bottom center of the page without overlapping on any of the other <div>s, meaning that if it doesn't fit on the webpage (which it doesn't), you have to scroll down to see it.

Here's my webpage: http://www.geocities.com/serenamonster/map.html

The footer div displays fine in IE, but displays incorrectly in Firefox: it's smack in the center of the page, instead of the bottom, and I don't know how to fix it.

Here's the relevant coding (I think...I'm really n00by so I can't be sure.) I had to use CSS because that's the only way I could stretch the background image to 100% without tiling. Here goes:
--------------------------------------------------
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}

img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}

#footer {
position:relative;
}

#menu {
position:relative;
z-index:2
}

#box {
position:relative
z-index:4
}

#intro {
position:relative;
z-index:1
}

</style>
<!--[if IE 6]>
<!--[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#menu { position:static; }
#box { position:relative; }
#intro { position:static; }
#footer { position:static; }
</style>
<![endif]-->

......

<div id=footer style:"position:relative"; align="center";>
blah blah content
</align>
</div>

---------------------------------------

Can someone please tell me what I'm doing wrong?

Thanks a bunch!

This may be to big of an ask, but I am trying to make it so my website layout is positioned in the middle of the browser no matter how big the screen resolution is. For example, this is the page on my computer, here And my friends, here. So as you can see, on my pc it looks fine, yet on my friends the layout is all pushed up to the top, and this looks rather silly.
If you could throw some tutorials or something my way id appreciate it.
website: http://www.breakdowninc.987mb.com

I'm new to HTML but I think I'm slowly catching on. I have this block of code (I didn't write it) that I want to position on my webpage. The code creates a box with a menu on top containing five tabs (see attached pic). The tabs allow the user to switch between 5 embedded video streams inside the box. I want to take the whole thing and position it. Is there a way to position everything in the entire block of code? Or will I have to go into each piece and position it?

How should I go about getting this box/menu/videos where I want them? I'm using a site builder that basically does the positioning for you, you just paste the code into a HTML box. But I can't get everything where I want it using that method so I'm now attempting to use absolute positioning. I'm thinking there must be a way to position everything at once because I assume that's how the site builder does it.

HTML Code:

<table>
<tbody> 
<tr> 
<td><br /> 
<style type="text/css"> 
div.TabTampil div.TTs {height: 24px; overflow: hidden; } 
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active { background-color: #15317E; } 
div.TabTampil div.Halamans { clear: both; border: 2px solid #FFFFFF; overflow: hidden; background-color: #222;} 
div.TabTampil div.Halamans div.Halaman { height: 100%; padding: 0px; overflow: hidden; } 
div.TabTampil div.Halamans div.Halaman div.Alas { padding: 3px 5px; } 
div.TabTampil div.TTs a { border-left:1px solid #FFFFFF; border-right:1px solid #FFFFFF; border-top:1px solid #FFFFFF; border-bottom:0px solid #FFFFFF; float: left; display: block; width: 100px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; text-decoration: none; font-family: "Arial", Serif; font-size: 12px; font-weight: 900; color: #FFFFFF}
 </style>
<br /> 
<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 650px;" class="TTs">
<a>    Main Stream    </a> <a>    Stream 2    </a> <a>    Stream 3    </a> <a>    Stream 4    </a> <a>    Radio    </a></div>
<div style="width: 650px; height: 450px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<script type="text/javascript"> channel="CHANNELHERE"; vwidth="600"; vheight="450";</script>
<script type="text/javascript" src="http://www.castamp.com/embed.jsBACKSPACETHIS"></script>
</div></div>
<div class="Halaman">
<div class="Alas">
<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/_woqNuDRPuA?rel=0&amp;hd=1" frameborder="0" allowfullscreen></iframe>
</div></div>
<div class="Halaman">
<div class="Alas">
<iframe title="YouTube video player" width="640" height="390" src="https://www.youtube.com/embed/rQ9vqVpNqWU" frameborder="0" allowfullscreen></iframe>
</div></div>
<div class="Halaman">
<div class="Alas">
<iframe title="YouTube video player" width="640" height="390" src="https://www.youtube.com/embed/j3a1NwhsLVg" frameborder="0" allowfullscreen></iframe>
</div></div>
<div class="Halaman">
<div class="Alas">
<iframe title="AM 640 Radio Leafs Game" width="640" height="442" src="http://mapleleafs.nhl.com/club/RadioPlayer.htm?id=2010021217" frameborder="0" allowfullscreen></iframe>
</div></div>
</div></div>
</form>
<script style="text/javascript" src="http://www.mdn.fm/files/291528_3hhea/newscriptab.js"></script><br />
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>
<br /> </td> <td><br />

Can someone please help me position my text entitled "Latest News..." not all the way left but not center, I would like it aligned with the main picture on the site. I have uploaded two pictures, one showing the way I would like it to appear and the other showing how it is incorrectly displayed. From my site http://www.trillionaireme.com

Look at:
http://test6.waltonstreetwebdesign.com/

If you look at it in firefox, it works fine. In IE 7, the positioning for div "logo" is not working properly and you can't see the logo. What is my problem? Thank you.

I'm positioning an image within a divison that also has a paragraph of text. I've got the image floating right. It has these settings: display: inline; clear:both; float: right; I've added padding on the right side to move the image to the left or to control it's right margin so that it's not tight to the right edge of the page. When I apply a border to the image it also goes around the padding which is goes out away from the image. What is recommend as another way to control the right margin or to move image left without the padding?

Think I might have it, making positioning relative and then changing right position.