Help - Search - Members - Calendar
Full Version: My background is cutting off some things
HTMLHelp Forums > Web Authoring > General Web Design
ahhitsyla
For some reason my background is cutting off part of my blog and the things on the side. This is what it's supposed to look like http://cbimg6.com/layouts/08/02/24/25766b.jpg. Please help me fix the layout code. Thanks! Sorry if I put this in the wrong place btw >< I'm not familiar with this site.

<p><a href="http://www.createblog.com/xanga-layouts/" title="Grab Xanga Layouts and Xanga Codes"><img src="http://www.createblog.com/images/link1.gif" border="0" alt="Xanga Layouts" style="position:absolute;top:0px;left:0px;width:10px;height:27px;" /></a></p><script language=javascript>
document.title="Map to my heart"
</script>





<style type="text/css">
a.navigate:link,a.navigate:active,a.navigate:visited{
padding:4px;
color:000000;
font-size:10px;
text-indent:0px;
font-weight:normal;
letter-spacing:0px;
font-family:century gothic;
text-decoration:none;
text-transform:uppercase;
line-height:8px;
display:block;
background-color: fcf8ce;
text-align: center;
border: 0px solid;


}
a.navigate:hover{
padding:4px;
color:b98296;
font-size:9px;
text-align: center;
text-indent:0px;
font-weight:normal;
letter-spacing:1px;
font-family:century gothic;
text-decoration:none;
text-transform:uppercase;
background-color: transparent;
line-height:8px;

}

.nav
{
width: 452px;
}

.navheader {
background-image: url("http://cbimg6.com/layouts/08/02/24/25766ab.jpg");
background-repeat: none;
background-align: bottom left;
padding:4px;
color:000000;
font-size:13px;
text-align: left;
text-indent:0px;
font-weight:normal;
letter-spacing:1.5px;
font-family:century gothic;
text-decoration:none;
text-transform:uppercase;
background-color: transparent;
line-height:12px;
display:block;
}
.aboutme
{
width: 180px;
background-color: fbf8cf;
font-size: 10px;
font-family: arial;
}


hr, table.footer TD, table.left, td.mainleft,
table.navigation, table.search,
#SearchBar1_pnlYouAreHere {
/* removes the original modules */
display: none;
}

body {
/* edits the scrollbar and background */
scrollbar-arrow-color: #000000;
scrollbar-track-color #ebe5b9;
scrollbar-shadow-color: #ebe5b9;
scrollbar-face-color: #fcf8ce;
scrollbar-highlight-color: #ebe5b9;
scrollbar-darkshadow-color: #ebe5b9;
scrollbar-3dlight-color: #ebe5b9;
background-color: #ebe5b9;
cursor: normal;
background-image: url("");
background-repeat: repeat-y;
background-align: left;
overflow-x: hidden; }

.left, .blogbody, table.footer, .standard,

.leftmodulefontcolor, td, p, .content {
/* edits main text */
font: 10.5px arial;
line-height:normal;
text-transform: none;
color: #000000;
letter-spacing:0px;
text-align:justify;
}

p.nav {
/* edits the menu modules */
width:168px;
background-color:transparent;
font-family: verdana;
text-decoration:none;
font-size: 9px;
line-height:normal;
color: #D2D0D00;
letter-spacing:0px;
text-align: center;
height:1px;
text-transform: none;
}

div.blogheader, .caption {
/* edits the dates */
background-image:
url("http://cbimg6.com/layouts/08/02/24/25766ac.jpg");
width: 440px;
font:normal 18px century gothic;
line-height: 18px;
text-align: left;
color: #b6758a;
letter spacing: 6px;
background-color: transparent;
text-transform: uppercase;
}

a:link{
/* edits all the links */
color: #3c6368;
font: normal 10px century gothic;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0px;

}
a:hover{
color: #b6758a;
font: normal 10px century gothic;
border: 1px solid #000000;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;

}


a:visited{
/* edits all the visited links */
color: #b6758a;
font: normal 10px century gothic;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0px;

}


input, select, textarea, iframe.htmleditor,

.textfield, .button {
/* edits the buttons, dropdowns, etc. */
border: 1px solid #000000;
font: 11px arial;
text-transform: uppercase;
background-color: white;
color: #000000;
letter-spacing:0px;
}

