|
CSS - Links Twitchy In Ie, Moves 1px Right..help
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 Similar TutorialsHey, 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; } 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. 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. 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 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. 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! 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 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 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 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!! 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 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; } --> What 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? 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;}
As seen at (URL address blocked: See forum rules) I am trying to get the 1st slender column to move to the center; not center of page but just center it. As of now it is hugging the left side of the screen(this is in FireFox IE is all messed up, but 1st Firefox then IE is my thinking). When I change values in the div.box(1st column) I can get it center but it moves the mainbox downward. Here is my CSS. As of now at (URL address blocked: See forum rules) my column is hugging the right side(if u view in FireFox...IE totally another story). I want the column to move to the center..not of the page but just for it to center. When I mess div.box properties I am able to move it to where I want, but then the mainbox moves downward. Any ideas how to keep the mainbox in the same place and have the column move n the center? My CSS: body { background-color: #191970; background-image: url(../images/topleft.jpg); background-position: top left; background-repeat: no-repeat; } div.mainbox { margin-left: 275px; margin-top: 10px; background-color: #FFF8DC; border: solid 3px #000000; width: 700px; height: 480px; } div.box{ position: absolute; float: left; width: 125px; height: 480px; border: solid 3px #000000; background-color: #FFF8DC; word-wrap: break-word; } div.header { width: 680px; height: 0px; } p.header { font-size: 30px; font-weight: bold; font-family: verdana; color: #CD853F; } Thanks n advance! Chaser |
|||||||