navigation
a webmaster learning community
     Home    Register     Search      Help      Login    
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

Microsoft MVP

 

Div alignment (HELP ME PLEASE)! (RESOLVED)

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets >> Div alignment (HELP ME PLEASE)! (RESOLVED)
Page: [1]
 
adgriffi

 

Posts: 6
Joined: 2/26/2004
Status: offline

 
Div alignment (HELP ME PLEASE)! (RESOLVED) - 2/26/2004 11:29:54   
Hello all,

I am tring to get my website working with all divs and no tables. I am ALMOST there. I am having this one last problem where a div within another div is not lining up where it is supposed to...

Here is the site:
My Website [www.css.tayloru.edu/~adgriffi/index.php]

The text at the bottom (on the left) is supposed to be up underneath the description on the right (next to the other div in the middle). For some reason it is acting as if there is a "clear" in there, and it is dropping down to the bottom left.

Here is the style sheet:
My Stylesheet [www.css.tayloru.edu/~adgriffi/lib/style.css]

Any help is GREATLY appreciated (I'm banging my head against the wall right now).

< Message edited by adgriffi -- 2/27/2004 16:38:30 >
Giomanach

 

Posts: 6091
Joined: 11/19/2003
From: England
Status: offline

 
RE: Div alignment (HELP ME PLEASE)! - 2/26/2004 11:33:14   
Ripped this out of your style sheet:

#description {
	padding: 2px 5px 15px 5px;
	color: #003350;
	font-size: 78%;
	font-weight: bold;
	text-align: left;
}


You have no position command. Not sure which on to use here though. M, where are you when I need ya???

Dan

_____________________________




(in reply to adgriffi)
adgriffi

 

Posts: 6
Joined: 2/26/2004
Status: offline

 
RE: Div alignment (HELP ME PLEASE)! - 2/26/2004 11:42:12   
Hmmm. Thanks for the quick reply.

Let me know if you figure out which command I need!

(in reply to Giomanach)
Karl

 

Posts: 172
From: Chucktown, SC
Status: offline

 
RE: Div alignment (HELP ME PLEASE)! - 2/26/2004 16:29:24   
Did you get this figured out? The site displays quite differently in various browsers, and I am not sure what you are trying to do.

I see the alternate themes, but there are a few layout problems, unless they are intentional. If you have not figured it out, could you send me a basic sketch of what you are trying to do please? I am sure I can help you sort it out.

Karl

< Message edited by Karl -- 2/26/2004 16:32:06 >


_____________________________

Create, validate, and communicate!
Adonnis Networks

(in reply to adgriffi)
Peppergal

 

Posts: 2204
Joined: 9/20/2002
Status: offline

 
RE: Div alignment (HELP ME PLEASE)! - 2/26/2004 18:28:43   
THis is going to be absolutely no help whatever, because I am currently in a div line up quandry myself...BUT

In Mozilla, it looks REALLY nice. Falls apart in IE though, :-(

I really like the look in Moz though. Frustrating as heck, ain't it? LOL

_____________________________

Northeast PA / Poconos/ Lake Wallenpaupack Real Estate
wallenpaupacklakeproperty.com
Karen's Real Estate Blog

(in reply to adgriffi)
adgriffi

 

Posts: 6
Joined: 2/26/2004
Status: offline

 
RE: Div alignment (HELP ME PLEASE)! - 2/26/2004 23:31:30   
Thanks for the compliment Peppergal.

As a matter of fact, I solved the problem in Mozilla/Firefox, so that is what I want it to look like.

My problem now is that it still doesn't work properly in IE. Apparently, floating DIVs within other DIVs don't properly set the width of the containing DIV. SO, I added
<br style="clear:both"/>
right before closing the containment DIV (called mainClm in my setup).

Also, if you noticed, I have two stylesheets there, and the same problem exists in both. They work great in Mozilla/Firefox, but not IE.

What do I need to do to make it work for IE???

Thanks again for the help!

(in reply to Peppergal)
Giomanach

 

Posts: 6091
Joined: 11/19/2003
From: England
Status: offline

 
RE: Div alignment (HELP ME PLEASE)! - 2/27/2004 4:06:35   
Right, had a serious thinking session, and a swimming session through your coding:), and have come to the following conclusion:

You need to have a look at the positions etc on the lower divs. You don't actually have any position commands at all, and the background has disappeared for the lower ones. So, here's your new stylesheet, it does work in IE, i re-wrote it myself:):

BODY {
	BACKGROUND: #003355; 
	MARGIN: 5px; 
	FONT: 1em Verdana,Sans-Serif
}

