Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13

Thread: Padding issues

  1. #1
    Member
    Join Date
    Sep 2008
    Posts
    33
    Member #
    17294
    The padding for my website looks fine in Firefox, however, it looks totally off in IE. the two pictures attached show what it looks like. PLEASE HELP
    Attached Images Attached Images

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,720
    Member #
    5580
    Liked
    718 times
    This is one where we need to see the actual URL.
    It might end-up being different between browsers and we need to see it for real.


  4. #3
    Member
    Join Date
    Aug 2008
    Location
    Chicago IL, USA
    Posts
    83
    Member #
    17217
    agreed, it's really hard to tell without any code available. are you setting widths? Also, are you referring to the navigation piece?
    drew beta - Portfolio, Blog500 - Graduate Studies Blog, WP4P - Blog, Life in Beta - Music Podcast for Nerds

  5. #4
    Member
    Join Date
    Sep 2008
    Posts
    33
    Member #
    17294
    yeup. but i haven't really uploaded it to a server yet.
    if you want though, here's the CSS:

    oh and yeah, i was referring to the navigation peice.

    HTML Code:
    body {
        background: url(bg.jpg) repeat;
        margin: 0;
        padding: 0;
    
    }
    
    #container {
        background: url(content.jpg) repeat-y;
        width: 750px;
    }
    
    #header {
        height: 707px;
        background: url(header.jpg) no-repeat;
    }
    
    #footer {
        background: url(content.jpg) no-repeat;
        height: 63px;
        clear: both;
    }
    
    #content {
        width: 400px;
        float: left;
        margin-top: -220px;
        padding-left: 30px;
        color: #cccccc;
        font-family: tahoma;
        font-size: 11px;
        letter-spacing: 1px;
        font-weight: lighter;
    }
    
    h1 {
        font-family: times new roman;
        font-weight: lighter;
        font-size: 20px;
        font-style: italic;
        color: #808080;
    }
    
    h1:first-letter {
        font-size: 28px;
        font-weight: lighter;
        color: #d53720;
        font-style: italic;
    }
    
    #content a:link, a:visited, a:active {
        text-decoration: underline;
        border-bottom: 2px solid #808080;
        color: #808080;
    }
    
    #content a:hover {
        text-decoration: underline;
        color: #be624d;
        border-bottom: 2px solid #80220d;
    }
    
    #content b {
        color: #f2966f;
    }
    
    #content u {
        color: #989631;
    }
    
    #content i {
        color: #c3bb4e;
    }
        
    
    #navigation {
        width: 275px;
        float: left;
        margin-top: -300px;
        margin-left: 424px;
    }
    
    .menu {
        margin: 0;
        padding: 0;
        width: 238px;
        list-style: none;
        background: #fff;
    }
    .menu li {
        padding: 0;
        margin: 0;
        height: 52px;
        list-style: none;
        background-repeat: no-repeat;
    }
    
    .menu li a, .menu li a:visited {
        display: block;
        text-decoration: none;
        text-indent: -1000px;
        height: 52px;
        background-repeat: no-repeat;
    }
    .her a {background-image: url(her.jpg);}
    .her {background-image: url(herhover.jpg);}
    .content a {background-image: url(contentlink.jpg);}
    .content {background-image: url(contenthover.jpg);}
    .home a {background-image: url(home.jpg);}
    .home {background-image: url(homehover.jpg);}
    .site a {background-image: url(site.jpg);}
    .site {background-image: url(sitehover.jpg);}
    ul.menu li a:hover {background: none;}
    
    .site a {
        text-decoration: none;
        border-bottom: none;
    }

  6. #5
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Without having the time to go through and edit and test your code, I can say that 99% of the time you will need to make a separate stylesheet for IE when it come to ul lists, floating, and you will need to tweak the margins and padding until you get the desired results. It's not that hard and shouldn't take long. Usually it's just a couple of pixels or so with the margins.

  7. #6
    Member
    Join Date
    Aug 2008
    Location
    Chicago IL, USA
    Posts
    83
    Member #
    17217
    #navigation {
    width: 275px;
    float: left;
    margin-top: -300px;
    margin-left: 424px;
    }

    you're setting margin-left to 424px and floating the navigation left.
    IE is going to screw up this margin because it doesn't know how to
    calculate margins on floated elements properly. you could do something
    like this:

    #navigation {
    width: 275px;
    float: left;
    margin-top: -300px;
    margin-left: 424px !important;
    margin-left: 356px; /*margin for IE */
    }

    However, that will only work in IE6. use conditional comments to link
    alternate stylesheets for IE6 and IE7 separately.
    drew beta - Portfolio, Blog500 - Graduate Studies Blog, WP4P - Blog, Life in Beta - Music Podcast for Nerds

  8. #7
    Member
    Join Date
    Sep 2008
    Posts
    33
    Member #
    17294
    hmmm... it's not really working... D:

  9. #8
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,720
    Member #
    5580
    Liked
    718 times
    Jessism ...
    This is where we really need to see it online.
    Sorry, but there's not much else we can do without the actual website and images.


  10. #9
    Member
    Join Date
    Sep 2008
    Posts
    33
    Member #
    17294
    ok i've already uploaded it XD
    http://jessism.freehostia.com
    it's weird because it looks perfect on my computer.. but once online it became really weird... O.o

  11. #10
    WDF Staff Wired's Avatar
    Join Date
    Apr 2003
    Posts
    7,657
    Member #
    1234
    Liked
    138 times
    Here's how it looks in Chrome:

    Attachment 3116

    Some of the text color doesn't contrast well enough with the background, specifically the comment text and the date text.
    Attached Images Attached Images
    The Rules
    Was another WDF member's post helpful? Click the like button below the post.

    Admin at houseofhelp.com


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:06 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com