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 12 of 12
  1. #1
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Margin/Padding Issue Once Uploaded

    When viewed offline it's fine and the whole page fits in the 800 width, but when I've uploaded the site, I'm getting a horizontal scrollbar and I'm not sure why ! I've changed the width of the main div to 700px instead of 750px and still no luck.. any ideas?

    http://www.downfallband.co.uk/

    EDIT: It's fine in FF, only in IE that I'm getting the problem...
    Last edited by mark87; 05-21-2005 at 04:12 PM.

  • #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    maybe your window isnt fully maximised? Only if I shrink my window can I get the horizontal scrollbar. IE6 on XP
    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #3
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm that's really strange, nope the window is definately maxmized, IE6 SP2 on XP @ 800*600, - and it's fine when it's not uploaded!

    EDIT: Hmm solved by putting "body { width:90% }" in... probs not the best solution but it works!
    Last edited by mark87; 05-21-2005 at 07:13 PM.

  • #4
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is this the quirks mode?
    CATdude about IE6: "All your box-model are belong to us"

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Mark the problem is that IE has about 5px margins by default, you need to make them 0, use this for your body css.
    Code:
    body { margin:5px 0 5px 0; padding:0; background-color: #000; }
    You should be able to get rid of the css you had for the body, you know the css that you made the width 90% or w/e.

  • #6
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, didn't realise IE did that, I tried that though and I still got a horizontal scrollbar at 800x600... I'll try more stuff though, I realise setting the body width is def not the best solution - esp when it is being viewed in larger resolutions.

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Then you didn't do it right because I used your css and html and added what I said to add, and it worked fine.
    Code:
    html { 
    scrollbar-face-color:#594C39;
    scrollbar-highlight-color:#000;
    scrollbar-3dlight-color:#000;
    scrollbar-darkshadow-color:#000;
    scrollbar-shadow-color:#000;
    scrollbar-arrow-color:#000;
    scrollbar-track-color:#000;
    }
    
    body {
    background-color: #000; 
    margin:10px 0 10px 0;
    padding:0;
    }
    
    #main {
    margin:0 auto;
    width: 750px;
    background-color: #000;
    border: 2px solid #594C39;
    background-repeat: no-repeat;
    background: url(singlebg.jpg);
    }
    
    #center {
    height: 60%;
    }
    
    #ifrm {
    height: 100%;
    width: 550px;
    margin: 0 auto;
    margin-bottom: 40px;
    border: 2px solid #594C39;
    }
    
    #footer {
    height: 30px;
    width: 100%;
    background-color: #594C39;
    clear: both;
    }
    
    #media1 {
    width: 65%;
    float: left;
    overflow: auto;
    height: 310px;
    }
    
    #media2 {
    width: 30%;
    float: right;
    height: 310px;
    border-left: 1px solid #594C39;
    padding-left: 20px;
    overflow: auto;
    }
    
    #news {
    padding: 5px;
    }
    
    
    ul.plain {
    font-family: "Century Gothic", sans-serif;
    font-size: x-small;
    letter-spacing: 1px;
    color: #FFF;
    list-style: none;
    padding-bottom: 2px;
    }
    
    ol.discography {
    font-family: "Century Gothic", sans-serif;
    font-size: x-small;
    letter-spacing: 1px;
    color: #FFF;
    }
    
    p.text {
    text-transform: lowercase;
    font-family: "Century Gothic", sans-serif;
    font-size: x-small;
    letter-spacing: 1px;
    color: #FFF;
    padding-bottom: 2px;
    padding-left: 15px;
    }
    
    span.stext {
    text-transform: lowercase;
    font-family: "Century Gothic", sans-serif;
    font-size: x-small;
    letter-spacing: 1px;
    color: #FFF;
    padding-bottom: 2px;
    padding-left: 15px;
    }
    
    p.date {
    font-family: "Century Gothic", sans-serif;
    font-size: x-small;
    letter-spacing: 1px;
    color: #AAA;
    padding-bottom: 2px;
    }
    
    p.menu {
    clear: both;
    position: relative;
    font-family: "Century Gothic", sans-serif;
    font-size: x-small;
    text-align: center;
    letter-spacing: 1px;
    color: #FFF;
    top: 30px;
    margin-bottom: 50px;
    }
    
    p.footer {
    text-align: center;
    padding-top: 3px;
    color: #000;
    font-family: "Century Gothic", sans-serif;
    font-size: x-small;
    }
    
    h1 { 
    font-family: "Century Gothic", sans-serif;
    color: #AAA;
    letter-spacing: 1px;
    margin-left: 5px;
    font-size: large;
    font-weight: normal;
    }
    
    h2 { 
    font-family: "Century Gothic", sans-serif;
    font-size: x-small;
    font-weight: normal;
    text-align: right;
    color: #FFF;
    font-style: normal;
    padding-right: 10px;
    padding-top: 10px;
    letter-spacing: 3px;
    }
    
    h3 { 
    font-family: "Century Gothic", sans-serif;
    color: #AAA;
    padding: 10px;
    font-size: small;
    font-weight: normal;
    }
    
    h5 {
    height: 1px;
    border-bottom: 1px solid #594C39;
    }
    
    h6 {
    height: 1px;
    border-bottom: 1px solid #594C39;
    clear: both;
    margin-right: 10px;
    }
    
    img.imgs { 
    margin: 5px;
    border: none; 
    }
    
    img.album { 
    float: left; 
    margin-right: 20px; 
    margin-left: 10px;
    margin-bottom: 10px;
    padding: 4px;
    border: 1px solid #594C39;
    }
    
    img.album2 { 
    float: right; 
    margin-left: 20px; 
    margin-right: 10px;
    padding: 4px;
    border: 1px solid #594C39;
    }
    
    img.bbuttons {
    margin-right: 2px;
    margin-left: 2px;
    opacity: 0.40;
    -moz-opacity: 0.40;
    filter: alpha(opacity=40);
    padding-top: 6px;
    }
    
    a.menu:link    { padding:2px; color:#FFFFFF; text-decoration:none; }
    a.menu:visited { padding:2px; color:#FFFFFF; text-decoration:none; }
    a.menu:hover   { padding:2px; color:#000; text-decoration:none; background-color: #594C39 }
    a.menu:active  { padding:2px; color:#FFFFFF; text-decoration:none; }
    
    
    a.link:link    { color:#CCC; text-decoration:none; border-bottom: 1px dashed #CCC }
    a.link:visited { color:#CCC; text-decoration:none; border-bottom: 1px dashed #CCC }
    a.link:hover   { color:#594C39; text-decoration:none; border-bottom: 1px solid #594C39 }
    a.link:active  { color:#CCC; text-decoration:none; border-bottom: 1px dashed #CCC }
    
    a.imglink:link    { text-decoration:none; padding: 2px; border: 1px solid #000 }
    a.imglink:visited { text-decoration:none; padding: 2px; border: 1px solid #000 }
    a.imglink:hover   { text-decoration:none; padding: 2px; border: 1px solid #594C39 }
    a.imglink:active  { text-decoration:none; padding: 2px; border: 1px solid #000 }
    use that for your CSS.
    Also in your iframe if you want it to be transparent in Internet Explorer you need to add allowtransparency="true" to the iframe, or you can just take out that embedded css you have in your iframe and it will stay black and it will look like as it does in FF. Once again take this out of your head in your main page.
    Code:
    <style type="text/css">
    body, html { width: 95% }
    </style>
    Last edited by _Aerospace_Eng_; 05-23-2005 at 04:37 PM.

  • #8
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Think you may have viewed the site as I was re-uploading some stuff, because the iframe is transparent now. :P

    I'll rephrase before - yes what you said *did* work when it was offline - but when uploaded the horizontal scrollbar appears... why the difference, I have no idea!

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Seems fine, when its uploaded. Maybe you are seeing a cached page in your system? You might have to clear your cache. If possible can you leave your page with the changes that I have told you to make so I can see if I get the scrollbars as well? Like I said it would be a caching problem.
    Last edited by _Aerospace_Eng_; 05-23-2005 at 06:42 PM.

  • #10
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't think it's a caching issue - I've CTRL+Refreshed before and still the same - I'll make the changes again in a while. If it's not a caching issue then I have no idea what it is... the host isn't placing anything else in the pages.

    And yes, I see no scrollbars with your test page.

    EDIT - geh yup uploaded a test at (LINK REMOVED, UPLOADED TO THE PROPER URL NOW) and it's fine... must have been a caching issue... Thanks for the help.

    EDIT Again - Argh *Stressed* , once uploaded to the proper place, I'm seeing the scrollbars again, worked it out - is due to the way the url is cloaked by using a frameset and their page they use to do it isn't making the margins 0px... and I can't change that... don't really want to turn of url cloaking though!
    Last edited by mark87; 05-23-2005 at 06:15 PM.

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    well that kinda sucks, looks like you have to change the body with, maybe it can be something more than 95%. If you do that, put margin:auto; in the body css,but not the html css
    Code:
    body {
    width:95%;
    margin:auto;
    }
    Any way of contacting your host?

  • #12
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The domain name is with a different company than the hosting, guess I'll just have to not cloak the url !

    I'll try the 'margin:auto;' method in a while.


  •  

    Posting Permissions

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