table.blogbody {
/* edits the other the place where the blog is
*/
background-color: #fbf8cf;
width:440px;

}

hr {
/* horizontal divider */
border: 0px;
width:0px;
}

p {
/* edits all of the paragraphs */
align: left;
}

b, strong {
/* edits all the bolded words */
color: #b98296;
font-weight: bold;
letter-spacing:0px;
font-size: 11px;
font-face: arial;
text-transform: uppercase;
}

I, EM {
/* edits all the italic words */
color: #92d79a;
letter-spacing:1px;
font-size: 11px;
font-face: arial;
text-transform: lowercase;
font-style:none;
background-color:none;
}

u {
/* edits all the underlined words */
color: #7ea399;
letter-spacing:0px;
font-size: 10px;
text-transform: lowercase;
font-style:none;
background-color:none;
}

#pnlEnabled table, #htmleditor, #lblTimeZone,

#pnlEprops, #rblEprops {
/* edits the comments page */
width:400px;
}

table.blogbody tr td {
/* this edits the left margin of blog */
width:0px;
padding-left: 0px;
padding-right: 0px;
}

body, div {
/* edits the whole xanga */
font: 12px arial;
line-height:normal;
color: #000000;
letter-spacing:0px;
text-align:left;
text-transform: none;
}

p.menubottom {
/* edits the menu modules */
width:168px;
border:0px solid none;
text-align:left;
padding-left:0px;
}

p.menubb {
/* edits the menu modules */
width:168px;
text-align:justify;
padding-left:0px;
}

</style>



<div align=left><div style="position:relative; margin-left:-10px; margin-top: -100px; z-index:-1; ">
<img src="http://cbimg6.com/layouts/08/02/24/25766aa.jpg" border="0"

USEMAP="#background"><MAP NAME="background">
<AREA SHAPE="rect" COORDS="0,432,63,527" HREF="http://xanga.com/parfume" TARGET="_blank"

ALT="designer">



</div>


<div style="position:static; overflow:auto; background-color: transparent; margin-top: -500px; margin-left:99px; BORDER=0px solid; border-color: dedede; width:452px; font-family: Verdana, Arial,

Helvetica, sans-serif; font-size: 11px;">



<table class="nav">
<tr>

<td><a href="http://xanga.com" class="navigate"> X A N G A </a></td>

<td><a href="http://www.xanga.com/private/subscribeto.aspx?user=ohthreethirteen07" class="navigate"> A D D M

E</a></td>

<td><a href="http://xanga.com/claf" class="navigate"> E D I T </a></td>

<td><a href="http://xanga.com/private/profilebasic.aspx" class="navigate">P R O F I L E</a></td></tr>

<tr><td><a href="http://xanga.com/private/feedback.aspx" class="navigate">F E E D B A C K</a></td>

<td><a href="http://xanga.com/Private/Subs.aspx" class="navigate">F R I E N D S</a></td>

<td>
<a
href="http://xanga.com/logout.aspx"class="navigate">L O G O U T</a></td>

<td style="width:146;"><a href="http://xanga.com/parfume"class="navigate">D E S I G N E

R</a></td></tr>




</table></div>




<div style="position:static; overflow:auto; background-color: transparent; margin-top: -150px;
margin-left:570px; BORDER=0px solid; border-color: dedede; width:180px; font-family: Verdana, Arial,

Helvetica, sans-serif; font-size: 12px;">

<table class="aboutme">
<tr>
<td class="navheader">About Me</td></tr>
<tr>
<td>
<b>Name:</b> Y-La Nguyen & Stang Ruangrukrien
<br>

<b>Age:</b> 18
<br>

<b>Gender:</b> F/M
<br>

<b>Status:</b> <i>Taken</i>
<br>

<b>Hobbies:</b> Each other tongue.gif
<br>

<b>Music:</b> Everything
<br>

<b>TV shows:</b> House
<br>

<b>IM:</b> <a href="aim:goim?screenname=ahhitsyla&message=hello :]">ahhitsyla</a> & <a href="aim:goim?screenname=AppLeAzNs&message=hey sexy ;]">AppLeAzNs</a>
<br>
</td>
</tr>
</table>

<br>
<table class="aboutme">
<tr><td class="navheader">Miscellanous</td></tr>
<tr><td>
So ..we made this blog 'cause we're cool. I have no idea what to put on here or what we're gonna do with this since Stang just told me to make one. We're the only ones who are gonna see this so ..Stang, I love you, you sexy beast :] You better like this.

