|
HTML - Floating & Absolute Position Problems In Ie 7
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 Similar Tutorialshello, 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! 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, 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. 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! 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, 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! 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. Hey.. I want to add Images that stay fixed on my page (all pages on my forum). I want them both on the left of my pages & the right (in the spaces between the forum body & the sides of the screen) I want it because i want the images to link to game, console & accesory reviews that have been done on my forum. I googled it and got the following code to add.. Code: <a target='_blank' href='http://yourlink.com' text='About your link'><img src='yourimagepath.jpg' alt='About your image' style='position: fixed; bottom: 25px; right: 10px;'></a> If it was a normal webpage i would add this to it, but as its a forum & a forum has 1000s of pages.. What files do i edit this into for for it to show on all my forum pages? The page i got it from is.. - http://jensocial.com/group/ningnetwo...s-and-links-on Also.. I will want 3 or 4 images on each side, so would i just add the code how ever many times, changing the part thats say "right" to "left" (for left side images) & the part that says "bottom" to "top" (for top ones)? My Forum Softwa phpBB My Forum Link: http://www.xboxlivefan.org/ Anybody help with some info on this please? Thanks! Hi, Ive spent hours upon hours painfully sculpting this website and i can't for the love of gaaawd get the positioning of my element standard throughout the website. The home page and the watercolour-classes page have the bottom graphics bar in the same position But different from all the other pages. All i want it to do is be the same throughout and its only out by about 10px. why oh why Ive been struggling for days and weeks with this problem and cant work it out. Im sure its something simple but as a self taught web designer i dont know it all.... far from it. Any ideas or suggestions Please. The website is http://www.miriartist.co.uk Any help or light on the matter would be great THANKS Cheeeers Ben Hi, We have a large (over)complicated business website - I'm only testing it, so don't have any input to the code (I do have some html experience as I design my own websites, but nothing as complicated as the business one). The live site works OK, but as soon as we work on the test or the live-contingency site, when we click on a link we are taken to the live site, so I think the problem is that the site is using absolute URLs rather than relative ones - I can't see all of them as they are off in the javascript somewhere, and the pages are so complicated I don't fully understand them anyway. As far as I can see the options are - keep it as it is and put up with the fact that we can't test a lot of the functionality (not very good) - build a host file so that we are sent to the correct url (not very good because we're not properly testing the links) - replace all the absolute URLS with relative ones - sounds good, although how we get the developers to rebuild the whole site (3000 pages!) I cannot imagine! Does anyone have any other suggestions? Thanks all John this is my page http://web.vtc.edu/users/cjb06271/CI...nal/order.html there are several things I would like to happen. 1. the right collumn background to be where the right collumn should be(so other links in navbar) 2.The test between the roach pictures to be alligned with the top rather than bottom of pictures (so smaller windows can see) 3. When you size the window smaller than the text, a scroll bar appears, and when you scroll the background no longer exists. If I put it on auto the background will only go as far as the text does. 4. (nice but not required)The cocroachs to be alligned to the left and right of the top bar respectively, and the text in the middle. 5. (nice but not required) the right column background image is being cut in half (as does the top one if you size small enough). any way to make the images ignore the collumns? don't worry about the colors I will be changing them soon Hi everyone, Me again I'm afraid. Hope you had a good Christmas and New Year. I have a question regarding the following page: http://www.dynamic-xchange.com/resources.php I am trying to update it as I have done with the others (http://www.dynamic-xchange.com/index.php) and implement XHTML and CSS but I am having problems floating the divs correctly to get the desired effect as in the page given above. Any help of advice would be very welcome as I am tearing my hair out. Warm regards, Simon Prevous title: (div in div top:0; left:0; = top corner of first div, not page...) Ok, here's the code: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DIV DIV</title>
<style type="text/css">
<!--
#apDiv1 {position:absolute;top:0;left:0;width:150px;height:150px;z-index:0;background-color:#00F;}
#apDiv2 {position:absolute;top:100px;left:100px;width:200px;height:200px;z-index:1;background-color:#F00;}
-->
</style>
</head>
<body>
<div id="apDiv1"></div>
<div id="apDiv2"> </div>
</body>
</html>
Which produces: However, the "problem" is that i would like that result with this variation on the code: HTML Code: <div id="apDiv2"> <div id="apDiv1"></div> </div> But that "unfortunately" returns this result: Which was great when I first did it, (i always thought top:0; left:0; would put a div in the top corner of the page regardless of where it is within the code... so when i tried it in my last project and it used the top corner of the containing div as 0,0 that was exactly what i needed) but in my current project, I really need div1 to go to the top corner of the page, not div2, but still reside inside of div2... is this possible? Hi all, Sure glad I found this site!, I would like to ask for some advice please guys I have a portal that uses a portal stylesheet, the header is a .png image and needs to be 100% width, this loads from a Content Web File Manager, it carries a logo on the left and some corperate colour bands, it appears on every page of the portal, the right side is blank apart from the picture of a search box ( it shipped with the png I will be getting rid of this using PSP) I have created a <div> content </div> and I want this to appear to the right and in front of the header in place of this search box The <div> loads fine on templates (the dynamic content of the portal these are templates that the site use) so I know this works fine, now i want to make it appear on the header itself in place of the picture of the search box that I have erased This is where I am getting stuck - I do want it to be a permanent feature on the header and to the right, what do I need to use in the html code before and after the <div> content </div> ? All help will be greatly appreciated John Hey, Ive seen this done a few times and i was wondering if aqnyone knoew how hard it is or how to achieve it. When the user clicks on a button i want either an image or text to appear next to it. Im sorry i cant find any examples but i have seen it done in places. Thanks, Ben can anybody please help with this html document, i need to have all the picturecs in the right places.. i cant seen to figure it out, i will only take a minut for someone who know what to do ! http://peecee.dk/upload/view/174763 Hello, I've came here because I am really stuck on this one problem... I can't float another DIV right so it's beside another DIV. ( http://www.lentonent.com ) Please could you fix this source code so one div is on the left and one is on the right and they both have a background of middle.png: Code: <html>
<head>
<style>
#middle
{
width: 900px;
background: url(images/middle.png) repeat-y;
}
#middle-left
{
width: 580px;
padding: 25px;
border: 1px solid #000;
}
#middle-right
{
width: 200px;
padding: 25px;
border: 1px solid #000;
float: right;
}
</style>
</head>
<body>
<div id="middle">
<div id="middle-left">
<h1>LEFT SIDE</h1>
<p>This text should be on the left hand side. I'm just going to write a little
crap now to make this paragraph really long and cool just like a frog standing on
a spoon. Yes very random indeed but that's not what the bus shelter said.</p>
<h1>LEFT SIDE</h1>
<p>This text should be on the left hand side. I'm just going to write a little
crap now to make this paragraph really long and cool just like a frog standing on
a spoon. Yes very random indeed but that's not what the bus shelter said.</p>
</div>
<div id="middle-right">
<h1>Test</h1>
<p>This is a test.</p>
</div>
</div>
</body>
</html>
Thankyou very much for your help! http://tinypic.com/r/1t4igj/5 How can I make a floating social media sidebar like this one? |
|||||||