Learn VBA & Macros in 1 Week!

CSS - Absolute Div Not Sitting Right In Ie

Full Excel VBA Course - Beginner to Expert

Absolute Div Not Sitting Right In Ie	View Content

I have a div that should be sat at the bottom of its containing div (absolute positioned, bottom: 0, right 0) and it does so in Firefox, but in IE it is raised by about 20px or so.

Any help to iron this out would be great.

The page and its effects can be seen at www.prioritypie.f2s.com/KSA/KSA6/index.htm

and the css at www.prioritypie.f2s.com/KSA/KSA6/styles/KSA6style.css

It's the "menuContainer" div which isn't sitting right, nested in the "header" div.

Many thanks for any help

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Div's Not Sitting Flush In Ie

Page Sitting Differently In Ie And Firefox

Footer Sitting In The Middle Of Page Til Refresh

Boxes Sitting Differently On Diff Monitors?

Absolute Div Below Absolute Div (spacing / Different Font Sizes?)

When Absolute Isn't Absolute

Absolute Center

Absolute, Adding Something Above...

Cant Seem To Absolute Centre Div

Absolute Positioning; Div; Css

Position: Absolute In Ie6

Absolute Positioning In Ie

Absolute Position Fix

Absolute Positioning

Absolute Positioning In Ie6 And Ie7 (and Ie8)

Ie 5.2 Mac And Position: Absolute;

Absolute Posistioning

Position: Absolute

Learn VBA & Macros for Excel in 1 Week!

Div's Not Sitting Flush In Ie

Similar Tutorials

Hi

Um basically I have 2 divs inside in another main layout div, and basically i cant get them to sit to there is no space between them in IE, in firefox its fine.

if you go here and open it in firefox then IE you'll see what i mean, any ideas?

Html:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html>
<head>
<title>lost layout test</title>
<link rel="stylesheet" type="text/css" href="layout.css" />

</head>
<body>

	<div id="outerBox">

		<div id="topBox">

			<div id="leftTop">left part1</div>
			<div id="rightTop">right part1</div>


		</div>

	</div>

</body>
</html>

CSS: (not all is used in this example)
Code:

body {
	background: url("images/grad_bg.jpg"); 
	background-color: #d53e3e;
	background-repeat: repeat-x;
	text-align: center;
}

#outerBox {
	width: 700px;
	height: 800px;
	margin-left: auto;
	margin-right: auto;
	background-color: purple;
	padding: 0px;
	margin-top: 0px;
	border: 0px;
	
}

#topBox {
	width: 700px;
	height: 200px;
	color: white;
	text-align: left;
	padding: 0px;
	margin: 0px;
	background-color: green;
	border: 0px;
}

#leftTop {
	width: 500px;
	height: 200px;
	background-color: pink;
	padding: 0px;
	margin: 0px;
	float:left;
	border: 0px;	
}

#rightTop {
	height: 200px;
	margin-left: 500px;
	background-color: orange;
	padding: 0px;
	border: 0px;
}

#bodyBox {
	width: 700px;
	height: 540px;
	color: red;
	background-color: blue;
	float:left;
	text-align:left;
}

#leftContent {
	width: 500px;
	height: 540px;
	background-color: blue;
	
}

#rightContent {
	width: 200px;
	height: 540px;
	background-color: grey;
	float:right;
	
}

#footBox {
	height: 60px;
	width: 700px;
	color: red;
	text-align: left;
	background-color: black;
	float:right;

}

Page Sitting Differently In Ie And Firefox

Similar Tutorials

i have a two div tags but the upermost tag sits outside the boundary of the one below

and the page seems to be over stretched in IE7

the page address is www.ftpimage.com

does anyone have any suggestions my css is as follows

Code:

body {
	margin: 0px;
	background: url(../img/top_bg.gif);
	background-repeat: repeat-x;
	font-family: Verdana, Arial, sans-serif;
    font-size: "15";
}

p {
	line-height: 50px;
	margin: 11px 0 10px 0;
	padding: 0px;
}

h2 {
	color: #9f9f9f;
	margin:0px;
	padding:0px;
	font-size: 15px;
}

ul {
	font-size: 10px;
	margin:0;
	padding:0;
	list-style-image: url(../img/bullet.gif);
}

a {
	color: #93B300;
}

a:hover {
	text-decoration: none;
}