</td><tr></table>
<br>


<table class="aboutme">
<tr><td class="navheader">Music</td></tr>
<tr><td>
<center><img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/ bT*xJmx*PTEyNzQwNTIzOTE*MzEmcHQ9MTI3NDA1MjQwMjU*NyZwPTE4MDMxJmQ9Jmc9MSZvPTQ4NTVi
MGRiY2M*NjQzNGI4MmFj/MGRmNjM3MmNjMDM5.gif" /><center><p style="visibility:visible;"><embed src="http://assets.myflashfetish.com/swf/mp3/mixpod.swf?myid=54400845&path=2010/05/16" quality="high" wmode="transparent" flashvars="mycolor=111111&mycolor2=99CCCC&mycolor3=FFFFFF&autoplay=true&rand=1&f=4&vol=100&pat=0&grad=false" width="170" height="20" name="myflashfetish" salign="TL" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" border="0" style="visibility:visible;width:170px;height:200px;" /><br><a href="http://www.mixpod.com/playlist/54400845" target="_blank"></center>
</td></tr></table>
<br>
</div>



<div style="overflow: AUTO; width: 449px; margin-top: -400px; margin-left: 101px; background-color:
#fbf8cf; position: static; ">
pandy
Please post the URL to a sample page. We can't visualize the images.
ahhitsyla
QUOTE(pandy @ May 17 2010, 07:07 AM) *

Please post the URL to a sample page. We can't visualize the images.

Oh sorry! Here's my page: http://ohthreethirteen07.xanga.com/
pandy
Can you explain further? What I see looks very close to the image you posted. I checked with gecko and IE6.
ahhitsyla
Umm if you compare my xanga to the picture I posted in the original post, you might notice that on the side where it says "about me" and "miscellaneous," the box is cut off about two-thirds, according to where the background picture stops. I circled the areas where it's being cut off by the background and the black line is where it's cutting off: http://i41.tinypic.com/2dt6is1.jpg The background of those areas should be a #ebe5b9 (a pale yellow?) with a picture header(?). I apologize if I'm not making any sense.
Darin McGrew
You have no doctype declaration. That puts browsers in quirks mode:
http://hsivonen.iki.fi/doctype/

The online tools report markup and CSS errors:
http://htmlhelp.com/cgi-bin/validate.cgi?u...mp;warnings=yes
http://jigsaw.w3.org/css-validator/validat...g=1&lang=en
pandy
QUOTE(ahhitsyla @ May 18 2010, 01:49 AM) *

Umm if you compare my xanga to the picture I posted in the original post, you might notice that on the side where it says "about me" and "miscellaneous," the box is cut off about two-thirds, according to where the background picture stops. I circled the areas where it's being cut off by the background and the black line is where it's cutting off: http://i41.tinypic.com/2dt6is1.jpg The background of those areas should be a #ebe5b9 (a pale yellow?) with a picture header(?). I apologize if I'm not making any sense.


I don't see that. What browser(s) display(s) it that way?
ahhitsyla
I'm currently using firefox. Hmm interesting. I just now looked at it using Internet Explorer and it actually looks fine. I'm not sure what the problem is then.

Oh! Thanks Darin McGrew. That explains a lot especially since the layout was probably made for the old internet explorer. Umm ..I'm not sure how to fix layout code though. I'm horrible with html.
pandy
There are too many errors. Many color values lack a hash sign in front of them. There is no 'background-repeat: none' (it's 'background-repeat: no-repeat') and so on and so on...

But the main problem is that your background isn't a background. It's an inline image with an image map and you have tried to position it behind the rest of the page.

HTML
<div align=left><div style="position:static; margin-left:-10px; margin-top: -100px; z-index:-1; ">
<img src="http://cbimg6.com/layouts/08/02/24/25766aa.jpg" border="0"

USEMAP="#background"><MAP NAME="background">


Only positioned elements can have a z-index and 'position: static' is the default, i.e. not positioned. If you change that to 'position: relative' it will fix your problem in FF, but I don't know if it will work in other browsers. Gecko treats a negative value for z-index different than other browsers, or it used to. Haven't kept up with that. There are just too many errors for me to want to go deeper.

God knows what makes it work in some browsers as it is.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.