|
HTML - Problem With A Scrolling List Not Linking Properly
Last week I decided to build my first site to get a better idea of how it is done. I found the code for a scrolling list in an old design I had from years ago. I cut the code out and placed it into a new template I am editing. It'll work, but there's two problems. I've spent about 6 hours searching for solutions or whole new code to use but it seems like there isn't much use for a scrolling list any more.
Problem One: There doesn't seem to be any way to "execute" the selection on the list. I've placed the code below. I can scroll down the list - click on, say, Game 2, but it doesn't link anywhere. How would I either add a button that says "Go" and sends the user to the desired game url or have them simply click the title and link there? Problem Two: For some reason it displays completely differently in Firefox, Safari and IE. Not just a subtle difference: http://www.myimgs.net/images/zgds.jpg (Firefox) http://www.myimgs.net/images/aymd.jpg (IE) http://www.myimgs.net/images/dcqk.jpg (Safari) How would I make it display a little more uniformly across all browsers? I tried changing the values below but I don't see any difference at all. I'd rather it looked like the Safari version. --- <td valign="top" width="300" align="right"> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top" rowspan="2"><form> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <select name="highlight" multiple class="inputs3"> <option><game.html="#">Game 1</a></option> <option><game.html="#">Game 2</a></option> <option><game.html="#">Game 3</a></option> </select></td> </tr> </table> </form></td> </tr> </table> </td> </tr> </table> </td> <td width="1" height="80%" bgcolor="#CBCBCB"><img src="images/dot.gif" width="1" height="1" alt="" border="0"></td> </tr> Similar TutorialsIs it possible to choose an image from a drop down menu which would change an image on the page? for example using mouseover you can make thumbnail images or hyperlinks when hovered over, change an image on the page to the image that the link or thumbnail represents. can the same be done with a drop down list when an image number is chosen from a list can a centre image be linked with the choice chosen? I've got three drop-down lists in a navbar that displays properly in IE but not in Firefox or Sea Monkey. I can't figure out what I'm doing wrong. The lists under "Historic District" and "Take Action" are fine, but the two items under "Blog" don't show up in FF or SM. The "Blog" links are external. Would that matter to FF and SM? The WC3 turned up the likely error, but when I added and/or removed a ul and/or li tag, I got strange results and was unable to fix the problem. If someone can explain what I should do and why I'd appreciate it. WC3 flagged the <ul> tag after <li><a href="http://west80s.blogspot.com/">Blog</a></li> because: "document type does not allow element "UL" here; assuming missing "LI" start-tag" Here's the site: http://west80s.org/ Here's the code: Code: <ul class="NavHoriz-menu">
<li class="first"><a href="index.htm">Home</a></li>
<li>
<a href="http://">Historic District</a>
<ul>
<li class="first"><a href="Historic-District.htm">Proposed District</a></li>
<li><a href="letters-index.htm">Support the Historic District</a></li>
<li><a href="GB-pix.htm">Gilbert Brownstones</a></li>
<li><a href="WestPark.htm">West Park Church</a></li>
<li><a href="330-W-86-St.htm">330 W 86th St</a></li>
</ul>
</li>
<li><a href="http://west80s.blogspot.com/">Breaking News</a></li>
<li><a href="http://">Take Action</a>
<ul>
<li class="first"><a href="hydrofracking.htm">Hydrofracking</a></li>
<li><a href="letters-index.htm">Support the Historic District</a></li>
</ul>
<li><a href="MembershipForm.htm">Join</a></li>
<li><a href="mailto:info@west80s.org">Contact Us</a></li>
<li><a href="http://west80s.blogspot.com/">Blog</a></li>
<ul>
<li class="first">
<a href="http://west80s.blogspot.com/2011/07/please-help-us-wipe-out-graffiti-this.html">Graffitti Removal</a></li>
<li><a href="http://west80s.blogspot.com/2011/07/weve-adopted-tree.html">Beautificaiton</a></li>
</ul>
</li>
</ul>
Thanks for any help. Ellen This might belong in the CSS forum? I'm trying to link to the "Legislation" tab from the footer links. All of this content is on one page and i can't seem to link to it. I tried adding an anchor to Legislation but that didn't work. there must be a way. The page is built using Spry in Dreamweaver CS3. thanks for your help http://www.dynamitedave.com/rsc/index.shtml I am very new to HTML coding, so please be patient. My problem is this: I made a relative link via an Anchor tag to a .zip file, intending it (the .zip file) to be a download. When I access the link, instead getting a File Download alert box ( [run][save][cancel] ,which is what I wanted) the contents of the .zip file are displayed in the IE7 window. Is this normal? When I make the same link to an .exe file, I get the (desired) File Download alert box. Here is the snippet of my relative Link: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <span class="button2" title="Download Utility Launcher"> <a class="style3" href="stuff/Utility Launcher.zip">Download Now</a></span> Again, I'm new to this stuff, so the Link setup could be all wrong, for all I know. But I would appreciate some help and/or comment. Thanks, JFB Hi! Please help! I created a small website for a friend and I am having issues with the navigation links and I cant resolve it myself.. So i do have 6 links (home, services,menu,gallery,contact and testimonials and I linked the pages and it works. The Problem is ,she wants have this website in her native language too. I created two flag icons and copied all the files . Unfortunately when I linked those pages it doesnt work. so i linked the flag icon to index.html in the other language and this only works but when i linked index to services etc..it doesnt... Does anyone knows what might be the issue?? thanks in advance ps..sorry for my explanationi know its a little bit confusing...english is not my first language Please help. Hi, I'm making a website for my clan and I was hoping that someone here could help me with a problem. The test site is: http://deltagaming.org/matt/testweb/ As you can see the bottom seems to cut out with no scroll bars to help out. I tried adding an overflow command to the css styles sheet but no dice. I also added it to the template file too and still nothing. I couldn't post the main index here because its too big but my style sheet fit + you can view it through my website using a page source. Any help would be greatly appreciated. Code: /***********************************************/
/* HTML tag styles */
/***********************************************/
{
overflow: scroll
}
body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
}
a:link, a:visited, a:hover {
color: #006699;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* overrides decoration from previous rule for hovered links */
h1, h2, h3, h4, h5, h6 {
font-family: Arial,sans-serif;
margin: 0px;
padding: 0px;
}
h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #334d55;
}
h2{
font-size: 114%;
color: #006699;
}
h3{
font-size: 100%;
color: #334d55;
}
h4{
font-size: 100%;
font-weight: normal;
color: #333333;
}
h5{
font-size: 100%;
color: #334d55;
}
.style4 {
font-size: small;
color: #000000;
font-weight: bold;
ul{
list-style-type: square;
}
ul ul{
list-style-type: disc;
}
ul ul ul{
list-style-type: none;
}
label{
font: bold 100% Arial,sans-serif;
color: #FFFFFF;
}
/***********************************************/
/* Layout Divs */
/***********************************************/
{
overflow: scroll
}
#masthead{
margin: 0;
padding: 10px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}
#navBar{
margin: 0 79% 0 0;
padding: 0px;
background-color: none;
border-right: 0px solid #ccc;
border-bottom: 0px solid #ccc;
}
#content{
float:right;
width: 75%;
margin: 0;
padding: 0 3% 0 0;
}
/***********************************************/
/*Component Divs */
/***********************************************/
#siteName{
margin: 0px;
padding: 0px 0px 10px 10px;
}
/*************** #pageName styles **************/
#pageName{
padding: 0px 0px 10px 10px;
}
/************* #globalNav styles **************/
{
overflow: scroll
}
#globalNav{
color: #cccccc;
padding: 0px 0px 0px 10px;
white-space: nowrap;
}
/* 'nowrap' prevents links from line-wrapping if there are too many to fit in one line
this will force a horizontal scrollbar if there isn't enough room for all links
remove rule or change value to 'normal' if you want the links to line-wrap */
#globalNav img{
display: block;
}
#globalNav a {
font-size: 90%;
padding: 0px 4px 0px 0px;
}
/************* #breadCrumb styles *************/
#breadCrumb{
font-size: 80%;
padding: 5px 0px 5px 10px;
}
/************** .feature styles ***************/
.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
}
.feature h3{
padding: 30px 0px 5px 0px;
text-align: center;
}
.feature img{
float: left;
padding: 0px 10px 0px 0px;
margin: 0 5px 5px 0;
}
/* adjust margins to change separation between the feature image and text flowing around it */
/************** .story styles *****************/
.story{
clear: both;
padding: 10px 0px 0px 10px;
font-size: 80%;
}
.story p{
padding: 0px 0px 10px 0px;
}
p
{
overflow: scroll
}
/************* #siteInfo styles ***************/
#siteInfo{
clear: both;
border: 1px solid #cccccc;
font-size: 75%;
color: #cccccc;
padding: 10px 10px 10px 10px;
margin-top: 0px;
}
/* negative top margin pulls siteinfo up so its top border overlaps (and thus lines up with)
the bottom border of the navBar in cases where they "touch" */
#siteInfo img{
padding: 4px 4px 4px 0px;
vertical-align: middle;
}
/************* #search styles ***************/
#search{
padding: 5px 0px 5px 10px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}
#search form{
margin: 0px;
padding: 0px;
}
#search label{
display: block;
margin: 0px;
padding: 0px;
}
/*********** #navBar link styles ***********/
#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}
/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}
/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}
/*********** #sectionLinks styles ***********/
#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}
#sectionLinks h3{
padding: 10px 0px 2px 10px;
}
#sectionLinks a:link{
padding: 2px 0px 2px 10px;
border-top: 1px solid #cccccc;
width: 100%;
voice-family: "\"}\"";
voice-family:inherit;
width: auto;
}
#sectionLinks a:visited{
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;
}
#sectionLinks a:hover{
border-top: 1px solid #cccccc;
background-color: #dddddd;
padding: 2px 0px 2px 10px;
}
/*********** .relatedLinks styles ***********/
.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 90%;
}
.relatedLinks h3{
padding: 10px 0px 2px 0px;
}
/************** #advert styles **************/
#advert{
padding: 10px 0px 0px 10px;
font-size: 80%;
border-top: 1px solid #cccccc;
}
#advert img{
display: block;
}
/************** #headlines styles **************/
#headlines{
margin: 0px;
padding: 10px 0px 20px 10px;
font-size: 80%;
}
#headlines p{
padding: 5px 0px 5px 0px;
}
Hello, I have a demonstration site set up at: http://www.sikhfaith.com/demo The site works perfectly in Firefox 2.0. However, in Internet Explorer 7.0, there's a huge blank space on the right side of the page which causes IE to display a horizontal scrollbar. I haven't been able to pinpoint what is causing this. Any help would be appreciated. Thank you. I am making a website with a list inside list for my navigation bar. It looks good on safari(win/mac) and firefox but the list looks horrible in IE7.0(didnt check 6.0) I was wondering if anyone know what it could be HTML Code: Code: <div id="nav"> <img class="menupic" src="images/mainmenu.png" alt="Main Menu"/> <ul class="navli"> <li><a class="point" href="#"><img src="images/menu_findme.png" alt="findMe"/></a></li> <li> <ul class="navlinks"> <li><a href="#goto_facebook" id="facebook">- Facebook</a></li> <li><a href="#goto_myspace" id="myspace">- Myspace</a></li> <li><a href="#goto_youtube" id="youtube">- Youtube</a></li> </ul> </li> </ul> <ul class="navli"> <li><a class="point" href="#"><img src="images/menu_blog.png" alt="blog"/></a></li> <li> <ul class="navlinks"> <li><a href="#blogid2" id="blogid2">- Testing | May 01</a></li> <li><a href="#blogid1" id="blogid1">- Debut Album | Apr 30</a></li> <li><a href="#goto_blogarchive" id="blogarchive">- Archives</a></li> <li class="donthidethis"><ul class="navli donthidethiseither" style="padding:0;"> <li><a class="point" href="#">- Categories</a></li> <li><ul class="navlinks"> <li><a href="#goto_catid2" id="catid2">- Media</a></li><li><a href="#goto_catid1" id="catid1">- News</a></li><li><a href="#goto_catid3" id="catid3">- Off Topic</a></li><li><a href="#goto_catid4" id="catid4">- Tutorials</a></li> </ul></li> </ul></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_eliasmusictv.png" alt="eliasMusic Tv"/></a></li> <li><ul class="navlinks"> <li><a href="#" id="coming">- Coming soon...</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_about.png" alt="about"/></a></li> <li><ul class="navlinks"> <li><a href="#goto_biography" id="biography">- biography</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_links.png" alt="links"/></a></li> <li><ul class="navlinks"> <li><a href="#" id="links">- Coming soon...</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_contact.png" alt="contact"/></a></li> <li><ul class="navlinks"> <li><a href="#goto_contact" id="contactpage">contactForm</a></li> </ul></li> </ul> CSS Code: Code: #nav { float:right; width:195px; padding-left:20px; background:url("images/navback.png"); } #nav ul { list-style: none; margin-left:1px; border: none; } #nav .navli { padding-top:3px; padding-bottom:3px; } #nav .navlinks { padding-left:25px; } #nav .navlinks a,a:link { color:#262626; } #nav .navli img { margin-top:5px; margin-bottom:5px; } #nav .navlinks a:hover { color:#dadada; } #nav img.menupic { margin:20px 10px 5px 95px; } #nav a { font-size:14px; display:block; } #nav a.point { font-size:14px; font-weight:bold; } .navliover { background:url("images/navhover.jpg"); }
Any help at all would be appriciated please I can show u the website via Private message if you are interested in helping Thanks in advance Reply With Quote Hey, I'm trying to set something so simple as the TD width for 1 specific column, but it will NOT listen to me! http://www.unreal-deals.com/ebook/ad...i-showdata.php I've set the td width on the second column Item_Name to be 5000px, just to see if it would work. It does nothing. No matter if I set the table width to 100% or 300%, setting the TD width does not affect that TD... What am I missing here? Thanks Hello...I posted a question about this before but it doesn't seem to have caught anyone's eye so I thought I'd try again: http://www.trekandromeda.com/index/news.html http://www.trekandromeda.com/index/home.css I've got this site cross-browser compatible in Firefox, IE7, and Safari and was about ready to put it up for viewing when I discovered that Opera (which I have to consider because some of my community members use it) is reading the lists slightly bizarrely -- if you look at the page above you'll notice that the date/title things are offset oddly from the blue image in a way that they are not in either Firefox or IE. Does anyone know why this is, and if so, does anyone know how to fix it? I really need to get this working soon, and it's the only problem I have left to solve. I got a problem with the list I pasted below. I would like to get rid of the space between the last </dd> and the opening of the <ol> tag. Is their any other way I can do this so I don't have the space between the 2 elements? <dl> <dt>CHAPTER 1:Why HTML Rocks!</dt> <dd>Coding isn't for pussies</dd> <dd>What do you need to know</dd> <dd>Common Mistakes</dd> <ol> <li>Eat</li> <li>Sleep</li> <li>Huh?</li> </ol> </dl> Thanks Hi everyone I am new to these forums and I am having trouble with ordered lists on one of the article on my site: http://boostplace.com/automotives/fitting-a-motorcycle-helmet/ If you look at the list it goes from 1 to 9 then resets to zero. Please can someone help me with this? I am using wordpress 3.2.1 as my cms P.S. I didn't want to link the article properly as this is my first post. Sorry about having to copy an paste. Thanks I recently posted this in the middle of someone else's thread, which wasn't the best thing to do, so here it is again in its own thread. On my web site I have a drop-down menu with a "Go" button beside it. when JavaScript is enabled in Firefox and IE7, selecting an option from the list automatically takes you to that location without touching the Go button. However, when JavaScript is disabled, the drop-down's automatic redirection is also disabled. So you need a "Go" button next to the drop-down bar. This works in Firefox, but it doesn't work in IE7, and I don't know why. Any help would be gratefully received. You can see the drop-down working at: http://www.historyfiles.co.uk/MainFeaturesIndex.htm Here's the script: <table border="0" cellpadding="0" cellspacing="0"> <form method="get" action="" tabindex="3" target="_top"> <tbody> <tr> <td height="16"> <select name="link" class="xbar" onchange="if (this.options[selectedIndex].value != '') location.href=this.options[selectedIndex].value"> <option value="#"> Choose a topic </option> <option value="MainFeaturesIndex.htm"> British Isles </option> </select> <input value="Go" src="images/nav-gobutton.jpg" border="0" value="Go" alt="Go" type="image" class="xGo" tabindex="4" onclick="if (this.options[selectedIndex].value != '') location.href=this.options[selectedIndex].value" width="22" height="16"> </td> </tr> </tbody></form> </table> How come when ever I had a num/bullet list and the lines break, it shows up like this: This is a test this is a test this is a test thiestThis is a test this is a test this is a test this is a test this is a test thiestThis is a test this is a test this is a test t 1. hiestThisis a test this is a test this is a test thiest. The # 1. Should be before the first line Always... This is driving me crazy... I am using sharepoint designer, and it looks fine there, but when I load it in a browser, it shows up like it does above... Hey, I've got this problem involving a list in IE. I've basically made a LI within another LI like so:- Code: <ul class="mainNav">
<li><a href="/index.php?frc=1" class="first">Home</a></li>
<li><a href="/GamePortal.php">Games</a></li>
<li class="headlink"><a href="/edit_profile.php">My Profile</a>
<ul>
<li><a href="/edit_profile.php">Game Profile</a></li>
<li><a href="/link.php">Community Profile</a></li>
</ul>
</li>
<li><a href="/promotions.php">Promotions</a></li>
</ul>
This generates a sort of list underneith a list to be used as a dropdown menu. I've assigned it some CSS to do this Code: .mainNav li.headlink ul {
list-style: none;
display: none;
float: none;
margin: 0px;
position: absolute;
top: 35px;
z-index: 100;
min-width: 72px;
text-align: center;
padding: 5px;
}
What happens is that when using FF the content displays perfect (no suprises there) but when I use IE for the same page, it moves the drop down list to the end of the item above on it's x axis (the y is fine). I've tried all sorts of different things; I used relative which worked but then expanded the LI item above it shifting everything along in the line. So it has to be absolute positioned to stop that from happening. I've messed about with every single margin I can think of to no avail. Any Ideas. Hi there, i'm in the middle of setting up a shopping cart and have a little problem! I'm laying out the privacy page, and when I select numbered list for the formatting of some Terms and conditions, the numbers that run onto 2 lines are not indenting like the line above it. So the first line is indented with the number and the bottom line is aligned to the left. It looks untidy. It appears fine in dreamweaver but not when I upload to server. I'm sure there is a simple explanation for this, here is the address: http://www.thinking-forward.co.uk/privacy.cfm Hey there, I'm new to the forums, and never really asked for help on a site before, but I'm stuck. Basically, i have a client that needs an automated way to send forms for bookings online. So far, i have created a basic HTML page that the client can import > as text in Outlook and the html gets placed into the Email. This works fine, as the user can fill out the form and reply back to us. The problem happens when i add the following code: Code: <select name="accomodation">
<option value="" selected="selected">Please Select</option>
<option value=""> -------------------------- </option>
<option value="32">1 Bedroom Studio</option>
<option value="41">1 Bedroom Spa</option>
<option value="48">1 Bedroom Deluxe Spa</option>
<option value="39">2 Bedroom Spa</option>
<option value="42">2 Bedroom Deluxe Spa</option>
<option value="45">3 Bedroom</option>
<option value="46">Houses / Cottage</option>
</select>
Now this code works when originally inserted into the email, i can make a selection and email it away, and the selection stays and is visible when opened. But once the email is sent, any further changes (a reply back, forward etc.) will break the drop down and just splatter the list in my table. Is there any way to correct this? any other option of code i could use or a setting i can use to stop the break? Help would be greatly appreciated. Thanking you, Evan. I am an HTML n00b and don't understand why this simple example is not working as I would like. I want 2 levels of indentation for list items and then I want the next line to be back at the zero margin. However, the last line is coming out indented as far as the previous list item as though the browser is remembering the margin settings for that item. How do I get the last line back to the zero margin? Code: <html>
<head>
<style>
<!--
p.Standard
{margin-top:0cm;
margin-right:0cm;
margin-bottom:0cm;
margin-left:0cm;
line-height:128%;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
li.Level1
{margin-top:0cm;
margin-right:0cm;
margin-bottom:0cm;
margin-left:0cm;
line-height:128%;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
li.Level2
{margin-top:0cm;
margin-right:0cm;
margin-bottom:0cm;
margin-left:1cm;
line-height:128%;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
-->
</style>
</head>
<body lang=EN-AU link=blue vlink=blue style='tab-interval:36.0pt'>
<li class=Level1>This is a list item</li>
<li class=Level2>This is indented</li>
<p class=Standard>I want this back with zero margin</p>
</body>
</html>
|
|||||||