blockquote{
	background: #F7FDE3;
	color: #606060;
	padding: 0px;
}


/**** Main Container ***/


#wrap {
       margin-left: 10px;
       margin-right: auto;
       width: 640px;
}


/**** Top ***/


#top {
	width: 155%;
	height:85px;
	color: #fff;
	background: #000 url(../img/top_bg.gif);
	overflow:hidden;
}

#top h2
{
    color: #87CEFA;
    letter-spacing: 3px;
    font-size: 2.4em;
    font-weight: normal;
    position: relative;
    margin: 0px;
    top: 33px;
    display: block;
    float: left;
    background: url(../img/bg_t.gif) no-repeat;
    padding-left: 8px;
}

#top h2 a {
	color: white;
	text-decoration: none;
}

#top h2 a:hover {
        color: #93B300;
}

#page
{
    margin-right: 20px;
    max-width: 10px
    
    
   
   
}


/**** Main Menu ***/


#menu {
	display: block;
	float:right;
}

#menu ul {
	margin: 0;
	list-style: none;
}

#menu li {
	display: block;
	float: left;
	white-space: nowrap;
}

#menu li a {
	display: block;
	padding: 20px 10px 12px 20px;
	text-decoration: none;
	color: #fff;
	font-weight: bold;
}

* html #menu a {width:1%;}

#menu li a:hover {
	background: url(../img/bg_menu.gif);
}

#menu li a.current {
	letter-spacing: 1px;
	color: gray;
	background: url(../img/bg_menu.gif);
}

#menu li a.current:hover {
	color: #fff;
}


/**** Content Container ***/


#content {
	width: 65%;
	margin-top:30px; 
	border: solid 2px black;
	 
	
}

#content h2 {
	margin: 0;
	padding: 10px 0 10px 0;
}


/**** Content ***/


#left ul {
	padding: 15px 0 15px 35px;
	margin:0;
}

#left li {
	margin-bottom:5px;
}

#left .box {
	width: 390px;
	float:left;
	display: block;
       margin-left: 20px;
	display: inline;
}


/**** Sidebar ***/


#right {
	width: 315px; 
	float: right;
	display:block;
	margin-top: 10px;
}

#right .box {
	width: 20em;/*280px*/
	background: #87CEFA;
	border: 1px solid #E1E1E1;
	padding:10px 10px 55px 10px; 
	float: right;
	
}

#right .box h2 {
	font-size: 3.1em;
	margin: 0px 0 0px 0;
	padding:0px 0 5px 0;
}

#right .box a {
	margin: 10px 0 10px 0;
	color: #93B300;
	font-size: 20px;
}

#right .box p {
	margin: 5px 0 10px 0;
	line-height: 15px;
}

#right .box ul {
	padding: 0 0 0px 20px;
	margin:10px 0 10px 0;
}

#right .box li {
	margin-top:5px;
}

html>body .box
{
width: auto;
min-width: 20em;
}

#nav{ list-style: none; margin: 2.0em 0; width: 25em; float: right;}
#nav li{ padding: 0; margin: 0; }
#nav a{
	display: block;
	height: 2.0em;
	padding: 0.3em 0.3em 0.3em 0.8em;
	border:solid;
	border-width:medium;
	border-bottom: 2px; /*solid #1a1a1a*/
	border-top: 2px; /*solid #1a1a1a*/
	border-color:Black; 
	color: black;
	background-color: #87CEFA;
	font-weight: bold;
	text-decoration: none;
	font-size:medium 

	}

#nav a:hover{
	color: #1a1a1a;
	background: url(../img/bg_t.gif) no-repeat;
	background-color: #fff;
	font-weight: bold;
	}	

/**** Clear Div ***/


#clear {
	display: block;
	clear: both;
	width: 100%;
	height:1px;
	overflow:hidden;
}


/**** Footer ***/


#footer {
        margin: 40px auto 0 auto;
	text-align: center;
	border-top: dotted 1px gray;
	padding: 20px 0 20px 0;
	width: 70%;
}

#footer p {
	margin: 0px;
	padding: 0;

Footer Sitting In The Middle Of Page Til Refresh

Similar Tutorials

Hi again,

i've built an image gallery using an unordered list and php to grab 'em from the database.

when you first go to the page (both in FF and IE) the footer bar sits in the middle of the page, until you refresh, then it's fine.

