SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member drifta's Avatar
    Join Date
    Apr 2006
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    background image not consistent FF and IE

    Hello,

    I am trying to customise a wordpress template, however when trying to add a header image I am getting problems with it jumping around between IE and FireFox..

    in IE it looks ok, but in firefox its pushed down for some reason.. any help would be GREATLY appreciated, you helpers are totally awesome!

    The style i have put it in is "container" which i have bolded below

    my webpage is here:

    http://www.itcallout.com.au/articles/

    and here is my stylesheet:

    Code:
    /*
    Theme Name: Brajeshwar v7.0
    Theme URI: http://www.brajeshwar.com/
    Version: 1
    Author: Brajeshwar
    Author URI: http://www.brajeshwar.com/
    Description: A minimal, simple, light 3 column design with latest article highlight.
    
    Special thanks to 
    Christian Nelson of http://www.nelson.to/
    for the monetary help in porting "Brajeshwar v7.0" Movable Type Style to Wordpress Theme
    */
    
    /* 
    global settings
    ----------------------------------------------------------- */
    
    * { 
    margin: 0; 
    padding: 0; 
    }
    body { 
    background: #fff; 
    font: 100%/1.5em "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
    color: #666;
    text-align: center; 
    }
    
    /* links */
    
    a:link {
    text-decoration: none;
    color: #069;
    }
    a:visited {
    text-decoration: none;
    color: #069;
    }
    a:hover {
    background: #e5e5e5;
    border-bottom: 1px dotted #333;
    color: #036;
    }
    a:active {
    text-decoration: none;
    color: #069;
    } 
    a img {
    background: none;
    border: 0 none;
    margin-bottom: -10px; 
    vertical-align: sub;
    }
    
    /* hn */
    
    h1, h2, h3, h4, h5, h6 { 
    font-weight: normal; 
    color: #515151;
    margin: 10px 0;
    }
    h1 { 
    margin: 0;
    font-size: 4em; 
    font-weight: bold; 
    text-transform: uppercase;
    }
    h1 a { 
    color: #515151;
    }
    h1 a:hover { 
    background: none;
    border-bottom: none;
    color: #069;
    }
    h2 { 
    font-size: 1.1em; 
    }
    h3 { 
    font-size: 1em; 
    }
    h4 { 
    font-size: 0.9em; 
    }
    h5 { 
    font-size: 0.8em; 
    }
    h6 { 
    font-size: 0.7em; 
    }
    
    /* misc */
    
    abbr, 
    acronym {
    font-style: normal; 
    border-bottom: 1px dotted #666; 
    cursor: help;
    }
    code, pre { 
    font-family: Monaco, "Courier New", Courier, monotype, serif; 
    }
    pre {
    border: 1px solid #888;
    background: #fafafa;
    padding: 4px;
    overflow: auto;
    width: 95%;
    max-height: 500px;
    margin: 10px auto;
    font: 1em/1.5em "courier new", courier, monospace;
    }
    
    /* defination lists */
    
    dl { 
    margin: 20px 0; 
    }
    dt {
    font-size: 0.9em;
    text-transform: uppercase;
    }
    dd {
    margin: 0 0 20px;
    }
    
    /* list styles */
    
    ul {
    margin: 10px 0; 
    } 
    ul li {
    height: 1%;
    list-style-type: none;
    margin: 0 0 5px;
    padding: 0 0 0 15px;
    background: url(i/bullet.gif) no-repeat 0 6px;
    line-height: 18px;
    }
    ol {
    margin: 10px 0 10px 25px; 
    }
    ol li {
    margin: 0 0 5px 0; 
    }
    
    /* blockquote */
    
    blockquote {
    margin: 10px 0;
    padding: 5px 10px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    font: 0.9em/1.5em georgia, "lucida sans unicode", "trebuchet ms", sans-serif;
    color: #666;
    }
    
    /* image styles */
    
    img.left {
    float: left;
    margin: 0 15px 10px 0;
    }
    img.right {
    float: right;
    margin: 0 0 10px 15px;
    }
    img.centered {
    display: block;
    margin: 10px auto;
    }
    img.border {
    padding: 2px;
    border: 1px solid #999;
    }
    
    /* layout
    ------------------------------------------------------ */
    
    #container {
    margin: 0 auto; 
    width: 760px;
    font-size: 0.75em;
    text-align: left;
    background: white url(http://www.itcallout.com.au/images/header.gif) no-repeat  left top ;
    background-position: top left;
    }
    
    #wrap {
    height: 1%;
    margin: 4px 0;
    background: url(i/wrap.gif) repeat-y;
    }
    #col-left {
    float: left;
    width: 150px;
    padding: 20px 0;
    text-align: right;
    }
    #col-main {
    float: left;
    width: 400px;
    }
    #col-right {
    float: left;
    width: 210px;
    padding: 20px 0;
    }
    
    /* header
    ------------------------------------------------------ */
    
    #header {
    margin: 35px 0 0 20px;
    border-bottom: 1px solid #e5e5e5;
    }
    body#home #header {
    border-bottom: none;
    }
    
    /* main navigation */
    
    #nav {
    margin: 35px 0;
    padding: 0 0 20px 135px;
    }
    #nav li {
    float: left;
    display: block;
    list-style-type: none;
    margin: 0; 
    padding: 0;
    background-image: none;
    }
    #nav a:link, #nav a:visited {
    float: left;
    display: block;
    padding: 0 10px 8px 10px;
    font-size: 1.2em;
    font-weight: bold;
    color: #515151;
    text-transform: uppercase;
    text-decoration: none;
    }
    #nav li.current_page_item, #nav a:hover {
    background: url(i/tab.gif) no-repeat 50% 100%;
    border-bottom: none;
    color: #069;
    }
    #nav li.current_page_item a, #nav li.current_page_item a:visited {
    color: #069;
    }
    
    /* latest post
    ------------------------------------------------------ */
    
    #latest {
    height: 1%;
    border-bottom: 1px solid #eee;
    }
    body#home #latest {
    border-top: 1px solid #e1e1e1;
    }
    #latest-inner {
    height: 1%;
    margin: 5px 0;
    background: url(i/latest.gif) repeat-y;
    }
    
    /* post */
    
    #post-latest {
    float: left;
    width: 550px;
    font-size: 1.1em;
    color: #333;
    }
    #post-latest h3 {
    margin: 0;
    padding: 20px 0 0 20px;
    }
    #post-latest h2 {
    margin: 20px 20px 0;
    font: bold 1.1em Verdana, Helvetica, Arial, sans-serif;
    }
    #post-latest p.post-meta {
    margin: 0 20px;
    font-size: 0.8em;
    color: #666;
    }
    #post-latest .post-body {
    padding: 10px 20px 20px;
    }
    
    /* about */
    
    #sec-about {
    float: left;
    width: 210px;
    padding: 0 0 20px;
    background: #F3F8F8;
    font-size: 0.9em;
    line-height: 1.6em;
    }
    #sec-about p {
    margin: 20px;
    }
    #sec-about h3 {
    margin: 0;
    padding: 20px 0 0 20px;
    font-size: 1.1em;
    }
    
    /* main column
    ------------------------------------------------------ */
    
    /* post */
    
    #col-main h3.sec-title {
    padding: 20px 15px 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    }
    div.post {
    margin: 0 15px 20px;
    padding: 0 0 40px;
    background: url(i/3os.gif) no-repeat 50% 100%;
    }
    div.post-body {
    
    }
    h2.post-title {
    margin: 0;
    font-weight: bold;
    }
    p.post-meta {
    margin: 0;
    font-size: 0.85em;
    color: #999;
    text-transform: uppercase;
    }
    body#archives p.post-meta-ind {
    margin: 10px 0 0;
    font-size: 0.85em;
    }
    span.meta-name {
    display: block;
    float: left;
    width: 120px;
    font-size: 1.1em;
    text-transform: uppercase;
    }
    span.meta-detail {
    font-size: 1.1em;
    text-transform: none;
    }
    p.more {
    margin: 20px 0 0;
    padding: 0 0 0 20px;
    background: url(i/dashed.gif) no-repeat 0 50%;
    line-height: 18px;
    }
    #col-main a:hover {
    border-bottom: 1px dotted #666;
    background: #e0e0e0;
    text-color: #333;
    }
    
    /* prev-next navigation */
    
    div.content-navigate {
    padding: 10px 15px 20px;
    }
    span.alignright {
    float: right;
    }
    span.alignleft {
    float: left;
    }
    
    /* comments */
    
    #comments {
    padding: 0 15px 40px;
    background: url(i/3os.gif) no-repeat 50% 100%;
    }
    #comments h3 {
    margin: 0;
    padding: 10px 0 0;
    font-weight: bold;
    }
    div.comment {
    height: 1%;
    padding: 10px 0;
    background: url(i/dot.gif) no-repeat 50% 100%;
    }
    div.comment p {
    margin: 5px 0;
    }
    .comment-meta {
    font-size: 0.95em;
    text-transform: uppercase;
    }
    #comments label {
    display: block;
    font-size: 0.9em;
    }
    #comment-author, 
    #comment-email,
    #comment-url,
    #comment-text, 
    #s {
    width: 90%;
    margin: 0 0 10px;
    padding: 2px;
    border: 1px solid #ccc;
    font: 0.95em "lucida sans unicode", "lucida grande", verdana, "trebuchet ms", sans-serif;
    }
    #searchsubmit, 
    #comment-submit {
    padding: 2px;
    background: #eee;
    border: 3px double #666;
    border-top-color: #ccc;
    border-left-color: #ccc;
    font-size: 85%;
    color: #333;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.1em;
    }
    
    /* search page
    ------------------------------------------------------ */
    
    ul#search-results-list {
    margin: 25px 0 0;
    }
    ul#search-results-list li {
    margin: 0 0 40px;
    padding: 0 0 0 20px;
    background: url(i/dashed.gif) no-repeat 0 6px;
    line-height: 18px;
    }
    ul#search-results-list h2 {
    margin: 0;
    padding: 0;
    }
    
    /* side columns common
    ------------------------------------------------------ */
    
    #col-right a:hover, #col-left a:hover {
    background: transparent;
    border-bottom: none;
    }
    #col-right li, #col-left li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #e5e5e5;
    background-image: none;
    line-height: 20px;
    }
    #col-right ul ul, #col-left ul ul {
    margin: 0;
    }
    #col-right li li, #col-left li li {
    border-top: 1px solid #e5e5e5;
    }
    h3.sec-title {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    }
    div.left-sec, 
    div.right-sec {
    margin: 0 15px 40px;
    }
    
    /* footer
    ------------------------------------------------------ */
    
    #footer {
    margin: 4px 0 0;
    padding: 20px 0 20px 165px;
    border-top: 1px solid #ccc;
    font-size: 0.8em;
    }
    
    /* misc
    ------------------------------------------------------ */
    
    .clear {
    clear: both;
    height: 0;
    line-height: 0;
    }
    .clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }
    .clearfix {display: inline-table;}
    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */
    Last edited by drifta; Sep 24, 2006 at 19:24.

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd think you'd be better having your site logo in the HTML as it's content rather than decoration.

  3. #3
    Non-Member
    Join Date
    Sep 2006
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The right side's is wider in a few pixels... this is causing the logo to be put down because if you'd add their width it would not equal to the total width of the page. if you're going to use floats in a design you should add the paddings that you implement when it comes to calculating the width of an object...

  4. #4
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Please please please wrap big chunks of code in [CODE][/CODE] blocks so we don't have to scroll down for weeks to get to the second post. Thanks.
    Olly Hodgson
    thinkdrastic.net

  5. #5
    SitePoint Member drifta's Avatar
    Join Date
    Apr 2006
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nationalvisa
    The right side's is wider in a few pixels... this is causing the logo to be put down because if you'd add their width it would not equal to the total width of the page. if you're going to use floats in a design you should add the paddings that you implement when it comes to calculating the width of an object...
    Sorry, I'm an absolute newbie when it comes to CSS and wordpress.. I made the overall page size wider to give it more space but it still has this massive gap in between the top of the browser and the top of the page in firefox but its fine in IE.

    When you talk about adding paddings into floats I cant grasp what you are trying to say. I'm a novice, all im trying to do is take a wordpress template and customise it a little bit. I didnt design the thing myself.

    im more of a graphics guy than a web programmer guy so i appreciate your help here!

    the link again http://www.itcallout.com.au/articles/

    Cheers,

    Paul Stone

    www.itcallout.com.au

  6. #6
    SitePoint Member drifta's Avatar
    Join Date
    Apr 2006
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen
    I'd think you'd be better having your site logo in the HTML as it's content rather than decoration.

    I'm a bit of a newbie to wordpress and css, so I dont really know how to implement what you are saying here through wordpress. i want the image to be ontop of all pages.

  7. #7
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The main culprit is collapsing margins, but there's a couple of other things that needed modifying too:

    Code:
     #header {
     padding-top: 1px;
     border-bottom: 1px solid #e5e5e5;
     }
     
     #nav {
     margin: 35px 0 20px 175px;
     overflow: hidden;
     }
    But what I meant about content v decoration is that I think the image should go in the HTML as <img src="...."> rather than as a background image.

  8. #8
    SitePoint Member drifta's Avatar
    Join Date
    Apr 2006
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Thanks for your help,

    1) I'm still getting a huge difference between firefox and IE when it comes to the top white space on the page ( or lack thereof in IE).

    2) whats the best way to position those links at the top of the page?

    3) I dont really understand the collapsing margins thing - like i said im a newbie to CSS and I didnt create this template, im just trying to put a header image in which is proving to be really difficult for me

    4) I dont know how to put the background image into the header through wordpress other than through a stylesheet.

    Quote Originally Posted by Tyssen
    The main culprit is collapsing margins, but there's a couple of other things that needed modifying too:

    Code:
     #header {
     padding-top: 1px;
     border-bottom: 1px solid #e5e5e5;
     }
     
     #nav {
     margin: 35px 0 20px 175px;
     overflow: hidden;
     }
    But what I meant about content v decoration is that I think the image should go in the HTML as <img src="...."> rather than as a background image.

  9. #9
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The changes I suggested weren't in addition to what you already have, they were a replacement for. Change your CSS to exactly what I posted.

  10. #10
    SitePoint Member drifta's Avatar
    Join Date
    Apr 2006
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen
    The changes I suggested weren't in addition to what you already have, they were a replacement for. Change your CSS to exactly what I posted.

    Awesome man! thanks heaps for your help, YOU ARE A CHAMP!!! =)

    One more thing..

    If I want to move the rest of the page down, away from the header (from the latest block down) whats the best way to do that?


    There are a number of things I could try, but it probably wouldnt be best practice.

  11. #11
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Give #latest a margin-top.

  12. #12
    SitePoint Member drifta's Avatar
    Join Date
    Apr 2006
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that, I've done that but now there is a descrepancy between IE and FF in terms of height there is about 10pixels different!?

  13. #13
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove this from your header: <div class="clear"></div>

  14. #14
    SitePoint Member drifta's Avatar
    Join Date
    Apr 2006
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen
    Remove this from your header: <div class="clear"></div>
    Thanks for your help Tyssen,

    I have contacted you via email regarding some paid sub-contracting work.


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
  •