dvp

Still having problems. Used jQuery instead of $ to differentiate between the two slideshows, still the same problem. Tried it on http://dvpwebdesign....ordion/red.html

I've been using a lot of slideshows recently on my sites and one thing thats puzzled me is using more than one slideshow per page. I'm currently working on my own site, experimenting with Jquery Accordion. I've managed to adopt a very simple javascript slideshow, see below: http://dvpwebdesign.com/test/accordion/blank.html However i'm unable to either incorporate or use a different multiple slideshow plugin. I dont need slideshow navigation, so the The Cycle plugin works really well and i know you can use multiple slideshows. But if i either use Cycle alongside the current javascript slideshow, or only use the Cycle slideshow to avoid any possible conflict, the Accordion menu stops working as in the examples below. I just cant see what i am doing wrong, can anyone help? http://dvpwebdesign.com/test/accordion/cycle.html http://dvpwebdesign.com/test/accordion/red.html

I've been developing a site www.audiocatz.com and had a few layout problems which have all been eradicated except one. The only problem i have left is the header text is too close to the menu in internet explorer and i cant find a way of keeping the original space which shows up fine in Safari, Firefox etc. Can anyone help?

The only way i can seem to get it to work is to put each paragraph in divs, surely this cant be the best way?

Nothing seems to be working so i'm trying anything i can ie paragraphs in different divs. I'm going to stop, as i assume this will confuse the hell out of anyone attempting to solve the problem, sorry everyone, its just driving me nuts at the moment.

Thanks for the tip Mteam but taking away Float:Left from #contentleft p didnt work. I noticed the problem occurs after the titles where the text is in bold/strong. So Zed might be onto something....

I've since made some adjustments to the code, still having the layout problem in IE though.

I've created a website www.audiocatz.com which works fine on Safari, Chrome and Firefox but not Internet Explorer. The main problem is the main part of the pages with text content has a different layout to what it should be. Paragraphs begin to the right side of the title rather than underneath, such as in the About Us and Services pages, and on the Resources page the 2 separate lines of text are joined together. Plus the header text is too big, and the logo has moved a few pixels to the left when it should be in line on the right vertical. Can anyone help?

So i guess this means unless you have a white background then the fadelink.js is pretty pointless! Thanks so much for finding the error Lev. Can i ask, how did you manage to find the code in my site, i thought you could only see the source code for html, can you see code for any files used in a website ie CSS, Javascript, etc?

I have a small problem. I'm starting to devise a new site for myself, www.dvpwebdesign.com. I'm currently just using html and css on it. The problem i have is IE, my intro page has a repeated gradient background, with links/text over it. All works fine on Safari, Firefox, but not the dreaded IE, which shows a white background behind the text. The rest of the screen has the gradient background correctly. I know you are supposed to use background-color:none, which i did do. I also tried background-color:transparent, all to no avail. If anyone can help i'd be very appreciative? Below is the CSS, you can get the html from the site which is live, thanks in advance: body { margin: 0; padding: 0; background-color: none; width:1000px; background-image: url(gradient4.jpg); background-repeat: repeat-x; } #menu a{ color:#a0a0a0; font-weight:normal; text-decoration:none; font-size:14px; margin-left:10px; margin-top:-35px; font-family: Skia; } #menu a span.two{ color:#33ccff; cursor:pointer; font-size:14px; font-weight:500px; font-family: Skia; } #menutwo a{ color:#9966ff; font-weight:normal; text-decoration:none; font-size:12px; margin-left:10px; margin-top:-35px; font-family: Skia; } #menutwo a span.two{ color:#660099; cursor:pointer; font-size:12px; font-family: Skia; } #menuthree a{ color:#c8c8c8; font-weight:normal; text-decoration:none; font-size:80px; font-family: Skia; } #menuthree a span.two{ color:#33ccff; cursor:pointer; font-size:80px; font-family: Skia; } #menufour a{ color:#b8b8b8; font-weight:normal; text-decoration:none; font-size:42px; font-family: Skia; } #menufour a span.two{ color:#339999; cursor:pointer; font-size:42px; font-family: Skia; } #menufive a{ color:#a8a8a8; font-weight:normal; text-decoration:none; font-size:22px; font-family: Skia; } #menufive a span.two{ color:#0066ff; cursor:pointer; font-size:22px; font-family: Skia; } ul#menu { width : 1000px; list-style-type : none; position : relative; margin-top:20px; margin-right:230px; float: right; display:inline; font-family: Skia; letter-spacing: 1px; } #menu li {float: right; display:inline;} ul#menutwo { width : 1000px; letter-spacing: 1px; margin-top:-10px; margin-bottom:20px; list-style-type : none; position : relative; float: right; display:inline; font-size:24px; font-family: Skia; margin-right:180px; } #menutwo li {float: right; display:inline;} ul#menuthree { width : 1000px; letter-spacing: 1px; list-style-type : none; position : relative; float: left; display:inline; font-family: Skia; top: 300px; } #menuthree li {float: left; display:inline;} ul#menufour { width : 1000px; letter-spacing: 1px; list-style-type : none; position : relative; float: left; display:inline; font-family: Skia; top: 320px; } #menufour li {float: left; display:inline;} ul#menufive { width : 1000px; letter-spacing: 1px; list-style-type : none; position : relative; float: left; display:inline; font-family: Skia; top: 340px; } #menufive li {float: left; display:inline;}

Newish to html/css/javascript. Have a problem with a horizontal menu stacked vertically to the right in IE, works fine in Safari, Firefox etc. Also another problem with one page listing some links stacked underneath each other, but on IE they show up in a staircase manner, one along, one down, etc. What am i doing wrong? HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" /> <title>Dipesh Parmar Artist Paintings</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Dipesh Parmar" /> <meta name="keywords" content="css, dropdowns, dropdown menu, drop-down, menu, navigation, nav, horizontal, vertical left-to-right, vertical right-to-left, horizontal linear, horizontal upwards, cross browser, internet explorer, ie, firefox, safari, opera, browser, lwis" /> <meta name="description" content="Clean, standards-friendly, modular framework for dropdown menus" /> <link rel="StyleSheet" href="main.css" type="text/css" media="screen" /> </head> <body> <div id="frame"> <div id="contentheader"> <h1>Dipesh Parmar</h1> </div> <ul> <li><a href="contact.html">Contact</a></li> <li><a href="links.html">Links</a></li> <li><a href="exhibitions.html">Exhibitions</a></li> <li><a href="paintings.html">Paintings</a></li> <li><a href="introduction.html">Introduction</a></li> <li><a href="index.html">Home</a></li> </ul> <div id="contentleft"> <pre> </pre> <p class="greek"></p> </div> <div id="contentcenter"> <br></br> <br></br> <p><a href="http://www.axisweb.org/seCVPG.aspx?ARTISTID=9987">AXIS</a><br/></p> <p><a href="http://www.artscouncil.org.uk/">ARTS COUNCIL</a><br /></p> <p><a href="http://www.decibelpas.com/en">DECIBEL ARTS</a><br /></p> <p><a href="http://www.absoluteart.net">ABSOLUTE ART</a><br /></p> <p><a href="http://www.rhondaschallerchelsea.com/dipesh-parmar-portfolio.html#portfolio">RHONDA SCHALLER GALLERY</a><br /></p> <p><a href="http://www.saatchi-gallery.co.uk/meetothers1/artist/details.php?id=168">SAATCHI ART</a><br /></p> <p><a href="http://www.theartsource.org/art_gallery.php?artist_id=147&art_id=545">THE ART SOURCE</a><br /></p> <p><a href="http://www.abstractearth.com/artist_bio.asp?artist_id=132">ABSTRACT EARTH</a><br /></p> <p><a href="http://www.artuk.com/artists/gallery.php?id=dipeshparmar&gallery_id=304">ART UK</a><br /></p> <p><a href="https://londonart.co.uk/sales/view_art.asp?artistID=1540">LONDON ART</a><br /></p> <p><a href="http://www.artshole.co.uk/">ARTSHOLE</a><br /></p> <p><a href="http://www.phoenixarts.org/">PHOENIX ARTS</a><br /></p> <p><a href="http://www.aoh.org.uk/2008/">BRIGHTON OPEN HOUSES</a><br /></p> <p><a href="http://starchild-art.blogspot.com/">STARCHILD</a><br /></p> <p><a href="http://www.meganolson.com/">MEGAN OLSON</a><br /></p> <p><a href="http://stuarthaden.co.uk/">STUART HADEN</a><br /></p> <p class="greek"></p> </div> <div id="contentright"> <pre></pre></div> <br clear="all" /> </div> </body> </html> CSS: body { text-align:center; } #frame { width:802px; margin-right:auto; margin-left:auto; margin-top:10px; padding:0px; text-align:left; } #contentleft { width:1px; padding:0px; float:left; background:#fff; } #contentcenter { width:800px; padding:0px; float:left; background:#fff; text-align: left; font-size:12px; color: #666600; font-family: tahoma; font-weight: normal; } #contentcenter a {float: left; color: #666600} /*to help links page*/ #contentcenter ul {float: left} #contentcenter a:hover {float: left; color: #99cc00} #contentright { width:1px; padding:0px;* float:left; background:#fff; } #contentheader { background:#fff } p,h1,pre { margin:0px 10px 10px 10px; font-size:12px; color: #666600; font-family: tahoma; font-weight: normal; } h1 { font-size:12px; font-color: #c8c8c8; font-family: tahoma; font-weight: normal; } #contentheader h1 { font-size:24px; padding-top:10px; margin:0px; font-family: tahoma; color: #ff0066; font-weight: normal; } #contentright p { font-size:10px; } ul { width : 800px; padding : 0; margin : 0; list-style-type : none; position : relative; margin-bottom : 20px; float: right; display:inline; } a { float : right; text-decoration : none; padding : 0.1em 0.1em; padding-left : 1.5em; font-weight : normal; color : #c0c0c0; background-color : #fff; font-family : tahoma; font-size : 12px; position : relative; letter-spacing : 0.1em; } a:hover{color: #ff6600} li {float: right; display:inline;} div.float { float : left; width : 175px; padding : 8px; border-width : 1px; border-color : gray; } div.singular { float : left; padding-bottom : 10px; border-color : gray; border-width : 1px; } #footer {font-size:10px; font-color: gray; font-family: tahoma; font-weight: normal; float: left}

