|
HTML - Strange Purple Line Below Nav Images
For some reason, in IE8 (or all IE's, for all I know) there is a mysterious little purple line at the bottom left corner of all of my navigation button images, excluding the first one. In FF it works just fine..Chrome, Safari and Opera I don't have, so for all I know it could just be FF that's displaying it correctly.
Here's my code: HTML HTML Code: <a href="index.html" style="margin:0"> <img src="images/nav_home.png" alt="HOME" onmouseover="this.src='images/nav_home_hover.png';" onmouseout="this.src='images/nav_home.png';" /> </a> <a href="the-author.html"> <img src="images/nav_author.png" alt="THE AUTHOR" onmouseover="this.src='images/nav_author_hover.png';" onmouseout="this.src='images/nav_author.png';" /> </a> <a href="contact.html"> <img src="images/nav_contact.png" alt="CONTACT US" onmouseover="this.src='images/nav_contact_hover.png';" onmouseout="this.src='images/nav_contact.png';" /> </a> CSS Code: img
{
border: 0px;
margin-left: 1.75em;
}
I also attached a screenshot. Thanks, C-Style Similar TutorialsI'm making an HTML design on notepad, and I got some images for links, but when I view it on a webpage, the images have a purple border. How to I remove this? Hi all, I've been trying to fix this bug which won't go away. Yeah, it's basically images in tables, but before you cringe, I gotta declare that I'm using tables to display graphical data (that is, thumbnails in grids). I'm not using tables explicitly for layout. Visit the emulated-page at http://varlern.com/CrappyBug.html to see the problem. There's 4 cells. Notice that in every cell, there's some gaps at the right, top and bottom inside each cell (the left sides have no gaps). For a quick glance, below's the code: Code: <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.tablestyle
{
table-layout:fixed;
width:740px;
border-collapse:separate;
border-spacing:3px;
}
.tablestyle tr td
{
border:1px solid black;
width:175px;
height:175px;
}
</style>
</head>
<body>
<table class="tablestyle">
<tr>
<td><img src="Box.GIF" width="175" height="175" /></td>
<td><img src="Box.GIF" width="175" height="175" /></td>
<td><img src="Box.GIF" width="175" height="175" /></td>
<td><img src="Box.GIF" width="175" height="175" /></td>
</tr>
</table>
</body>
</html>
I've searched the forums and tried all kinds of tricks and fixes suggested for others who've encountered this before.... I've tried using "display:block" on the <img> tag, I've set the cellspacing, cellpadding, padding, margin, hspace, vspace, cols, rows, line-height, font-size and almost every dimension related tag in CSS / HTML to 0 .......but the darn thing just REFUSE to go away! I'm really angry, I tell you. Hopefully, someone can help! The problem occurs in both IE 6.0 and FF. Thanks! Xeon I have this theme that I'm using for a project and I can't find where I made the mistake in the HTML ... the Header/title is supposed to be the color of the text, but for some reason it's purple ... This is the website: http://simplybeautifulinmtl.tumblr.com/ And this is the HTML (I deleted a bunch of it that had no relevance and this is what's left ... I know it's asking a lot but can someone help me?): HTML Code: <!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{Title}</title>
<META NAME="Title" CONTENT="{Title}">
<META NAME="Description" CONTENT="{MetaDescription}">
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<meta name="color:Title" content="#fffdf7"/>
<meta name="color:Background" content="#fff"/>
<meta name="color:Text" content="#fffdf7"/>
<meta name="color:Link" content="#000000"/>
<meta name="color:LinkHover" content="#fffdf7"/>
<meta name="color:LinkBackground" content="#FFECF3"/>
<meta name="color:LinkHoverBackground" content="#F1F0F0"/>
<meta name="color:DescriptionBackground" content="#F1F0F0"/>
<meta name="if:Large Photos" content="1"/>
<meta name="if:Show Archive Link" content="1"/>
<meta name="if:Show RSS Link" content="1"/>
<meta name="if:Show Random Link" content="0"/>
<meta name="if:Show Likes Link" content="0"/>
<meta name="if:Show Mobile Link" content="0"/>
<meta name="if:Show Description" content="0"/>
<meta name="if:Fixed Header" content="1"/>
<meta name="if:InfiniteScroll" content="0"/>
{block:IfInfiniteScroll}
<script type="text/javascript" src="http://static.tumblr.com/q0etgkr/mFbkoqlkr/tumblrautopager.js"></script>
{/block:IfInfiniteScroll}
</script>
<style type="text/css">
hr { display:none; }
img { border:0px; }
body {
background: {color:Background};
color:{color:Text};
font-family:' georgia, sans-serif;
font-size: 0.75em; /* 12px */
margin:0px;
padding:0px;
letter-spacing: 0.1em;
}
}
}
a:focus { outline: none; }
/* ---------------------------------------------------- Funky **** ------------------ */
::selection,
a::selection,
img::selection {
background: {color:Text};;
color: {color:Text};;
}
::-moz-selection {
background: {color:Text};;
color: {color:Text};;
}
/* ---------------------------------------------------- Header ------------------ */
header {
display: block;
margin: 40px auto 20px auto;
width: 820px;
text-align: center;
}
header.fixed {
position: fixed;
width: 100% !important;
}
header h1 {
font-family: Georgia, sans-serif;
display: block;
font-size: 4em;
-webkit-margin-befo 0em;
-webkit-margin-after: 0em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
margin-bottom: 5px;
font-weight: normal;
color: {color:Text};
}
header h1 a {
font-weight: normal;
text-decoration:none !important;
}
nav a {
color: {color:Text};
padding: 3px 5px 1px 5px;
margin: 0 2px;
background: {color:LinkBackground};
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-decoration:none !important;
}
nav a:hover {
color: {color:Text};
background: {color:LinkHoverBackground};
}
div.wrapper {
display: block;
margin: 0px auto 100px auto;
{block:IfFixedHeader}
padding: 115px 0 0 0;
{/block:IfFixedHeader}
width: 500px;
text-align: center;
color: {color:Text};
}
div.description {
float:left;
margin-top:0px;
padding: 5px 10px;
}
/* ---------------------------------------------------- Text ------------------ */
.text {
width: 500px;
margin: 25px auto 125px auto;
line-height: 1.6em;
}
.text .caption {
font-size: 1.66em; /* 20px */
text-decoration:none !important;
}
/* ---------------------------------------------------- Stuff ------------------ */
div.tumblrAutoPager_page_info {
display:none;
}
#back-top {
position: fixed;
right: 15px;
bottom: 10px;
font-size: 0.83em;
}
#back-top a {
color: {color:Text};
padding: 3px 5px 1px 5px;
margin: 0 2px;
background: {color:LinkBackground};
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-decoration:none !important;
}
#back-top a:hover {
color: {color:Text};
background: {color:LinkHoverBackground};
}
{CustomCSS}
</style>
</head>
<body>
<header {block:IfFixedHeader}class="fixed"{/block:IfFixedHeader}>
<h1><a href="/">{Title}</a></h1>
<nav>
</nav>
</header>
<div class="wrapper">
{block:IfShowDescription}
{block:Description}
<div class="description">
{Description}
</div>
{/block:Description}
{/block:IfShowDescription}
</div>
<!---------------------------------------------------------------------------- POSTS ----->
<Div class="autopagerize_page_element" id="posts">
{block:Posts}
{block:Text}
<div class="text">
{block:Title}<a {block:IndexPage}href="{Permalink}"{/block:IndexPage} class="caption">{Title}</a>{/block:Title}
{Body}
{block:Date}
<div class="permalink"><a href="{Permalink}" class="permalink">❖</a></div>
{/block:Date}
</div>
{/block:Text}
please, check http://members.dodo.com.au/~rouslan/...ite/index.html I need to know how to get rid off strange effect down the bottom and how do I make text and image aligned on the same "line", "level" e.g. image image text text text text text text text text image image text text text text text text text text image image text text text text text text text text image image text text text text text text text text Hi, as you can tell by the title, I'm having trouble placing 2 image links next to each other on Myspace. If i can post the links and someone can help me, I'd be very grateful. (I'm not trying to promote my band or anything here, no one has to listen) I am wanting this Facebook image: http://s86.photobucket.com/albums/k1...logo_black.jpg linked to our facebook page: http://www.facebook.com/pages/Teenag...19513834790706 And this Twitter logo http://s86.photobucket.com/albums/k1...0_allblack.png linked to our Twitter page: http://twitter.com/#!/teenagemaryuk I have already managed to get the Twitter link on our Myspace (www.myspace.com/teenagemary) but I'm pulling my hair out trying to get them next to each other, I've even tried tables to no avail. Any help would be extremely appreciated! how do I make it so that a regular html image link (<a href="bla.html"><img src="bla.png"></a>) does have the blue frame around when it hasn't been clicked and the purple when it has? Thanks http://profile.myspace.com/index.cfm...ndID=450190416 im trying to make all that white space to that same purple 990088 i think it is what code would i put into the layout code to do that? I have a webpage filled with url links and of course the text turns purple when clicked on. How do I change this so the text stays blue even after being clicked on? Do I have to add html code for each link, or is there a way to do it for the entire page? Hello everyone! I'm diving head first into XHTML/CSS development. Up until this point I've been designing using only tables, background graphics, and PHP. I have seen the light so I'm now working with XHTML and am proud to say that what I've done so far is XHTML Strict valid! I took a look at phpbb.com's website and saw I really liked the layout and figured, what better practice than to create something like that, so I did! Unfortunatly I'm having trouble duplicating their method for the navbar. If anyone could point me in the direction of how to get the images all in the nav bar's div layer I'd be very thankful. Keep in mind it will need to be rollover/active/rollout classes capable. My website is http://xt-arts.com Thanks so much for your help!! I am having trouble getting an image to line up in a cell so that the text aligns left and the image directly to the right of it to match the other cells. http://smartvending.com/testindex.html Can anyone see what is wrong with the code that is preventing the Coin Counters & Sorters gray box from allowing anything to align closer to the right side of the box matching the other cells? Any help is greatly appreciated! Thanks I'm trying to position text, links and pictures to follow one after the other, but it doesn't work. I want to see "Homepage" on the left corner of my webpage "Next" on the right corner of my webpage Unfortunately this command doesn't work properly. <div style="text-align:left;solid 2px #ff0000;"><a href="F:\Webcomic\Website Folder\NWvisuals-Index.html"> Home</a> <p align=right><a href="F:\Webcomic\TheEyeoftheWorld3.html">Next</a></div></p> It makes the "Next" go down a line, instead of being in the same line of the "Homepage". Also, on that vein, is there any way I can align images and text on the same line without using spaces*? As in: <p align="left">Hello</p> <p align="center">Hello</p> <p align="right">Hello</p> But they all should stay on the same line. Any guides, or even links to tutorial about my issue would be appreciated. I've been trying to google for a while, it's becoming frustrating. *I think the problem with spaces is that people with different resolution would see the text in different places than I want them to see. Hi, I am using Dreamweaver CS3 to create a site, by default i have learnt that when you use an image as a link to another page, dreamweaver creates a coloured border around your linked image. I have since been able to get rid of this border by adding border="0" into my img tag however this now has caused my rollover not to work before clicking on the image to take you to the linked page. this is my code; any ideas how i can fix this? <td colspan="4"> <a href="About Us.html"><img src="images/About_Off.jpg" border="0" alt="About Us" name="Aboutus" width="120" height="64" id="Aboutus" onMouseOver="MM_swapImage('Image2','','images/About_On.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></td> <td colspan="6"> Any help would be greatly appreciated. Well, it seemes like it all messes up right now... And I'm going crazy. Take a look at this example page: http://www.stianbl.co.cc/Test2/teknisk_TEST1.html Here, everything should work, since the code is the same I used for this page: http://www.stianbl.co.cc/Test2/teamet.html The problem is: 1. I cant get the hover effect to work on the 3 "pages", or fact-sheets, that should be clickable to dll the .doc file. But its the same way I did on the site "teamet", and it works there. 2.I cant position the header anymore. As it is now, opera reads it as I want it (the header, and navigation part), but IE hides it... Any help would be much appreaciated! I'm having a really bizarre problem on my site here http://www.onlykitchens-almunecar.co...signvisit.html On this particular page I have a form that is working fine in firefox but the page won't load in IE only from today and I don't think I have changed anything The form is working fine in firefox and posting ok and returning errors as i am using this form validation script Code: <script language="JavaScript" type="text/javascript">
<!--
/***********************************************
* Required field(s) validation v1.10- By NavSurf
* Visit Nav Surf at http://navsurf.com
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
function formCheck(formobj){
// Enter name of mandatory fields
var fieldRequired = Array("Name", "Surname", "Address", "Town", "Province", "Post Code", "Telephone", "Email", "Selection", "Details");
// Enter field description to appear in the dialog box
var fieldDescription = Array("Name", "Surname", "Address", "Town", "Province", "Post Code", "Telephone", "Email", "Selection", "Details");
// dialog message
var alertMsg = "Please complete the following fields:\n";
var l_Msg = alertMsg.length;
for (var i = 0; i < fieldRequired.length; i++){
var obj = formobj.elements[fieldRequired[i]];
if (obj){
switch(obj.type){
case "select-one":
if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
case "select-multiple":
if (obj.selectedIndex == -1){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
case "text":
case "textarea":
if (obj.value == "" || obj.value == null){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
default:
}
if (obj.type == undefined){
var blnchecked = false;
for (var j = 0; j < obj.length; j++){
if (obj[j].checked){
blnchecked = true;
}
}
if (!blnchecked){
alertMsg += " - " + fieldDescription[i] + "\n";
}
}
}
}
if (alertMsg.length == l_Msg){
return true;
}else{
alert(alertMsg);
return false;
}
}
// -->
</script>
The weird thing is if i take this code out it loads in IE and when I put it back in it don't. Its been working fine in IE with it in up until today. I need this validation script, and as i said its been working in IE for weeks with it in in. So I suppose what I am trying to get to the bottom of is why it is working in firefox but not in IE? If anyone could help i'd greatly appreciate it! Hi, I'm trying to make some changes to the basic design of my site, but when I add Adsense it's doing something strange. In IE7 it's fine, but in FF it displays with incorrect colors and the size is chopped from 468x60 to about 230x60. I can't explain it, because on the other pages I've made the changes everything is fine. ***************************************** Problem seems corrected now. Have no idea how it persisted for 36hrs, but it's fine now (shaking head). ***************************************** Thanks, Dave H I designed a site using HTML and CSS. The site works fine on all browsers except on the client's pc. He has IE 7. When I try it on my computer using the same browser IE7 it works fine. I told him to try the site on FFox and it worked ok. He wants the site to run on his pc using IE. I tried asking him to clear all cookies... doenst work. Any ideas want can be the problem? THANKS! I have two sections of my school website, one for study, one for plans. I have indexes for each, and links in the indexes that go to "journals." Sadly, for some reason, the plans one is working find, when I click on a link in the index it stays in the same category and then goes down, but the study one goes to my homepage. I'll try doing a diagram to help you guys out The arrows represent a link I can click on: (I took out the http b/c this site made the links shorter with ... and you wouldn't be able to see what I'm about to point out) Plans Section http://linus.yhspatriot.net/cs/at/st...Cai/2006/Plans --> http://linus.yhspatriot.net/cs/at/st...lan.html#Intro Study Section (Doesn't work) http://linus.yhspatriot.net/cs/at/st...Cai/2006/Study --> http://linus.yhspatriot.net/cs/at/st...-11.html#12-11 Notice the problem is that in the first one, it stays in plans, but in the second one, it actually leaves Study, and goes to Folsom_Cai. Here's the code for the plans index: HTML Code: <ol> <li> 1st Quarter Plan (finished)</li> <ul> <li><a href="1stQuarterPlan.html#Intro">Introduction</a></li> </ul> </ol> Here's the code for the Study index: HTML Code: <li>Week of 12-11 <ul> <li><a href="12-11.html#12-11">Thinking about the Classroom Code</a></li> </ul> </li> Here's where I define the name <a name=""> so it will go to a certain part of the page Plans: HTML Code: <p><a name="Intro"></a></p> Study: HTML Code: <h3><a name="12-11"><span>12-11</span></a></h3> thanx for any help, feel free to ask a question - i'll respond in this forum I am working on a new site layout, and for some reason in IE6/IE7 if you go directly to the webpage I am working on, it doesn't load correctly (won't load my background gradient, and doesn't format the site properly) when I try to reload the page, I get the same problem. if I go to any site (with css, without css, etc) and then go to my page it loads properly. the source code is the same when it loads properly and when it doesn't so I have absolutely no idea how to fix this problem. Regards, David King Now this is a strange one. If you visit my site via http://amatoc.com and then you visit it with http://www.amatoc.com You will notice that the site with www added is smaller than the one without! (Occurs using firefox) Anyone have an explanation for this? I'd like to preface this with a note that, although I'm a programmer, my web technologies knowledge is pretty much non-existent, so I hope I'm just doing something silly here. I am setting up photo galleries on my and my wife's web sites using a flash based photo gallery called FotoPlayer. This program has a "Site Creator" function that allows a header, footer, some basic extra pages to be added to it. I started by creating a simple header that consists of 3 png files. This is added in a file called header.inc, and is used by FotoPlayer to create the pages. Code: <div style="height: 60px;"> <a href="index.html"><img src="site/images/roz-title.png" alt="Home" align="left" border="0"></a> <a href="album.html"><img src="site/images/roz-cyrene.png" alt="Cyrene Gallery" align="right" border="0"></a> </div> <br> <div style="width: 100%;"> <img src="site/images/roz-bar.png" alt="Gradient" border="0" height="4" width="100%"> </div> This looks as I expect in FireFox and Chrome, but has several problems when viewed with IE6. The left and right pictures have the "not found" images and text over them, and the gradient bar does not stretch. The other problem I'm having is some extra scroll bars being added (again, only in IE6) when the page length is longer that the browser display height. If I disable running of scripts in IE6 these problems disappear so I assume this is caused by FotoPlayer not liking my simple code. However, I have looked at about 20 other sites (some way more complicated than mine) created with FotoPlayer and they all look good in IE6, so this leads me to suspect that I am at fault here. I posted this to the FotoPlayer Forum a couple of days ago, but there has not been any answers. I'm hoping someone here can take a quick look at the page and tell me what I might be doing wrong. This is the test page: http://roz-warren.net -Mike |
|||||||