A {
	COLOR: white; 
	TEXT-DECORATION: none
}

A:hover {
	COLOR: #003350; 
	TEXT-DECORATION: none
}

#content {
	MARGIN-LEFT: auto; 
	WIDTH: 650px; 
	MARGIN-RIGHT: auto; 
	PADDING-TOP: 5px
}

#header {
	BORDER-TOP: #85a0bc 1px solid; 
	BORDER-RIGHT: #41658a 1px solid; 
	PADDING-RIGHT: 10px; 
	PADDING-LEFT: 10px; 
	BACKGROUND: #6d87a2; 
	PADDING-BOTTOM: 20px; MARGIN: 0px; 
	BORDER-LEFT: #85a0bc 1px solid; 
	PADDING-TOP: 0px; 
	BORDER-BOTTOM: #41658a 5px solid
}

#header .t {
	PADDING-RIGHT: 0px; 
	PADDING-LEFT: 0px; 
	FONT-WEIGHT: bold; 
	FONT-SIZE: 230%; 
	PADDING-BOTTOM: 0px; 
	MARGIN: 0px; 
	COLOR: white; 
	PADDING-TOP: 0px
}

#header .mnu {
	PADDING-RIGHT: 0px; 
	PADDING-LEFT: 0px; 
	FONT-WEIGHT: bold; 
	FONT-SIZE: 80%; 
	FLOAT: right; 
	PADDING-BOTTOM: 0px; 
	MARGIN: 0px; 
	PADDING-TOP: 0px
}

#mainClm {
	PADDING-RIGHT: 5px; 
	PADDING-LEFT: 5px; 
	BACKGROUND: silver; 
	PADDING-BOTTOM: 10px; 
	MARGIN: 0px; 
	BORDER-LEFT: #85a0bc 1px solid; 
	BORDER-TOP-STYLE: none; 
	PADDING-TOP: 2px
}

#description {
	POSITION: relative;
	PADDING-RIGHT: 5px; 
	PADDING-LEFT: 5px; 
	FONT-WEIGHT: bold; 
	FONT-SIZE: 78%; 
	PADDING-BOTTOM: 15px; 
	COLOR: #003350; 
	PADDING-TOP: 2px; 
	TEXT-ALIGN: left
}
#splitl {
	POSITION: relative;
	TOP: 35px;
	BORDER-RIGHT: black 1px solid; 
	PADDING-RIGHT: 7px; 
	PADDING-LEFT: 2px; FONT-SIZE: 85%; 	
	FLOAT: left; 
	PADDING-BOTTOM: 0px; 
	WIDTH: 470px; 
	PADDING-TOP: 0px
}
#splitl .about {
	PADDING-RIGHT: 5px; 
	PADDING-LEFT: 5px; 
	FONT-SIZE: 100%; 
	PADDING-BOTTOM: 15px; 
	MARGIN: 0px; 	
	PADDING-TOP: 0px; 
	TEXT-ALIGN: justify
}
#splitr {
	POSITION: relative;
	TOP: 35px;
	PADDING-LEFT: 7px; 
	FONT-SIZE: 80%; 
	FLOAT: left; 
	WIDTH: 150px; 
	TEXT-ALIGN: justify
}
#splitr IMG {
	PADDING-LEFT: 2px
}
#news .t {
	BORDER-RIGHT: #003350 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #003350 1px solid; 

PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 125%; BACKGROUND: white; PADDING-BOTTOM: 0px; 

BORDER-LEFT: #003350 1px solid; COLOR: black; PADDING-TOP: 2px
}
#news .d {
	BORDER-RIGHT: #003350 1px solid; PADDING-RIGHT: 0px; PADDING-LEFT: 10px; FONT-WEIGHT: 

normal; FONT-SIZE: 70%; BACKGROUND: white; PADDING-BOTTOM: 2px; BORDER-LEFT: #003350 1px solid; 

COLOR: black; PADDING-TOP: 0px; BORDER-BOTTOM: #003350 1px solid
}
#news P {
	PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 100%; PADDING-BOTTOM: 15px; MARGIN: 

