Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thinking I have to add something to CSS

    Hello all,
    I am currently redoing my fan site and first I would like to say FF everything works and looks perfect and does what I wanted the site to do on the new layout. IE Ehhh not so much. Some reason IE likes to be a pain to me, and some reason the pages like to go at the end of the whole page to start when I would like them to start at the top. I have really no idea how to do this, if anyone could help it would be much appreciated.

    FF: Pic:Firefox Example(GOOD)
    IE: Pic: Internet Explorer Example 6.0(BAD)

    Code:
    body {
    padding : 0;
    margin : 0;
    font : 12px Arial, sans-serif;
    line-height : 1.5em;
    background : #393939;
    color : #fff;
    }
    a {
    color : #d0eb55;
    background : inherit;
    text-decoration : none;
    }
    a:hover {
    color : #d0eb55;
    background : inherit;
    text-decoration : underline;
    }
    p {
    margin : 5px 0;
    }
    h1 {
    font : bold 1.8em Arial, Sans-Serif;
    padding : 8px 0 4px 0;
    margin : 0;
    letter-spacing : -1px;
    }
    h2 {
    font : bold 1.6em Arial, Sans-Serif;
    letter-spacing : -1px;
    }
    h3 {
    padding : 4px 0;
    margin : 0;
    }
    ul {
    margin : 0;
    padding : 0;
    list-style : none;
    }
    img {
    border : 0;
    }
    hr {
    height : 1px;
    border-style : none;
    color : #d0d0d0;
    background-color : #c0c0c0;
    margin : 10px 0;
    }
    ol {
    padding : 0;
    margin : 0;
    }
    .code {
    padding : 3px 5px 3px 35px;
    border : 1px solid #666;
    list-style-type : decimal-leading-zero;
    font-family : Courier;
    }
    .code code {
    font-family : Monaco, "Courier New", Tahoma;
    font-size : 1.2em;
    }
    .code li {
    margin : 2px 0;
    padding : 0 5px;
    background : #333;
    }
    .code li.t1 {
    padding-left : 4ex;
    }
    .code li.t2 {
    padding-left : 8ex;
    }
    .code li.t3 {
    padding-left : 12ex;
    }
    .code li.t4 {
    padding-left : 16ex;
    }
    .code li.t5 {
    padding-left : 20ex;
    }
    .code li.t6 {
    padding-left : 24ex;
    }
    .code li.t7 {
    padding-left : 28ex;
    }
    .code li.t8 {
    padding-left : 32ex;
    }
    .content {
    margin : 0 auto;
    width : 1000px;
    }
    #topbar {
    height : 20px;
    background : #212121;
    width : 100%;
    }
    #topbar #icons {
    float : right;
    margin : 10px 0 0;
    padding : 0;
    }
    #topbar #icons img {
    padding-right : 4px;
    border : 0;
    }
    .url {
    padding : 10px 0;
    }
    .url a {
    color : #454545;
    text-decoration : none;
    }
    .url a:hover {
    color : #fff;
    }
    #top {
    padding-top : 0;
    background : #3d3d3b url(images/topbg.gif) repeat-x;
    height : 85px;
    margin-bottom : 25px;
    }
    #top h1 {
    font : bold 2.6em Arial, Sans-Serif;
    padding : 20px 0 0 0;
    margin : 0;
    letter-spacing : 1px;
    color : #d0eb55;
    }
    #top a:hover {
    text-decoration : none;
    }
    #top h2 {
    font : 0.9em Arial, Sans-Serif;
    letter-spacing : 0;
    color : #868686;
    margin : 0;
    padding : 0;
    }
    #menu {
    float : right;
    height : 23px;
    margin-top : 35px;
    }
    #menu a {
    color : #fff;
    background : inherit;
    text-decoration : none;
    padding-left : 10px;
    line-height : 23px;
    font-weight : bold;
    }
    #menu a span {
    padding-right : 10px;
    }
    #menu a, #menu a span {
    display : block;
    float : left;
    }
    #menu a:hover, #menu .current {
    color : #fff;
    background : #a9bc52 url(images/tabl.gif) no-repeat left top;
    padding-left : 10px;
    height : 23px;
    }
    #menu a:hover span, #menu .current span {
    background : url(images/tabr.gif) no-repeat right top;
    padding-right : 10px;
    height : 23px;
    cursor : pointer;
    }
    #menu ul {
    list-style : none;
    padding : 0;
    margin : 0;
    }
    #menu li {
    float : left;
    margin : 0 0 0 5px;
    }
    #main {
    width : 1000px;
    margin : 0;
    padding : 0;
    }
    .right_side {
    float : right;
    width : 202px;
    background : inherit;
    overflow : hidden;
    }
    .right_side .pad {
    padding : 0 0 10px 17px;
    }
    .right_side p {
    padding : 0 0 5px 5px;
    }
    .right_side ul {
    padding : 3px 0 12px 5px;
    }
    .right_side li {
    line-height : 18px;
    background : inherit;
    list-style : square;
    padding-left : 0px;
    margin-left : 17px;
    color : #b4e04a;
    }
    .right_side a {
    background : inherit;
    text-decoration : none;
    }
    .right_side a:hover {
    text-decoration : underline;
    }
    .right_side h3 {
    color : #eee;
    font : bold 1.2em Arial, Sans-Serif;
    background : url(images/rmenuhead.gif) no-repeat top;
    width : 202px;
    height : 30px;
    padding-top : 7px;
    text-indent : 10px;
    }
    #left_side {
    background : inherit;
    margin-bottom : 10px;
    width : 590px;
    display: table-header-group;
    }
    #left_side .intro {
    background : #414141;
    color : #fff;
    }
    #left_side .intro .pad {
    padding : 10px;
    }
    #left_side .intro a {
    color : #b4e04a;
    text-decoration : none;
    }
    #left_side .intro a:hover {
    color : #cdff56;
    text-decoration : underline;
    }
    #left_side .mpart {
    padding : 20px 0 0 0;
    }
    #left_side h2 {
    background : inherit;
    padding : 0;
    margin : 0;
    font : 1.8em verdana, Arial, Sans-Serif;
    }
    #left_side .mpart h3 {
    background : inherit;
    padding : 0;
    margin : 0 0 15px 0;
    font : 0.9em verdana, Arial, Sans-Serif;
    color : #a5a5a5;
    }
    #left_side p {
    color : #e7e7e7;
    padding : 0;
    text-align : justify;
    }
    #left_side img {
    float : left;
    padding : 0 10px 5px 0;
    }
    #left_side blockquote {
    padding-left : 10px;
    border-left : 3px solid #a7cc44;
    margin : 10px 0 10px 25px;
    }
    .date {
    padding : 7px 35px 0 0;
    margin : 10px 0 25px 0;
    text-align : right;
    height : 32px;
    }
    .date a {
    font : bold 1.2em Arial, Sans-Serif;
    color : #a9bc52;
    background : transparent;
    }
    #left_side .rs {
    float : right;
    margin : 0 0 0 10px;
    border : 1px solid #888;
    padding : 5px;
    background : inherit;
    }
    #left_side ul {
    list-style-position : inside;
    margin-left : 2px;
    }
    #left_side ul li {
    list-style-type : square;
    margin-left : 15px;
    }
    #left_side ul ul li {
    list-style : none;
    margin-left : 10px;
    list-style-type : lower-alpha;
    list-style-position : inside;
    }
    #left_side .greybox {
    border : 1px solid #ccc;
    background : #f5f5f5;
    width : 628px;
    padding : 10px;
    }
    #footer {
    clear : both;
    width : 100%;
    margin : 0 0 0 0;
    color : #777;
    border-top : 1px solid #444;
    background : inherit;
    }
    #footer .right {
    float : right;
    }
    #footer a {
    text-decoration : none;
    background : inherit;
    }
    Thanks again.
    Last edited by Hardwire; 12-18-2007 at 08:24 AM.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    * {
    padding : 0;
    margin : 0;

    Have you tried this. Put at the start of your css code, it makes certain that all browsers start off the same.

    Also you do not have a Doctype. This is essential for consistent results. No Doctype puts the browser into Quirks mode, Each browser has its own idea of what that means.

    What version of IE you are using.

    Also we only have your css. What about the other code?

    A link is the most useful.



    Frank
    Last edited by effpeetee; 12-18-2007 at 08:58 AM. Reason: Extra info added.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    How do you know there is no doctype Frank? The HTML wasn't posted? Also, it's IE6 that the problem occurs. From this I would suggest that there is a padding, or margin problem and remember that floating objects and applying margin to the same side will double the margins in IE 6. To solve this use display: inline;

    As Frank says, a link is most useful
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by ahallicks View Post
    How do you know there is no doctype Frank? The HTML wasn't posted? Also, it's IE6 that the problem occurs. From this I would suggest that there is a padding, or margin problem and remember that floating objects and applying margin to the same side will double the margins in IE 6. To solve this use display: inline;

    As Frank says, a link is most useful
    I went in to Forever-Ashley.com

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Quote Originally Posted by effpeetee View Post
    I went in to Forever-Ashley.com

    Frank
    See now that is some smart thinking there Frank!
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #6
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    I think this is the IE5 box model and/or the double-margin float bug.
    Code:
    #left_side {
    background : inherit;
    margin-bottom : 10px;
    width : 590px;
    display: table-header-group;
    }
    Are you sure this is the display type you want?
    Last edited by Apostropartheid; 12-18-2007 at 01:55 PM.


  •  

    Posting Permissions

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