17 replies [Last post]
kurson
Offline
newbie
Tempe, AZ
Last seen: 11 years 37 weeks ago
Tempe, AZ
Timezone: GMT-7
Joined: 2008-10-24
Posts: 9
Points: 0

Hi.

PLEASE HELP!

See this: http://www.jadspecialty.com/css_test.html

Please scroll to bottom.

This is a mess.

I am trying to recreate my table as CSS.

What I had was easy:

address 1adress 2

I have 2 street addresses. Each in a div. both centered via the wrapper div.

Each div should be 200px in width as my td tags were.

The multple lines of text sit in the div.

The two divs sit side by side.

What I get is not two divs aligned in the center of my page within the wrap div,

What I get are two divs side by side at the left of my page outside of the wrap div box.

WTF???

Here's my code:

#wrap1{
text-align: center;
vertical-align: middle;
margin: 20px auto 20px;
border: 5px solid red;
font-family: Arial;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;

}

.contact_info{
border: 1px solid green;
/*display: inline;*/
float: left;
width: 200px;
margin: 0 auto;

}

PLEASE HELP!

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 10 years 11 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Probably an easy fix

I noticed your floating them to the left this means they wont be centered unless you add a margin or padding.

If this doesn't work just add:

align="center"

To your div tag this should center it but only if they're not floated to the left.

If this works then you will have to remove your align center and change the margin-left and margin-right to auto.

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 10 years 11 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Also yo have...

Also you have 2 html errors to do with your doctype you might want to sort those out.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

What Doctype? it's worth

What Doctype? it's worth checking these things!

Kurson you need to place a dtd on your pages other wise you will have significant problems, for the low down on doctypes have a hunt around the forum for posts on the subject.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

kurson
Offline
newbie
Tempe, AZ
Last seen: 11 years 37 weeks ago
Tempe, AZ
Timezone: GMT-7
Joined: 2008-10-24
Posts: 9
Points: 0

RE: Doctype

RE:

I know this is off the original topic. But This is what you're referring to, correct?

Note: This is added by Dreamweaver when I first develop a page.

I have no idea what it is. What should I be doing?

Could you please cut and paste a correct example with an explanation for why I should be writing it that way.

Most appreciated.

kurson
Offline
newbie
Tempe, AZ
Last seen: 11 years 37 weeks ago
Tempe, AZ
Timezone: GMT-7
Joined: 2008-10-24
Posts: 9
Points: 0

Original issue

Hi Josh.

I thought all I need to do is add:

margin: 0 auto;
Auto taking care of the sides and supposedly centering the divs within the wrap div. Nadda.

I tried align="center" in the wrap div...didn't work.

kurson
Offline
newbie
Tempe, AZ
Last seen: 11 years 37 weeks ago
Tempe, AZ
Timezone: GMT-7
Joined: 2008-10-24
Posts: 9
Points: 0

Original issue

Hi Josh...

A follow-up

http://www.jadspecialty.com/css_test2.html

This is my new attempt.

This is the CSS:

#wrap1{
/*text-align: center; */
vertical-align: middle;
margin: 20px auto 20px;
border: 5px solid red;
font-family: Arial;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;

}

.contact_info{
border: 1px solid green;
display: inline;
/*float: left;*/
width: 200px;
margin: 0 auto;

}

And the front end:

Office & Demo Center
998 C Old Country Road, Suite 329
Plainview, NY 11803

Office & Demo Center
998 C Old Country Road, Suite 329
Plainview, NY 11803

NOTE: it looks right in IE6.

HOWEVER: In Firefox my width for the address boxes divs are ignored.

In Firefox instead of being width: 200px, the div expands out. Awful

Why?

Thank you in advance everyone for helping me address this issue.

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 10 years 11 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

I'm on my laptop but.....

I will have a play in a second on my computer. Theres a few things I can see going wrong.

And this is just a thought try changing your margins as so:

margin-left: auto;
margin-right: auto;

You could also try the min-width and the min-height comands to see if this forces it to the right height.

As I say I will have a play with it in a second.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

kurson wrote:RE: I know

kurson wrote:

RE:

I know this is off the original topic. But This is what you're referring to, correct?

Note: This is added by Dreamweaver when I first develop a page.

I have no idea what it is. What should I be doing?

Could you please cut and paste a correct example with an explanation for why I should be writing it that way.

Most appreciated.

Actually I'm afraid this is very much on topic; a DTD is fundamental to how your page is displayed, without one you render in quirks mode allowing browsers to place their own interpretation on your properties, this is especially significant in the IE family of browsers. Without this element defined for a page the asking of questions pertaining to correcting issues is to a large extent pointless, browsers must all render in Standards mode providing a level playing field that we know handles certain aspects the same across browsers.

