14 replies [Last post]
justinedoon
Offline
newbie
Last seen: 13 years 6 weeks ago
Joined: 2008-10-10
Posts: 7
Points: 0

Hi all

I'm not the most experienced css person ever and am having a real problem with Firefox & Safari (not)rendering my page. I wonder if anyone has a solution to this. This is the page: http://www.lifesci.sussex.ac.uk/pog

Oops, sorry, css is here:

body {
margin: 0;
padding: 0;
text-align: left;
font: 75% Verdana, Arial, Helvetica, sans-serif;
; color: #000000; background-color: #FFFFFF

}

#container {
width: 100%;
\width: 100%;
w\idth: 99%;
border: 0px solid #eee;
margin-left: auto;
margin-right: auto;
padding: 0;
line-height: 1.5em;
}

#banner {
height: 80px;
background: #fff url(images/blue_waves_text2.png) no-repeat;
color: #333;
; border: 1px #466475 solid
; margin-top: 5px; clip: rect( )
}

/* TOP NAVIGATION */
#navlist {
padding: 4px 5px 5px 0;
margin: 0 0 10px;
text-align: left;
letter-spacing: 3px;
color: #FCFCF1;
background: #55788c;
; font-family: Verdana, Arial, Helvetica, sans-serif
; border: solid; border-width: 0px 1px 1px
; border-color: black #466475 #466475
; font-size: 10px
}
#navlist li {
list-style: url(none) none;
margin: 0;
display: inline;
; font-family: Verdana, Arial, Helvetica, sans-serif
}
#navlist li a {
padding: 5px .75em;
margin: 0;
color: #fff;
background: #55788c;
text-decoration: none;
; font-family: Verdana, Arial, Helvetica, sans-serif
}
#navlist li a:link { color: #fff;
background: #55788c;
; font-family: Verdana, Arial, Helvetica, sans-serif
}
#navlist li a:hover {
color: #FFFFFF;
; font-family: Verdana, Arial, Helvetica, sans-serif
; text-decoration: underline
}
#navlist li a#current {
color: #FCFCF1;
; font-family: Verdana, Arial, Helvetica, sans-serif
}

/* LEFT MENU */
#navcontainer { width: 100px; ; text-indent: 20px; clip: rect( ); list-style-image: none; list-style-type: none}

#navcontainer ul
{
margin-left: 0;
font-family: Arial, Helvetica, sans-serif;
; text-indent: 20px; clip: rect( )
; list-style-image: none; list-style-type: none
}

#navcontainer a
{
display: block;
padding: 3px 3px;
width: 120px;
background-color: #55788c;
border-bottom: 1px solid #eee;
; color: #FCFCF1
; clip: rect( )
; list-style-image: none; list-style-type: none
}

#navcontainer a:link
{
color: #FCFCF1;
text-decoration: none;
; list-style-image: none; list-style-type: none
}

#navcontainer a:hover
{
background-color: #D4D8C3;
color: #FF0033;
; list-style-image: none; list-style-type: none
; text-decoration: none
}
#navcontainer li a#current {
; font-family: Verdana, Arial, Helvetica, sans-serif
; background-color: #AAAF8F; color: #38515F
; font-weight: bolder
}

/* MAIN CONTENT */
#content {
padding: 0px 20px 0;
color: #55788c;
background-color: #FFFFFF;
; font-family: Verdana, Arial, Helvetica, sans-serif
; margin: 0px 170px
}

/* ARTICLES */
.intro {
float:left;
width: 28%;
margin: 3px 0 5px;
padding: 5px 5px;
text-align:left;
; font-family: Verdana, Arial, Helvetica, sans-serif
}
.intro2 {
float: left;
width: 28%;
margin: 3px 0 5px 20px;
padding: 5px 5px;
; font-family: Verdana, Arial, Helvetica, sans-serif
}
.intro3 {
float:right;
width: 33%;
margin: 3px 0 5px;
padding: 5px 5px;
; font-family: Verdana, Arial, Helvetica, sans-serif
; clip: rect( )
}

/* LEFT SIDEBAR */
#sidebar-a {
float: left;
width: 150px;
; font-family: Verdana, Arial, Helvetica, sans-serif
\width: 160px;
w\idth: 150px;
margin-right: 5px;
padding: 0 5px 0 5px;
color: #666;
background-color: #fff;
}

/* RIGHT SIDEBAR */
#sidebar-b {
float: right;
width: 150px;
; font-family: Verdana, Arial, Helvetica, sans-serif
\width: 160px;
w\idth: 150px;
margin: 0 0 0 5px;
padding: 0 5px 15px 5px;
color: #333;
background-color:#FFFFFF;
}

