CSS - Center Aligning On Screen In Css-p

is there any way of center aligning a div layer on a page by not nesting it within another layer.

heres the codes i tried but it didnt work:

<div align="center" id="Layer1" style="position:relative; width:268px; height:75px; z-index:1; text-align:center"></div>

Hello! I am in need of some help with my css. I know, I am a total newbie but need some help with getting the css working properly. It seems that some parts work for IE and other parts work for Firefox. It seems like my left bar shows differently in IE and Firefox. Furthermore I have checked with IE on Mac and the main body doesn't show correctly either. It is displayed too short, doesn't fill the box. If anyone please could take a look at the code and see if they can help me I would appreciate it.

Please anyone help me. You can see the page at:
http://www.galakse.no/test/index.php/tscm/news
The css is located he
http://www.galakse.no/test/design/tscm/stylesheets/tscm.css

Any and all help is very much appreciated!

Thank you!

Hi
For some reason my links won't align centrally on a mac or netscape. Here's the classes in a style sheet I'm linking to.
It works on a PC though. I want the links to only become underlined when you roll over.

The problem is the links are long sentences and in a thin table so they go over on to two lines. And when this happens, the second line is not aligned centrally with the first. It's slightly scew.



.copy { font-family: "Times New Roman", Times, serif; font-size: 11px; line-height: 13px; color: #000000; text-align: center; padding-right: 20px; padding-left: 20px; text-decoration: none}

a.copy:hover { font-family: "Times New Roman", Times, serif; font-size: 11px; line-height: 13px; color: #000000; padding-right: 20px; padding-left: 20px; text-decoration: underline; text-align: center;}

I've made a site for someone and it was center aligning and it worked in all 3 main browsers (IE, FF and Opera) so when I was tinkering with ideas for redoing the look of my site, I used the CSS sheet I used for his site as a base for mine.

Unfortunately it's only center align in IE7 with my site. My site is admittedly a bit more complex, at the moment, with more divs, it should still work.

Mind you I'm probably just too tired to spot the obvious. Can anyone see what's stopping it from center aligning in FF and Opera?

The template:
http://www.toadwarrior.com/temp/index.php

The CSS:
http://www.toadwarrior.com/temp/mark_h_walker_journalist.css

Thank you in advance.

Hi,

I am a wannabe css compiler...

Have the following problem.

wrote css for a square screen monitor and placed css box in an area to the right of center, my partner called and told me it sat to the left over the side menu onher wide screen.

I cannot figure out how to compensate the (top/left) position to cover both type screens...

Anyone help me?

I am using the following code how do I change it so that it would show up in the center of the brower window?

Thanks
Tim
PHP Code:
<div style="position: absolute; left: 0px; z-index: 1; top: 0px; align: center\">
<object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" 

codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0

,0\" width=\"544\" height=\"396\" id=\"cardio\" align=\"middle\">
<param name=\"allowScriptAccess\" value=\"sameDomain\" />
<param name=\"movie\" value=\"ads/cardio3.swf\" />
<param name=\"loop\" value=\"false\" />
<param name=\"quality\" value=\"high\" />
<param name=\"wmode\" value=\"transparent\" />
<param name=\"bgcolor\" value=\"#ffffff\" />
<embed src=\"ads/cardio3.swf\" loop=\"false\" quality=\"high\" wmode=\"transparent\" 

bgcolor=\"#ffffff\" width=\"544\" height=\"396\" name=\"cardio\" align=\"middle\" 

allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\" 

pluginspage=\"http://www.macromedia.com/go/getflashplayer\" />
</object>
</div> 

how can i get a div in the middle of the y-axis of the browser window?

In IE 7.0 Why is the text displaying the way it is in this screen shot:

http://www.larreamma.com/screens/lmma.png

It should display like this:

http://www.larreamma.com/screens/lmma_ie8.png

(I do not have access to IE 7 to readly test various options).

Thank you in advance.

I have a page dien all in css that is all set for 800x600 resolution. Does any one know how I can detect larger screen size/resolutions and center the entire page for these instances

thanks

JT

<html>
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<title>All Fore U Golf Clinic</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "nav.css";
</style>
<style type="text/css" media="screen">
</style>
</head>

<body>
<div id="header">header thing</div>

<div id="wrapper">
	<div id="container">

		<div id="content">
			<h1>content</h1>
			<p>Sum Stuff goes here...</p>
			<p class="last">...and here</p>
		</div>
	</div>
	
	<div id="sidebar">

		<h1>navigation</h1>
<ul id="nav"> 
  <li><a href="#">Home</a></li> 
  <li><a href="#">About</a> 
    <ul> 
      <li><a href="#">History</a></li> 
      <li><a href="#">Team</a></li> 
      <li><a href="#">Offices</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Golf Stuff</a> 
    <ul> 
      <li><a href="#">Clubs stuff</a></li> 
      <li><a href="http://www.google.com">accessories stufff</a></li> 
      <li><a href="#">Hosting</a></li> 
      <li><a href="#">Domain Names</a></li> 
      <li><a href="#">Broadband</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Contact Us</a> 
    <ul> 
      <li><a href="#">United Kingdom</a></li> 
      <li><a href="#">France</a></li> 
      <li><a href="#">USA</a></li> 
      <li><a href="#">Australia</a></li> 
    </ul> 
  </li> 
</ul>
<br>&nbsp;
	</div>
	<div class="clearing">&nbsp;</div>

</div>

<div id="footer">footer thing</div>

</body>
</html> 

CSS:
Code:

body {
	font: normal 11px verdana;
	}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px; /* Width of Menu Items */
	border-bottom: 1px solid #ccc;
	}

ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	left: 149px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	}

