|
HTML - Position Relative, Absolute Off In Any Ie Version
Hey everyone, got a problem with an element that is relatively, or absolutely, positioned (I've tried both methods and both produce the same results).
Take a look here with anything but Internet Explorer: http://zachi.teamtreetops.com *Screenshots of whats wrong in IE* The "bottom" div element is off in both cases. ie5 ie7 Code: div#bottom{
height:11px;
width:411px;
background-image: url(images/bottom.png);
position:absolute;
}
Complete style sheet Any insight on the issue would be much appreciated! Similar TutorialsHi, I need to embed some HTML content in a container, so that the content's elements anchored at absolute position 0 will actually follow the container's position. What should I use as container? Frame, DIV, IFrame? Thanks! Howdy all, I have three scrolling divs that i want to be the height of the page, so i'm guessing position:absolute and height:100% will do that just fine. But i want these three scolling divs to be inside a position:fixed element so that they stay put when scrolling down the page. Is this possible? I dont think a pos:absolute will work nested inside a pos:fixed. How could i work around it? thanks! Hi there, I want my images to have specific positions within my website but so far I seem to get it wrong. this is the html: <body> <div class="top"> </div> <div class="logo"><img src="img/logo.jpg" /></div> <div class="wrapper"> <div class="1"><img src="img/1.jpg" width="450" height="450" /></div> <div class="2"><img src="img/2.jpg" width="215" height="220" /></div> <div class="3"><img src="img/3.jpg" width="215" height="220" /></div> <div class="4"><img src="img/4.jpg" width="215" height="450" /></div> </div> </body> this is the css body { background-color:#FFFFFF; color:#000; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } .top { width:100%; height: 33px; background-color:#0D0D0D; } .logo { position:relative; margin: 0 auto; border: none; padding:0; width: 400px; height: 130px; margin-top:25px; } .wrapper { position:relative; margin: 0 auto; border: none; padding:0; width: 900px; height: 700px; margin-top: 25px; } .1 { position:absolute; width: 450px; height: 450px; left: 0; top: 0; } .2 { position:absolute; left:460px; width: 215px; height: 220px; top: 0; } .3 { position:absolute; left:460px; top:230px; width: 215px; height: 220px; } .4 { position:absolute; left: 685px; width: 215px; height: 450px; } Basically I want something like this site http://www.aardvarkbrigade.com/ where the images seem to be placed in specific positions. Would be great and I would be thankful if someone could help me Hello All, I have a problem with div position in my html page. I need two divs position=relative aligned with a single div. Basically I have a header panel, content panel (have two vertical column height changed dynamically) and a footer panel. So Content panel vertical column needs to align with header panel. I need all div tags position relative, so when every div increases in height bottom div sifted down automatically. I have this http://www.arunverma.info/webmaster_help/ Can sombody help me to short it out. Thanks in advance Sunil Hi Folks, I have multiple objects which are positioned relative to one another. The position of the first object is fine but the subsequent ones reference the position of the previous one. Is there any way I can make a hidden "base" object and position relative to that without re-creating it for each object? Thanks! Hi folks, I have a simple centered web page that does not show the same in IE and Firefox. The problem just seems to be the first occurrence of position:relative which I used to center the page in a 'container'. Experts in this forum and others say I should fix this by using the right Doctype statement. But when I tries using any of the recommended Doctypes, the display was totally skewed in both IE and FF. You can see the normal page with no Doctype statement at: http://www.documents4u.com/Document-...Contactus.html It displays fine in IE but notice in FF the top horizontal bars are higher. When I put in a Doctype statement, everything is messed up in both IE and FF, as you can see in: http://www.documents4u.com/Document-...ontactus2.html Any suggestions on how I can fix this discrepancy? Is it my code or am I not using the right Doctype? Hi, I am looking for the easiest and reliable solution to make the "View on Google Maps" image to look like here http://www.dublinbynumbers.com/troubleshooter.html instead of here http://www.dublinbynumbers.com/categories/cinemas The solution should work in both IE/FF and any screen resolution. Thanks in advance for your help, Sorin Hello everyone, I've go this code here for positioning the "comments and frieands" together in in a scroll box at the bottom of the page. But I'd like to put it in a sertante position. Could anyone plaese help me find out were and what to put in this code. And for more information this is a code I want to put within a "div" image and place it in relation to were the image is (0,0) not were the page starts (0,0). -------------------------------------------------------------------------------------------------------- <i class=i> <a href="http://xiii.us/ms/center-friends-and-comments"</a>scroll center friends and comments</a></i> </td></tr></table> </td></tr></table> </td></tr></table> <div class="myDClassFC"> <table><tr><td> <table class="off"><tr><td> <table><tr><td> <style> .i {display:none;} div.myDClassFC {height:400px; overflow:scroll; overflow-x:hidden} </style> <i class="i">!-END Block to put Friends and Comments in a Scroll Box-! </i> ----------------------------------------------------------------------------------------------------- Well I appreciate everyones thought. hello, i'm having problems with a website. If you look at the following url you can see the problem. http://www.r-media.nl/vaassen problem When you look at the footer it stays at his absolute position but the holder stops filling in the background color. I would like to have the footer at the bottom and when you resize the screen the holder has to grow with it. Can someone tell me how to do this? Here's my current script: Code: <BODY> <!--Menu--> <div id="menu"> <ul id="menu_list"> <li>Hoofdpagina</li> <li>Informatie</li> <li>Nieuws</li> <li>Agenda</li> <li>Contact</li> <li>Adverteren</li> </ul> </div> <!--End Menu--> <!--Center--> <div align="center"> <!--Holder--> <div id="holder"> <!--Logo--> <div id="logo" align="left"><img src="images/logo.png" width="250" height="150" alt="Vaassen.nu"></div> <!--End Logo--> <!--Content--> <div id="content"><img src="images/cannenburgh.jpg" width="600" height="400"></div> <!--End Content--> </div> <!--Holder--> </div> <!--End Center--> <!--Footer--> <div id="footer"></div> <!--End Footer--> </BODY> And here's my CSS Code: /*CSS Document*/
html,body
{
margin: 0px;
padding: 0px;
height: 100%;
background-image: url("images/bg.gif");
}
/*Holder*/
#holder
{
width: 990px;
height: 100%;
background-color: #EDEDED;
}
/*End Holder*/
/*Logo*/
#logo
{
width: 100%
}
/*End Logo*/
/*Menu*/
#menu
{
width: 1020px;
height: 50px;
position: absolute;
top: 125px;
right: 50%;
margin-right: -510px;
background-image: url("images/menu_bg.png");
background-repeat: no-repeat;
}
#menu_list
{
width: 95%;
margin: 0px;
padding: 0px;
z-index: 999;
}
#menu_list li
{
width: 100px;
height: 35px;
margin: 0px;
padding: 0px;
list-style: none;
line-height: 35px;
float: left;
text-align: center;
font-family: Arial, Verdana, Sans-serif;
font-weight: bold;
font-size: 10pt;
color: #f7f7f7;
cursor: default;
cursor: pointer;
}
/*End Menu*/
/*Content*/
#content
{
margin: 10px auto;
width: 100%;
background-color: #EDEDED;
}
/*End Content*/
/*Footer*/
#footer
{
width: 1020px;
height: 50px;
position: absolute;
bottom: 5px;
right: 50%;
margin-right: -510px;
background-image: url("images/footer_bg.png");
background-repeat: no-repeat;
text-align: left;
text-indent: 1.5em;
font-family: Arial, Verdana, Sans-serif;
font-weight: bold;
font-size: 10pt;
color: #f7f7f7;
line-height: 35px;
}
/*End Footer*/
Thanks in advance! i have a web page that so far tested well in every browser except IE 7 - see: www.finlayprints.com/Imprintables_Wedding3.html does anyone have an idea why: 1) red wedding gif image does not align in IE 7 the way it does in every other browser? it's absolute positioned. 2) the text "5x7 imprintables..." is actually overlapping the previous floated box in IE 7?? scratching my head trying to figure out, spewing expletives at the screen here... thanks This is the code I'm using to put flash in, Code: <object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="200" width="200" data="http://www.amarasoftware.com/slideshow.swf"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.amarasoftware.com/slideshow.swf" /> <param name="quality" value="high" /> </object> .. I want to put this flash in an absolute postition Code: position:absolute; top:730px; left:30px; That is an exsample of how I did it with an image. How would I make my flash be absolute postition.... were should I put it. Thanks, Hi there, Im kinda stuck. I would like these following areas: <span class="text">xx</span> <span class="icon">xx</span> .. to ALL be positioned at the same place when being hovered.Problem now is that they keep appearing besides their "button": Have a look here to see what I mean. Have a look here for the source, hope im making sense, thanks. I'm having an issue regarding how my site looks locally as opposed to the uploaded version. Here is how it should look: http://www.cincitucky.com/available_worldwide.jpg Here is how it looks: http://www.cincitucky.com/ It looks fine on my local machine, online it looks busted. It seems like it would be a simple issue but I'm on day two of trying to figure this out. Any insight into this situation would be great. Hey all, i have a question. What is the main difference between an academic version and a full version of a program such as Dreamweaver? Are you only supposed to use the Academic version for educational purposes only? Meaning if i design a website with an academic version i can't legally put it up as a business website? I was always curious about how this actually works, thanks. I am looking for a way to make sure that each time a page is loaded, it retrieves the latest version off of the server without the user having to click Refresh/Reload. The page has news items on it and sometimes it doesn't load the updated page, but the page that is in the browser's cache. I know this option can be changed in the Browser's properties, but I want a way to do this automatically without requiring that users change this preference. Hi, I have a website working perfectly in newer version of browsers. However, older version are not working properly. This is my website mis510proj . Any help? HTML Code: <!-- Page (2 columns) -->
<div id="page" class="box">
<div id="page-in" class="box">
<!-- Content -->
<div id="content">
<div class="article">
<h2><span><a href="#">Improvements for mis510proj :: Dataholics</a></span></h2>
<p class="info noprint">
<span class="date">2011-05-01 @ 22:46</span><span class="noscreen"></span>
</p>
<p>
<b>mis510proj</b> :: Our Golf Course DB is need to be update :)
We have recieved feedbacks from many golfers that they considered the quality of the grass and the house's beverage! and menu.
We are working on to get those info in order to meet golfer's expectation.<br>
</br>
Our project for mis510proj will be continued so, keep you eye on our website <a href="http://128.196.27.167:8080">mis510proj</a>
</p>
</div>
<div class="article">
<h2><span><a href="#">Check your golf course</a></span></h2>
<p class="info noprint">
<span class="date">2011-04-27 @ 19:00</span><span class="noscreen"></span>
<!-- <span class="cat"><a href="#">Category</a></span><span class="noscreen">,</span>
<span class="user"><a href="#">My name</a></span><span class="noscreen">,</span>
<span class="comments"><a href="#">Comments</a></span> -->
</p>
<p>
<b>mis510proj</b> :: Now our golf recommendation engine is here! Just for your dreamed golf courses!
mis510proj :: You can simply click either "basic recommendation" or "advanced recommendation". You will find the golf courses!<br></br>
Our project for mis510proj will be continued so, keep you eye on our website <a href="http://128.196.27.167:8080">mis510proj</a>
</p>
</div>
<div class="article">
<h2><span><a href="#">MIS510PROJ :: Golf Course Recommendation</a></span></h2>
<p class="info noprint">
<span class="date">2011-04-22 @ 11:40</span><span class="noscreen">,</span>
</p>
<img src="./img/mis510proj.png" alt="MIS510PROJ" /> <a href="http://128.196.27.167:8080/">MIS510PROJ</a>
<p>
<strong>MIS510PROJ :: The DATAHOLICS
We are here to help you live your dream of playing golf! As part of a course, Web Computing and Mining, we have designed a MIS510PROJ portal that provides golf course recommendations to interested golf players. The MIS510PROJ portal also has a strong business model to it through its linkage to the ebay website that permits buying of Golf equipment. The idea behind MIS510PROJ is novel since it is unique and contains a lot of unique features that many websites do not. So please have a look at the MIS510PROJ portal and tell us what you feel!!</strong>
</p>
</div>
<!-- Article -->
<div class="article">
<h2><span><a href="#">MIS510PROJ :: DATAHOLICS</a></span></h2>
<p class="info noprint">
<span class="date">2011-04-21 @ 11:49</span><span class="noscreen">,</span>
</p>
<p>
<strong>We want to hear from you!</strong><br/>
<strong>Do you have any suggestions to make? Write back to us!</strong><br/>
</p>
<!-- begin htmlcommentbox.com -->
<div id="HCB_comment_box"><a href="http://www.htmlcommentbox.com">HTML Comment Box</a> is loading comments...</div>
<link rel="stylesheet" type="text/css" href="http://www.htmlcommentbox.com/static/skins/simple/skin.css" />
<script type="text/javascript" language="javascript" id="hcb"> /*<!--*/ if(!window.hcb_user){hcb_user={};} (function(){s=document.createElement("script");s.setAttribute("type","text/javascript");s.setAttribute("src", "http://www.htmlcommentbox.com/jread?page="+escape((window.hcb_user && hcb_user.PAGE)||(""+window.location)).replace("+","%2B")+"&mod=%241%24wq1rdBcg%24CLBUSgJb.7rZSJVxzsM8Z1"+"&opts=414&num=10");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script>
<!-- end htmlcommentbox.com -->
</div>
<div class="article">
<h2><span><a href="#">MIS510PROJ :: Golf Course Recommendation</a></span></h2>
<p class="info noprint">
<span class="date">2011-04-22 @ 11:40</span><span class="noscreen">,</span>
</p>
<p>
MIS510PROJ :: DATAHOLIC ,
Golf Course Recommendation.
What is your preferences when it comed to choose golf course?
</p>
</div>
<div class="article">
<h2><span><a href="#">MIS510PROJ :: DATAHOLIC</a></span></h2>
<p class="info noprint">
<span class="date">2011-04-19 @ 02:00</span><span class="noscreen">,</span>
</p>
<p>
MIS510PROJ :: DATAHOLIC ,
we will tell the best golf courses for you by dedicated golfcourse recommending algorithm.
This website is part of MIS510PROJ.
</p>
</div>
<div class="article">
<h2><span><a href="#">Plan your Game Today!</a></span></h2>
<p class="info noprint">
<span class="date">2011-04-05 @ 11:00</span><span class="noscreen">,</span>
</p>
<p>
Golf is one of the most stress relieving and enjoyable sports played in the world!
Come and choose a course closer to you!
We are here to help you out!
</p>
</div>
<!-- my addition for Amazon -->
<div class= "article">
<h2><span><a href= "equipment.jsp"> Buy Golf Equipment here!</a></span></h2>
<p class= "info noprint">
<span class="date">2011-04-05 @ 11:00</span><span class="noscreen">,</span>
</p>
</div>
</div> <!-- /content -->
Thanks, DH Hi I've resisted long enough - I realise now I MUST create an iPhone version of any site I make. Complete newb to iPhone development, so I was wondering if there is a good tut somewhere you guys know of? Thanks Shaun |
|||||||