mteam

Looks like if ie browser your adding the class safe mode to html

Or change the left position to minus left:-999em

line 589 & 592 should be the small screen size and then lines 1492 & 1499 above 600px wide

This is a bit of a hacky way to do it .container{position:relative;overflow:hidden;} #header { width: 23.5%; /*235px*/ max-width: 235px; height: 100%; background-color: #f7d846; padding-top:80px; padding-left:0px; z-index: 100 !important; position:absolute;top:0;bottom:0;/*added this line*/ } #contentwrapper { width: 70%; /*700px*/ padding-top:11.428571%; /*80px*/ margin: 0 0 0 235px;/*added this line width of sidebar*/ }

looking at it I'd guess you've got a extra closing div on the home page hence the div id art home is not wrapping your footer so the background image is not extending

If its because you haven't got a scroll bar remove overflow:hidden from body

Looking at your code I think something like this should work $('.overlay, .overlay .close').on('click',function(e) { if ($(e.target).closest('a:not(.close)').length) { } else { e.preventDefault(); $('.overlay').fadeOut(500); $('.world-pop').hide(); } });

Have you tried remapping the icons Sorry mate I miss read you post from what i can see choose the entypo fonts http://icomoon.io/app/#browse that select the characters you want, hit font a the bottom then choose the encoding you want and download font pack Haven't tested it

http://css-tricks.com/forums/topic/entypo-social-problem-in-windows-chrome-opera-web-browsers/

See how this works I've used floats !DOCTYPE html> <!--[if IE 7 ]><html class="ie7"><![endif]--> <html lang="en"> <head> <meta charset="utf-8"> <meta name="description" content=""> <meta name="keywords" content=""> <title></title> <style type="text/css"> * {margin: 0;padding:0}/*use a css reset*/ #content {height:900px;background:blue;padding:2px 0 0;} .ie7 #content{padding:4px 0 0;} .inside{background:yellow;width:99%;margin:2px auto;overflow:auto;padding:0 0 100px;} .heada, .headb, .headc {float:left;width:33%;position:relative;}/*used position relative here so the arrowleft takes it starting position frrom here*/ h2{width:225px;height:60px;background:red;margin:10px auto;} .arrowleft {background:black;height:50px;width:50px; position: absolute;right: 0;top: 12px;} h2,h3{font-size:2em;} .section{background:orange;height:229px;width:229px;border-radius: 0px 50px 0px 50px;margin: 32px 0 0 28px;float:left} .two, .four {margin: 62px 0 0 28px;} .two{background:purple;} .four{background:white;} .two h3{color:red;} </style> <!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="content"> <div class="inside"> <div class="heada"> <h2>Acme</h2> <div class="arrowleft"></div> <div class="section one"> <h3>Tip</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta.</p> </div> <div class="section two"> <h3>TipTwo</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta.</p> </div> <div class="section three"> <h3>TipThree</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta.</p> </div> <div class="section four"> <h3>TipFour</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vit</p> </div> </div> <div class="headb"> <h2>Acme School</h2> </div> <div class="headc"> <h2>Acme School</h2> </div> </div> </div> </body> </html>

Sorry mate just got in I'm not the best at explaining theses things in IE7 when you move something position relative other elements still work off its original position for example your tips box is taking its margin from where arrowleft was originally before position is applied Just got to take the dog out and then I'll have a look at the code

I'd give this one a go http://caroufredsel.dev7studios.com/

line 47 css try changing max-width & height .nbs-flexisel-item img { width: 100%; cursor: pointer; positon: relative; margin-top: 10px; margin-bottom: 10px; max-width:100px; max-height:45px; }

Using all the positions is causing your problems do you want the page in 3 columns ? are you going to have different tips under heada ,b ,c?

#main-nav ul li#menu-item-722 a{color:#f88c00}

Can't see your code at the moment to centre the site use margin:0 auto on your containg element. If you need any help just give me a shout fellow roytonian

Small world you live just up the road from me LOL Dont just design for ipad Iphone make it responsive

you got a link so I can see this as it should work as you want so maybe a little tweak on the background position is needed depending on the img your using

I'd guess at the first code you posted this line define('DB_HOST', localhost'); is missing an apostrophe before localhost define('DB_HOST',' localhost');

might be useful http://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/

You need to use a css reset the browser h1 margin is causing your problem

Could you show a link of this gallery working so I can see what it should do all I can think of at the moment is it uses the class web-design to select img to display but you've already got a rule for the class web-design so that styling is being added Can you rename the class your using

Only had a quick look try removing class webdesign I'll check back later

Hi Mike Welcome to the forum

I think this what you are after css change to add a .current rule .IsmaelNavbar nav ul li a:hover,.IsmaelNavbar nav ul li a.current{ color:#fff; height:20px; border-bottom:4px solid #fff; padding-bottom:12px; } SmoothScroll edited to add class on click $(document).ready(function() { function filterPath(string) { return string .replace(/^\//,'') .replace(/(index|default).[a-zA-Z]{3,4}$/,'') .replace(/\/$/,''); } var locationPath = filterPath(location.pathname); var scrollElem = scrollableElement('html', 'body'); $('a[href*=#]').each(function() { var thisPath = filterPath(this.pathname) || locationPath; if ( locationPath == thisPath && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/,'') ) { var $target = $(this.hash), target = this.hash; if (target) { var targetOffset = $target.offset().top; $(this).click(function(event) { event.preventDefault(); //removes current class $('a.current').removeClass('current'); //adds current class to clicked $(this).addClass('current'); $(scrollElem).animate({scrollTop: targetOffset}, 400, function() { location.hash = target; }); }); } } }); // use the first element that is "scrollable" function scrollableElement(els) { for (var i = 0, argLength = arguments.length; i <argLength; i++) { var el = arguments[i], $scrollElement = $(el); if ($scrollElement.scrollTop()> 0) { return el; } else { $scrollElement.scrollTop(1); var isScrollable = $scrollElement.scrollTop()> 0; $scrollElement.scrollTop(0); if (isScrollable) { return el; } } } return []; } }); Hth