/* FOOTER */
#footer {
clear: both;
background-color: #55788c;
color: #95AFBF;
; font-family: Verdana, Arial, Helvetica, sans-serif
; text-align: center
; margin-top: 0; margin-right: 0; margin-bottom: 5px; margin-left: 0; padding-top: 2px; padding-right: 5px; padding-bottom: 2px; padding-left: 5px
; border: #466475; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px
}
#footer a {
text-decoration: none;
color: #E2E3D8;
background-color:#55788c;
; font-family: Verdana, Arial, Helvetica, sans-serif
}
#footer a:hover {
text-decoration: underline;
color: #d4d8c3;
; font-family: Verdana, Arial, Helvetica, sans-serif
}

/* LINKS */
a {
text-decoration: none;
color: #8F956A;
background-color: #fff;
; font-family: Verdana, Arial, Helvetica, sans-serif
}
a:hover {
color: #55788c;
background-color:#fff;
; font-family: Verdana, Arial, Helvetica, sans-serif
; text-decoration: underline
}
a img {
border: 0;
}

/* IMAGE PROPERTIES */
.border {
padding: 1px 1px;
margin: 10px 10px 5px;
border: 1px #A3B9C7 solid;
}
.imgleft {
float: left;
border: 1px #D4D8C3 solid;
margin: 10px 10px 5px 15px;
padding: 5px 5px;
}

/* HEADING PROPERTIES */
h1 {
width: 30%;
font-size: 16px;
letter-spacing: 5px;
color:#55788C;
; font-family: Verdana, Arial, Helvetica, sans-serif
}
h2 {
font-size: 140%;
text-transform: none;
letter-spacing: 3px;
color:#466475;
background: #fff;
; font-family: Verdana, Arial, Helvetica, sans-serif
; font-weight: bolder; font-variant: normal
}
h3 {
padding: 5px;
text-transform: uppercase;
font-size: 110%;
color:#FCFCF1;
background: #55788c;
; font-family: Verdana, Arial, Helvetica, sans-serif
}
h4 {
padding: 5px;
text-transform: uppercase;
font-size: 110%;
color:#425C6C;
background: #D4D8C3;
; font-family: Verdana, Arial, Helvetica, sans-serif
}.imgright { float: right; border: 1px #D4D8C3 solid; margin: 10px 10px 5px 15px; padding: 5px 5px; }
.heading { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold}

Thanks!

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

Transitional doctype. 87

Transitional doctype. :mad:

87 html errors! :curse:

CSS syntax errors! :ohdear:

Designing with IE first... :bigoops:

What did you expect?

Congrats on at least posting a link to your code, though. That was a good move.

Switch to a STRICT doctype.

Get ALL your html and ALL your CSS valid.

Then come on back if the problems persist. They might, but doing the above will at least make it possible to find out. You might find someone on this site willing to wade through all your bad practices as things stand, but it won't be me, and I advise you not to hold your breath while waiting for the saints to arrive.

Ed Seedhouse

Posting Guidelines

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

justinedoon
Offline
newbie
Last seen: 13 years 6 weeks ago
Joined: 2008-10-10
Posts: 7
Points: 0

Right, OK, thanks for that.

Right, OK, thanks for that. I wasn't intending that anyone should spend hours on this. Would you be able/willing to point me in the direction of something that can help me clean up my HTML & CSS in that case..? It's not part of my job this site I'm doing, just something which has been foisted on me really; I didn't know there were so many errors and feel like a bit of an eejit now.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 4 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

HTML validator:

HTML validator: http://validator.w3.org/
CSS validator (validates for CSS2.1 so ignore anything it says about CSS3): http://jigsaw.w3.org/css-validator/

Start with the very first error and work your way down, because errors can cascade (one error can make like fifty million more).

If you don't understand what they are or why your fix isn't working, or what does it really want, post it here. We speak validatorese : )

I'm no expert, but I fake one on teh Internets

justinedoon
Offline
newbie
Last seen: 13 years 6 weeks ago
Joined: 2008-10-10
Posts: 7
Points: 0

Validation

That's great, many thanks for the help, I'm on it!

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

Also take a look for the

Also take a look for the "Html Validator" extension to Firefox which will automate much of the process.

Ed Seedhouse

Posting Guidelines

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

justinedoon
Offline
newbie
Last seen: 13 years 6 weeks ago
Joined: 2008-10-10
Posts: 7
Points: 0

Fab, thanks.

Fab, thanks.

justinedoon
Offline
newbie
Last seen: 13 years 6 weeks ago
Joined: 2008-10-10
Posts: 7
Points: 0

Validators

I've now got no errors and no warnings using the W3 validator, which is great, but my Firefox layout issue remains.

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

You've got to validate your

You've got to validate your CSS as well. CSS syntax errors can create all sorts of amazingly unexpected effects, and you have a number of them.

Your fonts are set in pixels and are so small I can't read them at all well. IE6 users with weakish eyes won't be able to resize them. I would think old folks can get cancer as well.

The normal action folks take when they can't read your site is to leave, and not return,

Ed Seedhouse

Posting Guidelines

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

justinedoon
Offline
newbie
Last seen: 13 years 6 weeks ago
Joined: 2008-10-10
Posts: 7
Points: 0

