HTML - Div Tag Aligning Problems
Hello there i have just created a simple website using div tags as layers to position link elements on the page. I have 2 pages the first page has an image link that takes the user to the second page and the image link has been aligned in a div tag to position it onto the screen. When i test the first page in most browsers the aligning seems to be perfect and is aligning well in all browsers.
The problem im facing is on the second page, i have done exactly the same procedure to align a form element and an image link but when published and previewed in safari it is aligned perfectly but in most other browsers the div aligning for the form and the image link are not aligned at all. i cant figure out this problem because the first page is done exactly the same way and that works in all browsers, could someone please please have a look for me its probably something really simple but i cant see it. Below is the source code for both page 1 with the aligning in all browsers image link, and the second page the one that needs to be positioned correctly in all browsers: (PAGE 1 THE IMAGE LINK ON THIS PAGE ALIGNS CORRECTLY IN ALL BROWSERS AND IS FIN) <HTML> <HEAD> <TITLE>HARMONIC WEBSITE p1guides</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> </HEAD> <BODY BGCOLOR="BLACK" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 > <div align="center"> <div style="background-image:url('Background.jpg'); width:1024px; height:768px; background-repeat: no repeat; z-index: 0;"> <div style="z-index: 1; align: right; padding-top: 517px; padding-left: 273px;> <a href="index.html></a> <a href="page2.html"><IMG SRC="images/index_19.jpg" BORDER=0 WIDTH=219 HEIGHT=44 ALT=""></a> </div> </div> </div> </BODY> </HTML> (PAGE 2 THE FORM AND IMAGE LINKS ARE POSITIONED EXACTLY THE SAME AS PAGE 1 BUT APPEAR TO BE OUT OF POSITION IN DIFFERENT BROWSERS?) <HTML> <HEAD> <TITLE>HARMONIC WEBSITE p2guides</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> </HEAD> <BODY BGCOLOR=#000000 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0> <!-- ImageReady Slices (HARMONIC WEBSITE p2guides.psd) --> <BODY BGCOLOR="BLACK" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 > <div align="center"> <div style="background-image:url('Backgroundp2.jpg'); width:1024px; height:768px; background-repeat: no repeat; z-index: 0;"> <div style="z-index: 1; padding-top: 260px; padding-left: 700px;> <TABLE WIDTH=328 BORDER=0 CELLPADDING=0 CELLSPACING=0 > <TD IMG SRC="form background.jpg" WIDTH=328 HEIGHT=248 BORDER=1 ALIGN="LEFT"> <form action="mailto:YOUR EMAIL ADDRESS" method="post" enctype="text/plain" border=0 > <br> <input type="text" name="name" value="" size="30"> <br><br> <input type="text" name="Position/primary specialty" value="" size="30"> <br><br> <input type="text" name="Number of patients treated" value="" size="5"> <br><br> <input type="text" name="Hospital" value="" size="30"> <br><br> <input type="text" name="Email address" value="" size="25"> <br><br> <a href="page3.html"> <input type="submit" value="Send"> <a> <input type="reset" value="Reset"> </form> </TD> </div> <div style="z-index:2; padding-top: 66px; padding-left: 520px; margin-top: 0px;> <a href="index.html></a> <A HREF="http://www.harmonic.com"> <IMG SRC="p2-click_15.jpg" BORDER="0" WIDTH=46 HEIGHT=21 ALT=""></A> </div> </div> </BODY> </HTML> Similar TutorialsI'm trying to make a navigation bar that has the buttons taking up the full height of the container it is in, and have a width with just a few pixels padding on each side. Full height problem: I added this code: Code: ul#nav li { height: 100%; } but it only takes up as much as the padding takes up. Padding problem: When I add padding/margin on the top, instead of bumping the actual navigation button down, it overflows on the top and so there is a little green square sticking out. I want it to be perfectly centered inside the container. Please help! Thanks. Could somebody help me out in trying to put a separate image beside a table? Every time I try it the image ends up below the table rather than next to it. The table is surrounding a song lyric box. I want to put an image (of Ellla Fitgerald) beside the table. The image has a border that looks like the table. The combinded width of table and image is around 520px and I want about a 20px space between the two. That's a total width of 540px. It's to go on my LJ profile page. I fairly sure that's not too wide for the page. The code for the table and a screenshot of table/lyric box is below. The image that I'm trying to put next to it is: The outcome that I'm looking for is: Thanks in advance. hey, simple question here i just cant get it to work though. i want to align some text to the bottom and to the right of a table <table width="100%" cellspacing="0" border="0" cellpadding="18" height="75%"> <tr> <td bgcolor="000000" width="10%"> <img src="graphics/spacer.gif" width="100" height="1"> </td> <td bgcolor="ffffff" width="90%" valign="top"> <h2>Welcome to the Darwin Soccer Clubs Official Website</h2> <hr color="black"> <p>Here we strive to bring you all the latest news from the club by keeping you updated on the results from all our games throught out the season, the roster so you will never forget when your teams, where your teams playing and who there playing. <br><br> Also check out the new <a href="p4potw.html">Player of the week</a> page to see if you have made it to number one!</p> <p align="right" valign="bottom"> THIS IS THE PART I CANT GET TO WORK</p> </td> </tr> i dont no why.. and try not to think about the other writing in the table this is for my studies i am doing. cheers </table> I cannot work out why my google ads on the left hand side of my pages appear vertically centred, and not aligned to the top. The site is here My code looks like this: <td valign="top"> <p align="center"> {include file="$tpl_dir/ads_left_two.sec.html"} <img src="images/120-pixel-spacer.gif" alt="richmond upon thames" width="120" height="20" /></p></td> and the code for {include file="$tpl_dir/ads_left_two.sec.html"} looks like this: {literal} <script type="text/javascript"><!-- google_ad_client = "pub-2556340643393239"; google_alternate_color = "598527"; google_ad_width = 120; google_ad_height = 600; google_ad_format = "120x600_as"; google_ad_type = "text"; google_ad_channel ="6678563867"; google_color_border = "CCCCCC"; google_color_bg = "FFFFFF"; google_color_link = "790000"; google_color_text = "333333"; google_color_url = "598527"; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <script type="text/javascript"><!-- google_ad_client = "pub-2556340643393239"; google_alternate_color = "598527"; google_ad_width = 120; google_ad_height = 600; google_ad_format = "120x600_as"; google_ad_type = "text"; google_ad_channel ="7752161831"; google_color_border = "CCCCCC"; google_color_bg = "FFFFFF"; google_color_link = "790000"; google_color_text = "333333"; google_color_url = "598527"; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> {/literal} Hopefully i'm doing something dumb and you can tell me!!! I've been trying to work this out for ages.... thanks Bugs1012 Hello, I ran into this problem today in my Basic XHTML class, and it was enough to stump me and the instructor: if you want to put an unordered list in the middle of a page, but you want the list items to be left-aligned so the bullets are one on top of the other...how do you do it? I started with code something like <div align="center"> <ul type="disc"> <li>Wine</li> <li>Women</li> <li>Song</li> </ul> </div> This centers the list on the page, but it also centers each list item. I tried placing a <div align="left"> around the list items, individually and collectively, but depending on the positioning it either had no effect or it nullified the center attribute completely and gave me a left-aligned list on the left edge of the page. Attempts to change the style of the <li> tag, which I haven't done in months and was never all that good at, failed. I know I can do this in ten seconds by putting the list inside a one-cell table, and with much fiddling I could probably do it with a spacer GIF...but what's the 1.0 Strict way? this is my page http://web.vtc.edu/users/cjb06271/CI...nal/order.html there are several things I would like to happen. 1. the right collumn background to be where the right collumn should be(so other links in navbar) 2.The test between the roach pictures to be alligned with the top rather than bottom of pictures (so smaller windows can see) 3. When you size the window smaller than the text, a scroll bar appears, and when you scroll the background no longer exists. If I put it on auto the background will only go as far as the text does. 4. (nice but not required)The cocroachs to be alligned to the left and right of the top bar respectively, and the text in the middle. 5. (nice but not required) the right column background image is being cut in half (as does the top one if you size small enough). any way to make the images ignore the collumns? don't worry about the colors I will be changing them soon How would i go about aligning everything on a page so instead of starting on the very left of the page, it starts X amount of pixels away from the side? Also how can i adjust the space between each line of text? Make it a bit wider or smaller..etc Hey, im not too experienced with web design but me and a friend decided to go on an wing and try and make a flash game web page. Everything been going great till i tried adding a add to the top left of the page. Only thing i could do is set an absolute value to the div but it dose not look right in smaller resolutions. Example script: <div style="text-align: left; position: absolute;"> <!-- Begin BidVertiser code --> <script language="JavaScript1.1" src="http://bdv.bidvertiser.com/BidVertiser.dbm?pid=141137&bid=341700" type="text/javascript"></script> <noscript><a href="http://www.bidvertiser.com/bdv/BidVertiser/bdv_advertiser.dbm">internet advertising</a></noscript> <!-- End BidVertiser code --> </div> <div style="text-align: center;"><a href="http://pinkkittens.org/"><img alt="Banner" src="http://pinkkittens.org/images/pinkkittenbannernew.png" style="border: 0px solid ; width: 815px; height: 121px;" align="top"></a></div> <div id="flashcontent" style="text-align: center;"></div> <script type="text/javascript">var so = new SWFObject("http://pinkkittens.org/upward.swf","upward","815","35","8","#FF88B8"); so.addParam("allowScriptAccess","always"); so.write("flashcontent");</script> I want the banner in the middle...the navigation bar right under it and also the ad on the far left...but could only achieve this with a absolute value...any pointers? Web address for better viewing pleasure is http://www.pinkkittens.org/ I have a HTML file with two pictures on. They are like title lines. I need the one to be pushed right up to the top-left, and the other one to strech all the way across. I have a screenshot: http://img80.imageshack.us/img80/6827/screenshotjs.png Have a look. The lines are two pictures, they are split close to the middle. I have a form i am creating for a widget to put on my website but for some reason it does not align all the way to the left instead it is off center. How do i put it to the far left? And then there is a random box that appears in the top, how do I remov this? Thank you HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <input> </head> <body> <form id="form1" action="https://app.realeflow.com//api/contactSubmit.aspx?id=35151&type=1&ar=30178" method="post" name="form1"> <script type="text/javascript">// <![CDATA[ function numbersonly(myfield, e, dec) { var key; var keychar; if (window.event) key = window.event.keyCode; else if (e) key = e.which; else return true; keychar = String.fromCharCode(key); if ((key == null) || (key == 0) || (key == 8) || (key == 9) || (key == 13) || (key == 27)) return true; else if ((("0123456789").indexOf(keychar) > -1)) return true; else if (dec && (keychar == ".")) { myfield.form.elements[dec].focus(); return false; } else return false; } // ]]></script> <div id="seller_opt" class="optin" style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 0pt; WIDTH: 477px; PADDING-RIGHT: 0pt; BACKGROUND: url(http://www.ibuyhousesinsanantonio.com/wp-content/uploads/2012/01/Untitled.png) no-repeat 0pt 50%; HEIGHT: 481px; PADDING-TOP: 55px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial"> <p class="text" style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal" >Name:</p> <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt"> <input id="SellerWizard_ownerName" style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP: 2px; font-size-adjust: none; font-stretch: normal" name="SellerWizard$ownerName" maxlength="100"> </div> <p class="text" style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal" >E-mail Address:</p> <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt"> <input id="SellerWizard$ownerEmail" style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP: 2px; font-size-adjust: none; font-stretch: normal" onkeydown="arrowKeyNavigate(this);" name="SellerWizard$ownerEmail" maxlength="100"> </div> <p class="text" style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal" >Zip Code:</p> <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt"> <input id="SellerWizard$ownerZip" style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP: 2px; font-size-adjust: none; font-stretch: normal" onkeydown="arrowKeyNavigate(this);" name="SellerWizard$ownerZip" maxlength="15"> </div> <p class="text" style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal" >Mobile Phone*:</p> <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt"> <input id="SellerWizard$ownerMobilePhone" style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px 0px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP: 2px; font-size-adjust: none; font-stretch: normal" onkeypress="return numbersonly(this, event)" name="SellerWizard$ownerMobilePhone" maxlength="25"> </div> <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt"> <input id="SellerWizard_FinishNavigationTemplateContainerID_FinishButton" class="submit" style="MARGIN: 0pt 0pt 0pt 25px" onclick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("SellerWizard$FinishNavigationTemplateContainerID$FinishButton", "", true, "", "", false, false))' name="SellerWizard$FinishNavigationTemplateContainerID$FinishButton" value="Finish" src="http://api.ning.com/files/2FjYylCa-7----tgtm1C84N-wASg37E3PmRpOeW5GET9uz4-SqDzfp9Xn7pslOJrglrucDsLut3pJXluZymZKd-mGJj0vi26/submitbutton.jpg" type="image"><br> *Optional </div> </div> </form> <br> </body> </html> You can see where it doesnt align on the website and another view of it not being where it is suppose to be in an html editor, thanks for any help! So I'm working on a <dl> and using this bit of code as an example: <style type="text/css">dl{ border: 3px double #ccc; padding: 0.5em; } dt { float: left; clear: left; width: 100px; text-align: right; font-weight: bold; color: green; background-color:yellow;} dt:after { content: ":"; } dd { margin: 0 0 0 110px; padding: 0 0 0.5em 0; } </style> <dl> <dt>first item</dt> <dd>definition for first item in list</dd> <dt>second item</dt> <dd>definition for second item in list<br> extending across more than one line</dd> <dt>third item</dt> <dd>definition for third item in list</dd> </dl> That bit works exactly like you'd expect it to. However, when I apply it to my own list I run into a problem and i can't see the problem. Here's the link to my page: http://site.outletpccomputerrepair.c...opups/test.htm whenever I have a second line of <dd>, the alignment messes up. I can't see what to do in order to get the <dd> elements to align properly whenever there's a second line. Please help! hey Guys! Happy new years to all! I need a little bit of help with something that is quite simple (I think). I have a full website set up in three frames header, body and footer. The site is set to have both the header and footer at a fixed position and size. and the body scrolls when needed. The problem is that when the scroll bar appears it moves the page on the body frame and the site doesn't align as it should. It moves to the left the amount of pixels the scroll bar has. How can I maintain the alignment of the body frame, even when the scroll bar appears? I hope that is, in fact, a simple thing and I'll appreciate the help on this! Thanks! Cheers Please can someone help me with html code to align boxes in code below. Boxes are all out of line at the moment. I have read that it is best to create a table, however I am really new to html and not sure how to do that. Thank you James HTML Code: <fieldset> <br> <div> <input type="hidden" name="sexuality" value="1"> </div> <div> <label>I'm a:</label> <select name="gender"> <option value="1" selected>man looking for a woman</option> <option value="2">woman looking for a man</option> </select> </div> <div> <br> <label>First name:</label> <input name="firstname" type="text"> </div> <div> <br> <label>D.O.B.:</label> <select name="dobday"> <option value="">Day</option> <option value="1">01</option> <option value="2">02</option> <option value="3">03</option> <option value="4">04</option> <option value="5">05</option> <option value="6">06</option> <option value="7">07</option> <option value="8">08</option> <option value="9">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> <select name="dobmonth"> <option value="">Month</option> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> <select name="dobyear"> <option value="">Year</option> <option value="1990">1990</option> <option value="1989">1989</option> <option value="1988">1988</option> <option value="1987">1987</option> <option value="1986">1986</option> <option value="1985">1985</option> <option value="1984">1984</option> <option value="1983">1983</option> <option value="1982">1982</option> <option value="1981">1981</option> <option value="1980">1980</option> <option value="1979">1979</option> <option value="1978">1978</option> <option value="1977">1977</option> <option value="1976">1976</option> <option value="1975">1975</option> <option value="1974">1974</option> <option value="1973">1973</option> <option value="1972">1972</option> <option value="1971">1971</option> <option value="1970">1970</option> <option value="1969">1969</option> <option value="1968">1968</option> <option value="1967">1967</option> <option value="1966">1966</option> <option value="1965">1965</option> <option value="1964">1964</option> <option value="1963">1963</option> <option value="1962">1962</option> <option value="1961">1961</option> <option value="1960">1960</option> <option value="1959">1959</option> <option value="1958">1958</option> <option value="1957">1957</option> <option value="1956">1956</option> <option value="1955">1955</option> <option value="1954">1954</option> <option value="1953">1953</option> <option value="1952">1952</option> <option value="1951">1951</option> <option value="1950">1950</option> <option value="1949">1949</option> <option value="1948">1948</option> <option value="1947">1947</option> <option value="1946">1946</option> <option value="1945">1945</option> <option value="1944">1944</option> <option value="1943">1943</option> <option value="1942">1942</option> <option value="1941">1941</option> <option value="1940">1940</option> <option value="1939">1939</option> <option value="1938">1938</option> <option value="1937">1937</option> <option value="1936">1936</option> <option value="1935">1935</option> <option value="1934">1934</option> <option value="1933">1933</option> <option value="1932">1932</option> <option value="1931">1931</option> <option value="1930">1930</option> <option value="1929">1929</option> <option value="1928">1928</option> <option value="1927">1927</option> <option value="1926">1926</option> <option value="1925">1925</option> <option value="1924">1924</option> <option value="1923">1923</option> <option value="1922">1922</option> <option value="1921">1921</option> <option value="1920">1920</option> <option value="1919">1919</option> <option value="1918">1918</option> <option value="1917">1917</option> <option value="1916">1916</option> <option value="1915">1915</option> <option value="1914">1914</option> <option value="1913">1913</option> <option value="1912">1912</option> <option value="1911">1911</option> <option value="1910">1910</option> <option value="1909">1909</option> </select> </div> <div> <br> <label>Email:</label> <input name="email" type="text"> </div> <div> <br> <label>Password:</label> <input name="password" type="password" value=""> </div> <div> Hi guys, I need help with IE7. If I open my webpage in Firefox it looks like screenshot1.png but when I open it in IE7 it displays like screenshot2.jpg. A live preview @ http://www.rawox.webege.com/home.php. Does anyone know how to fix this? I'm trying for 2 hours now and I can't get it Thanks in advance, Rawox Hi, I want to align some text but not with the center or something but i want it to aling to a square on my background image and i also want to make it so that is looks the same on widescreens. at the moment i do it like this <BODY leftmargin="150%" topmargin="220%"> f </BODY> But when i enter window mode the text also moves. can someone help me with tihs ? I am using FrontPage I have an image that I have created in Word and copied over into FrontPage as it was done using auto shapes. The shape is a star. I need it in the div to keep it aligned with stuff below. It works fine except the left hand corner of the star is cut off by about 3-4 pixels whilst the rest of the image is perfect? Any Ideas? Thanks as always hi all, i have set a page up using iframes as it was originally created using authoring software to allow me to create a menu (this menu did not function correctly with regular frames) I have adapted the code to make the frames appear ALMOST as i want but there is a gap between the lower two frames. This only occurs in firefox but is very annoying and i need help to remove it. The section of code i am using to create the frames is as follows. Code: <html> <iframe name="TopFrame" id="InlineFrame1" left="0%" top="0%" width="95%" height="15%" style="z-index:1" src="./top.html" scrolling="no" frameborder="0">Your browser does not support inline frames or is currently configured not to display inline frames.</iframe> <iframeset border="0" frameborder="0" framespacing="0"> <iframe name="LeftFrame" id="InlineFrame2" width="15%" height="80%" style="z-index:2" src="./left.html" scrolling="no" frameborder="0" framespacing="0">Your browser does not support inline frames or is currently configured not to display inline frames.</iframe> <iframe name="MainFrame" id="InlineFrame3" width="80%" height="80%" style="z-index:3" src="./main.html" scrolling="no" frameborder="0" framespacing="0">Your browser does not support inline frames or is currently configured not to display inline frames.</iframe> </iframeset> </html> Any help would be greatly appreciated. Thanks Dave Hey guys, i have 3 tables that I want to align like 1 2 3 at the moment they are 1 2 3 any ideas, here is the code i have HTML Code: <form action="process.php" method="POST" class="style1"> <table width="20%" style='border: 1px dotted;' bgcolor="#eeeeee" cellspacing="0" cellpadding="3"> <tr> <td>Xbox 360 GT:</td> </tr> <tr> <td><input type="text" name="x360gt" value="x360" /></td> <td></td> </tr> <tr><td colspan="2" align="right"> <input type="hidden" name="subedit1" value="1"> <input type="submit" value="Edit Gamertag"></td></tr> </table> </form> <br> <form action="process.php" method="POST" class="style1"> <table width="20%" style='border: 1px dotted;' bgcolor="#eeeeee" cellspacing="0" cellpadding="3"> <tr> <td>PS3 GT:</td> </tr> <tr> <td><input type="text" name="ps3gt" value="ps3" /></td> <td></td> </tr> <tr><td colspan="2" align="right"> <input type="hidden" name="subedit2" value="1"> <input type="submit" value="Edit Gamertag"></td></tr> </table> </form> <br> <form action="process.php" method="POST" class="style1"> <table width="20%" style='border: 1px dotted;' bgcolor="#eeeeee" cellspacing="0" cellpadding="3"> <tr> <td>PC GT:</td> </tr> <tr> <td><input type="text" name="pcgt" value="pc" /></td> <td></td> </tr> <tr><td colspan="2" align="right"> <input type="hidden" name="subedit3" value="1"> <input type="submit" value="Edit Gamertag"></td></tr> </table> </form> Could anyone help me out please Hi I am new to this site and very new to html. I just know the basics. My problem is, is there a way to make 1 line of text be split for example have 1 part of the line be aligned to the left and the other to the right. Here is an example, the first part is what is actually happening and the second part is the way i want it to look. This is an example.This is an example This is an example. This is an example. I just realized that my second part of the example didnt come out the way i wanted. So i want the second part to have the first part aligned to the left and the second part aligned to the right. Please help. Its probably really easy but like i said i just know the basics. Thanks in advance for any help that is given Mike I'm trying to align my link in the center of the page, but from some reason it still appears left. Here's the code I'm using- Code: <a href="http://or-bar.tripod.com/wheeloftime.html" align="center">Next</a> What am I doing wrong? |