positioning help |
positioning help |
![]()
Post
#1
|
|
Senior Member ![]() ![]() ![]() ![]() Group: Member Posts: 123 Joined: Nov 2008 Member No: 698,881 ![]() |
My headers are always off by 1 px either in safari or FF. I can get it right in IE and FF but it'll be off by a pixel in Safari or vice versa.
Here is my code for the top header: CODE <div id="BannerUnderTopNav" style="position:absolute; z-index:2; margin-left:-346px; _margin-left:-333px; top: 0px; background-color:COLOR; background-image:URL(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THOSE%20VICTORIOUS/header1.jpg); background-repeat: no-repeat; background-position: bottom center; width:823px; height:2017px; overflow:no;}"> </div> I have the _margin-left: xxx for IE and the other margin attribute for FF and Safari. But as you can see here: http://www.myspace.com/frucatestpage it'll be a px off in FF but right in safari. Let me know if there's something I can add in the code to fix that. Thanks guys! |
|
|
![]() |
![]()
Post
#2
|
|
Senior Member ![]() ![]() ![]() ![]() Group: Member Posts: 123 Joined: Nov 2008 Member No: 698,881 ![]() |
That does sounds way better!
Ok, I tried another site i had worked on with this idea. Took out the background image and added the whole graphic (sliced) in the top header section. If I can make this work, my problem will be solved. My issue now is the comments and right side content (shows, bio, promo, friends) are covered. Is there something i'm missing. Link: http://www.myspace.com/frucatestpage3 Here's the code: CODE <style> .profileWidth { padding-bottom:750px !important;} </style> <div id="BannerUnderTopNav" style="position:absolute; z-index:2; margin-left:-735px; _margin-left:-730px; top: 0px; background-color:COLOR; background-image: ; background-repeat: no-repeat; background-position: bottom center; width:826px; height:948px; overflow:no;}"> <table id="Table_01" width="1600" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="3"> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_01.jpg" width="1600" height="171" alt="" /></td> </tr> <tr> <td colspan="3"> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_02.jpg" width="1600" height="371" alt="" /></td> </tr> <tr> <td> <a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnR3aXR0ZXIuY29t"> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_03.jpg" width="486" height="22" border="0" alt="" /></a></td> <td rowspan="2"> <a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnlhaG9vLmNvbQ=="> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_04.jpg" width="109" height="23" border="0" alt="" /></a></td> <td> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_05.jpg" width="1005" height="22" alt="" /></td> </tr> <tr> <td> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_06.jpg" width="486" height="1" alt="" /></td> <td> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_07.jpg" width="1005" height="1" alt="" /></td> </tr> <tr> <td colspan="3"> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_08.jpg" width="1600" height="341" alt="" /></td> </tr> <tr> <td colspan="3"> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_09.jpg" width="1600" height="704" alt="" /></td> </tr> <tr> <td colspan="3"> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_10.jpg" width="1600" height="1129" alt="" /></td> </tr> </table> </div> <style> .tg_left {position:absolute; margin-top:-0px; margin-left:-410px; left:50%; top:1184px; width:315px; height:700px; background-color:transparent; z-index:2;} </style> <div class="tg_left"> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20NATALIE%20SMITH/bigline.png" /><br /><br /> <center> <div style="width:176px;text-align:center"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="176" width="176" align="middle"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://twitter.com/flash/twitter_badge.swf" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="color1=3368703&type=user&id=18664543" /> <param name="quality" value="high" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://twitter.com/flash/twitter_badge.swf" height="176" width="176" align="middle" wmode="transparent" flashvars="color1=3368703&type=user&id=18664543" quality="high" /> </object><br /><a style="font-size: 10px; color: ffffff; text-decoration: none" href="http://www.msplinks.com/MDFodHRwOi8vdHdpdHRlci5jb20vbmF0c21pdGhtdXNpYw==">FOLLOW NATALIE!</a></div> <br /><br /> </center> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SEAN%20PATRICK%20MCGRAW/infoline.png" /><br /><br /> <table width="250px" border="0" cellspacing="3" cellpadding="3"> <tr> <td><sub>GENRE</sub></td><td><div align="right">Pop</div></td> </tr> <tr> <td><sub>URL</sub></td><td><div align="right">www.myspace.com/nataliesmithmusic</div></td> </tr> <tr> <td><sub>HOMETOWN</sub></td><td><div align="right">Boston, MA</div></td> </tr> <tr> <td><sub>CONTACT EMAIL</sub></td> <td><div align="right"><a href="mailto:naugustasmith@gmail.com">naugustasmith@gmail.com</a><br /><sub></sub></div></td> </tr> <tr> <td><sub>LAYOUT</sub></td> <td><div align="right"><a href="mailto:frucafrucaposters@gmail.com">Fruca Fruca Design</a><br /><sub></sub></div></td> </tr> </table> </div> <style>ul li a:link, ul li a:active, ul li a:visited ul li a.open:visited, ul li a:link, ul li a:active, ul li a:visited {font: bold 10px arial !important; letter-spacing: -1px !important; text-transform: uppercase; margin-top: -4px; text-align:left;}</style> <style>.whitetext12{visibility:hidden; display:none;}.lightbluetext8{visibility:hidden; display:none;}</style> <style> .friendText {display:none} .redLink {display:none} </style> <style> {THIS MAKES THE BODY TABLE TRANSPARENT} {*NOTE* - IF YOU DO NOT WANT THE BODY TABLE TRANSPARENT, SIMPLY CHANGE TRANSPARENT TO A COLOR} body{ font-size:x-small; background-color:3e5c94; background-image:; background-attachment:scroll; background-repeat: no-repeat; background-position:top center; margin-top: 0px;} {THIS EDITS THE MAIN TEXT STYLE AND COLORS}body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{color:ffffff;font-size:8pt;font-weight:normal;font-style:normal;text-decoration:none;text-transform:none;font-family:arial;} {THIS CHANGES COLOR AND STYLE OF NAMETEXT AND HEADINGS}.orangetext15, text, strong, .lightbluetext8, .whitetext12, .nametext, .btext, .redtext, .redbtext{color:ffffff;font-size:8pt;font-weight:normal;font-style:normal;text-decoration:none;text-transform:none;font-family:arial;} {THIS CHANGES COLOR AND STYLE OF LINKS}a, a font, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:visited, a.man, a.man:link, a.man:visited, a.man font, a.redlink, a.redlink:visited{color:e5e6a3;font-size:8pt;font-weight:bold;font-style:normal;text-decoration:none;text-transform:bold;font-family:arial;} {THIS CHANGES COLOR AND STYLE OF LINKS ON HOVER}a:hover, a:hover font, a:active, a.navbar:hover, a.navbar:active, a.man:hover, a.man:active, a.man:hover font, a.searchlinkSmall:hover, a.searchlinkSmall:active, a.redlink:hover, a.redlink:hover{color:ffffff;font-size:8pt;font-weight:bold;font-style:normal;text-decoration:none;text-transform:bold;font-family:arial;} {THIS ALSO MAKES THE BODY TABLE TRANSPARENT AND MAKES SURE ALIGNMENTS ARE FINE}{NOTHING NEEDS TO BE CHANGED HERE EXCEPT IF YOU WANT THE FONT CHANGED}p {margin: 0px 0px 1em 0px; font-family: arial !important}body>div {margin-left: 0px;}table, tr, td, table table, table table td {border-width:0px; background-color: transparent;}table table table td {background-color:transparent;margin:0px;padding: 0 0px 0px 0px}table table table table {border-width:0px;background-color:transparent;padding:0px;margin:0px; background-image: none;}table table table table td {padding:0px;margin:0px;}table table table { background-color: transparent; border: 0 solid; border-color: transparent; width: 100%; }object {position:relative; z-index:1;}body td table, body div table {margin-top: 0px;}.a {hide URL label}.a {hide top links}.a {unhide navigation bar}.navbar {visibility:visible;} </style> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SEAN%20PATRICK%20MCGRAW/bioline.png" /><br /><br /> <b>Natalie Smith is quickly gaining momentum in the singer-songwriter circuit with quirky lyrics and memorable hooks. This promising young talent creates songs that make you smile. Her debut EP, “Better In The Summertime” is an organic collection of songs encompassing mainstream and underground appeal much like some of her influences Jason Mraz, The Beatles, and Sara Bareilles.<br /><br /> Natalie has been a dedicated singer since her adolescent years, writing songs and performing since she was twelve. In 2007, she crossed the states to pursue her dreams at Berklee College of Music in Boston. As Natalie prepares to release her first EP “Better In The Summertime,” she is already receiving recognition for her talent. In 2009, she was selected to perform her original song “Never Gonna Be” at Berklee’s Performer/Songwriter Fall Showcase. She also was selected to sing background vocals for Ben Folds and the Boston Pops at Symphony Hall. Graduating this spring with a degree in Songwriting, she is gearing up for a busy summer performing and promoting songs off the record. With her clever and catchy tunes and diligent work ethic, you can be sure that "Better In The Summertime" is merely a tasty preview of the music she has in store. <br /> <br /></b> <center><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lml0dW5lcy5jb20="><img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20NATALIE%20SMITH/cdcover.png" /><br /><br /></center> <img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SEAN%20PATRICK%20MCGRAW/friendline.png" /><br /> <span class="off">!-Start Block to Shift Comments To Center-!</span> <style> {!-Change the top px value as needed. This is distance B on the chart-!} table.friendscomments {position:relative; left:-1%;} table.friendscomments {width:800px !important;} table.friendscomments td, table.friendscomments table {width:100% !important} table.friendscomments table table td {width:auto !important;} </style> <span class="off">!-END Block to Shift Comments To Center-!</span> <style> table.friendsComments tbody tr td.text table tbody tr td span.orangetext15{ background-image: URL(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20NATALIE%20SMITH/comment.png) ; background-repeat: no-repeat !important; background-color: transparent; display: block !important; height: 70px !important; color: ffffff!important; width: 800px; position: relative; overflow: hidden; font-size: 1px; text-align: right; margin-top: -1px; line-height: 300px !important; _width: 800px !important; _border-left: 1px ffffff!important; _border-right: 1px ffffff!important; _height: 70px !important; _margin-bottom: -1px !important; } </style> <style> .orangetext15{display:none} </style> <style>embed, object {position:absolute; top:562px; left:50%; margin-left: -416px; z-index:9; } td td td embed, td td td object { position:static; margin-left:0px; }</style> <style>table table table { visibility:hidden; } table table .text table { visibility:visible; }</style> <style> .navbar, .subnavItems {display: none!important;} </style> <style> .latestBlogEntry { position:absolute; top:974px; margin-left: -410px; left:50%; width: 335px; background-color: transparent; z-index: 9; } table .latestBlogEntry { width:335px!important; } </style> |
|
|
![]() ![]() |