CSS - Div Alignment Problem In Different Browsers

Hi

I wonder if anyone can help. I've been trying to tidy up the layout of my home page, and I'm pretty confused by the way that the header is behaving in both Firefox and Safari - the browsers I use on my Mac.

I've got screen shots which show it looking good on most Windows browsers, but for some reason, all the text is bunched up at the top when I look at it on the Mac.

This is a link to the page:

http://www.independentliving.co.uk/index1.shtml

And this is the relevant bit of the stylesheet:

div#header {
background-image: url("header.jpg");
background-repeat: no-repeat;
color: #FFFFFF;
margin-left:auto;
margin-right:auto;
margin-top: 0;
width:780px;
height: 200px;
margin-bottom: 10px;
font-size: 0.8em;

}

#header .welcome {
text-align: left;
width: 700px;
padding-top: 90px;
padding-left: 20px;
padding-right: 20px;
color: #003366;
font-size: 0.8em;
}

p.welcome {
text-align: left;
width: 700px;
padding-top: 90px;
padding-left: 20px;
padding-right: 20px;
color: #003366;
font-size: 0.8em;
}

#header .slogan {
text-align: left;
width: 700px;
padding-left: 20px;
padding-right: 20px;
color: #003366;
font-size: 0.8em;
}

p.slogan {
text-align: left;
width: 700px
padding-left: 20px;
padding-right: 20px;
color: #003366;
}

If anyone has any ideas, I'd be really grateful. I know Mac is a minority platform, but as it's the one I use, I'm pretty keen to get it working!

Thanks

Frances

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!

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?

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

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>

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

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; }

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>

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

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.

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

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