CSS - Table Moves To The Right Instead Of Resizing

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>
				&nbsp;<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 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!

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

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.

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

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!!

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

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;
}
-->

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

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?