Jump to content


  • Content Count

  • Joined

  • Last visited

Community Reputation

0 Neutral

About Kingy

  • Rank
  • Birthday 12/19/1986

Profile Information

  • Location
    Leicestershire, England
  1. I resorted to an iframe for that div now. It was clear that using AJAX to load the page into that div is interfering with the gallery script which is more crucial I believe.Sorry I had to cop out.
  2. Hey guys, I'm working on version 2 of my site. I'm being lazy this time around and decided to use multiBox for my image galleries, which is based on mootools.However this particular script seems to mess with my image links on the side menu.http://ajax.googleapis.com/ajax/libs/mooto...i-compressed.jsI'm pretty sure this is what's breaking it because I've gone through the related .js files commenting them to see what's breaking it.What it's been doing is converting my image links to the target page (loading my pages via ajax to the central page) as opposed to what I targetted before.So I've gotten the ajax page change without any problems but this script just seems to mess it up.Any ideas how to get around this? Thanks in advance. :)Link to development page:http://www.kingmancheng.co.uk/index2.html[edit]Think it might be something to do with line 341 in the mootools script.}},this);this.fireEvent("request");this.xhr.send(g);if(!this.options.async){this.onStateChange();}return this;},cancel:function(){if(!this.running){return this; Could it be conflicting with my AJAX script?[edit2]What if I somehow dynamically load the script when it loads just the gallery pages but deletes it when it's not needed?I've added scripts dynamically before but this seems a little more complex than that. The actual test gallery page (/pages/Digital.html) works fine with the scriptIf I just load this page into the div by ajax it just doesn't work. o.o
  3. I've fixed it now, the absolute positioning was just messing it up. I've replaced and changed a range of things and it's ok now. =]
  4. Hey guys, long time no speak. I'm updating my website and I've decided to give the whole Adobe Fireworks thing a go and try slicing with them instead.So I've put it all together and I've also written a simple little script to help center the browser.Basically the idea is if the screen size is over 1024 wide, it'll calculate the difference between your screenwidth and the 1100 pixel width of my design, then half it. Using that value I use position absolute and left of that calculated value to center the page.This appears to be fine in Opera in IE, however it still sticks left in other browsers, Chrome, Safari, and Firefox.I'm not sure if it's CSS or JavaScript in this particular case but I can't think of what the problem is because it should be really straightforward.Here's a link, I've made a temporary folder for it on my site, none of the links go anywhere apart from the twitter and deviantart link. It's work in progress. :)The JS: function fixWidth(){if (screen.width>=1024){ var wrapper = document.getElementById("wrapper"); var myWidth = screen.width; var fixWidth = ((screen.width - 1100)/2); wrapper.style.position = "absolute"; wrapper.style.left = fixWidth;}}window.onload = function(){ fixWidth();} The CSS: @charset "utf-8";body { font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; background: #42413C; margin: 0 auto; padding: 0; color: #000; text-align:center;}a img {border: none;}#wrapper {text-align:center; margin:0 auto; padding: 0; width: 1100px; height: 1238px;}#wrapper img{margin:0 auto; padding: 0; border-collapse:collapse;} http://www.kingmancheng.co.uk/v2/website_ver2.htmlI'm sure I'm overlooking or neglecting something simple per usual.And yes doctype is strict 4.01.
  5. Kingy

    Opera Woes

    I can't seem to move #menuwrap and #menu in http://www.chloegregduncan.co.uk/main.html.o.OAlso they don't appear to be clickable anymore? @charset "utf-8";body {background : #fcfbf9;font-family : Verdana, Geneva, sans-serif;text-align : center;}a img {border : 0;}a {outline : none;}#fixdiv {text-align : center;margin : auto 0;background-image : url(images/mainbg.png);background-repeat : no-repeat;position: relative;top: 15%;}.const {width : 1000px;height : 690px;margin : auto;position : relative;padding : 10px;text-align : center;font-size : large;}.contentbg {position : relative; top: 15%;}.clickenter {position : relative;top : -30%;right : -28%;padding : 0;margin : 0;}#menuwrap #menu{position: relative;left : 25%;}#namelogo {position : relative;width : 165px;height : 195px;z-index : 1;float:left;}#aboutbtn {position : relative;padding : 0;margin : 0;border : 0;width : 120px;height : 120px;z-index : 1;float:left;}#workbtn {position : relative;padding : 0;margin : 0;border : 0;width : 110px;height : 89px;z-index : 1;float:left;}#eventbtn {position : relativepadding : 0;margin : 0;border : 0;width : 120px;height : 80px;z-index : 1;float:left;}#contactbtn {position : relative;padding : 0;margin : 0;border : 0;width : 130px;height : 72px;z-index : 1;float:left;}#linkbtn {position : relative;padding : 0;margin : 0;border : 0;width : 150px;height : 70px;z-index : 1;float:left;}#inner_content {width : 60%;height : 60%;position : relative;top: -68%;left: 23%;}.content {width : 60%;height : 60%;position : relative;bottom : 4em;}.content ul {text-decoration : none;list-style-type : none;margin : 0;padding : 0;}#introimage {left : 0;right : 0;top : -100%;bottom : 0;}#linksmap {display : block;width : 400px;height : 260px;background : url(images/links%20written%20info.jpg);position : relative;margin : 0 auto 2em auto;}#linksmap a {color : #000;font-size : 1.2em;font-weight : bold;text-transform : uppercase;}a#sarahhome {display : block;width : 55px;height : 0;padding-top : 120px;overflow : hidden;position : relative;left : 120px;top : 85px;}* html a#sarahhome {height : 120px;height : 0;}a#sarahhome:hover {background : transparent url(images/links_sarah.png) no-repeat 0% 0%;overflow : visible;}a#freddierobins {display : block;width : 30px;height : 0;padding-top : 130px;overflow : hidden;position : relative;left : 155px;top : 70px;}* html a#freddierobins {height : 130px;height : 0;}a#freddierobins:hover {overflow : visible;}a#pondedge {display : block;width : 105px;height : 0;padding-top : 55px;overflow : hidden;position : relative;left : 130px;top : 165px;}* html a#pondedge {height : 55px;height : 0;}a#pondedge:hover {overflow : visible;}a#lornasystontextiles {display : block;width : 45px;height : 0;padding-top : 105px;overflow : hidden;position : relative;left : 170px;top : 80px;}* html a#lornasystontextiles {height : 105px;height : 0;}.email {position : relative;left : auto;right : auto;bottom : 30%;z-index : 2;}.galmenu {list-style-type : none;display : inline;}.galmenu ul {margin : 0;padding : 0;list-style-type : none;}.galmenu ul li {position : relative;display : inline;float : left;}.galmenu ul li a {display : block;z-index : 4;}.imgbox {position : relative;width : 80%;height : 80%;left : 5%;right : auto;top : 5%;z-index : 3;}.galform {width : 80%;height : 80%;}.descText {width : 100%;text-align : center;}.clothesbtn {z-index : 2;}.intbtn {z-index : 2;}.jewelbtn {z-index : 2;}.paperbtn {z-index : 2;}#imgText {border : none;background : none;overflow : auto;white-space : nowrap;font-family : Verdana, Geneva, sans-serif;text-align : center;}.gallerywrap {text-align : center;padding : 1em;}
  6. Kingy

    Opera Woes

    Hmm it looks pretty messed up at the moment...I'll go through and change all the positioning to relative and try to use floats, clears and margins as you've all suggested.
  7. Kingy

    Opera Woes

    Hi I've switched the doctypes to strict now, thanks. =]I don't like absolute positioning + z-index either to be honest.I know it's trouble but the site she wants is so image heavy you know?So you suggest I should go back and change everything to have floats, clears and margins?How am I going to get the images to go on top of each other then? I thought that could only beachieved by z-index to get a layering effect?
  8. Kingy

    Opera Woes

    No news on what's going on? I haven't figured it out yet.
  9. Kingy

    Opera Woes

    Thanks for the input so far, it's much appreciated. :]
  10. Kingy

    Opera Woes

    Hey everyone, I'm working on a site here for someone I know and it works fine in IE, FF and Safari.However as the title suggests I've been having issues with Opera.http://www.chloegregduncan.co.uk/main.htmlIf you look there the menu, logo, gallery etc. they all work fine in the other browsers, but in Operathey disappear. I suspect it's something to do with the z-index but I can't figure out how/why. @charset "utf-8";/* Main */body {background: #fcfbf9;font-family:Verdana, Geneva, sans-serif; text-align:center;}a img {border: 0;}a {outline: none;}#fixdiv {text-align:center; margin:auto 0; background-image:url(images/mainbg.png); background-repeat: no-repeat;}.const { top: 0; right: 0; bottom: 0; left: 0; width: 1000px; height: 690px; margin: auto;position: fixed;padding: 10px;text-align:center;font-size:large; }.contentbg { position: absolute; } /*ALl inner content must have higher z-index*/.clickenter { position:absolute; right:-170px; bottom:0; padding: 0; margin: 0;}/* Buttons */#menuwrap { top: 0; right: 0; bottom: 0; left: 0; width: 1000px; height: 690px; margin: auto;position: fixed;}#menu {/*z-index: 1;*/ position:absolute; top: 0; bottom: 0; left: 0; right: 0;}#namelogo { position:absolute; top: 5%; left:0; padding: 0; margin: 0; border-collapse:collapse; border: 0; width: 165px; height: 195px; z-index:1;}#aboutbtn { position:absolute; top: 5%; left:20%; padding: 0; margin: 0; border-collapse:collapse; border: 0; width:120px; height: 120px;z-index:1;}#workbtn { position:absolute; top: 8%; left:30%; padding: 0; margin: 0; border-collapse:collapse; border: 0; width: 110px; height: 89px;z-index:1;}#eventbtn{position:absolute; top: 8%; left:45%; padding: 0; margin: 0; border-collapse:collapse; border: 0; width: 120px; height: 80px;z-index:1;}#contactbtn {position:absolute; top: 8%; left:60%; padding: 0; margin: 0; border-collapse:collapse; border: 0; width: 130px; height: 72px;z-index:1;}#linkbtn {position:absolute; top: 7%; left:75%; padding: 0; margin: 0; border-collapse:collapse; border: 0; width: 150px; height: 70px;z-index:1;} /* Main content */#inner_content {width: 60%; height: 60%; position:absolute;/*z-index:2;*/} /*must have higher z-index with contentbg*/.content { width: 60%; height: 60%; position: absolute; bottom: 4em; left: 23%; }.content ul {text-decoration:none; list-style-type:none; margin: 0; padding:0;}#introimage { left: 0; right: 0; top: -100%; bottom: 0;}/* Links page styling *//* The group of people */#linksmap {display:block; width:400px; height:260px; background: url(images/links%20written%20info.jpg); position:relative; margin:0 auto 2em auto;}#linksmap a {color:#000; font-size:1.2em; font-weight:bold; text-transform:uppercase;}a#sarahhome {display:block; width:55px; height:0; padding-top:120px; overflow:hidden; position:absolute; left:120px; top:85px;}* html a#sarahhome {height:120px; he\ight:0;}a#sarahhome:hover {background:transparent url(images/links_sarah.png) no-repeat 0 0; overflow:visible;}a#freddierobins {display:block; width:30px; height:0; padding-top:130px; overflow:hidden; position:absolute; left:155px; top:70px;}* html a#freddierobins {height:130px; he\ight:0;}a#freddierobins:hover {background:transparent uurl(../images/links_lorna.png) no-repeat 0 0; overflow:visible;}a#pondedge {display:block; width:105px; height:0; padding-top:55px; overflow:hidden; position:absolute; left:130px; top:165px;}* html a#pondedge {height:55px; he\ight:0;}a#pondedge:hover {background:transparent url(irl(../images/links_freddie.png) no-repeat 0 0; overflow:visible;}a#lornasystontextiles {display:block; width:45px; height:0; padding-top:105px; overflow:hidden; position:absolute; left:170px; top:80px;}* html a#lornasystontextiles {height:105px; he\ight:0;}a#lornasystontextiles:hover {background:transparent mages/links_pondedge.png) no-repeat 0 0; overflow:visible;}.contact {position:absolute; float:left; z-index: 1;}.email {position:absolute; left: auto; right: auto; bottom: 30%; z-index: 2;}.galmenu { list-style-type: none; display:inline;}.galmenu ul{margin: 0;padding: 0;list-style-type: none;}.galmenu ul li{position: relative;display: inline;float: left;}.galmenu ul li a{display:block; padding: 1px 5px;z-index:4;}.imgbox {[position: absolute; width: 80%; height: 80%; left: 5%; right:auto; top: 5%; z-index: 3;} .galform {width: 80% height: 80%;}.descText { width: 100%; text-align: center; font:Verdana, Geneva, sans-serif;}.clothesbtn {z-index:2;}.intbtn {z-index:2;}.jewelbtn {z-index:2;}.paperbtn {z-index:2;}#imgText { border: none; background: none; overflow:auto;overflow-y: hidden;white-space:nowrap;font-family: Verdana, Geneva, sans-serif; text-align: center;}.gallerywrap {text-align:center; padding: 1em;} I know the code and layout isn't really that good at the moment, it still needs refining and tidying up but I wanted to get this issue with Opera out of the way first. If anyone can shed some light on thisit would be dandy. :)Thanks in advance.-Kingy
  11. Hey guys,I've whipped up a quick login/registration page, and I've got 2 separate divs on this page.One for registration and another for logging in, I've floated them and used a div below itwith clear: both to make sure they stay next to each other. This is fine on Firefox, Operaand IE on local testing. But when I upload the files to the server, it looks fine on Firefox and Opera,but the page plays up in IE. Like the divs don't line up and some of the spacing in the page goes kind of weird too.I find it strange that when you test it locally it is fine, but when it's uploaded to the server and testedonline it messes up. I've made sure my files are up to date so what is going wrong there?http://cpulse.dmu.ac.uk/login.html
  12. I've encountered a strange problem I haven't seen before.I whipped up a very quick registration/login page that is made up of 2 divs next to each other.These work fine in Firefox and Opera but lo and behold not in IE.Funny thing is if I test this page in IE locally, everything looks fine.However once I upload the files onto the server and look at it normally, there are a number ofstrange problems like it does not space out the list properly, the clearing div doesn't seem towork etc.I found that strange because it is fine locally but not online. Can anyone explain this? It probably even isn't a CSS problem to be fair but I'm not entirelysure what's happening here, thanks in advance!http://cpulse.dmu.ac.uk/login.htmldemo.css body,p,td,quote,small,form,input,ul,li,ol,label{ /* resetting our page elements */ font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0 auto; padding:0px;}body{ /* styling the body */ width:969px; color: #FFF; font-size:13px; background-color: #333; margin:0 auto; padding:0px;}/* Link styling */a:link { color: #993300; text-decoration: none;}a:visited { color: #993300; text-decoration: none;}a:hover { color: #CCCCCC; text-decoration: none;}a:active { color: #993300; text-decoration: none;}.clear{ /* the clearfix hack */ clear:both;}#rounded{ /* the outermost div element */ width:969px; margin:0px auto; /*center it on the page*/ background-color:#000; top:1px;}.container1{ /* navigation, titles*/ width:969px; background-color: #000000; margin:0px auto; /*center it on the page*/ z-index: 1; margin:0; padding-top: 20px; clear:both;}.container2{ /* navigation, titles*/ width:969px; background-color: #000000; margin:0px auto; /*center it on the page*/ z-index: 1; margin:0; clear:both; padding-top: 130px; height:100%;}.headercont{ margin:0px auto; /*center it on the page*/ width:969px; z-index: 1;}.featheader{ /* for trying to fix the issues with flash overlapping the wrong parts with respect to z-index */ z-index: 0; background-color:#000; width:969px;}.contalign{text-align:left;margin: 0 auto; padding-top:10px; padding-bottom: 10px;}#pageContent{ /* the container that holds AJAX loaded content *//*anything to style the inside content bits like border*/border:none;margin:0 auto;}#loading{ /* hiding the rotating gif graphic by default */ visibility:hidden;} /* position:fixed */ .outer { position:fixed; text-align:center; top:0; background-color:#000;} /* certering */ .middle { display:table; margin:0 auto; background-color:#000;} .inner { text-align:left; background-color:#000; width:969px; } /* Music Page column layouts */#midcol { background: #000; width: auto; text-align: center; float:left; padding-top: 6px;}#leftcol { background: #000; width: auto; margin: 0; padding: 6px; float:left;}#rightcol { background: #000; width: auto; margin: 0; padding: 6px; float: left;}/* menu list styling */#menu ul{list-style: none;padding: 0;margin: 0;} #menu li{float: left;margin: 0 1em;text-align:left;}.clear { height:1px; margin:0 0 -1px 0; clear:both; overflow:hidden;}/*footer styling*/h4 {color:#000}.footdiv {width:969px; text-align:center; background-color:#cccccc;}.footwrap {text-align:left;}.footlist{background-color:#cccccc; width:16%; float:left; position:relative; padding:10px;}.footlist1{background-color:#cccccc; width:12%; float:left; position:relative; padding:10px;}.footlist2{background-color:#cccccc;width:62%; float:left; text-align:center; position:relative; padding:10px;}.footul{list-style-type:none; margin-left: 0.5em;}/* Form Styling */.myform { margin-top: 1em; margin-bottom: 0.3em; padding-left:3em; padding-bottom:40px;}.subtext {font-size: 0.8em;}.definetxt {font-weight:bold; text-indent: 10px;}.button {background: #333333; padding: 20px; margin-left: 100px; text-align:center; border:medium #000000; width:30%; font-weight:bold;}.button2 {background: #333333; padding:20px; margin-left: 100px; text-align:center; border:medium #000000; font-weight:bold;}/*upload styling */.fileslist { padding-top: 5px 0 3px 0; text-indent: 0px; }.indent1 {text-indent: 20px;}.termbox {background-color:#333333; padding: 10px;}.editbox {background-color:#000000; width:25%; float:left; padding: 20px; border:thick #993300 double;}.editbox2 {background-color:#000000; float:left; padding: 20px; border:thick #993300 double;} /*lightbox effects*/ #filter { display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: #333; z-index:10; opacity:0.5; filter: alpha(opacity=50); } #box { display: none; position: absolute; top: 30%; left: 30%; margin:0; z-index:101; overflow: none; text-align:center; } #boxtitle { position:absolute; float:center; top:0; left:0; padding:0; margin:0; color:white; text-align:center; font-weight:bold; } /* login register page*/#regcol { background: #000; width: 50%; margin: 0; padding: 0; float:left;}#logcol { background: #000; width: 50%; margin: 0; padding: 0; float: right;}.formcol { padding: 10px;}.formsty { list-style-type: none; }
  13. Oh I just want it to validate the required fields that's all.But of course other than the album title and the need for at least 1 track, the generated form elements need validating as neccessary.That's what I'm finding it doesn't really find the fields I want on the first click, if I backup into the page again it might pick it up again but of course I don't want that.But what I really need with the validator is obvious things like text format like alphabet, alphanumerics, numerics as relevant but for the required fields as generated.The one that's always fixed is of course the album title itself, then the rest at the moment is track title, year of album and a genre (where genre you either have one from the drop down or you select other and fill in the field).
  14. Eh? You mean I could add the extra bits of validation to the JavaScript at the bottom of the form dynamically, alongside the generated elements?
  15. Oh great...so it doesn't matter how much sense the JavaScript makes if it doesn't handle it in the first place.No wonder I was so lost...this needs to be in pretty fast, any alternatives you can think of?
  • Create New...