/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff; /* IE6 Bug */
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
		
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
		
li:hover ul, li.over ul { display: block; } /* The magic */

/*<![CDATA[*/
#wrapper {
	background: #f1f2ea;
}
#header {
	background: #d7dabd;
}
#container {
	width: 100%;
	background: #f1f2ea;
	float: right;
	margin-right: -200px;
}
#content {
	background: #f1f2ea;
	margin-right: 200px;
}
#sidebar {
	width: 200px;
	float: left;
}
#footer {
	background: #d7dabd;
}
h1 {
	margin-top: 0;
}
.last {
	margin-bottom: 0;
}
.clearing {
	height: 0;
	clear: both;
}
/*]]>*/

Works fine in IE, but when displayed in firefox the id=content extends off the screen.

I couldn't figure out why people were telling me they couldn't see my page but i could see it just fine in two different locations. Come to find out I use firefox and IE is showing a blank page. Can someone help me with this?

I've run into yet another IE "feature" that i'd like to ask you, dear colleagues, how to solve.

I have a relatively positioned div and i need to absolute position another div inside of it to fill almost all width and height of the parent. I need it to have a 20px margin from top and bottom. Here's what works in real browsers:

Code:

.somediv{
position: absolute;
left: 0;
top: 20px;
bottom: 20px;
right: 0;
}

Now how do i make it work in a developer's nightmare IE?

There are 2 more divs in top and bottom both 20px high so the new div shouldn't overlap with them.

Hi I have an issue aligning some links. i have it perfect in FF but it is not the same in IE.

http://www.sun-awnings-direct.co.uk/the-carino-p-29.html

It is the white breadcruumb trail in question. Can anyone advise what IE is doing differently and how I can solve it?

Thanks a lot

www.devwebsites.com/index.php is my site. in order to view this problem you must register at www.devwebsites.com/register.php
Once you do go back to the home page and you will see the ul out of the login box. Any help is greatly appreciated. Tell me what I should do to fix it please.

CSS LINK

http://www.devwebsites.com/estilos.css

Hi everyone,
I am having trouble aligning my content to the edge of the table somehow it shows 20pixels down and I cann't figuere out how to bring it up. Any help will be greatly appreciate. thanks
Code:

<style>
ul { list-style-type: none; margin: 1.0em 0 0 0px; padding: 0; position:relative; overflow: visible; height: auto; text-decoration: none; color: #33FF00;}
ul li { text-decoration: none; width: 230px; color: #000; }
ul li a, ul li a:visited {height: 1.2em; width: 200px; display: block; text-decoration: none; background: blue; margin: 0.1em 0 0 0; text-indent: 10px; padding: 3px; color: #000;}
ul li a:hover { height: 1.2em; display: block; background-color:#FF0000; color: #fff000;}
ul li a.currentpage, ul li { height: 1.2em; text-decoration: none; background: #00ffff; padding: 3px; color: #fff;}
</style>
<table width="234" border="1">
  <tr>
    <td width="230" height="85">
	<ul><li><a href="">HOME</a></li>
        <li><a href="">LINK TWO</a></li>
    </ul>
	</td>
  </tr>
  <tr><td></td></tr>
</table>