same thing happens when you click to enlarge it.

Here's the page

Here's the CSS;
Code:

/* SHOWCASE STYLE - firefox */

html>body ul.showcase {
  margin:5px 1px;
  margin:auto;
  list-style: none;
  width:760px;
  }
  
html>body li.showcase {
  margin-top:5px;
  margin-left:10px;
  float:left;
  width:180px;
  }
  
/* SHOWCASE STYLE - IE */

  * html ul.showcase {
  margin:5px 1px;
  margin:auto;
  list-style: none;
  width:750px;
  }
  
  * html li.showcase {
  margin-top:5px;
  margin-left:8px;
  float:left;
  width:179px;
}

img.showcase {
border:1px solid #CCCCCC;
}

i'm sure it's somethin' to do with clearing the floats, but i just don't get why it's cool after you refresh.

thanks!

Boxes Sitting Differently On Diff Monitors?

Similar Tutorials

Hi,

As you no doubt can tell from the title of this thread I'm a newb. I'm familiar with html but moving into learning css. Self taught, I no doubt have a lot to learn but I'm attempting to alter a template and would really appreciate some assistance.

The site is www . inspirationz . info.

I look at the site on my main monitor which is a large one and all looks fine. The two boxes in the main content area sit side by side, however when I look at it on my laptop or on a smaller monitor the navigation box on the right appears to sit still to the right, but beneath the box on the left.

It didn't appear this way in firefox browser at first on my laptop, only Internet Explorer, but it appears that way on my other pc monitor in firefox so I assume it's likely to be a coding error. I have included some of the stylesheet coding below.

Is anyone able to help me work out what's causing this?
Thank you in advance.

/*================================================================
Typography and links
==================================================================*/

a:link, a:visited {
color: #999999;
text-decoration: none;
}

h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, .sidebar_nav a {
text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
font-size: 1em;
font-weight: bold;
letter-spacing: .16em;
}

.featured h2 {
font-size: 1.8em;
font-weight: normal;
text-transform: uppercase;
}

.post_header h2 {font-size: 1.2em; font-weight: normal; margin-top: 10px;}

.post_header_page h1, .post_header_single h1 {
font-size: 2em;
font-weight: normal;
text-transform: uppercase;
}

#footer h3 {margin-bottom: 25px; border-bottom: 1px dotted gray; padding: 5px;}

.featured p {
font-size: .8em;
font-style: italic;
}

p {
margin: 15px 0px;
}

.post_body_page p, .post_body_single p {margin: 0; padding: 15px 0px;}

small {
font-size: 0.8em;
font-style: italic;
}

strong {font-weight: bold;}

.post_body p {
font-size: 1em;
margin: 10px 0px;
}

.more {
margin-top: 10px;
margin-right: -10px;
float: right;
}

.more_big {
margin-top: -20px;
margin-right: 20px;
float: right;
width: 139px;
height: 73px;
}

.footer_comments {
float: left;
margin-left: 20px;
margin-top: 20px;
}

.comment_count {
font-weight: bold;
font-size: 1.8em;
}

.featured_datetime {margin: 6px 0px}

.featured_more {
float: right;
font-weight: bold;
margin-right: 20px;
text-decoration: underline;
}

.post_body_page ol, .post_body_single ol {
list-style-type: upper-roman;
margin: 30px 0px;
}

.post_body_page ol li, .post_body_single ol li {
list-style-type: upper-roman;
margin-left: 60px;
}

.post_body_page ul, .post_body_single ul {
list-style-type: upper-roman;
margin: 30px 0px;
}

.post_body_page ul li, .post_body_single ul li {
list-style-type: disc;
margin-left: 60px;
}

blockquote {
margin: 0px 30px;
padding: 20px;
border: 1px dotted gray;
font-style: italic;
}

/*================================================================
Site Structure
==================================================================*/

body {
font-size:100%;
line-height:1.125em;
font-family: Georgia, "Times New Roman", Times, serif;
background-color: #f0f0f0;
background-image: url(images/index/body.jpg);
background-repeat: repeat-x;
color: #7C7C7C;
}

#page_wrapper {
width: 976px;
margin: 0px auto;
position: relative;
}

#featured {
height: 230px;
margin-right: 3px;
margin-bottom: 30px;
border: 0px solid red;
padding: 15px;
background-image: url(images/index/featured.jpg);
background-repeat: no-repeat;
}

