SitePoint Sponsor

User Tag List

View Poll Results: What browser do you use?

Voters
7. You may not vote on this poll
  • Microsoft IE 6

    0 0%
  • Microsoft IE 7

    0 0%
  • Apple Safari

    1 14.29%
  • Mozilla Firefox

    5 71.43%
  • Other

    1 14.29%
Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast jeffrey.pry's Avatar
    Join Date
    Oct 2006
    Location
    United States of America
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Cross Browser Help

    Hey,

    I am currently in high school and for my graduation project I am making a website for my teacher, I am having some trouble with the cross browser css... please take a look at the the site how it appears in other browsers and the css file attached...

    It works in IE 6 and IE 7...
    But looks different in:
    Firefox
    Camino
    Safari
    (Every browser it looks differently)

    the website is located at http://flanagan.iprojex.com/

    CSS File:
    Code:
    /* Header and Footer
    --------------------------------------------------------------- */
    #header
    {
    position: relative;
    background-position: center;
    display:block;
    width:914px;
    height:67px;
    background-image: url('../images/grad_pro_header.gif');
    background-color: #285088;
    color: white;
    margin: 0 auto;
    }
    .piclink {
    	border: none;
    }
    .style3 {
    	color: #FF9900;
    }
    .style4 {
    	color: #003399;
    	font-size: xx-small;
    }
    .style5 {
    	font-size: xx-small;
    }
    .subtitle
    {
    position: relative;
    font-size: 16pt;
    top: 16px;
    }
    #header .maintitle
    {
    position: relative;
    font-size: 16pt;
    top: 16px;
    }
    #header .subtitle
    {
    font-size: 10pt;
    }
    #footer
    {
    position: relative;
    bottom: -10px;
    padding: 6px;
    background-color: #0099CC;
    color: white;
    width: 914px;
    height: 45px;
    font-size: 8pt;
    clear: both;
    margin: 0 auto;
    }
    #footer .copyright
    {
    font-weight: bold;
    }
    #footer .credits
    {
    font-weight: normal;
    }
    
    /* Containers And Layout Definitions
    --------------------------------------------------------------- */
    
    #container
    {
    position: relative;
    background-color: white;
    top: 3px;
    display: block;
    width: 910px;
    color: black;
    height: 100%;
    margin: 0 auto;
    
    }
    #leftcontainer
    {
    position: relative;
    width: 680px;
    background-color: white;
    color: black;
    text-align: left;
    height: 85%;
    float: left;
    left: -1px;
    padding: 0px;
    }
    #toolbox
    {
    position: relative;
    float: right;
    top: -26px;
    background-color: #ccdbe7;
    right: 0px;
    text-align: center;
    display: block;
    width: 185px;
    padding: 5px;
    color: black;
    height: inherit;
    overflow: visible;
    }
    #toolbox .quote
    {
    position: relative;
    font-size: 8pt;
    background-repeat: no-repeat;
    top: -10px;
    height: 180px;
    padding:8px;
    text-align: center;
    }
    #toolbox .date
    {
    position: relative;
    font-size: 16px;
    top: 10px;
    right: -25px;
    }
    #toolbox .dateday
    {
    position: relative;
    text-align: right;
    right: 34px;
    font-size: 11px;
    
    }
    #toolbox .dateheader
    {
    position: relative;
    height: 50px;
    top: 5px;
    width: 180px;
    color: white;
    background-color: #ccdbe7;
    font-weight: bold;
    background-image: url('../images/todayis.gif');
    font-size: 10pt;
    }
    #navigation
    {
    position: relative;
    width: 708px;
    top: -3px;
    left: 0px;
    text-align: left;
    text-indent: 5px;
    float: left;
    color: black;
    background-color: #ccdbe7;
    font-size: smaller;
    padding: 4px;
    }
    
    
    /* General Content And Body Declarations
    --------------------------------------------------------------- */
    
    body
    {
    	margin: 0px;
    	padding: 0px;
    	background-image: url('../images/sn_bg.gif');
    	background-repeat: repeat-y;
    	background-position: center;
    	background-color: #285088;
    	font-family: Verdana, sans-serif;
    	text-align: center;
    	color: #444444;
    	line-height: 104%;
    }
    #content
    {
    position: relative;
    float:left;
    background-color: white;
    color: #444444;
    margin-left:15px;
    margin-top: 10px;
    }
    #content h2
    {
    font-size: 12pt;
    }
    #content p
    {
    font-size: 10pt;
    text-indent: 20px;
    }
    #content p.noindent
    {
    text-indent: 0px;
    }
    A:link {text-decoration: none; color: navy; font-weight: bold;}
    A:visited {text-decoration: none; color: navy; font-weight: bold;}
    A:active {text-decoration: none; color: navy; font-weight: bold;}
    A:hover {text-decoration: underline; color: #FF9900;}
    blockquote {
    	font-size: 10pt;
    }
    li {
    list-style-type: circle;
    margin-top: 0.35em; 
    font-size: smaller;
    }
    li.important {
    	color: red;
    }
    li.sub {
    	font-size: 90%;
    	}
    li.sub2 {
    	font-size: 100%;
    	}
    li.subr {
    	font-size: 90%;
    	color: red;
    	}
    li.orange {
    	color: #FF9900;
    	font-weight: bold;
    }
    li.green {
    	color: green;
    }
    h2.blue {
    	color: #003399;
    	font-weight: bold;
    }
    
    /* Toolbars And Interactive Tools
    --------------------------------------------------------------- */
    
    #homeworktool
    {
    position: relative;
    background-image: url('../images/Homework_Box_Rev.gif');
    width: inherit;
    float: right;
    height: 216px;
    top:-8px;
    right: -2px;
    padding: 8px;
    background-repeat: no-repeat;
    background-color: #ccdbe7;
    font-size: 10pt;
    color: #70756e;
    }
    #homeworktool .subject
    {
    position: relative;
    left: -2px;
    top: 40px;
    font-size: 10pt;
    width: 170px;
    text-align: left;
    font-weight: bold;
    }
    #homeworktool .assignment
    {
    position: relative;
    font-size: 10pt;
    width: 170px;
    margin-bottom: 5px;
    margin-right:5px;
    text-align: left;
    font-weight: normal;
    }
    Thanks!
    Jeffrey Pry

  2. #2
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are answering your own question. You designed your site using IE but it doesn't work anywhere else in the world. Your next question should be: "So what's wrong with IE?" For that answer, see my link below: "But it works in IE!"

    IE is old, buggy and non-standards compliant. Never, ever design using IE first. Always, always use a modern browser such as, ANYTHING but IE. Then your code will probably work everywhere, maybe even IE, but we can adjust for IEs quirks and bugs.

    And, no , IE7 is not that much better.

    EDIT: Apparently you have some utf-8 encoding issues with your css file. Parts of it are in utf-8 according to the validator.

    Also, your doctype is incorrect. See my link below.

  3. #3
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, welcome to SitePoint! I am currently a high school student too!

    I validated your site and it's good xhtml strict, however, there is a little problem with your css, you should give css validation a go too. Most of your problems seem like little minor positioning issues. My suggestion would be that you should start coding the site with FireFox first (simply because it follows W3C's recommend heck a lot more than IE does), while checking your site out in IE to fix up any immediate disputes between the two browsers. Besides that, it's really hard to give any other suggestions, unless you could provide us with the specific issues that you would like to fix.

    Also, just a side note, I've noticed that in your css codes you've used some repeated properties that can be grouped together. Such as
    HTML Code:
    background-image: url('../images/grad_pro_header.gif');
    background-color: #285088;
    this could simply be presented by using
    HTML Code:
    background: #285088 url('../images/grad_pro_header.gif');
    For more shorthand properties, you could check out www.w3schools.com
    In search of the clouds...and maybe some work

  4. #4
    SitePoint Enthusiast jeffrey.pry's Avatar
    Join Date
    Oct 2006
    Location
    United States of America
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply...

    I have just went ahead and validated my CSS. Now the css validates and the page is valid XHTML Strict.

    Here's an example of how it looks in other browsers. I have circled the problems that I would like to correct... Like I said before, it looks good in IE, I know that doesn't mean much, but ohh well. Let me know what you think a possible solution may be....

    Thanks!

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by drhowarddrfine
    You are answering your own question. You designed your site using IE but it doesn't work anywhere else in the world. Your next question should be: "So what's wrong with IE?" For that answer, see my link below: "But it works in IE!"

    IE is old, buggy and non-standards compliant. Never, ever design using IE first. Always, always use a modern browser such as, ANYTHING but IE. Then your code will probably work everywhere, maybe even IE, but we can adjust for IEs quirks and bugs.

    And, no , IE7 is not that much better.

    EDIT: Apparently you have some utf-8 encoding issues with your css file. Parts of it are in utf-8 according to the validator.

    Also, your doctype is incorrect. See my link below.
    I wouldn't say anything, doc. Amaya comes to mind as a browser to avoid testing in at all costs.

    Jeff, I'll take a look at your code when I get home.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Additional info: There are four major rendering engines you need to worry about: Trident (Internet Explorer/Windows), Gecko (Beonex, Camino, DocZilla, Epiphany, FireFox, Galeon, K-Meleon, Netscape 6+), Presto (Opera), and KHTML/WebKit (Konqueror, OmniWeb, Safari).

    If you can test your site in Internet Explorer 6+, FireFox, Opera 9, Konqueror 3x and Safari 2, you will have covered all of your bases (save for one - that's what Lynx is for). I personally test in Internet Explorer 6+, FireFox 1.0.3, and Opera 9 simultaneously. Usually if I can get my designs to work in those browsers with no hacks (save for the occasional IE 6 fix), Konqueror and Safari will fall in line.

  7. #7
    SitePoint Enthusiast jeffrey.pry's Avatar
    Join Date
    Oct 2006
    Location
    United States of America
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help... I'll look forward to your reply...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •