|
HTML - Ordered Navbar List Doesn't Display Properly In Firefox
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 Similar TutorialsThe title says it all, my site just doesn't properly work in safari. heres the link www.royaltee-design.com help would really be appreciated thanks Good day, I have a test page for a website I'm currently working on, there's a video player on it that shows itself on internet explore but doesn't actually play the videos and on Safari or Firefox it doesn't even show itself. The webpage is located at: http://viloda.com/videoindex_portfolio_rtvnh.html and I think there's something wrong with the HTML. There's probably something wrong or/and missing but I really can't find what. The Video Player works perfectly fine locally, so the player made in Flash can't be the problem, I think it has to be code. So I was wondering if perhaps one of you could help, thanks for reading this over. 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 Hello, I am trying to generate customize numbering style for HTML ordered list like below: 1. Item no 1 2. Item no 2 a) sub item 1 b) sub item 2 (i) level no 3 (ii) level no 4 Is it possible (through css may be) to generate bullet numbers in Parenthesis? any sample code? Thanks. Hi, Is there any way such that i can use ordered list to number the rows of a table?? Nikhil Hi there, I'm new to this forum; got here researching the best method to do a task in HTML dealing with ordered lists. Basically I'm trying to figure out the best method to have the word "Step" precede the number in an ordered list, so that <ol> <li>first line of text</li> <li>next line of text</li> <li>last line of text</li> </ol> would return Step 1. first line of text Step 2. next line of text Step 3. last line of text I know how to do this using background images with CSS, but that isn't ideal because any formatting changes to the text would require making a new gif or jpg for the word "step." Does anyone know how to do this? Thanks for your help! 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> I'm trying to design a website for my self and I have a problem. My default browser is Safari so I didn't notice the problem till now. I designed the site layout in photoshop and the site in dreamweaver and it works fine in IE and Safari but in Firefox the site layout gets split at the top of the page and you can see the background in a line. Now the layout has two CSS styles for content in the middle and sidebar on the left both have background color that matches the design #333 and #646464. These are noticeable in the split. The site is sv-photography.net Any one got any ideas on how to fix this? SebastjanV I created a template with photoshop and saved into 1024 x 768 and worked it with front page. when i opened it in firefox the site is apearing at the left side of the window even if i edited in front page to be shown in the middle.In explorer it works just fine. ANy ideas please? Hi, I've just finished creating the layout for my website. I was just wondering if anyone could tell me why my text does not fit in the boxes that I have created using layers while in Internet Explorer it seems to work fine. Here is the link: http://www.geocities.com/seto.chaos/ And here is the code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Welcome to Gameplatforms</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
<!--
body {
margin-top: 0px;
margin-bottom: 0px;
}
-->
</style></head>
<body bgcolor="black" body link="yellow" vlink="purple" alink="red">
<div id="Layer5" style="position:absolute; background-color:#666666; left:10px; top:176px; width:211px; height:667px; z-index:5"><font size="2" face="Arial" color="Yellow">
</font>
<div id="Layer4" style="position:absolute; background-color:#999999; left:15px; top:100px; width:185px; height:48px; z-index:4">
<div id="Layer4" style="position:absolute; left:31px; top:6px; width:86px; height:36px; z-index:4">
<p><font color="Yellow" size="6" face="Arial"><font color="Yellow"></font>
<a href="Reviews%20Page.htm">Reviews</a></font> </font></p>
</div>
<p><font color="Yellow" size="2" face="Arial"><br>
<br>
</font></p>
</div>
<div id="Layer4" style="position:absolute; background-color:#999999; left:15px; top:170px; width:185px; height:48px; z-index:4">
<div id="Layer4" style="position:absolute; left:44px; top:6px; width:86px; height:36px; z-index:4">
<p><font color="Yellow" size="6" face="Arial"><font color="Yellow"></font><a href="http://gameplatforms.proboards62.com">Forum</a></font> </p> </div>
<p><font color="Yellow" size="2" face="Arial"><br>
<br>
</font></p>
</div>
<div id="Layer4" style="position:absolute; background-color:#999999; left:15px; top:240px; width:185px; height:48px; z-index:4">
<div id="Layer4" style="position:absolute; left:44px; top:6px; width:86px; height:36px; z-index:4">
<p><font color="Yellow" size="6" face="Arial"><a href="Videos%20Page.htm">Videos</a></font></p>
</div>
<p><font color="Yellow" size="2" face="Arial"><br>
<br>
</font></p>
</div>
<font size="2" face="Arial" color="Yellow">
<div id="Layer4" style="position:absolute; background-color:#999999; left:15px; top:31px; width:185px; height:48px; z-index:4">
<div id="Layer4" style="position:absolute; left:50px; top:7px; width:86px; height:36px; z-index:4">
<p><font color="Yellow" size="6" face="Arial"><a href="News%20Page.htm"> News</a></font></p>
</div>
<p><br>
<font color="Yellow" size="4" face="Arial"><br>
</font></p>
</div>
</font></div>
<font size="2" face="Arial" color="Yellow">
<div id="Layer4" style="position:absolute; left:144px; top:143px; width:5px; height:18px; z-index:4"><font color="Yellow" size="4" face="Arial">
<a href="News%20Page.htm">
News
</a></font></div>
<div id="Layer3" style="position:absolute; left:10px; top:141px; width:1108px; height:26px; background-color:#666666; z-index:3"><font size="2" face="Arial" color="Yellow">
<div id="Layer4" style="position:absolute; left:440px; top:2px; width:6px; height:16px; z-index:4"><font color="Yellow" size="4" face="Arial">
<a href="Reviews%20Page.htm"> Reviews </a></font></div>
</font>
<div id="Layer4" style="position:absolute; left:687px; top:2px; width:5px; height:18px; z-index:4"><font color="Yellow" size="4" face="Arial"><a href="http://gameplatforms.proboards62.com">Forum</a></font></div>
<font size="2" face="Arial" color="Yellow">
<div id="Layer4" style="position:absolute; left:916px; top:2px; width:5px; height:18px; z-index:4"><font color="Yellow" size="4" face="Arial">
<a href="Videos%20Page.htm"> Videos </a></font></div>
</font></div>
<div id="Layer1" style="position:absolute; left:10px; top:14px; width:1108px; height:884px; z-index:1">
<p> </p>
<p> </p>
<p> </p>
<p><br>
</p>
<p><br>
</p>
<div id="Layer3" style="position:absolute; left:0px; top:841px; width:1108px; height:40px; background-color:#666666; z-index:3"><font size="2" face="Arial" color="Yellow">
<div id="Layer4" style="position:absolute; background-color:#999999; left:9px; top:9px; width:1090px; height:24px; z-index:4">
<p><font color="Yellow" size="2" face="Arial">Contact us: <a href="mailto:kaibachaoschampion@gmail.com">Email:</a> <a href="mailto:kaibachaoschampion@gmail.com">kaibachaoschampion@gmail.com</a></font></p>
</div>
</font> </div>
<div id="Layer5" style="position:absolute; background-color:#666666; left:948px; top:162px; width:160px; height:667px; z-index:5"><a href="http://www.play-asia.com/SOap-23-83-19kw-49-en.html">
</a> <a href="http://www.play-asia.com/SOap-23-83-19kw-49-en.html"><img src="http://www.play-asia.com/paOS-32-74-z.html" border=0 alt="Play-Asia.com - Buy Video Games for Consoles and PC - From Japan, Korea and other Regions!" width="160" height="600"></a> </div>
<div id="Layer5" style="position:absolute; background-color:#666666; left:251px; top:162px; width:666px; height:667px; z-index:5">
<div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:110px; width:607px; height:87px; z-index:4">
<p><font size="2" face="Arial" color="Yellow">Text text text text text text text text text text text
</font></p>
</div>
<div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:210px; width:607px; height:72px; z-index:4">
<p><font color="Yellow" size="6" face="Arial">
Title</font></p>
</div>
<div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:290px; width:607px; height:153px; z-index:4">
<p><font color="Yellow" size="2" face="Arial">Text text text text text text text text text text text</font></p>
</div>
<div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:30px; width:607px; height:71px; z-index:4">
<p><font color="Yellow" size="6" face="Arial">Title</font></p>
</div>
<div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:450px; width:607px; height:72px; z-index:4">
<p><font color="Yellow" size="6" face="Arial">Title</font></p>
</div>
<div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:530px; width:607px; height:119px; z-index:4">
<p><font color="Yellow" size="2" face="Arial">Text text text text text text text text text text text text text </font></p>
</div>
<font size="2" face="Arial" color="Yellow"></font></div>
<p><br>
</p>
</div>
<div id="Layer2" style="position:absolute; left:162px; top:14px; width:667px; height:123px; z-index:2"><img src="http://i5.photobucket.com/albums/y157/kaibachaoschampion/Logo.png" width="800" height="125"></div>
</font>
</body>
</html>
Thanks I've been trying to get a design to work properly under Firefox for several days. Unfortunately because of ip issues I can't post any code. The basic problem is that I tell a table that I it to have height: 100% and it won't do it. Sometimes (not always) the table renders in such a way such that it is less than 100%. <table><tr><td><table class="gimme_some_height_already">...blah blah</table> Here's the annoying part. The problem is intermittent and goes away every time when I hit refresh under Firefox. Why should the page render differently just because I hit refresh? Also, when the table doesn't render properly, the links don't work. I have standard, nothing special <a> links inside the table. When the table is misrendered and I click on a link, instead of transferring to that page, the table just gets bigger! It's as if the table were in a very delicate state, and if someone touched or sneezed on it the whole page would move and rerender. Very strange. None of this happens under IE. I know that many people think that when IE and Firefox disagree that I ought to go with what Firefox says, but really hitting the refresh buttons shouldn't make the page look different. Does anyone know what is going on, and perhaps how I could go about fixing it? I've tried many variations, trial and error combinations and dirty tricks. I am using IE and for some reason PNG images specified using an <img> tag display blank. I know the files exist as there is no 'X' where the image is supposed to be but I can't see them. If I change to using a JPG then the images appear. My code is extremely simple and looks like: Code: <html><body><img src="images/test.png"></body></html> I have tried using width and height parameters but it only changes the size of the blank area. Does the <img> tag support PNG images? Is there some other reason why the images display blank? Hi there, I was wondering if someone could provide some help. I have designed/built a website, and for some reason - the "Flash" content doesn't always display in Internet Explorer 7+ Some pages do display the Flash, some pages dont. The website is www.shiftingsandsarabians.com.au Chrome, Safari & firefox all display correctly. It just seems to be Internet Explorer. The "Flash" content is displayed at the top on each page. Would appreciate any help. Thanks guys, -Brad Hei! I'm trying to create a table with three columns, first and last with one row each and middle with two rows. There's pictures in left, right and in the middle bottom cell. Here's the code: Code: <table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="16%" colspan="1" rowspan="2"><img src="kuvat/hat-right.jpg" border="0" width="100%" height="100%" alt="-------">
</td>
<td width="64%" align='center'><a href="index.php">Main page</a>
| <a href="aboutus.php">About Us</a> | <a
href="showprods.php?sizeToShow=All">Catalog</a>
| <a href="contacts.php">Contacts</a>
</td>
<td width="16%" colspan="1" rowspan="2"><img src="kuvat/hat-left.jpg" border="0" width="100%" height="100%" alt="----">
</td>
</tr>
<tr>
<td width="64%"><img src="kuvat/hat1.jpg" width="100%" height="100%" alt="---------"></td>
</tr>
</tbody>
</table>
It works like I want it to do in Firefox, looks ugly in Konqueror and not displayed in Internet Explorer 6. Where's the problem? Thanks in advance! I have a page on my web site that isn't displaying correctly. I've used the same template for all the pages - but for some reason this single page won't display correctly on foxfire, but fine on IE -- you can reach the page Here: I need the page to fit the screen display - but for some reason this page won't. I would be greatful for any help Thanks Hi all, Before I pour cold water onto Mozilla's FireFox to melt it's flames and kill it, I've a question : Quote: <!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> <title>Tables 14</title> </head> <body> <table border="1" width="80%"> <colgroup span="3" align="right" /> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </table> </body> </html> As you can see, there's 3 columns and I'm using <colgroup span..../> to mass-align the cells to the right. However, when I preview it in FireFox, there's no effect. In Internet Explorer, the cells are right-aligned(which is correct). I also tried doing the CSS equivalent, but FireFox still fails. When I tried changing some other settings, like : <colgroup span="3" style="background-color:red;" />, FireFox renders the code correctly. Seems that FireFox doesn't like to right-align text in columns, eh? Thanks! Xeon. I wrote the following stuff. In index2.html I referr to a css File: HTML Code: <link type="css/text" rel="stylesheet" href="styles.css" /> Now styles.css is in the same directory as index2.html. While Safari finds this styles.css and Firefox 2 does not. I have no idea what happens here. The formating should be correct. What's wrong? I am building a website in dreamweaver cs3. It displays normal in all browsers except an older version of IE (I think 6.0). I have read a bunch and have learned about float left and left margin problems with older IE versions. Nothing has helped so far. To make a long story short if you view http://whatwowart.com the right column where you sign up for newsletter etc. gets put under the whole page in older IE (I think 6.0). If someone could please help me I would really appreciate it. Thanks, John O Code can be seen at: http://whatwowart.com/code.html I have a wordpress blog in which on the single post page the container div is non-existent and the sidebar and footer go into the content div. The page displays fine in firefox it only has the problem in internet explorer. Any help would be greatly appreciated. Here is an example of the problem: http://purplemushroomreviews.com/gam...mption-review/ Never mind you guys were wrong as usual. Thanks. |
|||||||