Here's the html and css files, hope this helps.

The sites not live, its just the start of an experiment i'm working on.

I'm experimenting with a horizontal drop-down menu with a javascript slideshow. Everything works, except that the slideshow is positioned directly after the menu to the right side of it, rather than underneath. Whatever i try fails so far, any help? Below is the main elements of the html, along with the css file for the layout, the other css files are for the menu, hope this is all you need: HTML <link href="css/dropdown/dropdown.css" media="all" rel="stylesheet" type="text/css" /> <link href="css/dropdown/themes/nvidia.com/default.advanced.css" media="all" rel="stylesheet" type="text/css" /> <!--[if lt IE 7]> <script type="text/javascript" src="js/jquery/jquery.js"></script> <script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script> <![endif]--> <head> <script type="text/javascript"> <!-- var image1=new Image() image1.src="/one.jpg" var image2=new Image() image2.src="two.jpg" var image3=new Image() image3.src="three.jpg" var image4=new Image() image4.src="four.jpg" var image5=new Image() image5.src="five.jpg" var image6=new Image() image6.src="six.jpg" //--> </script> </head> <body> <h1><img src="/header.png" alt="Doris Mackenzie" /> </h1> <ul class="dropdown dropdown-horizontal"> <li><a href="./" class="dir">Introduction</a> <ul> <li><a href="./">About Me</a></li> <li><a href="./">Biography</a></li> </ul> <li><a href="./" class="dir">Portfolio</a> <ul> <li><a href="./">Portrait</a></li> <li><a href="./">Landscape</a></li> <li><a href="./">Destination</a></li> </ul> </li> <li><a href="./" class="dir">Film</a> <ul> <li><a href="./">Upcoming</a></li> </ul> </li> <li><a href="./" class="dir">TV</a> <ul> <li><a href="./">BBC</a></li> <li><a href="./">Channel4</a></li> </ul> </li> <li><a href="./" class="dir">Links</a> <ul> <li><a href="./">?</a></li> <li><a href="./">?</a></li> <li><a href="./">?</a></li> </ul> </li> </li> <li><a href="./">Contact</a></li> </ul> <img src="six.jpg" name="slide" width="800" height="533" /> <script> <!-- //variable that will increment through the images var step=1 function slideit(){ //if browser does not support the image object, exit. if (!document.images) return document.images.slide.src=eval("image"+step+".src") if (step<3) step++ else step=1 //call function "slideit()" every 2.5 seconds setTimeout("slideit()",2500) } slideit() //--> </script> </body> </html> Helper.css * { margin: 0; padding: 0; } body { margin-bottom: 0.5em; margin-top: 0.5em; padding: 5px; background: #333300; color: gray; font: 14px/normal Tahoma, Arial, Helvetica, sans-serif; } h1 { margin-bottom: 0.5em; margin-top: 0.5em; font-family: Arial, Helvetica, sans-serif; font-weight: normal; text-indent: 5px; letter-spacing: -1px; } cite { float: right; } ul.classic { list-style: disc; margin-bottom: 0.5em; } div.section { clear: both; padding-top: 20px; } .table1 { float: right; margin-bottom: 2em; border: solid 1px #eee; } .table1 caption { color: #fff; text-align: center; padding-bottom: 5px; } .table1 th, .table1 td { padding: 7px; } .table1 th, .table1 thead td { background-color: lightyellow; color: #000; } .table1 tbody td { background-color: #fff; color: #000; } .table1 tbody th { text-align: right; } #wmfg { clear: both; float: left; }