#header {
width: 667px;
margin: auto;
height: 109px;
background-image: url(images/index/header.jpg);
}

#container {
width: 990px;
margin: 140px auto;
font-size:0.875em;
}

#main_content_left_index {
width: 600px;
float: left;
}

#main_content_left {
width: 600px;
float: left;
}

#main_content_right {
width: 343px;
float: right;
}

#footer {
height: 250px;
padding: 130px 130px 50px 130px;
margin: auto;
clear: both;
background-color: #eeefef;
background-image: url(images/index/footer.jpg);
background-repeat: repeat-x;
background-position: top;
}

#footer_contents {width: 990px; margin: auto;}

#footer_left {width: 460px; margin: auto; float: left;}

#footer_right {width: 460px; margin: auto; float: right;}

/*================================================================
The columns
==================================================================*/

#first_column {
float: left;
width: 280px;
}

#second_column {
float: right;
width: 280px;
}

/*================================================================
The posts
==================================================================*/

.posts {
background-image: url(images/index/posts.jpg);
height: 333px;
width: 275px;
margin-bottom: 60px;
}

.post_header {
height: 38px;
width: 255px;
padding: 10px;
border: 0px solid red;
}

.post_body {
width: 255px;
height: 180px;
padding: 10px;
overflow: hidden;
font-size: .9em;
}

.post_footer {
height: 58px;
width: 275px;
margin-top: 15px;
}

.post_header_page, .post_header_single {
background-image: url(images/index/PostHeaderPage.jpg);
height: 38px;
width: 547px;
padding: 25px;
text-align: center;
}

.post_body_page, .post_body_single {
background-image: url(images/index/PostBodyPage.jpg);
background-repeat: repeat-y;
width: 547px;
padding: 0px 25px;
}

.post_footer_page, .post_footer_single{
clear: both;
background-image: url(images/index/PostFooterPage.jpg);
height: 90px;
width: 477px;
margin-bottom: 20px;
padding: 0px 60px;
font-style: italic;
}

.next_prev {
border: 0px dotted gray;
height: 29px;
clear: both;
margin-bottom: 20px;
background-image: url(images/index/next_prev_posts.jpg);
width: 577px;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
}

.next_prev_comments {
border: 0px dotted gray;
height: 29px;
clear: both;
margin-bottom: 20px;
background-image: url(images/index/next_prev_comments.jpg);
width: 535px;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
}

/*================================================================
The sidebars
==================================================================*/

.sidebar_header {
background-image: url(images/index/sidebar_header.jpg);
height: 91px;
width: 340px;
}

.sidebar_body {
display: block;
float: left;
margin:0 0 0px 0;
width: 290px;
padding: 25px;
background: url(images/index/sidebar_body.jpg) repeat-y;
}

.sidebar_bottom {
background-image: url(images/index/sidebar_footer.jpg);
height: 56px;
width: 340px;
clear: both;
margin-bottom: 40px;
}

/*================================================================
Sidebar Navigation
==================================================================*/

.sidebar_nav ul {}
.sidebar_nav li {}

.sidebar_nav ul li {
display: block;
padding: 4px;
border-bottom: 1px dotted #515151;
font-size: .8em;
}

.sidebar_nav ul ul li {margin-left: 10px; border-bottom: none; font-size: 1em;}
.sidebar_nav ul ul ul li {margin-left: 10px;}

.sidebar_nav {
margin-bottom: 20px;
}

.sidebar_nav ul {

}

.sidebar_nav a {display: block;
padding: 4px;
}

.sidebar_nav a:link, #navlist a:visited {
color: #666666;
text-decoration: none;
}

.sidebar_nav a:hover {
background: #d8d8d8
}

/*================================================================
Top navigation
==================================================================*/

#top_nav_menu {
position: absolute;
top: 132px;
left: 0;
width: 950px;
}

/***** drop menu *****/

#dropmenu, #dropmenu ul {
list-style-positionutside;
position:relative;
line-height:1.5em;
z-index:300;
width:100%;
font-weight: normal;
letter-spacing: .18em;
margin: 0px 0px 0px 0px;
}

#dropmenu a {
display:block;
padding: 5px 15px;
text-decoration:none;
color: #666666;
font-size: 1.2em;
font-family: Georgia, "Times New Roman", Times, serif;
letter-spacing: .18em;
}

