Cliffo

Is presentation a big issue? If not there there are prebuilt photo galleries like Coppermine Gallery or even blog type systems like Wordpress. A single page where pictures slide in when links are clicked would have to be some sort of java or flash type site i would think, which is getting more advanced, maybe someone else can provide more guidance.

Wow i just checked my site through adobes browserlab IE7 and mine is jacked up there too =( [edit] ahh my problem was i used height:inherit; and IE 6 and 7 didnt like that, not sure if thats a problem with their browsers or if i was just using it improperly, but browserlab.adobe.com might be my new best friend.

I am very new to css so i am not 100%, but you probably need a wrapper for your content, for example mine is; div#container { width: 960px; margin: 0 auto; padding: 0; text-align: left; background-color:#999898; } and the "margin: 0 auto;" part centers the site. Add that that your css then wrap the sites content with a <div id="container"></div>.

Chances are you have an error like a missing </tr> or something and IE7 cant correct the error. I would just scan for typos or errors, i bet you will find the issue. If you cant find the error post the code and maybe someone else can spot it.

Well thanks for the advice, i added a bottom padding and then a negative margin to the top with a top padding to fill that margin and it is perfect!

Wow i feel dumb for not thinking of that, this was a rather useless adventure considering with enough padding it's easy to use.

Okay that almost worked, seems the actual links wont direct anywhere though.

I understand, and sorry for the shameless bumb, i just have been getting a little frustrated trying to add this, being the last thing i need before i can move on to my next theme.

Little help please?

Hello all, first off thanks a ton for the css tutorials, thanks to this site i have created my first ever website template and with css! I am trying to add a delay to my drop down menus, as of now it is rather hard to click links because they disappear so fast. I have found a few random "hover delay" js scripts but i can not get them to work. I am going to link my current code, i am curious how to get a delay working on this nav bar and if i even used css properly to create what i have now. Here is a link to my test site also; div#navi { width: 960px; height: 39px; } ul.navi { margin:-2px 0px -2px -40px; } ul.navi, ul.navi li { float: left; list-style:none; } ul.navi li ul { display: none; } ul.navi li:hover ul { display:block; list-style: none; position:absolute; } ul.navi li:hover ul li { padding-right:50px; } ul.navi li:hover ul li a{ color:#FFF; } ul.navi li:hover ul li a:hover{ color:#FFF; } div#navi2 { width: 960px; height: 29px; background-image:url(images/nav_bottom.gif); margin-top:-5px; <div id="navi"> <ul class="navi"> <li><a href="/index.php"><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_01.gif" /></a> <ul> <li><a href="/index.php?site=news">News</a></li> <li><a href="/index.php?site=news&action=archive">Archives</a></li> <li><a href="/index.php?site=articles">Articles</a></li> <li><a href="/index.php?site=calendar">Calendar</a></li> <li><a href="/index.php?site=faq">FAQ</a></li> <li><a href="/index.php?site=search">Search</a></li> </ul> </li> <li><a href="/index.php?site=forum"><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_02.gif" /></a></li> <li><a href="/index.php?site=squads"><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_03.gif" /></a> <ul style="margin-left:-255px;"> <li><a href="/index.php?site=about">About Us</a></li> <li><a href="/index.php?site=squads">Squads</a></li> <li><a href="/index.php?site=members">Members</a></li> <li><a href="/index.php?site=clanwars">Matches</a></li> <li><a href="/index.php?site=history">History</a></li> <li><a href="/index.php?site=awards">Awards</a></li> </ul> </li> <li><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_04.gif" /> <ul style="margin-left:-320px;"> <li><a href="/index.php?site=forum">Forums</a></li> <li><a href="/index.php?site=guestbook">Guestbook</a></li> <li><a href="/index.php?site=registered_users">Registered Users</a></li> <li><a href="/index.php?site=whoisonline">Online Users</a></li> <li><a href="/index.php?site=polls">Polls</a></li> <li><a href="/index.php?site=server">Servers</a></li> </ul> </li> <li><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_05.gif" /> <ul style="margin-left:-330px;"> <li><a href="/index.php?site=files">Downloads</a></li> <li><a href="/index.php?site=tutorials">Tutorials</a></li> <li><a href="/index.php?site=movies">Movies</a></li> <li><a href="/index.php?site=gallery">Photos</a></li> <li><a href="/index.php?site=links">Weblinks</a></li> <li><a href="/index.php?site=demos">Demos</a></li> </ul> </li> <li><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_06.gif" /> <ul style="margin-left:-710px;"> <li><a href="/index.php?site=sponsors">Sponsors</a></li> <li><a href="/index.php?site=partners">Partners</a></li> <li><a href="/index.php?site=newsletter">Newsletter</a></li> <li><a href="/index.php?site=contact">Contact Us</a></li> <li><a href="/index.php?site=challenge">Fight Us</a></li> <li><a href="/index.php?site=joinus">Join Us</a></li> <li><a href="/index.php?site=linkus">Link Us</a></li> <li><a href="/index.php?site=imprint">Imprint</a></li> </ul> </li> </ul> </div> <div id="navi2"></div> Here are the two js scripts i tried, honestly not sure how to use them and couldnt get either to work; var delay = 500; /* milli seconds */ function attachHooks() { var menu = document.getElementById("navi"); var menuItems = menu.getElementsByTagName("ul.navi li ul"); currentHover = menuItems[0]; for (var i = 0; i < menuItems.length; i++) { menuItems[i].onmouseover = function () {activateMenuWithDelay(this);}; menuItems[i].onmouseout = function () {deactivateMenuWithDelay(this);}; } } function activateMenuWithDelay(ele) { if(ele.timer) { clearTimeout(ele.timer); } ele.timer = setTimeout(function(){activateShowMenu(ele)}, delay); } function activateShowMenu(ele) { var parent = ele; parent.className = "showMenu"; } function deactivateMenu(ele) { var parent = ele; parent.className = " "; } function deactivateMenuWithDelay(ele) { if(ele.timer) { clearTimeout(ele.timer); } ele.timer = setTimeout(function(){deactivateMenu(ele)}, delay); } function initMenuDelay() { attachHooks(); deactivateMenu(); } function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } addLoadEvent(attachHooks); <script type="text/javascript"> sfHover = function() { var sfEls = document.getElementById("navi").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); </script> I was also thinking that instead of the second list showing when they hover over the first, it would be much better if it showed after they clicked the first part, then it doesn't disappear until they click another. Any help is appreciated!