I'm a newbie, learning html and css. I'm creating a art site for a friend and come unstuck with the thumbnails page. The problem is that i want to create 2 rows of 4 thumbnails, in the example below i have used 6 images but the fourth image goes onto the second row and is shown as the sixth image, rather than being on the first row as the fourth image! I dont know what i am doing wrong, any ideas anyone? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>Starchild Work</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="description" content="Description" /> <meta name="keywords" content="Keywords" /> <meta name="author" content="Starchild" /> <style type="text/css" media="all">@import "css/master.css";</style> </head> <body> <div id="page-container"> <div id="main-nav"> <div id="altnav"> <a href="index.html">HOME</a> <a href="introduction.html">INTRODUCTION</a> <a href="work.html">WORK</a> <a href="exhibitions.html">EXHIBITIONS</a> <a href="projects.html">PROJECTS</a> <a href="links.html">LINKS</a> <a href="contact.html">CONTACT</a><br/> <a href="frame.html">ON FRAME</a> <a href="canvas.html">ON CANVAS</a> <a href="paper.html">ON PAPER</a> <a href="board.html">ON BOARD</a> </div> <div id="header"> <h1><img src="starchild.jpg" width="263" height="71" /></h1> </div> <div id="content"> <div class="img"><a target="_blank" href="americaeatsitsyoung175.html"><img src="Images/on board/America Eats its Young175.jpg" alt="America Eats Its Young" width="175" height="175" vspace="53" margin="20"<a/> </div> <div class="img"><a target="_blank" href="hatecandy.html"><img src="Images/on board/Hate Candy175.jpg" alt="Hate Candy" width="175" height="175" vspace="40"<a/> </div> <div class="img"><a target="_blank" href="happyendingmachine.html"><img src="Images/on board/Happy Ending Machine175.jpg" alt="Happy Ending Machine" width="175" height="175" vspace="40"<a/> </div> <div class="img"><a target="_blank" href="heavypetting.html"><img src="Images/on board/heavy petting175.jpg" alt="Heavy Petting" width="175" height="175" vspace="40"<a/> <div class="img"><a target="_blank" href="iglom.html"><img src="Images/on board/I GLOM175.jpg" alt="I Glom" width="175" height="175" vspace="40"<a/> <div class="img"><a target="_blank" href="lightsoutbaby.html"><img src="Images/on board/Lights Out Baby!175.jpg" alt="Lights Out Baby!" width="175" height="175" vspace="40"<a/> </div> <div id="footer"></div> </div> </div> </body> </html>