CSS - Alignment Problem In Ie6

I'm trying to change over from coding HTML tables to using CSS and I'm still new at this. Thanks in advance to anyone who can help me out with this alignment issue.

For the main content of this page, I'd like the text to be left-aligned, but it's showing up as centered. I'm hoping it's some obvious oversight on my part that someone might easily see and point out to me.

Thanks!

Here's my HTML:
Code:

<center>
<div id="hpMaincanvas">

<? include('includes/topnav.php'); ?>

<div id="aboutArea">
<h2>About VERVANO</h2>

VERVANO was born as a solution to a problem in the furnishings world. Accustomed to having the world's resources at our finger tips through our connections 
with colleagues and vendors, internet research and in-person travel, the LBD team was at a lost for sourcing sustainable furnishings for their own space.<P>

This compelling desire became a need which launched this eco-conscious furnishings line from the Laura Britt Design studio in Austin, TX.<P>
Founded with the hope that our small input could have impact on the future of the design industry, the team has held fast to the sustainable sourcing and 
building model through all of the subsequent ups and downs. Although 'green' is now a standard buzz word it's not a standard practice. Each step of this 
process has been met with rigorous research and challenging sourcing.<P>

Thankfully, VERVANO remains true to its original intent - built close to home using sustainable materials. Our interest lies in using materials which are 
rapidly renewed in nature, sustainably sourced and support a healthy indoor air quality through low VOCs.<P>

It's still a long road until this is a mainstream way of designing, sourcing, and building furnishings- but we're doing our part to bring this step closer to home.
Thanks for your interest and support of our endeavor.
<br><img src="art/space.gif" alt="" height=12 width=1><br>


<img src="art/laura.jpg" align=left alt="Laura Britt, founder of Vervano"><h2>About Laura Britt Design</h2>

<span class="label">EDUCATION AND BACKGROUND</span><br>
Ms. Britt earned a B.S. in Interior Design from Oklahoma State University in 1992.  
She went on to manage and design large scale, multi-million dollar interior design 
and architecture projects for the United States Air Force Academy.  She later 
enrolled in the University of Texas at Austin in 2000 and received a Masters Degree 
in Architecture with emphasis in Sustainable Design.  Through her architectural 
background she developed a contextual understanding of buildings as integrated 
systems. Following her graduation from the University of Texas she subsequently 
worked in complex hospitality design and architecture in Austin, TX, giving her a 
unique and real-world perspective regarding many attributes of public space design. <P>
 
<span class="label">ON BUDGET, ON TIME AWARD WINNING COMPANY</span><br>
Laura Britt Design is an award winning full service design firm. Value-added design, teamwork and attention 
to detail are at the foundation of each project. Starting with the specifications of the client, the firm integrates 
architectural and interior design solutions to create on budget, on time, functional environments.  <P>
 
<span class="label">SUSTAINABILITY & LEED</span><br>
Laura Britt designs are based on the vision and mission of the end user.  Laura Britt Design firm is 
recognized as a leader in sustainable design practices and has multiple LEED certified designers on staff.  <P>
 

<span class="label">OUR TEAM</span><br>
The design team has approximately 75 years of cumulative experience and training. Each is professionally 
trained to identify the key factors driving the architecture and design and construction of each building 
project with the facilities team and architecture team. 
Our technical expertise includes cost estimating, utilization of CAD technology, project management, on site 
quality control inspection, specification of furnishings and finishes, space planning and 3D modeling and 
rendering. <P>

<span class="label">Associations</span><br>
Vervano is a proud member of the <a href="(URL address blocked: See forum rules)" target="new">Sustainable Furnishings Council</a>.
<br><img src="art/space.gif" alt="" height=8 width=1><br>
Laura Britt Design is recognized as a HUB by the State of Texas due to it's designation as a Woman Owned 
Business.  HUB certification was granted in November or 2008.  The firm is also listed on the states Central 
Master Bidders List. <br><img src="art/space.gif" alt="" height=8 width=1><br>

Laura Britt Design is a member of The Best Practices Network - Interior designers committed to on-time, 
on-budget projects through continuing business education and the sharing of best practices.<P>

</div>


<? include('includes/footer.php'); ?>
</center>

Here's my CSS:
Code:

body {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 12px;
   color: #645133;
   background: url(art/bg.jpg);    
   background-repeat: no-repeat;
   background-position: center top;
}
 
h1 {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 30px;
   font-weight: lighter;
   color: #49320f;
}
 
h2 {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 16px;
   color: #49320f;
   margin-top: -20px;
   font-weight: lighter;
   line-height: 36px;
}

