|
CSS - Element Moves About In Ie.
i have strange problem with IE 8 where an element is incorrectly placed when i open an Iframe, but if the iFrame is closed and reopened the element in question is correctly placed. I don' know if this is a code problem or if it's an IE 8 issue??
i see i cannot post a url. any help without seeing the problem? Here is the code snippet from the iframe: Code: <div style="margin: 0px;" id="votes"> <ul style="margin: 0px;" id="xvotes-0" class="star-rating-noh"> <li id="xvote-0" style="width: 81.25px;" class="current-rating"></> <span id="mnmc-0"> <li class="one-star-noh"></li> <li class="two-stars-noh"></li> <li class="three-stars-noh"></li> <li class="four-stars-noh"></li> <li class="five-stars-noh"></li> </li> </ul> </div> I've been adding local styles to try and zero any potential problems. i can post all css styles if noone has any ideas. Any help would be much appreciated. Thanks. Similar TutorialsWhat causes this? I have my small login form absolutely positioned relative to the content div, and it displays differently when there is/isn't content in it... have a look Test you can click the link to remove the data and position the bitlogin div as it is supposed to be... when the content is added, the bitlogin div moves down approx. 13px... What's the deal? Hi, My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner). Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page. I have tried various approaches and read up on positioning but so far have not been able to do it using css. Any help is much appreciated. Jim I have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover. Here is an example: Code:
<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>
.link a { some link height }
.link a span { display: none; }
.link a:hover span {
position: abolute;
top: (some link height * the number of links);
background-image: (some image url)
width: (image width)
height: (image height)
}
Appearance: ------ Link1 Link2 Link3 Link4 ------- ------- Rollover Image to appear here ------- The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed. IE ------ Link1 sublink1 sublink2 Link2 Link3 Link4 ------- will break my scheme. Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang? If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that. thanks. Hey, I know this is my first post here and it's code support, but this forum's been recommended to me, so here goes: Right, so I want two little 'mini buttons' that when hovered over, they will expand. I have the concept pretty much figured out; I have a div called 'logo' that everything header-side goes in, I have a div called 'minibuttons' (outlined in blue on the screenshot), and, a div called 'login' which is outlined in green. Screenshot: And when minibuttons is hovered over: But as you can see, it moves the login div too. Appropriate CSS: Code: div.logo
{
background-image: url("/images/logo.gif");
border: solid 1px #808080;
border-bottom: none;
border-top: none;
height: 85px;
margin-left: auto;
margin-right: auto;
width: 775px
}
div.login
{
border: solid 1px #00ff00;
height: 75px;
left: 625px;
position: relative;
top: -18px;
width: 145px
}
div.minibuttons
{
border: solid 1px #0000ff;
left: 570px;
position: relative;
top: 70px;
width: 48px
}
div.minibuttons:hover
{
left: 570px;
position: relative;
top: 1px;
width: 48px
}
Appropriate HTML: Code: <div class="logo"> <div class="minibuttons"> <a href="http://www.conquerhosting.com"><img src="images/mini/hosting2.gif" alt="H" id="hosting2" onmouseover="over(8)" onmouseout="out(8)" /></a> <a href="http://www.conquerdesigning.com"><img src="images/mini/designing.gif" alt="D" id="designing" onmouseover="over(9)" onmouseout="out(9)" /></a> </div> <div class="login"> <form id="login" method="post" action="http://<?=$_SERVER["HTTP_HOST"]?>:2082/login" onsubmit="disable()"> <fieldset class="login"> <input type="text" name="user" value="username" class="login" onfocus="clearbox(this)" /><br /> <input type="password" name="pass" value="password" class="login" onfocus="clearbox(this)" /><br /> <select class="service" name="service"> <option value="2082">cPanel</option> </select> <input type="submit" name="login" value="Login" class="button" /> </fieldset> </form> </div> </div> Appropriate JS: Code: if (document.images)
{
var flipped = new Array();
for(i=0; i< inames.length; i++)
{
flipped[i] = new Image();
if(i <= 7)
flipped[i].src = "/images/roll/"+inames[i]+".gif";
if(i > 7 && i <= 9)
flipped[i].src = "/images/full/"+inames[i]+".gif";
}
}
function over(num)
{
if(document.images)
{
revert[num] = document.images[inames[num]].src;
document.images[inames[num]].src = flipped[num].src;
}
}
function out(num)
{
if(document.images)
document.images[inames[num]].src = revert[num];
}
Any ideas people? Thanks, Danny. I want products listed horizontally first, then move to next line if there is to many. But instead, each product listed on a new line. http://www.refinethetaste.com/html/default.asp?Section=products&CATEGORYID=4 PHP Code: /* products.css */ #products { float: left; } #products .productbox { background-color: #ececec; width: 150px; padding: 10px; margin-top: 10px; } #products .productfooter { background: url(../images/arrow.gif) 20px 0 no-repeat; padding-left: 58px; margin-bottom: 10px;} #products img#product { width:150px; height:150px; border: 0px; } Hi, I have spend 2 days trying to figure out why this happens, and i just cant figure it out... My links in my main menu moves 1 - 3px to the right in IE explorer at mouse-over....but only when i set a: hoover to change background color.... if i only change text color with a : hoover its fine. Anyway i just realized that this was a complete waste of time since i'm not allowed to give my URL for people to see the problem... Cheers, Bukit1 I swear, its just one of those days. I'm pretty good with CSS/HTML, but I had not touch it in a while. I sat down, and for the life of me I can solve even the simple problems... I know I solved this a buch of times, but now I cant remember how, looking back on my old code/sites dosent tell me much. So I have a div in the header. When I put margin-top (org just margin: x 0 0 0;) the whole page moves down because of the margin. Its like child div is influencing parrent div. I tried positioning every parrent div to relative but no luck... I cant get this child to behave. I know this is an easy question, I'm just not myself today. Hi, I am at a loss. I have a basic css webpage at websitehosting1.com/Tutorials.html when you go to the tutorials page that I created for my friends, the footer adds white space above it when I add text to the body. I want the left nav right nav and footer to be blue, but I can't figure this out. All help is appreciated. Thanks. E. I have a table with 5 columns. I only want the table to cross about 70% of the screen. Whenever I try to re-size it either via css or just 'width = 70%' the table stays the same width and just jumps towards the right of the page. It doesn't matter if I put a width on my body, a div wrapper, or the table.. same results. I've never had these resizing issues before but I admit i haven't coded anything in 6 months Thanks for any help. **Edit** Oh, I forgot to mention the table is initially wider than the screen and its seems to be staying that wide because each column will stay as wide as it's longest entry. Hey, as always it seems to work normal with FF. But IE starts moving images when you go over it. link: http://www.net-force.com/hotest/a1.html any suggestions how to fix it so it displays properly in IE? thx! Hi, I am very new to CSS and am having a small problem with a breadcrumb that moves in different browsers. It's in the right place in IE but it moves down a little in Firefox, and moves even further down in Opera. If you look at the page it is the red "Home" above the menu bar (well it is in IE and Firefox, it is behind the menu bar in Opera). I know that IE doesn't always show things like it should, but what I wanted to know was - is it me or them? and if it is them which one is right? If it's me could you point me in the right direction please. The page is URL The 2 stylesheets that are used are; URL URL I would really appreciate some advice. Thanks hey all, i have a strange problem... When the page opens the footer appears on top of the page content but if i refresh the page it goes to the bottom as expected?? really wierd can someone please help me with this? here is the page lin to see what i mean page with the problem and here is a link to me css css page Any ideas would be great. I am using firefox Thanks RF Hello, not entirely sure how to go about this, but I'm using Dreamweaver CS5 and I'm working on my home page. The way I have it set up is I have a "sidebar" to the left, then a large "main_image" to the right of that which begins my "container" div followed by some "body_copy" below that. Everything looks good when the window is in a max size. The problem arrises whenever I resize my window the main_image moves to below the sidebar and everything just seems to shift down... The main_image is set to relative so the body_copy text can form properly under it. Is there any way to have the image remain stationary despite window size? Thanks for your help!! I fixed this issue ages ago on another template and now I can't remember what sorted it. My footer sits at the bottom (or drops down if the page is longer). When the page is maximised it looks fine but when the browser (IE) is not maximised it moves up 1px and you can see the background behind it. Any ideas? Thanks. Hi There.. I am still learning CSS/Xhtml so please be patient and understanding, . Anyway, I am making a site for my business and wanted to try some new idea. Everything looks good except for my navigation bar in IE. Whenever I change resolution the navigation bar moves out of position and I have to refresh to get it to snap into place. In Firefox and Chrome I do not have this issue. I have been googling trying to find the solution but have come up empty. Could someone look at my code and tell me when I did wrong so I don't make the same mistake again? Thanks for your help. Here is the CSS: <style type="text/css"> <!-- #html, body { top: 0px; right: 0px; bottom: 0px; left: 0px; width:920px; height: 100%; background: url(desk.jpg) white center no-repeat; background-repeat:no-repeat; margin: 0 auto; text-align: center; font-family: Verdana, Helvetica, sans-serif; } #container { width: 900px; height:840px; background-image: url(bg1.png); margin: 0 auto; text-align: left; } #mainContent { padding: 3px 60px; margin-top: 0px ; } #text { padding: 0; margin-left: 35px; text-align: center; } #navigation { float:right; display:block; width: 400px; margin-top: 15px ; font-family:Trebuchet MS, Helvetica, sans-serif; overflow:hidden; } #navigation ul { float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center; } #navigation ul li { display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; } #navigation ul li a { display:block; margin:0; padding:.4em .8em; color:#000; text-decoration:none; line-height:1.3em; } #navigation ul li a span { display:block; } #navigation ul li.active a { color: #fff; font-weight:bold; } #navigation ul li a:hover { color: #fff; font-weight: bold; } .guy { float: right; margin-top: -70px; } .yell { float: left; margin-top: 20px; padding-bottom: 0px; margin-right: 30px; margin-left: 20px; } .second { margin-top:45px; } #footer { font-size: 11px; margin-bottom: 10px; } --> Hello, I have what I hope is an easy question. I am trying to make a horizontal navigation menu based on code I have found on the net. I got 99% of it working EXCEPT: When sub menu text is displayed it "pushes" the main menu text to the right. my example is located he www(dot)katieandconrad(dot)com I have validated both my HTML and CSS, the errors that are displayed have nothing to do with this issue. However, I will be fixing the HTML error tonight. There's nothing I can do with the CSS errors. Thank you very much for your help. Regards, CB Greetings, I am just starting CSS Design and am having a problem with my footer div background image moving 1 pixel to the right (messing up background image sync to above div) when the browser window is expanded to over 900pixels (which is min width of webpage) This happens in IE6/7 and not FF Any help would be great; http:// www. beavershanghai .com i have a <div> inside another <div> I want the parent div to stay exactly where it is, and the child div to be inside it but with a 20px margin from the top. But when I add the 20px margin, the parent div moves downwards by 20px so the child div is still at the very top edge. Example of what is happening is he http://www.eionbryant.com/test.html I want the green area "#wrap" to be flush with the purple strip... and the grey area "#boxes" to begin inside the green area 20px down. I am learning css, so i would prefer someone explained how I am doing it wrong, rather than offering some work around. cheers Code: <body> <div id="strip"> </div> <div id="wrap"> <div id="boxes"> </div> </div> </body> </html> Code:
body {background:#FFFFF; font-family:"Trebuchet MS", Times, serif; padding:0; margin:0; position:relative; }
#strip {background:#663366; width:100%; height:10px; padding:0; border:0;}
#wrap {background:#00FFCC; width:100%; height:700px; margin:0 auto; }
#boxes {background:#666666; margin: 20px auto; width:800px; height:200px; clear:both;}
|
|||||||