#dropmenu a:hover {
color:#000;
text-decoration: underline;
}

#dropmenu li {
float:left;
position:relative;

}

#dropmenu ul {
position: absolute;
display: none;
width: 18em;
top: 1.9em;
left: 0px;
}

#dropmenu ul a {
background: url(images/index/dropmenu_bg.png)
}

#dropmenu ul a:hover {

}

#dropmenu li ul {
width:14.1em;
margin-top: 4px;
}

#dropmenu li ul a {
width: 250px;
height: auto;
float: left;
}

#dropmenu ul ul {
top:auto;
}

#dropmenu li ul ul {
left: 265px;
margin:0px 0 0 10px;
}

#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {
display:none;
}
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {
display:block;
}

/*================================================================
Categories Navigation
==================================================================*/

#main_categories {
margin: auto;
height: 20px;
width: 976px;
margin-bottom: 30px;
}

/* Horizontal Category List (frontpage) */

ul.horizontal_categories {
clear: both;
}

.horizontal_categories li {
display: inline;
background: url(images/index/cat_bullet.png) no-repeat right center;
font-size: 1.2em;
font-weight: bold;
letter-spacing: .08em;
}

.horizontal_categories a {
padding: 0px 25px;
}

.horizontal_categories a:link, .horizontal_categories a:visited {

}

.horizontal_categories a:hover {

}

Absolute Div Below Absolute Div (spacing / Different Font Sizes?)

Similar Tutorials

on my page http://tampabay-online.org/cetr/news/

the left side :

Code:

.content {
	position:relative;
	width:300px;
	margin-left: 155px;
	margin-top: 20px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:3;
}

and the two on the right are :

Code:

#right {

	position:absolute;
	width:200px;
	top:20px;
	left:500px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:1;

}

#sidebar {

	position:absolute;
	width:200px;
	top:400px;
	left:500px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:1;

}

If someone has a their font bigger on the artists section then the div will grow and go under the sidebar div.

Any way to make these relative or fix that problem?

Thanks!

When Absolute Isn't Absolute

Similar Tutorials

I am trying to position a footer at the bottom right hand corner of the page with style Code:

{position: absolute; bottom: 0px; right: 0px;}

However, the footer is not lying on the bottom, its about an inch off the bottom, interfering with a form field. How do I fix this?

Absolute Pos

Similar Tutorials

When using Absolute positioning is it best to have the first <div> be static so that that the Absolute Positioning has something a reference point?
Thank you

Absolute

Similar Tutorials

I can't create a complicated webpage without using absolute positioning for areas.
For ex I want to create 2 top areas of screen width on top of page. Then I want 3 columns with 1st and 3rd columns having 3-4 seperate containers. Without using absolute I am way to confusied to get this happening.

Absolute Center

Similar Tutorials

I've only just started mucking round with CSS. Just by looking at other peoples sites and seeing how they do something, and then mucking around with what they've written to learn it.

What I am trying to do at the moment, is just have a blank page with at the absolute center (Vertical and Horizontal) of the screen have some text. But the text is only horizontally centered not vertically.

Heres the codes:
In seperate stylesheet
Code:

#center {
	position: absolute
	width: 100%;
	height: 100%;
	text-align: center;
	vertical-align: middle;
}

and in the page

Code:

<div id="center">
      <p><span class="aus">Austrlia</span><br>
        <span class="contact">admin@sixfootone.com +61 412 587890</span>
        </p></div>

Any ideas?
Thanks

Absolute, Adding Something Above...

Similar Tutorials

hi

I have a long list of images positioned absolutely, and vertically down the page.

However, if I wanted to add a new image to the top of the list... how can I do this without having to change all the positioning values of the other images?

cheers
nathan

Cant Seem To Absolute Centre Div

Similar Tutorials

Hi,

I have a div which is centered in the area right of the menu. However, I am trying to get it so it sits absoultly center. The width of the menu is forcing its center line to be 180px right of true center.

Here is the link:
http://www.zombiemod.com/rm/nina2/about.html

Here is the HTML:

Code:

<div id="main-image-container"> 
<h5><b>ME: SWEDE & TAURUS</b> - It must be a good combination<br /><br /> 
Patient, reliable, persistent & determined. They will do their jobs to perfection, or at least as close to it as possible.
</h5> 
</div>

Here is the CSS:

Code:

#main-image-container {
    position: relative;
    overflow: hidden;
    width:600px;
    margin-left:auto;
    margin-right:auto;
}

Can anyone help me with this please? I tried to offset the main image container by -180px but that didnt work.

Absolute Positioning; Div; Css

Similar Tutorials

Hello everyone, I would like to ask for any and all help on solving this problem I am having.

Well recently I used to make all of my web sites in tables until I came upon an article saying you should use CSS and absolute positioning. Therefore, my problem is this, If you go to this partially completed site, http://sykotic-designz.org/newsite/index.html.

You will now notice that there are two 'shadow' images. One on the left and one on the right. The one on the left works fine. Test it by making your browser window smaller and bigger. You will notice the right shadow moves. I have tried various alternatives like using a table just for the one image but you still need to use absolute position and did not work, I have messed with displaying absolute position by % and by pixels. But it doesn't want to seem to work either. I am mainly having problems probably because I am new to the DIV tags in which I use entirely through out this page, I am not sure if CSS will help at all. You can view the source of the page if you wish. I appreciate and and all help you may provide, thanks!

Position: Absolute In Ie6

Similar Tutorials

I'm putting together a site using a CSS template, and hefty use of position: absolute. You can view it he
http://www.goldenturmeric.com/layout.php

The layout comes out great in FF 2.0 and IE 7. However, the main body of the site doesn't come out at all in IE 6. I've monkeyed around a little with changing to position: relative and a few other things and it completely throws it off. I'm sorry if I'm not doing this the right way or position: absolute is avoided or something. If so, I didn't know.

Anyone's help is much appreciated.

Absolute Positioning In Ie

Similar Tutorials

Good morning,

I've been working on my site, and it's in its final stages, but I'm experiencing a problem I can't figure out.

I have a floating bar with all of my navigation links in it which is absolutely defined with the following code:

Code:

#headerBar { /* sets position of floating bar */
	position: absolute;
	clear: both;
	top: 57px;
	left: 0px;
	padding: 0px;
	margin: 0px;
	width: 100%;
	filter: alpha(opacity=50);
	-moz-opacity: .50;
	opacity: .50;
		}

The problem I'm experiencing is that in Firefox, Safari, and Opera, the bar appears magically in the perfect position, however, in Internet Explorer, the bar is 5-10 pixels higher than it should be.

The url is: http://www.alokw.com

Any suggestions?

Thanks!

Absolute Position Fix

Similar Tutorials

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

Absolute Positioning

Similar Tutorials

Hi, I was wondering if any CSS experts could give me some advice on how to position elements on a page. Right now I'm really into using absolute positioning because it just seems so easy to place things on an exact point on the screen irrespective of all other elements, but I am wondering whether that is considered bad practice, any advice would be greatly appreciated. Thank you in advance for any correspondence.

Absolute Positioning In Ie6 And Ie7 (and Ie8)

Similar Tutorials

Hi everyone,

I just stated handcoding and I am having a great time. Everything seemed to be going well on my first site until I previewed it on IE. After solving the nasty png issue, I realized that the two elements that I have absolute postioned a) screw the layout up in IE6 b) don't appear all together in IE7 and IE8, but doesn't screw up the flow.

The elements are an arm that is supposed to hang off the left side, and hair that sits above the contentwrap (you will understand once you look)

It renders perfectly in Firefox, safari and google chrome. Go figure.

I read I can't put hyperlinks because of spam, so if you don't mind helping out, please visit:

w w w . goscoblog. com/test/index.html

Thanks In advance

Ie 5.2 Mac And Position: Absolute;

Similar Tutorials

If I do something like this:

.divSubHomeRtPhoto {
position: absolute;
left: 340px;
top: 167px;
width: 420px;
height: 420px;
}

Then <div class="divSubHomeRtPhoto">
my left and top positions don't seem to take in IE 5.2 for Mac. This seems to be fairly well known, from what I read on the internet.

What this means for me though, is that I have to almost do away with positioning through CSS if I want my pages to work with IE 5.2 Mac, whcih I recently discoverd I do want to work.

How do other cross browser CSS writes deal with this problem?

Thanks for your help

CJB

Absolute Posistioning

Similar Tutorials

Position: Absolute

Similar Tutorials

Is it possible to position something below a division that has the property { position: absolute } and can expand to a varied length depending on what is contained with it?