#hpMaincanvas {
   position: relative;
   padding: 0px;
   width: 900px;
   margin-top: 35px; 
   margin-left: auto;
   margin-right: auto;
   background-color: #ffffff; 
   z-index:5;
}


#socialMedia {
   position: relative;
   font-family: georgia,palatino,serif;
   font-size: 12px;
   color: #bbb38c;
   line-height: 17px;
   font-style: italic;
   padding-right: 50px;
   width: 900px;
   text-align: right;
}


#MainArea {
   position: relative;
   padding-right: 50px;
   padding-top:0px;
   width: 900px;
   text-align: center;
   z-index:20;
}

#AboutArea {
   position: relative;
   padding-right: 50px;
   padding-left: 50px;
   padding-top:30px;
   width: 800px;
   z-index:20;
   text-align:left;
}

#footer {
   position: relative;
   text-align: center;
}


#navigation {
   position: absolute;
   top:40px;
   width: 600px;
  left: 320px;
   font-weight: normal;
	z-index:25;
	margin-left: auto ;
  margin-right: auto ;

}


li {
   list-style: none;
   float: left;
   position:relative;
}


ul {
  padding: 0;
  margin: 0;
  list-style: none;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  }

ul li {
  display: block;
  position: relative;
  float: left;

}
  
li ul {
  display: none;
  border: 1px solid #e2ddbe;
  }


ul li a {
  display: block;
  text-decoration: none;
  text-align:left;
  color: #594425;
  padding: 7px 7px 7px 7px;
  white-space: nowrap;
  
}
ul li a:hover { 
color: #d93800;
 }
 
li:hover ul {
  display: block;
  position: absolute;
}

li:hover li {
  float: none;
  font-size: 11px;
  background: #efede1;;
}

li:hover a { 
 
}


li:hover li a:hover 
{ background: #ffffff; }

.logo {
	position: absolute;
	top: 30px;
	left: 50px;
}

.label {
	font-family: Helvetica, Arial, sans-serif;
  	font-size: 11px;
  	text-transform: uppercase;
	line-height: 19px;
	letter-spacing: 2pt;
	color: #a99573;
}

.copyright {
	font-family:georgia,times,serif;
	font-size:11px;
	color:#beb692;
	text-align:center;
}

a.copyright, a.copyright:link, a.copyright:visited {
	text-decoration:none;
	font-family: georgia,times,serif;
	font-size: 11px;
	text-align:center;
}

a.copyright:hover {
	text-decoration:underline;
}

.middle, .submit {
	vertical-align: middle
}

Hi, would you tell me please what do I have to do to make this code look in IE6 the same way
as it looks in FireFox 3.0.5

In FireFox fields are as expected - City and ZipCode each on different lines.
In IE6 they are on the same line (Zipcode label is on the same horizontal level as City)and the rest of the second line(Zipcode) starts at the beginning of the next line(without offset)
Code:

<style type="text/css">
.formInput:after, .formInput .formField:after{
clear:both;display:block;visibility:hidden;height:0;content:'.'}
.formField {float:left;width:40%;}
.formInput{position:relative;}
.formInput div.ex{position:static;left:24%; width:5em}
.formLabel {float:left;width:25%;text-align:right;}
</style>

<div style="width:700px">
<form>          
<div id="cityFld" class="formInput">
	<div class="formLabel"><label for="city">City</label></div>
	<div class="formField">
		<input type="text" name="city" id="city" value="">
		<div class="ex">city explanation</div>
	</div>
</div>


<div id="zipFld" class="formInput">
	<div class="formLabel"><label for="city">Zipcode</label></div>
	<div class="formField">
		<input type="text" name="zip" id="zip" value="">
		<div class="ex">zip explanation</div>
	</div>
</div>
</form>
</div>

Ok.

I've got a calendar all set up, and it displays properly in its frame in Firefox.

using firefox, try the following link:

http://www.kennedygallery.org (click events calendar)

in IE, the whole thing is right-justified or centered or something.

Since I discovered the problem, I even started putting redundant declarations in the calendar's style sheet:

Code:

body {
	font-family : Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	background : #FFFFFF ;
	color : #505458;
	margin: 0px;
	margin-left: 10px !important;
	width:590px !important;
}

.maintable {
	position: absolute;
	left: 10px !important;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left:0px;
}

etc, etc.

So is there a positioning bug or something that I have to work around to make it display as it does in Firefox?

Thanks,

Perry.

Thanks for taking the time to read my question.

Have posted 2 examples of my problem.

Example 1:

http://www.pierced.ca/Kelly/indexCOPY.htm Page
http://www.pierced.ca/Kelly/kelly1.htm CSS
http://www.pierced.ca/Kelly/kelly1.css CSS (this one will download)

Here my rounded corners don't line up to the bottom of the "info" area. Not sure why.



Example 2:

http://www.pierced.ca/Kelly/indexCOPY2.htm
http://www.pierced.ca/Kelly/kelly2.htm CSS
http://www.pierced.ca/Kelly/kelly2.css CSS (this one will download)


Here my rounded corners line up, but I get an extra space under the "menu" section. Not sure why.


I am totally stuck. I am not sure how to fix it.

I have tried adding height to the menu, but that doesn't work.

Thanks for you help,

Brad

OK, I've got this page currently:
http://www.brianellisrules.com/stickers/pics/ (click on a state)

I'm trying to add a caption to each thumbnail showing the date:
http://www.brianellisrules.com/stic...s/testindex.php
(click on a state, preferably NY or NJ since they have a lot of pics)


In the first version, I have all the pictures centered and they're all vertically aligned to the middle (of the row).

In the second version, I switched over to floating div's so I could center each date below each thumbnail. That works great, however, all the thumbnails are left aligned. I tried adding a div around the thumbnails with everything centered, but no dice.

How do I center the row of thumbnails? Also, how do I align the thumbnails to the center of the row (or at least the prev/next arrows)?

Thanks!

oh yeah, here's the CSS:
div.thumbrow { clear: both; padding-top: 10px; margin-left: 20%; margin-right: auto;} /*THE MARGIN IS JUST A TEMP FIX, BUT NOT WHAT I WANT. I'D LIKE FOR IT TO BE CENTERED*/
div.float { float: left; text-align: center; }
div.float p { text-align: center; margin: 0; font-size: 0.8em; }

hello people
i built my website using html and css and i completed the frontpage but iam having a serious issue with the page whe i zoom in or our in firefox (ctrl+MouseScroll) , the middle area in the page is remainng on the same place but the right and left areas are floating away from the middle area of the page , so i need to know how can i fix that , the url for my page is (satnav-eg.com/test2) , please check it out and try to help me with this issue

thanks in advance

I have this in my other thread but I decided to make a new thread since my old thread was pertaining to a seperate issue. OK well I have validated my CSS and am now getting no errors on it, warnings about the font-family but that is an easy change and isn't priority right now. That fixed a couple minor things that I had missed. But the current problems a

1.) Every div past the #space div appears to be a couple pixels short in terms of width, as the right border doesn't line up with the border from #topright, #space, #grayfade, and #bannercell.

