CSS - Alignment Problem Both In Ie And Firefox

I'm using this layout, modified quite a bit for visual design, but the "mechanics" are the same as the author's demo for the most part:

http://matthewjamestaylor.com/blog/...rail-pixels.htm

The top navigation is a horazontal list aligned to the left.

What I would *like* to do is have all of the nav "tabs" aligned to the left as they are now, except the last one, aligned to the right. Sort of like this:

TTTT_____T

Any ideas?

Hi! I'm new to this forum, but I'm hoping you can help me! Included is my CSS coding. I am having a little bit of trouble getting #siteAds to have the correct width after adding borders to the three #mainContent. When I tweak the pixel amount it either runs onto the next line or just doesn't line up properly with #siteNav and #footer. I've tried replacing the pixel counts with percentages; doesn't work. I'm relatively new at CSS so any help would be appreciated. Thanks in advance!

Code:

<style type="text/css">
body
{
	background-image:url('bg-1.jpg');
	background-repeat:no-repeat;
	background-position:top;
	background-color:#FFF;
	background-attachment:fixed;
}
* {
	margin: 0px;
	padding: 0px;
}
#wrapper {
	height: 1300px;
	width: 1000px;
	margin:0px auto;
	text-align:left;
}
#branding {
	height: 228px;
	width: 1000px;
}
#branding #logo {
	height: 228px;
	width: 1000px;
	position: relative;
	background-image:url('hooplogolarge.jpg');
	background-repeat:no-repeat;
	background-position:top;
	background-color:#000000;
}
#siteNav {
	height: 38px;
	width: 1000px;
	color: #FFF;
	background-color: #000;
	line-height: 38px;
	clear: both;
	font-family: Arial, Helvetica, sans-serif;
	float: none;
	text-align: center;
	word-spacing: normal;
	font-size: 24px;
}
#mainContentWrapper {
	float: none;
	width: 1000px;
	background-color: #FFF;
}
#mainContentWrapper #news {
	float: left;
	width: 265px;
	height: 953px;
	background-color:#FFF;
	border: thin dashed #000;
	padding: 10px;
}
#mainContentWrapper #mainContent {
	float: left;
	width: 488px;
	height: 953px;
	background-color:#FFF;
	padding: 10px;
	border: thin dashed #000;
}
#mainContentWrapper #siteAds {
	float: right;
	width: 175px;
	height: 953px;
	background-color:#FFF;
	padding: 10px;
	border: thin dashed #000;
}
#footer {
	width: 1000px;
	font-size: 9px;
	color: #CCC;
	text-align: center;
	line-height: 35px;
	background-color: #000;
	clear: both;
}
</style>

OK, I somehow became a css n00b overnight (I've made 4-5 websites heavily using css.)

Basically, here is what I want:
Code:

style :: [ ] [ ]

And here is what I'm getting:
Code:

style ::
[ ] [ ]

For some reason the boxes won't align with the text. No matter what I do! Here is the link to see: http://www.sential.co.uk/test.php

Here is the html:
Code:

<div id="style_selector">
    <p>style ::&nbsp;
        <a href="#" onclick="setActiveStyleSheet('SE001');
        return false;" title="change to style: Underwater - Water Planet"><div id="style_se001">Blue</div></a>
        <a href="#" onclick="setActiveStyleSheet('SE002');
        return false;" title="change to style: Orkidea - Beautiful"><div id="style_se002">Orange</div></a>
    </p>
</div>

And here is the css:
Code:

#style_selector{
	position: absolute;
	top: 70px;
	left: 160px;
	height: 25px;
	width: 100%;
	text-align: left;
}
#style_se001{
	float: left;
	height: 15px;
	width: 15px;
	text-indent: 10000px;
	overflow: hidden;
	background-color: #6187E1;
	display: block;
	border: 1px solid #ffffff;
}
#style_se001:hover{
	border: 1px solid #6187E1;
}
#style_se002{
	float: left;
	height: 15px;
	width: 15px;
	text-indent: 10000px;
	overflow: hidden;
	background-color: #FCB029;
	display: block;
	border: 1px solid #ffffff;
}
#style_se002:hover{
	border: 1px solid #FCB029;
}

I'm sure it's something simple, yet I've tried switching positioning attributes and everything, and the code for aligning these boxes is IDENTICAL to the menu buttons at the top. I'm totally miffed

-Luke

My page looks great, except in IE 6 where the green header shifts left instead of staying centered.

I don't know why!!!

It can be viewed at: http://www.descom.org/testing/home.html

Roll over "About" and then click on any of its sublinks.

The CSS sheets a http://www.descom.org/testing/allianceStyles.css
and: http://www.descom.org/testing/ie6.css

THANK YOU!

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.

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 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.

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

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

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

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

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, 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>