The element you have mentioned is not a DTD that is a character set declaration a whole different thing (please be cautious about letting apps automatically place elements on the page unless you know what they are and the reason for them, google meta character sets.)

I had hoped that you might have noticed the link in my sig line which links to an article on Doctypes or that you had perhaps had a hunt around the forum in areas such as 'How To' section where we keep a few more detailed posts on various subjects to help people.

I would rather not cut and paste an example at this stage as this is the easy way out please do some investigation yourself first, then when and if you have further questions I or any of the other older hands will be glad to explain further.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 10 years 11 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Ok I solved the problem on FF

Ok I solved the problem on FF I haven't checked any other browsers YET

CSS:

.text_white {
	font-family: Arial;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #FFFFFF;
}
.text_white_bold {
	font-family: Arial;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
}
 
.text_white_14 {
	font-family: Arial;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
}
 
.text_white_18 {
	font-family: Arial;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
}
 
.text_header {
	font-family: Arial;
	font-size: 28px;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
}
 
.text_table_header {
	font-family: Arial;
	font-size: 16px;
	font-style: normal;
	font-weight: bold;
	color: #000099;
}
 
 
.text_table_cell1 {
	font-family: Arial;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	background-color: #CCFFFF;
}
.text_table_cell2 {
	font-family: Arial;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	background-color: #FFFFFF;
}
 
.table_cell_FFFFCC {
	font-family: Arial;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	background-color: #FFFFCC;
}
 
.table_cell_E8F1F7 {
	font-family: Arial;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	background-color: #E8F1F7;
}
 
.table_cell_BDE3F2 {
	font-family: Arial;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	background-color: #BDE3F2;
}
 
.text_phone_navy {
	font-family: Arial;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #000099;
}
 
.text_title_navy {
	font-family: Arial;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #000099;
}
 
.text_title_blue {
	font-family: Arial;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #0000FF;
}
 
 
 
 
 
 
 
.wrap {
	margin:0px auto;
	padding:0;
	width:100%;
 
	font-family: Arial;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
}
 
 
 
#wrap1{
	/*text-align: center; */
	vertical-align: middle; 
	margin-left: auto;
        margin-right: auto;
	border: 5px solid red;
	font-family: Arial;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
float: none;
margin: 0 auto;
padding-left: 28%;
 
	}
 
.contact_info{
	border: 1px solid green;
	width: 200px;
	margin: 0 auto;
display: horizontal;
float: left;
	}
 
 
.table_structure1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	background-color: #FFFFFF;
	border-top-width: 5px;
	border-right-width: 5px;
	border-bottom-width: 5px;
	border-left-width: 5px;
	border-top-color: #33CCFF;
	border-right-color: #000066;
	border-bottom-color: #000066;
	border-left-color: #33CCFF;
 
}
 
 
 
.table_structure_E8F1F7 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	background-color: #E8F1F7;
	border-top-width: 5px;
	border-right-width: 5px;
	border-bottom-width: 5px;
	border-left-width: 5px;
	border-top-color: #33CCFF;
	border-right-color: #000066;
	border-bottom-color: #000066;
	border-left-color: #33CCFF;
 
}
 