2.)Now in FF its all screwy. It wont display one div next to another, it puts it in the correct position on the right, but bumps it down below the div it is supposed to be next to. The DTD I have on the page right now is

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

Please let me know if this is confusing or you need anything else. Thanks

CSS:
Code:

html {height:100%;}

body{

margin:0; padding:0; height:100%;
font-family:Times New Roman, serif;
background-color:white;
}


#wrap{

background-image:url(bgimage.jpg);
background-position:top left;
background-repeat:repeat-y;
min-height:100%;
width:790px;
margin:auto;
}


* html #wrap {height:100%}

#header{

background-image:url('keyboard.jpg');
background-position:left;
background-repeat:no-repeat;
background-color: #FEFEFE;
margin:0; padding:0;
height:117px;
width:615px;
border-left: 1px solid #777777; 
float:left; 
}


p{

margin:0px; padding:0;
font-family: courier;
}


p.headline{

margin:0px; padding-left:5px;
font-family: arial;
font-weight:bold;
font-size:70%;
}


p.news{

margin:0px; padding-left:5px;
font-family: arial;
font-size:70%;
color:#808080;
}


h1{

position:relative;
line-height:0px;
margin:0; padding-left:10px;
font-size:115%;
color:#1B018E;
}


#left{

float:left;
width:200px;
text-align:left;
background-color:#FFFFFF;
border-left: 1px solid #777777; 
border-right: 1px solid #777777; 
}


#main{

float:right;
clear:both;
text-align:left;  
width:565px;
border-right: 1px solid #777777;
}


#clearfooter{

clear:both;
height:30px;
overflow:hidden;
}


#footer{

height:30px;
background-color: #777777;
margin:0 auto; padding:0;
margin-top:-30px;
color:#FFFFFF;
text-align:center;
width:790px;
}


#bannercell{

