CSS - Help With Position Of Objects Only In Ie

Please realize this question is coming from a new CSSer.

I would like to have the text I have in the content area wrap around the box on the right. So when I type more content, the bottom portion will extend below the box. The box will always stay at the top.

can someone help me do this?

My page

By the way, I know it doesn't render properly in FireFox - I was going to ask about that later.

I used the CSS Tricks dot com guide to make my menu bar items equidistant from one another and it works perfectly in Chrome, Firefox and IE8.... but not IE7 (or IE8 Compatibility Mode). BTW the guide example works fine in IE7 but I'm doing something only ever so slightly different. I really don't have a clue what to do, so would appreciate some help.

Here's the relevant CSS code I'm using:

Quote:
#content {
width:1000px;
margin-left:auto;
margin-right:auto;
margin-top:0;
margin-bottom:0;
padding:0;
padding-top:230px;
}

/* Menu */

#menu {
height:40px;
padding:0;
padding-left:40px;
padding-right:40px;
display:block;
}

#menu a {
margin:0;
padding:0;
display:block;
float:left;
}

#menu a span {
position:relative;
display:block;
z-index:-1;
}

#menu-row {
margin: -40px 0 0 150px;
padding: 0;
height: 40px;
}
#menu-row div {
width: 33.3%;
float: left;
}
#menu-row div a {
float: right;
}

#menu .home {
background: url(images/menu-home.png) 0 0 no-repeat;
display: block;
width: 150px;
height: 40px;
outline: none;
}

#menu .science {
background: url(images/menu-science.png) 0 0 no-repeat;
display: block;
width: 150px;
height: 40px;
outline: none;
}

#menu .radio {
background: url(images/menu-radio.png) 0 0 no-repeat;
display: block;
width: 150px;
height: 40px;
outline: none;
}

#menu .club {
background: url(images/menu-club.png) 0 0 no-repeat;
display: block;
width: 150px;
height: 40px;
outline: none;
}


and HTML

Quote:
<div id="content">
<div id="menu">
<a href="#" class="home"><span>Home</span></a>
<div id="menu-row">
<div><a href="#" class="science"><span>Science</span></a></div>
<div><a href="#" class="radio"><span>Radio</span></a></div>
<div><a href="#" class="club"><span>Club</span></a></div>
</div> <!--/movers-row -->

</div> <!--/menu -->


All the links in the menu-row div are shifted up vertically from the first link in IE7 and I don't know why?

Hello,

In CSS is there a way to tell an object to extend the full height and width of its parameters without specifying height and using absolute positioning?

Thanks,

Andy

Hi, I'm new here and hope someone can help! I wasn't sure whether to post this in the CSS or Flash forum; it's a problem caused by Flash which I suspect needs some clever CSS to resolve.

My new website is carolineofbrunswick (dot) co (dot) uk. As you can see, there's a ton of blank space off to the right of the pages, and I can't figure out how to get rid of it.

It's caused by the Flash objects in the right-hand column. Changing the width attributes on those Flash objects just causes them to not appear at all, though the blank space still exists.

Can anyone help?

Cliff

How to make div stick to top of a page and align center

Hello,
I am having trouble understanding the positioning within CSS. I.E. the relative/absolute positions. I am creating a site with 1 banner and 2 columns underneath, all centered. The 2nd column I want to be right beside the left coumn. so it simply goes like



So depending on where left is on the page, the main is always literally right beside it. Anyone have any suggested reads on this?

Hei ppl.

i am begenning of designing in css but i have a problem..

i have my website www.zyxep.net/byensguf/

i have that div in the bottom under the text "footer" that <div> do i need to get over the header image to the right.. so the right side of the login field is flush with the right side of the border..

and i need it to stay on that position in every size of the users screen.. min. 800x600 max. anything..

here is my css code:

Code:

body {
text-align: center; /* center things in pre-IE6 */
margin: 0px auto;
}
#container {
	margin: 0px auto;
	left:150px;
	top:0px;
	width:760px;
	height:420px;
	z-index:1;
	border-left: 1px solid black;
	border-right: 1px solid black;
}
#header {
	margin: 0px auto;
	left:0px;
	top:0px;
	width:760px;
	height:200px;
	z-index:2;
	background-image: url(images/logo.jpg);
	border-bottom: 1px solid black;
}
#menu {
	margin: 0px auto;
	left:0px;
	top:200px;
	width:760px;
	height:20px;
	z-index:3;
	border-bottom: 1px solid black;
}
#content {
	margin: 0px auto;
	left:0px;
	top:220px;
	width:760px;
	height:180px;
	z-index:4;
	border-bottom: 1px solid black;
}
#footer {
	margin: 0px auto;
	left:0px;
	top:400px;
	width:760px;
	height:20px;
	z-index:5;
}
#login {
	margin: 0px auto;
	left:760px;
	top:15px;
	width:400px;
	height:50px;
	z-index:6;
}
#username {
width: 100px;
background-color: transparent;
border: 1px solid black;
}
#password {
width: 100px;
background-color: transparent;
border: 1px solid black;
}
#loginsubmit {
width: 100px;
background-color: transparent;
border: 1px solid black;
}

and my index.php

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>ByensGuf.dk - Byens bedste guf</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="zyxep">
<META NAME="Keywords" CONTENT="zyxep, zyxep.net, portfolio">
<META NAME="Description" CONTENT="zyxep.net - portfolio">
<meta name="REVISIT-AFTER" content="1 DAYS">
<LINK REL="stylesheet" HREF="style.css" TYPE="text/css">
</head>

<body>
<div id="container">
<div id="header"></div>
<div id="menu">menu</div>
<div id="content">content</div>
<div id="footer">Footer</div>
<div id="login">
<form action="login.php" method="post">
<div>
<input type="text" name="username" id="username">
<input type="password" name="password" id="password">
<input type="submit" value="login" id="loginsubmit">
</div>
</form></div>
</div>
</body>
</html>

plz help me.. i am so confused

Hi can someone please help me position the footer so that it is always at the bottom of the page. Any help at all would be appreciated.

http://www40.brinkster.com/jessjav/en/biography_e.asp

Since position:fixed does not work in IE, are there any other ways to achieve the fixed effect, without using javascript?

Hello.
i wanna make something like that: http://img85.imageshack.us/img85/3057/vajag9rv.gif
I mean place that violet circle in right bottom..i know i can make it with background, BUT i need to add <a href>...</a> to that violet circel..any ideas?

I have an image 425px x 260px which is floated left of an unordered list. The unordered list, of course, is at the same height as the top edge of the image.

Any way to vertically position the ul so it is vertically centered to the image?

I am trying to position the background image of a td with a random x value. I was trying to call a js randomizing function, had no luck. Is there any way to do this? Heres what I have, I need that -125px value to be random.

.bg2 {
background: url(testbg1.jpg) repeat -125px 0px;
}

I'm trying to piece together a sliced image using CSS, but I need it in percentages so it stays together when the window is resized! Does anybody know if this is possible or a better way to go about it?

Thanks!

Im trying to get an image to center in a div. It works as long as one part of my CSS is commented out. The issues is the part that is breaking it, is required for another script to run that I have not added in due to its vast amount of code. Can anyone tell me a workaround.. leaving the MUST have code in place. Im willing to add anything to the code, just not remove if possible.

Full Code
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<style type="text/css">
#image {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	width:356px;
	height:356px;
	border:1px solid blue;
}
#image * {
	vertical-align: middle;
}
/*\*//*/
#image {
	display: block;
}
#image span {
	display: inline-block;
	height: 100%;
	width: 1px;
}
/**/
</style>
<!--[if IE]><style>
#image span {
	display: inline-block;
	height: 100%;
}
</style><![endif]-->

<style type="text/css">
#image img {position:absolute;}
</style>

</head>

<body>

<div id="image"><span></span><img src="http://www.google.com/logos/olympics08_rhythm.gif"></div>

</body>
</html>

Code that MUST stay in the CSS
Code:

#image img {position:absolute;}

Just to note, the rest of the code is for the most part an exact dup of the cross-browser image center in div code here, http://www.brunildo.org/test/img_center.html