|
HTML - Hyperlinks Not Displaying Properly In Ie
All, i have a minor problem with hyperlinks not displaying properly. In some instances, IE7 does not underline the hyperlink or only partly underlines the link. Please see http://www.tauntonflowershow.co.uk/ and look at the downloads yellow box at the top of the screen.
Firefox, Opera etc are all OK. Grateful for any advice you can offer. Similar TutorialsHi guys this is my first post here, hope you can help. I am currently designing a websitefor the company I work for and the first page is almost completed with the exception of a little glitch. When the page first loads there are a few elements that are in the wrong place. Then when the page is refreshed these elements go where they are supposed to be. I have looked through the html and the css and can't find any problem as to why this is happening. I would really appreciate any suggestions as to why this is happening or how to fix it. If you need anything else just let me know and I'll post it. Thank you As you can see here Here is what it should look like but only does after hitting refresh Hi everyone! On a site I am making there's a table which -- only in the IE-s including version 7 -- is not properly displayed: the column containing the text is only approx. half filled in width. Most (not to say all) other browsers get this right... Anyone got an idea, why this could be? Thx and best, T Hi. I have a question regarding my site. If you click on the link using IE you will see that the images in my tables are cut off on the right, and haven't been scaled at all... In Google Chrome they appear fine. Here is the HTML code snippet: Code: <table>
<tbody>
-snip-
<table>
<tr>
<td>
<div class="large">
<a href="http://picasaweb.google.com/lh/photo/QnqiMcSvmlR_osQplmz-Iw?authkey=Gv1sRgCNbCzI295-KBIg&feat=directlink" target="_blank">
<img class="large" src="http://lh3.ggpht.com/_lPPWxJaDX_0/S1tmkLXjmBI/AAAAAAAAAVA/782xI-SkNVQ/s640/step1-2.jpg" alt="CashCrate offers page." title="CashCrate offers page.">
</img>
</a>
</div>
</td>
</tr>
</table>
-snip-
</tbody>
</table>
And here is some css code: Code: div.large {
width: 100%;
height: 200px;
border: none;
margin-top:6px;
margin-bottom:6px;
overflow: auto;
}
img.large {
width: 98%;
height-max: 600px;
padding: 2px;
border: ridge;
border-color: #66E066;
}
I'm wanting to know what I need to add/change to make the images appear right in all browsers(I've only tested in IE and Chrome). If you need any more info about my page, ask . Thanks. Hi, I'm new to HTML. I have not yet started using CSS. I'm just using basic html. I'm having problem creating a nested table as shown in the attachment without using CSS style sheets. I appreciate anyone's suggestions in this. I pasted the code that tried below. <h3> 5) - Nested Table </h3> <table align="left" width="350" bgcolor="#ffff00" border="1"> <tr height="75" align="left"> <td height="100" > </td> <td height="75"> test2 </td> <td height="75"> </td> </tr> <clear="left" /> <tr> <td> <table align="left" bgcolor="f5f5dc" border="1"> <tr> <td width="100%" height="75"> a nested table </td> <td width="100%" height="75"> With this text at the top </td> </tr> <tr> <td width="100%" height="75"> </td> <td width="100%" height="75"> </td> </tr> </table> </td> </tr> <tr height="75" align="left"> <td></td> <td></td> <td></td> </tr> </table> Thanks in advance Hello Gurus, I have a HTML webpage index.html and the expecation is that when user selects from drop drown opton it needs to display a webpage in the iframe underneath the option list. Below is the code snippet. From the code, you will see that it displays all www sites such as google.com, yahoo.com just fine without issues, however the local opel.html is not coming up at all. I am pasting the code of index.html as well as the page that i want to call i.e. opel.html. Pleaes help <!----------------------INDEX.HTML CODE STARTS HERE------------------> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Your Murrieta</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="default.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="header"> <div> <table> <h1><a href="#" Style="font-family:Edwardian Script ITC" color="White">Your Murrieta</a></h1> </table></div> <p>Showcase of Your World</p> </div> <!-- start page --> <div id="page"> <div id="pagebg"> <div id="content"> <div class="post"> <form action="" method="post"> <SELECT ONCHANGE="if (window.frames && window.frames.iframes) { window.frames.iframes.location.href = this.options[this.selectedIndex].value; }"> <OPTION VALUE="opel.html">My Home Page <OPTION VALUE="http://www.google.com">My Fmaily <OPTION VALUE="http://www.yahoo.com">My Hobbies <OPTION VALUE="http://www.rediff.com">My Friends </SELECT> <iframe id="theFrame" name="iframes" src="opel.html" align="top" height="1460" width="1760"></iframe> </form> </div> <!-- start content --> <!--aaa--> </div> </div> <!--content--> <!-- end content --> <!-- start sidebar --> <div style="clear: both;"> </div> <!-- end page --> <!-- start footer <!-- end footer --> </body> </html> <!--------------------OPEL.HTML CODE STARTS HERE-------------> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- start page --> <body> <table style="margin-left:0%"> <tr> <td> <!--First Panel --> <div style="font-size:9pt;font-family:Georgia; color:Navy; width:345px; background-image:url(images/gray-gradient.gif); background-repeat:repeat;">ERP</div> <div> <table cellspacing="0" cellpadding="15" width="345px" height="79px" bgcolor="#ffffff" align="left" style="background-image:url(images/cnsl.jpg); background-repeat:repeat;margin-right:1%;"> <tr align ="left" width="400px" > <td align ="left"> <ul class="link" type="none" style="font-size:8pt;font-family:Arial;"> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/erpoffering.html" id="l16">Offerings</a> </li> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/id145.html" id="l18">Request More Information</a> </li> </ul> </ul> </td> <td align ="left"> <ul class="link" type="none" style="font-size:8pt;font-family:Arial;"> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="mailto:sales@coexsys.com" id="l17">Email us</a> </li> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/id144.html" id="l18">Contact us</a> </li> </ul> </td> </tr> </table> </div> </td> </body> </html> I've spent almost a week designing, coding and uploading this site. Only to have it not display properly in firefox or safari. I've included a link to the site and several screenshots as well as the source code. Please help! This image shows it as it is int ie 7 on windows xp http://img.photobucket.com/albums/v6...asintended.jpg this image shows it on safari and fire fox: http://img.photobucket.com/albums/v6...art/safari.jpg website link: www.tavasystems.com Thanks in advance. It works great in Firefox, IE, and even on my iPhone (Safari), but it's having problems in Chrome and on my friend's Mac (Safari). I have a form with 2 tables inside. The first table is aligned left at 47% of the width. The second table is aligned right at 47% of the width. It should look like this: But instead looks like this in Chrome and Safari...it appears that it's centering both tables instead of aligning them left and right to give 2 separate columns. Any ideas? Here is some of my stripped down code: ----------------------------------- <div id="FormLayer" style="position:absolute; width:680px; height:455px; z-index:3; left: 65px; top: 330px; border:0"> <form action="form.php" method="post" name="orderform" id="orderform"> <input type="hidden" name="recipients" value="email.com"> <input type="hidden" name="required" value="actor:Actor's Name, email:Your Email=confirm:The emails you entered did not match, show:Name of the Show, episode:Your Episode|date:Air Date, character: Character's Name, description: Description of Scenes"> <input type="hidden" name="good_url" value="success.htm"> <table width="47%" align="left" border="0" cellspacing="0" cellpadding="5"> <tr> <td><div align="left" class="style3"> <label for="actor"><span class="style2"> Actor's Name:</span></label> </div> </td> </tr> <tr> <td><input name="actor" type="text" id="actor" size="40" maxlength="50"></td> </tr> <table width="47%" align="right" border="0" cellspacing="0" cellpadding="5"> <tr> <td><div align="left" class="style3"> <label for="character"><span class="style2"> Character's Name:</span></label> </div> </td> </tr> <tr> <td><input name="character" type="text" id="character" size="40" maxlength="50"></td> </tr> </table> </form> I have three user input text boxes called; "name", "email" and "phone" and one text field to display that information called; "feedback". When a "Submit" button is clicked, the three text boxes are validated to check that what was typed inside them was OK. I then want to display the Users' name, email and phone number on individual lines in the text field, for example, name on line 1, email on line 2 and phone number on line 3. At the minute when I submit the information only the phone number displays on the first line of the text box. In the text field "feedback"; I know the HTML probably interprets my code as; the name is being replaced by the email and then the email is being replaced by the phone number. Here is the relevant section of my code. function validate(){ if (validateName () && validateEmail() && validateformatNumber()){ var myName=document.survey.visitor.value; document.survey.feedback.value=myName; var myEmail=document.survey.email.value; document.survey.feedback.value=myEmail; var myPhone=document.survey.phone.value; document.survey.feedback.value=myPhone; return true; }else{ return false; }} I think the solution could be something simple but I haven't much of an idea of how to do it. Thanks in advance. I'm trying to make a sidebar to navigate through the website and basically lays out the entire site on the sidebar (which is a tree with nodes and leafs etc), but when it tries to display the text, it gets really squished up on the right side, but there are still horizontal scrollbars -.- This is the html after all the PHP stuff: Edit: I put in "width:100em;" in the li section of css. It formatted the text properly, but then the scrollbar continues on forever. Is there any way to find out how many pixels are needed to format the text properly? More specifically, is there any way (javascript, php) to find the length of a string in pixels? HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div#navigation").height(window.innerHeight-16);
});
</script>
<!--<link type="text/css" rel="stylesheet" href="Styles.css" />-->
<style type="text/css">
#navigation {
position:absolute;
width:25%;
height:500px;
background-color:#C0C0C0;
margin:0px;
border:0px;
padding:0px;
float:left;
overflow:scroll;
overflow-x:scroll;
overflow-y:scroll;
}
#main {
width:75%;
height:100%;
}
li {
overflow:visible;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled</title>
</head>
<!--Use a tree for this-->
<div id="navigation" >
<ul><li>FoodFoodFoodFoodFoodFoodFoodFoodFoodFoodFoodFoodFo</li>
<ul><li>FruitFruitFruitFruitFruitFruitFruitFruitFruitFruit (Level 2)</li>
<ul><li>RedRedRedRedRedRedRedRedRedRedRedRedRedRedRedRedRe (Level 3)</li>
<ul><li>CherryCherryCherryCherryCherryCherryCherryCherryCh (Level 4)</li>
<li>StrawberryStrawberryStrawberryStrawberryStrawberry (Level 4)</li>
<ul><li>Uber BerryUber BerryUber BerryUber BerryUber Berry (Level 5)</li>
<ul><li>Extreme StrawberryExtreme StrawberryExtreme Strawb (Level 6)</li>
<ul><li>WOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWO (Level 7)</li>
<ul><li>supercalifragilisticexpialadocioussupercalifragi i (Level 8)</li>
</ul></ul></ul></ul></ul><li>YellowYellowYellowYellowYellowYellowYellowYellowYe (Level 3)</li>
<ul><li>BananaBananaBananaBananaBananaBananaBananaBananaBa (Level 4)</li>
</ul></ul><li>MeatMeatMeatMeatMeatMeatMeatMeatMeatMeatMeatMeatMe (Level 2)</li>
<ul><li>BeefBeefBeefBeefBeefBeefBeefBeefBeefBeefBeefBeefBe (Level 3)</li>
<li>PorkPorkPorkPorkPorkPorkPorkPorkPorkPorkPorkPorkPo (Level 3)</li>
</ul></ul></ul></div>
</html>
http://goldenworldgoods.awardspace.com/ Hello again, I did this site in Dreamweaver, looked fine in my dreamweaver editor, uploaded it and voila everything goes nuts. List of Problems: The Links are not positioned properly, not big enough plus the drop downs to the bottom and not to the right. That was properly my fault since I just copied a suckerfish method... But can someone help with this. If you study the News Header in the CSS, it says it has a background image, how ever it doesn't show when I uploaded it. I know the url and the pic is correct cause it worked in Dreamweaver... The background for "welcome" is all the way up there which isn't supposed to happen, it supposed to be right on top of the Hello text but that isn't happening either. The hello and welcome are supposed to be aligned to the left of the right header. Thats about it, please can someone help me. I've changed the format of this like 3 times just to get it correctly done, but nothings working. Thank you And don't worry I got it all validated and what not Howdy y'all, this is my first post =) I'm not usually a web designer, however I'm currently working on a web site for a small thrift store which benefits Habitat for Humanity. Of course, in HfH style, I am going with a green/blue color scheme. Here's my problem: I have hyperlinks, so that the underline is blue, and turns green when hovered over. It works great and looks just dandy with text hyperlinks. Here is the style code I inserted into the head: Quote: <style> body { color: black; background-color: white; font-family: arial } a { color: black; text-decoration: none; border-bottom-style: solid; border-bottom-width: 1px } a:link { border-bottom-color: #000080 } a:visited { border-bottom-color: #000080 } a:hover { border-bottom-color: #008000 } a:active { border-bottom-color: #008000 } </style> Now, here's the problem: Having this code in my header, is also causing all IMAGE hyperlinks to be underlined as well, with the same effect. This does not look so good. I tried inserting text-decoration: none into the image hyperlink tags, with no effect. What I would like to know is, how can I have the changing underline effect on text hyperlinks, while leaving image hyperlinks without an underline? Hi.. i am not sure if you can do this in HTML..maybe someone knows if there is some way around this.. In my webpage, I have a hyperlink which I want to point to a pdf document which can be at 2 different places on the web. I want the hyperlink to work in any case even if one of them is not present. I do not want to put something like Link1 and Link2 on the webpage. I want to hide both the links in the HTML... wonder if someone can help me with this.. skhimsara Good Day and Happy New Year. I am told that MS Frontpage cannot follow or resolve the links set up via JS scripts. That is, FP cannot check for broken or invalid links embedded in a sript. To demonstrate, I've got the following construct: <a onclick="OpenWindow('target.html');" href="javascript:void(0);"> any text </a> OpenWindow () is a JS script which opens the target page with few additional features. How can I automatically verify the links? Thank you for your help. Saeed Hello everybody, maybe someone can give me a helpful advice here.. I have a vertical menu comprising of single image links on my website, each linking to a subsection. The menu is in the left frame of a frameset, the subsections (displaying in the main frame) can be quite big, containing up to twenty pages. Now I would like to add a small arrow or the like aside of the active link in the left frame - i.e. when a user clicks on the link image the arrow appears and stays there until the user clicks another link. That way, the link would stay highlighted/marked as long as the user is in the specific section. The problem is to make the arrow stay as long as nothing else is clicked in that frame - but disappear when another link is clicked to show up aside that one then. Can this be done with CSS?? Or rather javascript? How would I do this? Many thanks, Yatkha Hi there, question about the hyperlinks at the top of most web pages. Like this page there are links such as HOME, ADVERTISE, CONTACT then REGISTER, PROFILE etc. I thought they could be a table cell but looking at the "Source" of this page they are something like this: <ul id="subnav"> <li><a href="http://www.htmlforums.com"><img src="style1/images/misc/but_home.gif" width="30" height="15" alt="Home" title="Home" /></a></li> What is the name of that element so that I can search my books and web for solution. I would call them just "Links at the top of the page" but I am sure there is more scinetific name for it. This page that I am working on has been headache stop after headache stop. I have put a ton of time into it to try and make it perfect. It feels like two steps forward one step back and more even sometimes. But over all its been a very rewarding experience building this page from nothing to this. http://www.mvguild.com Right now the issue Im looking to try and fix is where a hyperlink is directing its target to. I want it to go to the frame to the right, so you can still see the navigation frame that is at the left in which you clicked from in the first place. It is not doing this. I tried a bunch of different target choices which leads me to believe that Im lookin gin the wrong place. Would someone take a look at it for me please? The first button in question is -----> Recruitment... <---- there are a couple of other active links on the page but them opening in completey new windows really doesnt bother me too much. There is also an issue with the graphic in the upper left corner when you click on it it uses the left frame to go to its new page, its not supposed to do that, and I couldnt figure out how to fix that either. The names of the pages that Im currently working with are called: index.html <---hidden frame navigation.html <---left frame current.html <---frame in the middle(or right) that I want to cycle through with link clicks application.html <---- the first page Ive tried to put where current.html lives Thank you for your help Im sure its just a matter of a target="_figureitoutven Oh and if you had any suggestions for the site I am open to hearing them My guildmates seem to be mute when I ask them. hello am trying to put hyperlinks inside a table & cannot get it to work properly. the links need to jump to sections within the same page. not suppose to be this difficult. have most of the coding but they still do not jump to the articles. here is an example from a page at http://www.freewebs.com/awordfitlyspoken/11aaaaaa.htm this is a 'test page' for the html that I am trying to do: ========================= body onload="runSlideShow()"> <center> <table border="5" bordercolor="C0C0C0" bgcolor="FAFAFA" cellpadding="20" cellspacing="5"> <tr> <td id="VU" height=80 width=730> <img src="http://farm1.static.flickr.com/48/192627152_a279d7abe1_m.jpg" name='SlideShow' width=150 height=130 align="right"><font color=414141><font size=4><b><blink>Salavation - Featured Articles</blink></b></font> <p><font size=2> <li><a href="#1LOCATION" style="text-decoration:none"><font color=#414141>Religions: Fradulent But Necessary</a> by Bill Allin</li> <li><a href="#2LOCATION" style="text-decoration:none"><font color=#414141>Called to Exploit or Follow?</a> by Fred London</li> <li><a href="#3LOCATION" style="text-decoration:none"><font color=#414141>Levite Be Gone: Releasing the Samaritan Within</a> by Jason S. Miller</li> <li><a href="#4LOCATION" style="text-decoration:none"><font color=#414141>Which Tree</a> by Jeremy Chambers</li> <li><a href="#5LOCATION" style="text-decoration:none"><font color=#414141>Editorial</a> by C.L. Mareydt</li></p> </td> </tr> </table> =================== the target area within the same page I have coded - but it doesn't connect. It constantly throws me to an 'error page'. here is the target area coded as such: <br><br> <br><br> <img src="http://farm3.static.flickr.com/2334/2157882981_ab63474c94.jpg" width="125" height="150"> <br><br> <font face="arial"><font size=4><b><a name="1LOCATION">Religions: Fraudulent But Necessary</a><br>by Bill Allin</b></font size> <br><br><p> <span style="float:left;color:#414141;font-size:100px;line-height:70px;padding-top:2px;font-family: Times, serif, Georgia;">Y</span><p> ou can safely assume that you've created God in your own image when it turns out that God hates all the same people you do. - Anne Lamott, writer (1954- ) All religions are man-made. Every single one, whether it has many gods, one god or no god at all, was a creation of man. There is no evidence that God ever sanctioned any one religion. Almost every religion - even those of aboriginals - has at least one god. Though there are hundreds of religions in existence today, no two have identical concepts ... </p> <br><br><a href="http://www.freewebs.com/awordfitlyspoken/11allin.htm" STYLE="TEXT-DECORATION: NONE"><img src="http://www.freewebs.com/awordfitlyspoken/clickbutton.jpg"></a></font> =================== would anyone know what i am doing incorrectly. sorry to take up so much room ... but really need a definite answer. thank you so much. C.L. Hi I have a basic form that has some radio buttons in it (in a group). In the radio button labels, I'd like to have some hyperlinks that open examples pages pertaining to what the radio button choice is. I don't want the links sent with the form - I just want to have them displayed for the user to click. Where would I put a link in the radio button group code without screwing up the form? Thanks for your time and help. Shaun Hi! I have put a hyperlink for each picture in my web (http://apeslab.netfirms.com/cgi-bin/randexample.pl ). I now randomize the order of the pix. It means that every time you reload the website, the order of the pix is different. Yet, I cannot figure out how I can put the hyperlink for each pic. So, for instance, I want the cibershot (digi_came3.jpg) to have a hyperlink to yahoo.com. What I wrote for this website is: #!/usr/bin/perl use CGI; $query = new CGI; $v01= "/images/degi_came1.jpg"; $v02= "/images/degi_came2.jpg"; $v03= "/images/degi_came3.jpg"; $l01= "http://www.yahoo.com"; $l02= "http://www.google.com"; $l03= " http://www.asahi.com"; print $query->header; print $query->start_html(-title=>'Mental Rotation'); print "<FONT FACE = 'arial' SIZE = '2'>"; print "<B>Image Rating Example.</B><BR> <BR> Each image depicts two objects. In some cases, one object is a simple rotation of the other. In other cases, the two objects are not the same. For each image, decide whether the objects are the <I>same</I> ( i.e., one is a simple rotation of the other) or whether they are <I>different</I>. <BR><BR>"; print "<FORM ACTION = 'mailto:takao\@asu.edu ' METHOD = 'post' ENCTYPE = 'text/plain'> "; @varlist= ("v01", "v02", "v03"); @linklist= ("l01", "l02", "l03"); srand; @new = (); while (@varlist){ push(@new, splice(@varlist, rand @varlist,1)); } @varlist= @new; print "<CENTER>"; for($i = 0; $i <= 2; ++$i){ $image= $varlist[$i]; $link= $linklist[$i]; print "<a href =$$link> <IMG SRC=$$image width = '180' height = '180'><a><BR>"; print "<TABLE> <TR> <TD ALIGN='center'><I>Same</I><BR> <INPUT TYPE = 'radio' NAME = $varlist[$i] value = '1' > </TD>"; print "<TD ALIGN='center'><I> Different</I><BR> <INPUT TYPE = 'radio' NAME = $varlist[$i] value = '2' > </TD></TR></TABLE><BR>"; } print "<INPUT TYPE = 'submit' VALUE = 'Submit my responses'>"; print "</FORM></FONT></CENTER>"; print $query->end_html; ----------------------------------------------------------------------- As you see, whatever the picture on the top has a link to "yahoo.com" in this program (and I know why, but I cannot figure out how I can make the pictures have right hyperlinks). I also cannot figure out how I can put a sentence next to each pic ("cibershot", for example) and this sentence moves with the pic. Any suggestions/comments would be appreciated. Thanks, --Taka |
|||||||