float:right;
clear:both;
background-color:white;
text-align:right;
width:175px;
height:117px;
font-size:75%;
margin:0; padding:0;
border-right: 1px solid #777777;
}


#borderleft{

border-left: 1px solid #777777; 
}


#topright{

float:right;
clear:both;
background-color:white;
text-align:right;
width:175px;
height:53px;
font-size:75%;
margin:0; padding:0;
border-right: 1px solid #777777;
}


input.box{

height:17px;
}


#linkbanner{

width:615px;
height:19px;
float:left; 
text-align:left;
border-left: 1px solid #777777; 
background-color: #777777;
}


#grayfade{

float:right;
clear:both;
border-right: 1px solid #777777;
background-image:url(gray_grad.jpg);
width:175px;
height:16px;
}


#space{

border-right: 1px solid #777777;
border-left: 1px solid #777777; 
background-color: #FFFFFF;
height:25px;
width:790px;
}


#extraspace{

float:right;
clear:both;
border-right: 1px solid #777777; 
background-color: #FFFFFF;
height:25px;
width:565px;
}


#newsbar{

background-image:url(blue_grad.jpg);
background-repeat:no-repeat;
width:200px;
height:10px;
}


#mainbar{

background-image:url(blue_lg.jpg);
background-repeat:no-repeat;
width:565px;
height:10px;
border-right: 1px solid #777777;
}


#mainbarsm{

float:right;
clear:both;  
width:565px;
background-image:url(blue_thin.jpg);
background-repeat:no-repeat;
height:5px;
}


#heading{

background-color: #FFFFFF;
margin:0; padding:0;
height:53px;
width:615px;
border-left: 1px solid #777777; 
float:left; 
text-align:left;
}

and my HTML:
Code:

<center>
<body background="../images/bg_texture2.gif">
<div id="wrap">

<div id="heading"><img src="../images/logo.gif"><font face="Bodoni MT" size="5" color="#040C89">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Company Name</font></div>

<div id="topright"><font color="#6666FF">Monday April 4, 2005</font></div>

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

<div id="bannercell"><center>.::Client Login::.</center>
<br>
<font size="2">username&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" size="13" class="box">
password&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" size="13" class="box"></font>
<center><input type="submit" value="Login"></center></div>

<div id="linkbanner"><font color="#FFFFFF" size="2">About Us&nbsp;&nbsp;|&nbsp;&nbsp;Services&nbsp;&nbsp;|&nbsp;&nbsp;Solutions&nbsp;&nbsp;|&nbsp;&nbsp;Help Desk&nbsp;&nbsp;|&nbsp;&nbsp;Training&nbsp;&nbsp;|&nbsp;&nbsp;Careers&nbsp;&nbsp;|&nbsp;&nbsp;Contact</font></div>
<div id="grayfade">&nbsp;</div>

<div id="space">&nbsp;</div>

<div id="left">

<div id="newsbar"><h1>Recent News</h1></div>

<p class="headline">.::New Website::.</p>
<p class="news">We're launching a new website in the near future.  Look for great things to come!</p><br>
<p class="headline">.::Done using CSS::.</p>
<p class="news">No tables with this design.  "Out with the old and in with the new."</p><br>
<p class="headline">.::Continuously Changing::.</p>
<p class="news">With us having recent news on the website, the main page will be changing all
the time with the latest info about Us and stuff</p><br>
<p class ="headline">.::Sales Platform::.</p>
<p class="news">We can also use this as an area for sales opportunities and promotion.  It will
be a good reference for all new products and features from Us.</p>
</div>

<div id="main">

<div id="mainbar"><h1>Your Cool Slogan</h1></div>
<br>

<p class="news"><strong>Intuitive.</strong>  Having the knowledge and experience in a changing <img src="../images/imis.gif" align="right" border="0"> world to make expert decisions through perceptive insight.  We allow your organization to tear down barriers by offering <strong>software solutions, innovative design, and managed services.</strong>
Specializing in <i>sutff</i> and ore stuff</i> software we are able to expand the dimensions of your organization, and provide you with the solutions needed for an on demand world.
</p>

<div id="mainbarsm"></div>

<p class="news">Having the knowledge and experience in a changing <img src="../images/microsoft.gif" align="right" border="0"> world to make expert decisions through perceptive insight.  We allow your organization to tear down barriers by offering software solutions, innovative design, and managed services.
</p>
</div>

<div id="extraspace"></div>

<div id="clearfooter"></div>

<div id="footer">
<center><font size="2">2005 Us. All rights reserved.<br>
Site produced by a Web Guy, Content Manager.</font></center>
</div>

