PDA

View Full Version : Firefox vs IE CSS Coding



splitmed
07-09-2009, 09:26 AM
I just got Firefox yesterday and I realize that my website http://www.split-media.net doesn't work properly with it

I edited it while I had Internet Explorer and had added css coding to the pages and now the header doesn't show up and neither does a few other things

Here's the full list of my current css coding

body {
background-color:#000000;
font-family:Arial;
font-size:11px;
margin-top:0px;
margin-bottom:0px;
color:#FFFFFF;
}
a:link{
color:#FFFFFF;
}
a:hover {
color:#FFFFFF;
}
.filmbg{
background-image:url(/images/film.gif);
width:176px;
height:auto
}
.header {
background-image:url(/media/images/banner_2007-08.jpg);
width:750px;
height:148px;
}
.text_content{
background-color:#292118;
color:#FFFFFF;
padding:8px;
}
.images {
background-image:url(/media/images/hv20camra.gif);
background-position:right;
background-repeat:no-repeat;
height:190px;
background-color:#292118;
color:#FFFFFF;
padding:0px;
}
.category{
color:#FFCC00;
font-weight:bold;
}
.padding {
padding:8px;
}
.images-site {
background-image:url(/media/images/about-site-pic.gif);
background-position:right;
background-repeat:no-repeat;
height:190px;
background-color:#292118;
color:#FFFFFF;
padding:0px;
}

==============================================

Changing the header at this moment is very important, I can wait to fix everything else later

Plus I guess you can't use <br></br> on Firefox, or use img borders either

I don't know what's going on...


Also check out the index http://www.split-media.net and view the source because some parts don't show up like they do in Internet Explorer

I need help please and thank you

-Daniel_BT

Falcon1986
07-09-2009, 01:46 PM
Open source browsers such as Firefox tend to adhere to web coding standards, so if your page code is not standards-compliant, you will immediately notice where things need to be corrected.

The same may or may not be the case depending on which version of Internet Explorer you are using. IE8 has been developed to be more standards-compliant, but still has the ability to be "more compatible". While this sounds good, it is just a mode of IE that reverts to its "standards-ignorant" rendering of web pages that aren't coded properly.

Currently, your web page's header image loads fine for me in both Firefox 3.5 and IE8 (under Windows XP), but I noticed that there were a lot of markup validation errors being reported by the W3C Validator (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.split-media.net%2F&charset=%28detect+automatically%29&doctype=Inline&group=0). Your website's CSS checks out fine (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.split-media.net%2Fcustom.css&profile=css21&usermedium=all&warning=1&lang=en), but I would remove the leading '/' from path names, which are not necessary.

Additionally, you can remove the leading '/'...

<link href="/custom.css" rel="stylesheet" type="text/css" />
...in your page header since your custom.css file is located parallel to the page's HTML file.

Firefox does recognize the line break tag. However, because your page's doctype is XHTML, you need to use <br /> (http://www.w3schools.com/TAGS/tag_br.asp) instead. Notice the space between 'br' and the '/'.

You can apply the image border attribute (http://www.w3schools.com/TAGS/tag_img.asp) and probably get away with it using the XHTML Transitional DTD (note that it has been deprecated in HTML 4.01 and unsupported in the XHTML Strict DTD), but letting CSS give the image borders is preferred.

splitmed
07-14-2009, 10:31 AM
Thanks :) I eventually figured everything out, The Banner was just loading very slowly...maybe because it's a jpeg image

Yeah I'll try and take the leading "/" out of the coding

Thanks again :)