...

View Full Version : Margin/Padding Issue Once Uploaded



mark87
05-21-2005, 04:09 PM
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...

bazz
05-21-2005, 06:42 PM
maybe your window isnt fully maximised? Only if I shrink my window can I get the horizontal scrollbar. IE6 on XP
Bazz

mark87
05-21-2005, 06:45 PM
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! :confused:

EDIT: Hmm solved by putting "body { width:90% }" in... probs not the best solution but it works! :cool:

mrruben5
05-22-2005, 11:20 PM
Is this the quirks mode?

_Aerospace_Eng_
05-23-2005, 06:08 AM
Mark the problem is that IE has about 5px margins by default, you need to make them 0, use this for your body css.

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.

mark87
05-23-2005, 12:53 PM
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.

_Aerospace_Eng_
05-23-2005, 04:21 PM
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.

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.

<style type="text/css">
body, html { width: 95% }
</style>

mark87
05-23-2005, 05:12 PM
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!

_Aerospace_Eng_
05-23-2005, 05:32 PM
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.

mark87
05-23-2005, 06:04 PM
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... :rolleyes: 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! :mad:

_Aerospace_Eng_
05-23-2005, 06:24 PM
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

body {
width:95%;
margin:auto;
}
Any way of contacting your host?

mark87
05-23-2005, 06:29 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum