HTML - Strange Black Lines On Website
Hello, Thefallenshadow has been helping me with my website and introducing me to CSS because I am new to web design, but unfortunely he has not replied to my PM so I am posting here for help.
I was about to start adding images of my work to my website, however it appears the website background images are not aligned correctly, even after I made sure they are the exact same pixel dimensions as the actual images. If someone could download my website below and view the index.html page (or view picture below), you will notice thin black horizontal lines in several places. The UFO picture in the corner is also not correct. These black lines appear in Internet Explorer, FrontPage and Dreamweaver but do not show inside Firefox. What's causing this? I am not sure how to fix it. http://homepage.ntlworld.com/stephan.../Portfolio.zip Thanks Similar TutorialsHi all, I'm running Joomla and this page looks a bit strange compared to when you either look at the page with another browser or press the compatibility view button in IE. Any suggestions as to how I can fix it? http://www.taxless.co.uk/en/news Thanks - Jack Hi, For some reason on my website ( http://www.the-undefined.net/index.php ) a random "<" keeps popping up in one of two places on the screen. It either appears in the very top corner of the screen, the top corner of the central table of the page OR not at all... This isn't a HUGE problem or anything but it is slightly annoying... AND I can't get rid of it and I have no idea... The site is for a webcomic and uses PHP Inclusion to add content (e.g. index.php?id=ep1 is the page for episode one) Here's the coding of the index.php page: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>the-undefined.net</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="style.css"> <script type="text/javascript"> function getURL(val){ base = 'http://www.the-undefined.net/index.php?id=ep'; location = base + val; return false; } </script> </head> <body bgcolor="#2A2A2A"> <table align="center" width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="right" colspan="2"> <table width="450" border="0" cellspacing="5" cellpadding="0"><tr> <td id="nav-top"><a href="index.php?id=home" title="the home">home</a></td> <td id="nav-top"><a href="index.php?id=story" title="the story">the story</a></td> <td id="nav-top"><a href="index.php?id=eplist" title="the ep list">ep list</a></td> <td id="nav-top"><a href="index.php?id=omake" title="the omake">omake</a></td> <td id="nav-top"><a href="index.php?id=site" title="the site">site</a></td> <td> </td> </tr></table> </td> </tr> <tr> <td height="350" valign="top" align="left" colspan="2" style="border: 15px solid #f0f0f0;"> <?php // checks if $z is defined if($id) { $x = basename($id); // Adds an extension to $z. E.g., if $z was main, then after this line, $z becomes main.php $id .= ".php"; // Checks if $z is in the current directory if (is_file("./$id")) { // Includes $z include($id); } else { // If $z is not in the current directory, an error comes out echo "<center><br><br><b>404 Error:</b><br><br>The page you are looking for, <b>$id</b> doesn't seem to exist!</center>"; } } else { // Include main.php if $z is not defined include("home.php"); } ?> </td> </tr> <tr> <td align="left"> <table width="170" border="0" cellspacing="5" cellpadding="0"><tr> <td> </td> <td id="nav-bottom"><a href="index.php" title="the domain">the undefined</a></td> </tr></table> </td> <td align="right"> <table width="200" border="0" cellspacing="5" cellpadding="0"><tr> <td id="nav-bottom"><a href="index.php?id=ep1" title="the first ep">first ep</a></td> <td id="nav-bottom"><a href="index.php" title="the last ep">last ep</a></td> <td> </td> </tr></table> </td> </tr> </table> <center><br><br><br><br><br><br><br><font color="#444444"><b>© Copyright 2006<br>All Rights Reserved</b></font></center> </body> </html> And for example an episode page is: HTML Code: <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr><td> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="625" height="350"> <param name="movie" value="001.swf"> <param name="quality" value="high"> <embed src="001.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="625" height="350"></embed> </object> </td></tr> <tr><td style="background-color: #f0f0f0; color: #000000; font-family: Verdana; font-size: 11px; text-align: right; padding: 5px;" valign="center"> <table width="200" border="0" cellspacing="0" cellpadding="0" align="right"> <tr><form id="form1" name="form1" method="post" action="" onsubmit="return getURL(this.url.value)" style="padding: 0px;"> <td style="background-color: #f0f0f0; color: #000000; font-family: Verdana; font-size: 11px; text-align: right;"> « <s>Prev</s> | </td> <td style="background-color: #f0f0f0; color: #000000; font-family: Verdana; font-size: 11px; text-align: center;"><input name="url" type="text" style="background-color: #ffffff; color: #000000; text-align: center; border: 1px solid #000000; width: 30px; height: 16px; font-size: 11px; font-family: Verdana; vertical-align: middle;" class="form" /></td> <td style="background-color: #f0f0f0; color: #000000; font-family: Verdana; font-size: 11px; text-align: left;"> | <a href="index.php?id=ep2" title="the next" style="color: #000000;">Next »</a> </td> </form></tr> </table> </td></tr> </table> And it keeps randomly appearing everytime I refresh the page! Can anyone help...? Thanks, Spedman975 P.S. Sorry if this isn't where I should post this but I'm new to this! Hi, Sorry if this is not the right place to put it. My friend asked me to look into his friend small website as he is not searchable via google. I had a look at his website and seen that he has been using a "VistaPrint SiteBuilder v20.5" to build his website. His website looked like it was redirecting from a different website address. Inside his code he had the normal links with index.html and products.html etc without the full address but i could see on the bottom of the browser that the address has a subdomain and different address (like URL address bingo.website) once i roll over the links. So i persume he is redirecting the whole website from that address. Also, once i click on the other links his address stays the same as his main index address. e.g (URL address mydomain) (once i click on products it stays the same without the products.html added onto the end). Never seen this before. Is that what that sitebuilder does? Is this a problem for google.....would they blacklist it for that reason. However, when i did the sitemap am i allowed to add the index page as the website address he wants searchable and the other links as subdomain and different address e.g (URL address bingo.website) or i'll just have to use index page alone? Alright, so on my webpage I want a black background and then have the iframes white. So, its white on black and the iframes are displayed over the black background. This is how I want it to look and this is how it looks in Internet Explorer: http://i249.photobucket.com/albums/g...undiframes.jpg This is how it looks in Mozilla and I want it to look like the one up above: http://i249.photobucket.com/albums/g...undiframes.jpg Can someone tell me how I fix this? I am trying to remove the black borders or lines around my friends website and cant seem to do it? any ideas http://www.lavonnebeauty.com/ I'm stumped. I used a few tutorials and alot of trial and error to make this website. I'm happy with it for the most part but when I make the browser into a smaller window (same for computers using smaller resolution) and I get a scroll bar on the bottom, when I then use that scroll bar and move it to the right all I get is a black bar where content should be. Anyone have any idea what the deal is? I'm thoroughly confused. www.jessevadnaisphotography.com On this page: http://tinyurl.com/charpages The font is currently navy blue and I can't get it black with the <font color="black"> TEXT </font> tag. Help? I assume that this should not be in the Flash section as it seems as the threads there are discussing problems within the Flash program, not putting Flash videos on your webpage. Anyway, I put my flash video on my website and it has black borders on the left and right sides of the video. I would like to remove them, but I don't know a whole lot about flash video parameters. Could anyone tell me how to do this? Here's my code for the index page: 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> <link rel="stylesheet" type="text/css" href="stylesheet.css"/> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <meta name="description" content="AV Avenue is a K-12 Classroom Technology Specialists company. We provide audio/video equipment sales, systems installations and service of existing systems."/> <meta name="keywords" content="av avenue, audio, video, audio visual, classroom, education, installation, smartboard, k-12"/> <title>AV Avenue</title> </head> <body> <ul id="stoplight"> <li id="stoplight1"><a href="index.html"></a></li> <li id="stoplight2"><a href="aboutus.html"></a></li> <li id="stoplight3"><a href="contactus.html"></a></li> </ul> <div id="stoplightbottom"> <img src="Images/Home Page/StoplightBottom.png" alt=""/> </div> <div id="smartboard"> <img src="Images/Home Page/Smartboard.png" width="180" height="180" alt=""/> </div> <div id="featuredpartner1"> <img src="Images/Home Page/AviSPLLogo.png" width="140" height="60" alt=""/> </div> <div id="featuredpartner2"> <img src="Images/Home Page/UnitedVisualLogo.png" width="140" height="60" alt=""/> </div> <div id="featuredpartnertext"> <span class="blackfont2 comicsansms">SMART Board Partners</span> </div> <div id="specials"> <img src="Images/Home Page/MaySpecials.png" alt="Check out our special services for May!"/> </div> <div id="text2"> <img src="Images/Home Page/Text2.png" alt=""/> </div> <div id="avsign"> <img src="Images/Home Page/AVAvenueLeftSign.png" alt=""/> </div> <div id="states"> <img src="Images/Home Page/States.png" alt=""/> </div> <div id="contractorstext"> <span class="blackfont1 comicsansms">Technology Systems Contractors Power Limited Technicians</span> </div> <div id="company1"> <img src="Images/Home Page/Company1.png" height="30" width="100" alt=""/> </div> <div id="company2"> <img src="Images/Home Page/Company2.png" height="30" width="100" alt=""/> </div> <div id="company3"> <img src="Images/Home Page/Company3.png" height="30" width="100" alt=""/> </div> <div id="company4"> <img src="Images/Home Page/Company4.png" height="30" width="100" alt=""/> </div> <div id="company5"> <img src="Images/Home Page/Company5.png" height="30" width="100" alt=""/> </div> <div id="flashmovie"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="300" height="400" id="AV_Ave" align="middle"> <param name="movie" value="AV_Ave.swf"/> <param name="quality" value="high"/> <param name="play" value="true"/> <param name="bgcolor" value="#000000"/> <param name="loop" value="true"/> <param name="wmode" value="window"/> <param name="scale" value="showall"/> <param name="menu" value="true"/> <param name="devicefont" value="false"/> <param name="salign" value=""/> <param name="allowScriptAccess" value="sameDomain"/> <object type="application/x-shockwave-flash" data="AV_Ave.swf" width="600" height="400"> <param name="movie" value="AV_Ave.swf"/> <param name="quality" value="high"/> <param name="play" value="true"/> <param name="bgcolor" value="#000000"/> <param name="loop" value="true"/> <param name="wmode" value="window"/> <param name="scale" value="showall"/> <param name="menu" value="true"/> <param name="devicefont" value="false"/> <param name="salign" value=""/> <param name="allowScriptAccess" value="sameDomain"/> <a href="http://www.adobe.com/go/getflash"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/> </a> </object> </object> </div> </body> </html> and here's my CSS: Code: * {margin:0; padding:0;} html, body, div, span,object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strike, strong, sub, sup, tt, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } textarea { overflow:auto; } ul#stoplight { margin: 0px 840px; width: 0px; height: 0px; list-style: none; } ul#stoplight li { display:inline; } ul#stoplight li a { float:left; text-indent:-9999px; text-decoration:none; } ul#stoplight li#stoplight1 a { width:178px; height:82px; background:url(Images/Stoplights.png) no-repeat 0 0; } ul#stoplight li#stoplight1 a:hover { background-position: -221px 0; } ul#stoplight li#stoplight2 a { width:178px; height:63px; background:url(Images/Stoplights.png) no-repeat 0 -82px; } ul#stoplight li#stoplight2 a:hover { background-position: -221px -83px; } ul#stoplight li#stoplight3 a { width:179px; height:66px; background:url(Images/Stoplights.png) no-repeat 0 -145px; } ul#stoplight li#stoplight3 a:hover { background-position: -221px -144px; } body { background-image: url('Images/GradientBackground.png'); background-repeat: repeat-x; } .arial {font-family: Arial;} .tahoma {font-family: Tahoma;} .verdana {font-family: Verdana;} .comicsansms {font-family: Comic Sans MS;} .underline {text-decoration: underline} .blackfont1 {font-size: 16px;} .blackfont2 {font-size: 24px;} .whitetext1 {color: #F2F2F2; font-size: 30px;} .whitetext2 {color: #EBEBEB; font-size: 17px;} .whitetext3 {color: #DBDBDB; font-size: 18px;} #background {top: 2.7em; left: 4em; position:absolute; z-index: -2; visibility: visible;} #stoplightbottom {margin: 211px 840px; position: absolute; z-index: 1; visibility: visible;} #featuredpartnertext {margin: 230px 980px; position: absolute; z-index: 1; visibility: visible; width: 300px;} #smartboard {margin: 270px 1020px; position: absolute; z-index: 1; visibility: visible;} #featuredpartner1 {margin: 460px 960px; position: absolute; z-index: 1; visibility: visible;} #featuredpartner2 {margin: 460px 1110px; position: absolute; z-index: 1; visibility: visible;} #specials {margin: 550px 1020px; position: absolute; z-index: 1; visibility: visible;} #text2 {margin: 650px 155px; position: absolute; z-index: 3; visibility: visible;} #avsign {margin: -5px 50px; position: absolute; z-index: 1; visibility: visible;} #states {margin: 90px 540px; position: absolute; z-index: 1; visibility: visible;} #contractorstext {margin: 30px 530px; position: absolute; z-index: 1; visibility: visible; width: 250px;} #company1 {margin: 210px 250px; position: absolute; z-index: 1; visibility: visible;} #company2 {margin: 210px 350px; position: absolute; z-index: 1; visibility: visible;} #company3 {margin: 210px 450px; position: absolute; z-index: 1; visibility: visible;} #company4 {margin: 210px 550px; position: absolute; z-index: 1; visibility: visible;} #company5 {margin: 210px 650px; position: absolute; z-index: 1; visibility: visible;} #contactinfo {margin: 270px 170px; position: absolute; z-index: 2; visibility: visible;} #contactimage {margin: 270px 170px; position: absolute; z-index: 1; visibility: visible;} #greenbackground {margin: 230px 170px; position: absolute; z-index: 1; visibility: visible;} #greybackground {margin: 230px 170px; position: absolute; z-index: 1; visibility: visible;} #aboutusheader {margin: 240px 260px; position: absolute; z-index: 2; visibility: visible; width: 600px;} #aboutusparagraph {margin: 290px 180px; position: absolute; z-index: 2; visibility: visible; width: 630px;} #list1 {margin: 400px 190px; position: absolute; z-index: 2; visibility: visible; width: 200px;} #list2 {margin: 400px 400px; position: absolute; z-index: 2; visibility: visible; width: 200px;} #list3 {margin: 400px 610px; position: absolute; z-index: 2; visibility: visible; width: 200px;} #flashmovie {margin: 240px 200px; position: absolute; z-index: 2; visibility: visible; width: 300px;} My website is www.avavenue.com. Thanks a ton to anyone who helps out . Hey everyone, I'm trying to set my background image, but for some reason it has a large black bar at the bottom, where the pink gradient should actually start at the bottom so that you cant see the black bar? I'm trying to upload my Index.html file, but when I do the image loader says that its not a valid file? Any ideas? Both Google Chrome 12.0.742.91 and Safari 5.0.5 (Both on Mac) seem to be giving me problems. Google Chrome is causing the most headache. When I go to my website at www.schenkhampton.com/airtex2 It looks fine at first look. However, if you click refresh you will see like what I have in photo one where it looks like a block is covering part of the logos on the bottom. But, if you click one of the dropdowns or resize the browser window it corrects itself. Both Safari and Google are having that problem. Safari is doing two different versions of blocking the footer logos as you can see in the photos below. Then in Google when you open up all of the dropdowns you will scroll down and notice black bars appear. However, again if you resize your browser window or scroll far enough away from the black bar and come back it is gone. So, part of me says it is not code...cause code would stay. I recently changed the css sheet and validated everything. Everything clears fine. I even went back and put in the original style sheet cause I dont remember ever seeing that before and I still had the same issue. I even tried to do it with a version that I saved back on May 24 of both the page and css when I first started building this site. Same issue. I am not seeing any of these issues in firefox. I am at a loss cause it doesnt even make sense to me what could be causing these issues so any help would be appreciated. Matt Hi there, I know nothing formal about HTML, hence the code below being converted from an Open Office file. Hopefully it is readable - it is some declarations, a body with maybe 10 links in it, and then an embedded video code from Exposure Room. I have the alignment how I want it, but the background-black in the body doesn't work any more. Is anyone able to show me how to keep the center alignments I have but also switch the background of the whole page to black? It works if I take out the <center> tags but then everything is left aligned, which I don't like. Any help would be appreciated, cheers, Tony Code: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><!--This file was converted to xhtml by OpenOffice.org - see http://xml.openoffice.org/odf2xhtml for more info.--><head profile="http://dublincore.org/documents/dcmi-terms/"><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/><title xml:lang="en-US">- no title specified</title><meta name="DCTERMS.title" content="" xml:lang="en-US"/><meta name="DCTERMS.language" content="en-US" scheme="DCTERMS.RFC4646"/><meta name="DCTERMS.source" content="http://xml.openoffice.org/odf2xhtml"/><meta name="DCTERMS.creator" content="Tony Wilkes"/><meta name="DCTERMS.issued" content="2011-04-17T19:59:38.83" scheme="DCTERMS.W3CDTF"/><meta name="DCTERMS.contributor" content="Tony Wilkes"/><meta name="DCTERMS.modified" content="2011-04-17T20:31:54.51" scheme="DCTERMS.W3CDTF"/><meta name="DCTERMS.provenance" content="" xml:lang="en-US"/><meta name="DCTERMS.subject" content="," xml:lang="en-US"/><link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" hreflang="en"/><link rel="schema.DCTERMS" href="http://purl.org/dc/terms/" hreflang="en"/><link rel="schema.DCTYPE" href="http://purl.org/dc/dcmitype/" hreflang="en"/><link rel="schema.DCAM" href="http://purl.org/dc/dcam/" hreflang="en"/><base href="."/><style type="text/css"> @page { } table { border-collapse:collapse; border-spacing:0; empty-cells:show } td, th { vertical-align:top; font-size:12pt;} h1, h2, h3, h4, h5, h6 { clear:both } ol, ul { margin:0; padding:0;} li { list-style: none; margin:0; padding:0;} <!-- "li span.odfLiEnd" - IE 7 issue--> li span. { clear: both; line-height:0; width:0; height:0; margin:0; padding:0; } span.footnodeNumber { padding-right:1em; } span.annotation_style_by_filter { font-size:95%; font-family:Arial; background-color:#fff000; margin:0; border:0; padding:0; } * { margin:0;} .P1 { font-size:12pt; font-family:Trebuchet MS; writing-mode:page; text-align:center ! important; color:#b3b3b3; } .T2 { font-size:10pt; } <!-- ODF styles with no properties representable as CSS --> { } </style></head><center><body dir="ltr" style="max-width:21.001cm;margin-top:2cm; margin-bottom:2cm; margin-left:2cm; margin-right:2cm; background-color:#000000; "><p class="P1">Lying Down</p><p class="P1">*</p><p class="P1"><a href="http://www.lyingdown.co.uk/index.xhtml">Trailer</a> * <a href="http://www.lyingdown.co.uk/part1med">Part 1</a> * <a href="http://www.lyingdown.co.uk/part2med">Part 2</a> * <a href="http://www.lyingdown.co.uk/part3med">Part 3</a> * <a href="http://www.lyingdown.co.uk/part4med">Part 4</a> * <a href="http://www.lyingdown.co.uk/part5med">Part 5</a> * <a href="http://www.lyingdown.co.uk/part6med">Part 6</a> * <a href="http://www.lyingdown.co.uk/part7med">Part 7</a> * Download</p><p class="P1"><span class="T2"/></p><p class="P1"><a href="http://www.lyingdown.co.uk/indexlow"><span class="T2">Lowest quality</span></a><span class="T2"> * </span><a href="http://www.lyingdown.co.uk/indexhigh"><span class="T2">Highest Quality</span></a></p><p class="P1"><span class="T2"/></p><p class="P1">*</p> <object id="xrPf8470a83ede543789fc18d1556be86e9" width="640" height="360" type="application/x-shockwave-flash" data="http://exposureroom.com/flash/XRVideoPlayer2.swf?domain=exposureroom.com/&assetId=f8470a83ede543789fc18d1556be86e9&size=md&titleColor=%23ffffff"><param name="movie" value="http://exposureroom.com/flash/XRVideoPlayer2.swf?domain=exposureroom.com/&assetId=f8470a83ede543789fc18d1556be86e9&size=md&titleColor=%23ffffff" /><param name="allowNetworking" value="all" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="True" /><param name="wmode" value="opaque" /></object><div><div class="viewOnXRDiv"><a href="http://exposureroom.com/f8470a83ede543789fc18d1556be86e9" class="viewOnXRLink" title="Lying Down trailer by Tony Wilkes - View it on ExposureRoom" target="_blank">View on ExposureRoom</a></div></div> </body></center> </html> I have a page with a black background, and a script so that when a link is clicked the page fades out and then redirects to the link location. Since the background is black, the page fades to black before redirecting. How can I have it fade to white and then redirect? Sorry, this is just a really stupid question. I am not new in the least bit to HTML, however I am completely new to talking to people about it. When someone refers to "line 15 in the code" what are they talking about. Because sometimes I will count down the lines and that line will be blank. For example: What is line 5 in this code? Code: <html> <head> <title></title></head> <body> </body> </html> Would you count the number of lines down, or the number of lines (with content) down. Would line 5 be considered the blank line, or </body> Thanks Coot for really helping me out. I've updated some needed assistance if anyone else can help I would appreciate it. For: http://www.trillionaireme.com hey i need help with my website(this is not advertisement go here if you dont know what i'm talking about) www.biblebeyond.com. you see the links in my little box aren't really seperated by good distance how do i make them seperate? Hello. I am making HTML codes for ebay. I work with Frontpage, and when I paste my HTML code in ebay page the space betweens the lines becomes 2 lines instead of 1 line. At frontpage it looks ok, I mean the space is 1 line like I want it to be but in ebay there is no way to change the space. Is there something wrong with my HTML code? Hello, I don't want my lines to end, but they do even without me typing a <BR>. I tried putting the code in the same line in the code, it does not work. Here's the code I need to have on the SAME line : Code: <BODY bgcolor = #95AD9C> <img src = "Images/logo.gif" height = 100 width = 100> <font color = "white"> <H1> Anime Invasion <BR> English Dubbed <BR> Episodes! </H1> </font> </BODY> I am trying to make an anime watching website, is it a bad idea to design the whole thing myself? Sorry I am new to website development! Anyone know any good free templates? Thanks. Hello, folks; I'm making a new site at http://www.sticksite.com/antlers/ and there is a wide green (blank) space after the text and before the pictures. I did this in Notepad2 and did NOT enter any br tags in there. I cannot understand why this space appears. Can anyone educate me, please? Hi there. I am working on a website for a friend who created it using Word and then found that this doesn't work in FF (the files were .mht). I only know basic HTML, and no CSS. I can do most of what I need to but am having two problems. Firstly, some of the positioning is out in FF, but if I change it so it's ok in FF it's then out in IE. Word appears to have positioned everything using  s: HTML Code: <span style='mso-spacerun:yes'> </span> <span style='mso-tab-count:3'> &nbs p; </span> <span style='mso-spacerun:yes'> </span> <!--[if gte vml 1]> <v:shape id="_x0000_i1030" type="#_x0000_t75" style='width:141pt;height:141.75pt'> <!-- sixth image file --> <v:imagedata src="TA6.jpg" o:title="TA6"/> </v:shape> <![endif]--> <![if !vml]> <img border=0 width=188 height=189 src ="TA6.jpg" v:shapes="_x0000_i1030"> <![endif]> <span style='mso-spacerun:yes'> </span><!--[if gte vml 1]> <v:shape id="_x0000_i1031" type="#_x0000_t75" style='width:141pt;height:2in'> I know this is horrible code. Is there any simple way to ensure that the image ends up in the same place in IE and FF? Do I need to use absolute positioning, and if so, can anyone direct me to good resources on this? Secondly, I'm having problems with an horizontal line which appears in IE but not in FF. The code is HTML Code: <h2 style='margin-left:36.0pt;text-indent:36.0pt'> <!--[if gte vml 1]> <v:line id="_x0000_s1031" style='position:absolute;left:0;text-align:left;z-index:1' from="1in,33pt" to="647.15pt,33pt" strokecolor="#396" strokeweight="3.5pt"/> <![endif]--> <![if !vml]> <span style='mso-igno vglayout;position:absolute;z-index:1;left:0px;margin-left: 93px;margin-top:41px;width:773px;height:6px'> This displays correctly as a shaded green line in IE, but as a white line with a thin black border in FF. From searching I think this is VML and not supported by FF - is this correct? In that case, I think I need to use the <hr> command, but how do I add an attribute to <hr> to ensure it's placed in the right place? Is the only solution a table? Sorry for the stupid questions, I know Word code is a terrible place to start from, I'm just trying to avoid redoing it all. Code: <?xml version="1.0" ecoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> Please explain to me those two lines (I did not include the doctype because I can understand what it's for) in a manner easy to understand. I'm not a beginner, but I didn't do those lines very often back then. What do they mean and how do they affect an HTML file? Thank you in advance! |