Yeah I will do, but it's

Yeah I will do, but it's moaning about the 'clip' property, which I will have to educate myself about in full tomorrow if I have time. That's what happens when one uses these free css layouts when one doesn't know what one's doing...

Will also sort out the font, thanks.

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

justinedoon wrote:Will also

justinedoon wrote:

Will also sort out the font, thanks.

If you set the font size on the body element to 100% you will get the best results so far as accessibilty is concerned. Then scale your other fonts in perceentages or ems. Most of the stuff you want people to spend time reading should be at 100% though.

This will mean every visitor will see fonts either at their browser default sizes or if they have changed that, at their preferred font sizes.

I also suggest you stay away from specifying fonts to your users, particularly verdana which is unusually large for it's EM height. I specify font family of "sans-serif" for body text and "Georgia, serif" for headers (H1 through H6). It would probably better just to specify "serif" for the latter but I have an irrational liking for Georgia so I take that chance.

Ed Seedhouse

Posting Guidelines

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

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 4 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

clip: rect(0, 310px,

 
clip: rect(0, 310px, 100px, 0);

The validator might be talking about commas. If I remember correctly (likely I don't lawlz), commas are I think not supposed to be in, but IE only understands the property with the commas... or maybe it's the other way around. I'd have to check-- I've used clip just once, the code above is from a site I did a long time ago, and find it frustrating to work with because the thingie you clip needs to be I think absolutely positioned or something... bleh. I find myself using overflow: hidden more often as I can use it on just about anything with a set height and width and stops stuff from expanding out if containers.

Hey, I used to work in radiology : ) I took a look in FF3 on Ubuntu and I don't see anything wacky, so, could you state now what's still not working in which browsers (and which browsers if any are showing things the way you want? or a jpg of what you want)?

I'll disagree with Ed here and say, I friggin love typography, and those who hate the beauty of fonts are free to ban them from their sights. I find it a Bad Thing that many stately, beautiful (yet still perfectly READABLE) fonts cannot be used via CSS because they are not common enough on people's machines... like Century Gothic, nobody has it because it's not a free font, or Cooper Black which is just so great for large signs, h1's, etc. Gotham has such a nice, clean feel, you'd want to brush your teeth with it and see the little gleam show up when you smile and do the Jesus-style thumbs-up.

Though the issue with Verdana (and Georgia, you should know) is real-- Verdana has a larger x-height at the same "font-size" than other sans-serif fonts (and tacoma a somewhat smaller x-height than the others) and Georgia (lovely font, except sometimes the thing it does with numbers borders the readability line) is also larger in size than Times or Times New Roman at the same CSS "font-size".

What this usually means is the text is a bit larger on machines which can support that typeface and smaller on those who don't (esp Linux/Unix machines usually don't have many or any MS fonts). So, at least make sure your layout is cool with a few text increases and decreases and generally readable-- this is why when I build a page I do a few text enlargements and decreases in Safari and FF2 or FF3 (I turn zoom off) and also sometimes in IE (since it resizes like the retarded cousin of Koko the gorilla) though I just don't worry too much about IE so long as I don't lock size up in px.

There's ONE place where sizing fonts to px is ok: the text needs to match a background image which of course is sized in px. There, your users do not have any choice to enlarge, so make sure it's big enough for an "average" person to see it-- everyone else better just switch to a zooming browser.

I'm no expert, but I fake one on teh Internets

justinedoon
Offline
newbie
Last seen: 13 years 6 weeks ago
Joined: 2008-10-10
Posts: 7
Points: 0

Thanks all for detailed

Thanks all for detailed comments. Re. what's still looking wrong, I've attached a jgp of how Firefox renders the page. The 3rd box, 'News and updates', has decided to go all emo and sulk all the way down at the bottom of the page, and everything seems to have shuffled over to the right. That's the main issue I'm having.

Cheers, J

AttachmentSize
pog_shot.jpg 105.53 KB
Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 40 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Actually I agree with most

Actually I agree with most of what Stomme poes says, even about Georgia. But until monitors get a lot better and the web finds a portable and standard mechanism to share fonts we have to deal with it's limitations in this area.

Ed Seedhouse

Posting Guidelines

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

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 4 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Justin: Start adding ugly

Justin:

Start adding ugly background colours to your boxes. Your sidebar is wider than the content inside it-- you can likely make that smaller, and then your Content box can move further left.

You content box is stopping at the end of the wide strip of oncology text (so, it is holding floats which are not enclosed?), and the image next to it (the little square) is hanging further down... I beleive this is why your three boxes below are shifted to the right-- they are trying to float left but the little hanging image is stopping them. If you could pull it up, then the two darker boxes could go fully to the left, which will make room for that last emo box.

I think, I didn't look to see what those are actually doing. I assumed they're floated left. It does look like float drop-- in but general this is a good time to see what your boxes are actually doing. Add those background colours! You'll really be surprised.

I'm no expert, but I fake one on teh Internets