CSS - Absolute

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

I have a DIV that is positioned as absolute and have used the required CSS to make it centered. But when viewed in Internet Explorer it is 1 or 2 pixels off-center??

Here is the CSS code:

Code:

div.mpheader { 
position: absolute; 
display: block; 
overflow: hidden; 
padding: 0px; 
top: 0px; 
width: 900px; 
height: 655px; 
margin-top: 0px; 
margin-left: -450px; 
left: 50.0%; 
background-image: url(images/header.png); 
}

and the HTML code in the body:

Code:

<div class="mpheader">
</div>

and here is the link to the site:

highriserocks.com/maydayparade

I have other CSS for A classes which are inside the DIV tags also but it's just the main image that is slightly off center.

Any ideas??

Much appreciated!

Adam

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!

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!

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.

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

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

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.

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

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.

I think the best way to explain this is by example, if you go to this page:

http://lifeyouwant.workinprogress.co.uk/how-we-work

You will notice the drop down menu works fine in Firefox, Safari, Opera etc. However when it comes to IE7 the drop down menu is positioned too far to the right.

Has anyone got any ideas how I can get this to display correctly in IE7 (like it does in Firefox).

I would prefer to try not to use a hack for IE7.

ANy ideas would be great! Thanks.

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 browser seems fine but mozilla display a simple table with links inside in a squished up format, not present on the web design.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<meta name="GENERATOR" content="PageBreeze Free HTML Editor (http://www.pagebreeze.com)">
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" >
<title>mybar.html</title>
</head>

<style type="text/css">
#elButton a  {

	color: #000000;
	font-size:10px;
	font-family:verdana;
	font-weight:bold;
	text-decoration: none;
	/*border:1px  outset aqua;*/
/*	background-color:#00ffff;*/
	border-right-style:solid;
	border-right-width:1px;
	width: 110px;
/*	padding: 3px 5px;*/
	/*margin: 1px;*/
	
}

</style>
<body bgcolor="#ffffff">
<p>
<table style="WIDTH: 487px; HEIGHT: 26px" cellspacing="0" cellpadding="0" width="487" 
align="right" bgcolor="#00eaea" border="0">
  
  <tr>
    <td valign="top" align="middle">
      <div id="elButton">
	<a href="#">Java Script</a>
      <a href="#">Dynamic HTML</a> 
      <a href="#">Server Side</a> 
      <a href="#">Client Side</a> 
  </div></td></tr></table></p>


</body>
</html>

Hi,
A simple question ... i'm sure i've done something like this before but can't remember how ...

I centered a web page in the browser and used divs to hold the text and main content for the page - but when the page is viewed at different resolutions or left-side panels are opened (such as media player in IE) my div layers are not repositioning with the page ... I know this must be easy but it aint workin somehow ...


thanks in advance ...