I'm trying to format a myspace profile, and I'm a little torn. I'm trying to match it up visually to another site, and while my original problem was trying to centre a table in an absolutely positioned DIV (the DIV being 100% width and height), right now I'm just pulling my hair out trying to get the damn div to actually *be* 100% width. The code I have is as follows:
<div style="position:absolute;left:0px;top:150px;width:100%;z-index:-1;text-align:center;"><center>
<table width="100%" cellpadding=0 style="border-style:solid;border-left-width:0px;border-right-width:0px;border-top-width:2px;border-bottom-width:2px;border-color:0070BE;">
<tr height=630><td background="http://www.meaganklub.com/images/layout/grad_back.gif">
</td></table></center>
</div>
the div itself is very narrow. It's not ridiculously narrow...it has some width (more than the width of the background image...it just kinda seems to be arbitrary) but certainly not 100% of the page. Why is it doing this? Also, I don't know if I'm supposed to post the link, so if you need the visual, just let me know and I"ll supply the link.The link would help.Okay, the link is:
<!-- m --><a class="postlink" href="http://www.myspace.com/15091654">http://www.myspace.com/15091654</a><!-- m -->
and ignore all the horribleness that is font sizes and colors, as right now I'm only concentrating on this one thing. The gradient-blurb is to the left....but only in IE (I'm sorry! I can only get it to show up in internet explorer right now...that'll be the next problem).Is there a good reason for you using tables? Is there some weird rule at myspace.com? That layout is easy to do without the tables.Well, the only way to change the layout is by sticking a <style> section in the "about me" box. And I can, apparently, also stick divs in it, too. But if you have a suggestion, I am very happy to hear it.
Aso to the tables -- I'm not married to tables. I did a lot of stuff, and initially the pure divs were driving me nuts, so I stuck a table in there. But again, I'm not the foremost authority on divs, so I'm sure there's stuff I can do that I haven't yet.I'd Download a copy of Firefox (<!-- m --><a class="postlink" href="http://www.mozilla.org/products/firefox/">http://www.mozilla.org/products/firefox/</a><!-- m -->) and design in that browser first. the gradient background doesn't show up at all in Firefox. The -1 z-index technically puts the DIV behind the entire page, hence Firefox is correct in not showing the gradient at all. I think you'll be happier by placing that gradient background in a DIV that encompasses all of the boxes for which the gradient background should be behind.
Can you post a mockup of what you want? And can you change the markup for the content of the page?No wonder the page doesn't work properly, it's got 237 errors (<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.myspace.com%2F15091654">http://validator.w3.org/check?uri=http% ... 2F15091654</a><!-- m -->) in it. You should sort this out before continuing.Try placing this in your CSS file
body {
margin: 0px;
height: 100%;
width: 100%;
}
That tells the computer what the size of your page is in IE (Firefox does not need it, but it does no upset anything).
WofenNo wonder the page doesn't work properly, it's got 237 errors (<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.myspace.com%2F15091654">http://validator.w3.org/check?uri=http% ... 2F15091654</a><!-- m -->) in it. You should sort this out before continuing.
My thanks for pointing that out, but I cannot fix it as the errors are not mine. The errors mentioned are in the html that myspace has thrown together, and I have absolutely no control over it at all. All I'm allowed to do is throw some CSS into the "About Me" section, and I'm kinda stuck.Although most of them are due to improper coding of ampersands and forgotten type and alt attributes.I'd Download a copy of Firefox (<!-- m --><a class="postlink" href="http://www.mozilla.org/products/firefox/">http://www.mozilla.org/products/firefox/</a><!-- m -->) and design in that browser first. the gradient background doesn't show up at all in Firefox. The -1 z-index technically puts the DIV behind the entire page, hence Firefox is correct in not showing the gradient at all. I think you'll be happier by placing that gradient background in a DIV that encompasses all of the boxes for which the gradient background should be behind.
Can you post a mockup of what you want? And can you change the markup for the content of the page?
Well, the cross-browser compatibility thing was bugging me. I test everything I do on IE, Opera, Netscape 7.0, Mozilla and Firefox, and I did note that obviously I'd have to do tweaking to get it to work on most of them. If I use no z-index or a z-index of 0, the div sits on top of everything, obscuring the page. It could be that the nature of myspace is just buggy and I can't do what I want. Essentially what I want is this:
<!-- m --><a class="postlink" href="http://www.meaganklub.com/images/eg1.jpg">http://www.meaganklub.com/images/eg1.jpg</a><!-- m -->
but I'll be happy with this, as well:
<!-- m --><a class="postlink" href="http://www.meaganklub.com/images/eg2.jpgOh">http://www.meaganklub.com/images/eg2.jpgOh</a><!-- m -->, and if I could change the markup I'd be fine. Again, I'm stuck with a stupid "about me" box that I can put CSS and a div or two in.
<div style="position:absolute;left:0px;top:150px;width:100%;z-index:-1;text-align:center;"><center>
<table width="100%" cellpadding=0 style="border-style:solid;border-left-width:0px;border-right-width:0px;border-top-width:2px;border-bottom-width:2px;border-color:0070BE;">
<tr height=630><td background="http://www.meaganklub.com/images/layout/grad_back.gif">
</td></table></center>
</div>
the div itself is very narrow. It's not ridiculously narrow...it has some width (more than the width of the background image...it just kinda seems to be arbitrary) but certainly not 100% of the page. Why is it doing this? Also, I don't know if I'm supposed to post the link, so if you need the visual, just let me know and I"ll supply the link.The link would help.Okay, the link is:
<!-- m --><a class="postlink" href="http://www.myspace.com/15091654">http://www.myspace.com/15091654</a><!-- m -->
and ignore all the horribleness that is font sizes and colors, as right now I'm only concentrating on this one thing. The gradient-blurb is to the left....but only in IE (I'm sorry! I can only get it to show up in internet explorer right now...that'll be the next problem).Is there a good reason for you using tables? Is there some weird rule at myspace.com? That layout is easy to do without the tables.Well, the only way to change the layout is by sticking a <style> section in the "about me" box. And I can, apparently, also stick divs in it, too. But if you have a suggestion, I am very happy to hear it.
Aso to the tables -- I'm not married to tables. I did a lot of stuff, and initially the pure divs were driving me nuts, so I stuck a table in there. But again, I'm not the foremost authority on divs, so I'm sure there's stuff I can do that I haven't yet.I'd Download a copy of Firefox (<!-- m --><a class="postlink" href="http://www.mozilla.org/products/firefox/">http://www.mozilla.org/products/firefox/</a><!-- m -->) and design in that browser first. the gradient background doesn't show up at all in Firefox. The -1 z-index technically puts the DIV behind the entire page, hence Firefox is correct in not showing the gradient at all. I think you'll be happier by placing that gradient background in a DIV that encompasses all of the boxes for which the gradient background should be behind.
Can you post a mockup of what you want? And can you change the markup for the content of the page?No wonder the page doesn't work properly, it's got 237 errors (<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.myspace.com%2F15091654">http://validator.w3.org/check?uri=http% ... 2F15091654</a><!-- m -->) in it. You should sort this out before continuing.Try placing this in your CSS file
body {
margin: 0px;
height: 100%;
width: 100%;
}
That tells the computer what the size of your page is in IE (Firefox does not need it, but it does no upset anything).
WofenNo wonder the page doesn't work properly, it's got 237 errors (<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.myspace.com%2F15091654">http://validator.w3.org/check?uri=http% ... 2F15091654</a><!-- m -->) in it. You should sort this out before continuing.
My thanks for pointing that out, but I cannot fix it as the errors are not mine. The errors mentioned are in the html that myspace has thrown together, and I have absolutely no control over it at all. All I'm allowed to do is throw some CSS into the "About Me" section, and I'm kinda stuck.Although most of them are due to improper coding of ampersands and forgotten type and alt attributes.I'd Download a copy of Firefox (<!-- m --><a class="postlink" href="http://www.mozilla.org/products/firefox/">http://www.mozilla.org/products/firefox/</a><!-- m -->) and design in that browser first. the gradient background doesn't show up at all in Firefox. The -1 z-index technically puts the DIV behind the entire page, hence Firefox is correct in not showing the gradient at all. I think you'll be happier by placing that gradient background in a DIV that encompasses all of the boxes for which the gradient background should be behind.
Can you post a mockup of what you want? And can you change the markup for the content of the page?
Well, the cross-browser compatibility thing was bugging me. I test everything I do on IE, Opera, Netscape 7.0, Mozilla and Firefox, and I did note that obviously I'd have to do tweaking to get it to work on most of them. If I use no z-index or a z-index of 0, the div sits on top of everything, obscuring the page. It could be that the nature of myspace is just buggy and I can't do what I want. Essentially what I want is this:
<!-- m --><a class="postlink" href="http://www.meaganklub.com/images/eg1.jpg">http://www.meaganklub.com/images/eg1.jpg</a><!-- m -->
but I'll be happy with this, as well:
<!-- m --><a class="postlink" href="http://www.meaganklub.com/images/eg2.jpgOh">http://www.meaganklub.com/images/eg2.jpgOh</a><!-- m -->, and if I could change the markup I'd be fine. Again, I'm stuck with a stupid "about me" box that I can put CSS and a div or two in.