Forum Moderators: not2easy
Oddly, it looks bad in IE6! But then Firefox is a piece of work.
I know the "rule" about formatting for FF first, but for such a small percentage of my users, what a PITA.
Anyway... I'm committed to getting this right. I hear about being "standards" compliant, but the "standards" are so hard to follow, it seems they should be designed with default values -- i.e. don't specify a value then the standard requires it to be X. Then all the browsers would and should be compliant instead of making their own guesses.
I ran my CSS through the validator and cleaned up a very few typos. So that's cool now. But now I'm trying to take my template step by step through FF and get it to work there and then do some research on these "hacks" I'll have to do to whip IE back into line.
ARGH!
So here goes.
First problem. CSS is being read, but fonts are not being applied.
I have a single font specification in the CSS, in the body tag. My understanding is that that should inherit:
font-family: "Trebuchet, Calibri, Arial, Verdana, Tahoma, helvetica, sans-serif";FF insists on showing Times New Roman. That is the default in FF settings but I have it set to allow pages to control fonts.
body
{
font-family: "Trebuchet, Calibri, Arial, Verdana, Tahoma, helvetica, sans-serif";
font-weight: normal;
font-size: 11px;
color: #ffffff;
background-color: #000000;
margin: 0px 0px 0px 0px;
text-align:center;
padding:0;
line-height:1.4;
}inside this is a maincontainer div fixed to 1024px wide... but it's not centering. The text-align made this happen in IE.
FYI, I based all my code of a basic CSS vs. Tables core specification and then added from there.
The main container should be centered 1024px. Inside this are:
1. a header (logo and ad) at 100% width
2. a menubar at 100% width
3. a column container. Design is two columns: nav and content.
4. a footer container at 100% width.
Hard to describe what it's doing since I cannot post a link... but anymore details I can provide, let me know. I'm watching this thread intently right now :)
div.header
{
clear:both;
height:100px;
width:100%;
margin:0;
background-image:url("/pv/img/background/mastheadnew.jpg");
vertical-align:middle;
text-align:right;
}div.gaphorizontal
{
height:20px;
background-color:#000000;
}
div.menubar
{
height: 22px;
max-height:22px;
width: 100%;
text-align:left;
vertical-align:top;
padding-top:3px;
line-height:normal;
background-color:#000000;
border-bottom: 1px solid #ffffff; /*Add border strip to bottom of menu*/
}
div.maincontainer
{
clear:both;
width: 1024px;
height: 100%;
min-height:100%;
max-height:100%;
background-color:#202020;
font-weight: normal;
color: #ffffff;
}
div.headercontainer
{
clear:both;
width:100%;
border: solid 1px #000000;
}
div.columncontainer
{
clear:both;
width:100%;
min-height:100%;
max-height:100%;
height:100%;
border: solid 1px #ff00ff;
}
div.footercontainer
{
width:100%;
height:22px;
background-color: #ffcc00;
background-image: url("/pv/img/background/bar-gold.jpg");
border: solid 1px #00ff00;
}
div.leftcolumn
{
float:left;
width:160px;
height:100%;
min-height:100%;
max-height:100%;
/*background-color:#ffffff;
background-image:url("/pv/img/background/gradient-middarkgrey-black.jpg");
background-repeat:repeat-x;
background-position: left top;*/
text-align:center;
font-weight:bold;
color:#ffffff;
border-right: solid 1px #000000;
}
div.leftcolumn a
{
color:#ffcc00;
}
div.centercolumn
{
width:auto;
float:none;
height:100%;
min-height:100%;
max-height:100%;
text-align:left;
padding: 10px 10px 10px 10px;
border-left: solid 1px #000000;
}
div.centercolumn p
{
line-height:1.4
}
div.rightcolumn
{
float:right;
height:100%;
width:100px;
background:#FF8539;
}
div.bottombar
{
width:100%;
height:26px;
color: #000000;
font-weight:bold;
text-align:center;
vertical-align:bottom;
background-image: url("/pv/img/background/bottombar.jpg");
background-repeat:no-repeat;
padding-top:5px;
}
div.bottombar p
{
margin:0;
padding:5px 10px
}
If you start with the standard stuff, and FF, you end up with something that gets going rather smoothly, and with little head banging as to why it's not doing what you're trying to get done. Easy ...
Next we recommend to add conditional comments so that your layout in FF stays the same while you fix it for the different versions of IE. All in all this requires you know the bugs and oddities in the different versions of IE (IE6 is really a nightmare). This step is hard, but conditional comments allow you to make sure you don't need hacks, nor risk of any of the additions to interfere with what you have already working in FF or the other version of IE.
If you want to check Safari, Opera and the like: do it before you touch IE, as those need to go into the standard one and you really want to keep the fixes for IE last (esp. so for IE6).
Trying to do IE7 first is significantly more difficult in my experience and results in total for much more work to get it all working.
font-family: "Trebuchet, Calibri, Arial, Verdana, Tahoma, helvetica, sans-serif";
I doubt you have a font with that name nor any of your visitors.
quotes are needed around individual fonts that contain spaces.
Try something like (made it shorter to make it easier to spot):
font-family:verdana,arial,sans-serif;font-family:"Gill Sans",verdana,arial,sans-serif;Centering:
The standard way to center is not to center the text on the surrounding entity (that's actually the "hack" you need to get IE to do the right thing), but to set auto margins:
margin: 0 auto 0 auto;
I hear about being "standards" compliant, but the "standards" are so hard to follow, it seems they should be designed with default values -- i.e. don't specify a value then the standard requires it to be X. Then all the browsers would and should be compliant instead of making their own guesses.
It's better to design with FF because FF makes fewer 'guesses' that deviate from the standards. So when your markup does something funky, you can compare that with the W3C standard to figure out what is going on.
font-family: "Trebuchet, Calibri, Arial, Verdana, Tahoma, helvetica, sans-serif"; FF insists on showing Times New Roman. That is the default in FF settings but I have it set to allow pages to control fonts.
My guess here is that FF doesn't know what to do and is showing the default font. Just put a normal font value in there and it should work.
So there really was not an option to do this first for Firefox and then move to others, I am converting an existing app.
Seriously thanks. I was using Firefox vs. IE6 until IE7 came out (my work is still IE based).