</body>
</center>

Hi Im a newbie to this site and to web page building so Im no sure if this is the right spot to be posting, but I think my problems are css related.

Ive designed my web page with a 3 column layout the when I insert text into the left and middle columns the text starts from the top of the page like its ment to, but for some reason when I insert text into the right column it starts from the bottom of the page instead and I cannot work out why? Does anyone have any ideas? Is it css related or html?

2nd Issue how do I get the menu bar to float to the centre of the screen instead of the left? Ive tried so many things and it just make it worse.

I know its hard without pics.

Hi All,

I am new to devshed and new to css stuff. I have a problem with a site i am currently building. http://www.foodaffairs.co.za

Basically there is a yellow link box underneath the flash image which in FF(Firefox) is out a little to the right and in IE out to the left. The yellow block is actually an image which is the same width as the flash image but just doesn't wanna line up.

Anyone had this problem or could help me fix it?

Thanks

LoTi

Hi, the foolowing code is highlighting some options that I have in a layer sitting on top of a tablet type object. In IE the options are displayed 'inside' the tablet. In Firefox they are spread out down the page into my footer, any ideas what I can add to contain them within the tablet layer?

PHP Code:
<div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 1px; top: 188px; visibility:visible" id="layer2">
        <div style="position: absolute; width: 100px; height: 24px; z-index: 1; left: 46px; top: 35px; visibility:visible; right:0; bottom:0" id="layer3">
            <p align="center"><font color="#4E261B"><b>
            <span style="font-size: 11pt">
            <a href="home" style="text-decoration: none">
            <font color="#4E261B">Home</font></a></span></b></font><p align="center">&nbsp;<p align="center">
            <font color="#4E261B"><b><span style="font-size: 11pt">About US</span></b></font><p align="center">&nbsp;<p align="center">
            <font color="#4E261B"><b><span style="font-size: 11pt">User Register</span></b></font><p align="center">&nbsp;<p align="center">
            <font color="#4E261B"><b><span style="font-size: 11pt">User Log-in</span></b></font><p align="center">&nbsp;<p align="center">
            <font color="#4E261B"><b><span style="font-size: 11pt">Supplier 
            Log-in</span></b></font><p align="center">&nbsp;<p align="center">
            <font color="#4E261B"><b><span style="font-size: 11pt">Join Head2Toe</span></b></font></div>
        <img border="0" src="images/bridetablet1.bmp" width="190" height="302"></div>
    <p></div>  <!-- to clear footer -->
</div><!-- end outer div --> 





Layer 2 is the tablet, layer 3 is the text on top.

if you need anything else, please let me know.

Thanks,

G

Hi

I have a website that i want to push to the center of the page for high resolutions..

i added a div tag for it as

<div align=center>
//all data here
</div>


now everything is pushed to the center except the menu divs and logo divs. they are pusing to the very center of the page, i mean starting from the center of the page and not on their proper place.. the problem is only in IE in firefox it works well..

here is my css code for logo and menu

#header .logo{
margin: 15px 5px;
position: absolute;

}
#header .menu{
position: absolute;
margin-top: 1px;
margin-left: 158px;
}

can anyone please advice me how can I fix this problem so that it works with ff and ie both

thanks

Hi
Please see
watermark.sc
It works fine in Firefox but
header alignment is not proper in IE
What might be the problem?
San

Hi guys..

I have a script that spits out a series of divs..
The first 'wrapper' Div is position:relative, and I have placed other divs inside it, positioning them using position: absolute; left: 20px, etc...
It renders perfectly on all my tested browsers, and yet when I make the script repeat, so that each div-set is loaded from the database, they just stack on top of each other on the page, rather than underneath each other..
All I am really doing is stacking divs, I thought that whatever went on in the 'child' divs didnt affect the parents ??
Like so:
Code:

<div style="position: relative;">
     <div style="position: absolute; left: 20px; top: 40px;">
      some content
     </div>
     <div style="position: absolute; left: 150px; top: 40px;">
      other content
     </div>
</div>

Ive tried setting things like display: block;, clear: both, etc, but the sets of divs just 'pile' on top of each other...

Any ideas :/

Many thanks,

Mike.

Hi everybody !
I'm having some trouble with a site i'm currently working on at (s328005659.onlinehome.fr/) the problem i'm experiencing is with facebook "like button" in the bar at the bottom, i haven't found a way to make it align with the other bookmark buttons on its left.
It'd be great if you could help me with this issue...
Thanks in advance,
Joe