a.main:link {color: #00FFFF; text-decoration: underline; }
a.main:visited {color: #00FFFF; text-decoration: underline; }
a.main:hover {color: #FFFFCC; text-decoration: underline; }
a.main:active {color: #FFFFCC; text-decoration: underline;} 
 
a.tablelink1:link {color: #0000ff; text-decoration: underline;}
a.tablelink1:visited {color: #0000ff;  text-decoration: underline;}
a.tablelink1:hover {color: #FF0000; text-decoration: underline;}
a.tablelink1:active {color: #FF0000; text-decoration: underline;} 
 
a:link {
	color: #00FFFF;
}
a:visited {
	color: #00FFFF;
}
a:hover {
	color: #FFFFCC;
}
a:active {
	color: #FFFFCC;
}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Well then I would check in

Well then I would check in those other browsers Josh.

We need to halt proceedings here and both parties must address the issue of doc type switching.

@Kurson the reason that your width:200px wouldn't work was that you had told that element to behave as an 'inline' one inline elements do not honour widths.

Centering elements with auto margins is an issue if you have no DTD due to IE rendering in quirks mode where it doesn't understand margin:auto; value.

Attributes such as align are generally frowned upon and deprecated in strict DTD's please don't get in the habit of using them.

Those style rules shown have a few issues to deal with but please sort the DTD out first and then they can be addressed.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 10 years 11 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Patience is a vertue as they say :D

No I'm stuck at my Dads house at the moment so I will do it when I get home.

kurson
Offline
newbie
Tempe, AZ
Last seen: 11 years 37 weeks ago
Tempe, AZ
Timezone: GMT-7
Joined: 2008-10-24
Posts: 9
Points: 0

DOCTYPE

Hu Hugo.

kay, so I weent to the link. I cut and paste in every single doctype.

All of them made my layout worse in IE6.

Without a DOCTYPE.. width: 200px; works in IE6 and is ignored in Firefox.

When I include any of the reccomended DOCTYPES on that page you referred to me, it width: 200px; is ignored in all browsers.

I appreciate your continued replies, but really, please, if you know the anwser to this mystery I'd appreciate it if would not be coy and jut cut and paste in the answer for me to test.

Thank you.

kurson
Offline
newbie
Tempe, AZ
Last seen: 11 years 37 weeks ago
Tempe, AZ
Timezone: GMT-7
Joined: 2008-10-24
Posts: 9
Points: 0

DOCTYPE

Hu Hugo.

kay, so I weent to the link. I cut and paste in every single doctype.

All of them made my layout worse in IE6.

Without a DOCTYPE.. width: 200px; works in IE6 and is ignored in Firefox.

When I include any of the reccomended DOCTYPES on that page you referred to me, it width: 200px; is ignored in all browsers.

I appreciate your continued replies, but really, please, if you know the anwser to this mystery I'd appreciate it if would not be coy and jut cut and paste in the answer for me to test.

Thank you.

kurson
Offline
newbie
Tempe, AZ
Last seen: 11 years 37 weeks ago
Tempe, AZ
Timezone: GMT-7
Joined: 2008-10-24
Posts: 9
Points: 0

Nadda

Hi:

margin-left: auto;
margin-right: auto;

This doesn't work when added to #wrap1 for css_test1.html. neither did adding min-height: 150px; for .contact_info.

kurson
Offline
newbie
Tempe, AZ
Last seen: 11 years 37 weeks ago
Tempe, AZ
Timezone: GMT-7
Joined: 2008-10-24
Posts: 9
Points: 0

Follow-up Problems.

Hi.

Thank you for the continued support.

So I cut and paste you code in for:

#wrap1{
/*text-align: center; */
vertical-align: middle;
margin-left: auto;
margin-right: auto;
border: 5px solid red;
font-family: Arial;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
float: none;
margin: 0 auto;
padding-left: 28%;

}

.contact_info{
border: 1px solid green;
width: 200px;
margin: 0 auto;
display: horizontal;
float: left;
}

Two issues.

1. RE: padding-left: 28%;

This seems like a patch more than a resolution.Yes, it's more centered BUT it is off center.

I'm looking to evenly balance out the left and right sides and literally center the object.

The results of padding-left: 28%; is less than desireable at:

http://www.jadspecialty.com/css_test3.html\

2. The Contact Divs are wrapped with the wrap gifs yet are not constrained within the Wrap div, they instead float beyond the bottom margin.

Very frustrating.

All I want to do is forgo using a table with two cells centered.

Isn't there a simple, industry standard way of doing this?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Kurson I keep seeing table

Kurson I keep seeing table layouts, if you wish this resolved please produce a basic tableless layout with a overall wrapper to hold all elements and everything else nested within; all text correctly described within paragraph tags, all tags removed, document complete with all proscribed elements i.e DTD then we can help you with what is a very simple problem and to which the centering aspect has been addressed earlier i believe, but regardless produce a basic semantic layout and we'll then help you with requirements.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

osgood
Offline
Enthusiast
Last seen: 12 years 28 weeks ago
Joined: 2008-09-24
Posts: 61
Points: 0

Hi Kurson, First off you

Hi Kurson,

First off you need to give your file a document type. For beginners I always recommend the below, copy and insert this at the very top of your file, directly before the opening tag.

Why do I recommend this document type, because its is more forgiving than a strict one. Once you have the hang of html then moving to a strict doctype is a less frustrating experience. The loose document type will allow you more flexibility if you are still learning html.

Next amend your 'wrap1' and 'contact_info' css to as below:

#wrap1{
width: 400px;
margin: 0 auto;
font-family: arial, helvetica, verdana, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
}
.contact_info{
float: left;
width: 200px;
color: #fff;
text-align: center;
}

Thats should get you to where you want to go, or at least nearer. YOU MUST include the document type as mentioned above for this to work