3 replies [Last post]
vollerworld
Offline
newbie
Northeast Ohio, USA
Last seen: 12 years 42 weeks ago
Northeast Ohio, USA
Joined: 2007-11-26
Posts: 2
Points: 0

Greetings all... I'm a rookie, but I can take it on the chin. Still a bit of a hack, but trying to learn from those who know. Have searched through the forums and Googled my question but have not found answers. This site seemed a good place to start, as I've truly been a hack site builder, but now am finding enlightenment by way of standards.

Basic problem is I've created a div that wraps all other divs (is this an old table habit dying hard?)... Anyway, my basic thought was to center the id="wrap" div in order to have a centered site. It renders as I want it to in IE 7, but in FF 2.0.0.9. In IE 7, everything is centered and at 80% width. In FF, everything is LEFT aligned, still at 80% width.

Best regards, I hope to be a regular learner and contributor here.

My doctype is HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

My HTML is this:







Simple Red Leaf Skin
-->









[CURRENTDATE]





My CSS is this:

/*
================================
Layout Styles
================================
*/
body
{
/* set default font size for skin (Titles etc. will then use a percentage to specify their sizes) */
margin: 0;
padding: 0;
line-height: 1.1;
font: small Verdana, Geneva, Arial, Helvetica, sans-serif;
background-color: #F7F7F7;
text-align:center;
/* background-image: url(red_leaf_fd_sm.jpg);
background-repeat: no-repeat;
background-position: 100% 4%;
background-attachment: fixed;*/
}

#wrap
{
width:80%;
text-align:center;
float:none;
/* min-width: 500px;
max-width: 1400px;*/
padding: 0px 5px 0px 5px;
}

.tagline
{
/* float: left;
width: 65%;
padding-left: 25px;*/
}

#loginlinks
{
float: right;
width: 30%;
text-align: right;
}

#logo
{
clear: both;
padding: 10px 0px 15px 75px; /*margin: 0 0 15px 0; */
}
#menu
{
clear:both;
padding: 0px 0px 0px 0px;
height:27px;
background-image:url(images/ash-bgmenu-bg.jpg);
}
#logo h1
{
font: bold 300% Verdana, Tahoma, Helvetica, Arial, sans-serif;
color: #C00;
letter-spacing: 0.1em; /* adjusts how close the title is to the top tag line */
margin-top: 0px;
}
#mainbody
{
width: 100%;
}
#content
{
clear:both;
float:none;
width: 100%; /* padding: 0 0 0 10; */
}
/*#sidebar
{
float: left;
width: 25.4%;
}*/
#footercontent
{
clear: both;
padding-top: 10px;
}
#date
{
padding-top: 10px;
color: #C00;
}
#footer
{
color: #C00;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 28 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

quirks mode'll get you every time

You must have a complete DTD, else IE in quirks mode does not support margin: auto, and mis-applies text-align to block elements.

That's why IE appears to work, but really doesn't, and why Firefox isn't centered—you haven't properly centered anything.

Remove {text-align: center;} from body and #wrap.

To #wrap, add {margin: 0 auto;}

Read the stickies on the necessity of a proper DTD.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

vollerworld
Offline
newbie
Northeast Ohio, USA
Last seen: 12 years 42 weeks ago
Northeast Ohio, USA
Joined: 2007-11-26
Posts: 2
Points: 0

now i have a complete DTD

excellent!

thank you for the help... i've been reading on CSS for months and have just tonight learned of the importance of the doc type. i'm so glad i stumbled upon this site! thanks a ton.

:thumbsup:

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 44 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

vollerworld wrote:i've been

vollerworld wrote:
i've been reading on CSS for months and have just tonight learned of the importance of the doc type. i'm so glad i stumbled upon this site!

The next thing you should learn is, always use a STRICT doctype for new pages. Transitional is only for transitioning old sites with our of date tags and elements. New pages should ALWAYS use a STRICT doctype and, as a bonus, coding proper semantic html becomes much easier because there is less to remember.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.