0px; PADDING-TOP: 4px; TEXT-ALIGN: justify
}
#footer {
	POSITION: relative;
	CLEAR: left; 
	PADDING-RIGHT: 5px; 
	PADDING-LEFT: 5px; 
	PADDING-BOTTOM: 0px; 
	MARGIN: 0px; 	
	PADDING-TOP: 2px
}
#footer A {
	COLOR: white
}
#footer A:hover {
	COLOR: white; TEXT-DECORATION: underline
}
#flft {
	POSITION: relative;
	TOP: 30px;
	FONT-SIZE: 75%; FLOAT: left; COLOR: white
}
#frght {
	POSITION: relative;
	TOP: 30px;
	FONT-SIZE: 75%; FLOAT: right; COLOR: white
}
#caption {
	FONT-WEIGHT: bold; FONT-SIZE: 85%; COLOR: #003350; PADDING-TOP: 3px; TEXT-ALIGN: justify
}
H1 {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
H2 {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
H3 {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
H4 {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
H5 {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
H6 {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
H1 {
	FONT-WEIGHT: bold; FONT-SIZE: 200%; COLOR: #ffffff; LETTER-SPACING: 0px; TEXT-ALIGN: left
}
H2 {
	FONT-SIZE: 120%; MARGIN: 10px 0px 8px; COLOR: #333333
}
H3 {
	FONT-SIZE: 85%; MARGIN: 15px 0px 8px; WIDTH: 43%; COLOR: #333333; BORDER-BOTTOM: #555555 

1px dotted
}
H4 {
	PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 125%; PADDING-BOTTOM: 15px; COLOR: #003350
}
H5 {
	PADDING-BOTTOM: 3px; TEXT-ALIGN: center
}
H6 {
	FONT-WEIGHT: bold; FONT-SIZE: 150%; COLOR: #003350; TEXT-ALIGN: right
}
P {
	PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 100%; TEXT-ALIGN: justify
}
TH {
	PADDING-RIGHT: 5px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; PADDING-BOTTOM: 15px; 

PADDING-TOP: 0px; TEXT-ALIGN: left
}


All you need to do is make sure it works in Mozilla etc. It works in IE, cos thats what I used to correct it here.

HTH

Dan

<edit>

Can I have my $1 sweety mix now?

</edit>

< Message edited by Giomanach -- 2/27/2004 13:23:08 >


_____________________________




(in reply to adgriffi)
adgriffi

 

Posts: 6
Joined: 2/26/2004
Status: offline

 
RE: Div alignment (HELP ME PLEASE)! - 2/27/2004 9:35:36   
I appreciate all your hard work Giomanach, but it still doesn't seem to be working from this end.

This is what I'm getting:

Desired outcome The is how it looks using my original Style Sheet in Firefox (this is what I want it to look like everywhere!!!)
Original in IE This is how it looks using my original Style Sheet in IE (for some reason the gray background does not encompass the inner DIVs.

Your Rewrite in Firefox The is what you posted - is this how you thought it was supposed to look?
Your Rewrite in IE Again, it does not seem to be working for me.

Thanks again, and let me know your thoughts!

(in reply to Giomanach)
Giomanach

 

Posts: 6091
Joined: 11/19/2003
From: England
Status: offline

 
RE: Div alignment (HELP ME PLEASE)! - 2/27/2004 9:54:31   
I got grey background, to the lower divs etc, let me see I can re-write the whol page for you, and I'll use a new stylesheet as well, be back in 30 mins or so

Dan

_____________________________




(in reply to adgriffi)
Giomanach

 

Posts: 6091
Joined: 11/19/2003
From: England
Status: offline

 
RE: Div alignment (HELP ME PLEASE)! - 2/27/2004 10:12:48   
Problem found, go through your original stylesheet etc, and MAKE SURE you have semi colons a the end of EVERY command with the elements you have used. That solves the problem.

Dan

_____________________________




(in reply to Giomanach)
adgriffi

 

Posts: 6
Joined: 2/26/2004
Status: offline

 
RE: Div alignment (HELP ME PLEASE)! - 2/27/2004 15:55:59   
Dan,

I have gone through and verified that I have semi-colons everywhere, and I already do...

Did you find a specific spot where I'm missing something?

I have had the page verified as HTML 4.01 STRICT.

I have also had the CSS verified.

So, really, I'm still right where I started.

(in reply to Giomanach)
adgriffi

 

Posts: 6
Joined: 2/26/2004
Status: offline

 
RE: Div alignment (HELP ME PLEASE)! - 2/27/2004 16:31:08   
FIXED!!!!

I had to add an empty DIV right before I closed the mainClm DIV.
<div style="clear:both;"></div>

This thanks to:

yayhoorary.com (Another forum)

Thank you all for the time you spent trying to debug my problem!

(in reply to adgriffi)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets >> Div alignment (HELP ME PLEASE)! (RESOLVED)
Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts