HTML - Table Overflow Issues
Hey All,
I sliced a PNG and ended up with a table that overflows and screws up the whole page. Here's what it's supposed to look like: http://www.uark.edu/ua/oep/web2/index.php And here it is stretched out by the content area: http://www.uark.edu/ua/oep/web2/headlines.php?so=da Help? Thanks! J Darnielle Similar TutorialsSo I just decided to redesign my website, and I learned the wonders of "position: absolute" and the left, right, top, and bottom CSS tags. But of course, with that comes some issues (and other things, like me having to think about people with different browsers/resolution settings than me). Some of my problems are as follows (captions of the problem are under the images) When the text overflows here, it just leaves the <div> tag... well... multiple <div> tags. This one takes the body <div> with it.. but doesn't let the bottom page image extend down. Top filler image doesn't extend all the way, body <div> doesn't connect properly to fade images. So as you can see, my big problem is the overflow, which really needs to be fixed. Don't know what the problem is with Opera there, but it's something else that should be checked out. So anyway, here's my code for the website. If you have any ideas for how to improve it/make it work better, then I'm happy with that. Don't worry about validation right now, though. I'm saving that for later. HTML Code: <html> <head> <title>Home - Alex Crooks Webdesign</title> <style type="text/css"> body { margin: 0px; background-color: #035b07; font-size: 10pt; color: white; font-family: verdana, arial, sans-serif; } a { text-decoration: none; color: white; } a:hover { text-decoration: underline; color: white; } img { border: 0px; } .navlink { font-size: 16pt; font-variant: small-caps; font-weight: bold; } #navlinks { text-align: right; vertical-align: middle; padding: 5px 10px 0px 10px; } #topleft { position: absolute; top: 0px; left: 0px; float: left; width: 141px; height: 228px; background-image: url(topleft.gif); z-index: -11; } #topfiller { position: absolute; top: 0px; width: 100%; height: 155px; background-image: url(topfiller.gif); z-index: -12; } #left { float: left; position: absolute; left: 0px; width: 65px; height: 100%; background-image: url(leftfiller.gif); z-index: -13; } #bottomleft { position: absolute; bottom: 0px; left: 0px; float: left; width: 137px; height: 134px; background-image: url(bottomleft.gif); z-index: -11; } #bottomfiller { position: absolute; bottom: 0px; width: 100%; height: 67px; background-image: url(bottomfiller.gif); z-index: -12; } #nav { margin: 100px 0px 0px 65px; margin-top: 100px; height: 40px; width: auto; background-image: url(navbg.gif); color: white; } .sep { vertical-align: middle; width: 2px; height: 25px; padding: 0px 5px 0px 5px; } #bodyright { position: absolute; top: 273px; right: 200px; bottom: 104px; height: auto; width: 22px; background-image: url(bodyright.gif); z-index: -7; } #body { padding: 5px 5px 5px 5px; position: absolute; top: 273px; right: 221px; bottom: 104px; left: 200px; width: auto; height: auto; background-color: white; color: black; z-index: 0; } #bodybottom { float: left; position: absolute; left: 246px; right: 221px; bottom: 87px; left: 200px; width: auto; height: 17px; background-image: url(bodybottom.gif); z-index: -7; } #bodycornerleft { position: absolute; bottom: 87px; left: 200px; width: 46px; height: 18px; background-image: url(bodycorner1.gif); z-index: -6; } #bodycornerright { position: absolute; right: 205px; bottom: 87px; width: 17px; height: 17px; background-image: url(bodycorner2.gif); z-index: -7; } </style> </head> <body> <div id="left"></div> <div id="top"> <a href="index2.html"><img style="padding: 5px 0px 0px 5px;" src="crookslogo.png" /></a> <div id="topleft"></div> <div id="topfiller"></div> </div> <div id="nav"> <div id="navlinks"> <a class="navlink" href="">Home</a> <img class="sep" src="navseparate.gif" /> <a class="navlink" href="">Features</a> <img class="sep" src="navseparate.gif" /> <a class="navlink" href="">Blog</a> <img class="sep" src="navseparate.gif" /> <a class="navlink" href="">Clients</a> <img class="sep" src="navseparate.gif" /> <a class="navlink" href="">Products</a> </div> </div> <div id="content"> <div id="body"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac enim sapien, vel tristique sapien. Vivamus erat purus, feugiat non porttitor id, cursus at sapien. Curabitur eleifend, leo facilisis consequat faucibus, ante eros bibendum tellus, et dictum nibh mi laoreet turpis. Proin pellentesque, nulla et ornare pretium, ipsum lectus faucibus mi, sed dictum purus ipsum a ante. Aenean nibh odio, porttitor a volutpat ut, euismod vitae nisi. Integer urna turpis, ultrices ullamcorper porttitor in, placerat ut metus. Sed venenatis nisl in elit faucibus non consectetur quam commodo. Pellentesque ut augue massa, ac iaculis elit. Integer eu quam nisi, non faucibus neque. Donec sit amet magna at nulla commodo cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec tellus mauris, congue ut lobortis nec, adipiscing eu arcu. Suspendisse congue consectetur ante at porttitor. Maecenas sapien nibh, porttitor non pellentesque sed, sodales eu dui. </p> <p> Nullam sodales malesuada lorem, et cursus velit malesuada nec. Phasellus vestibulum elit quis nunc semper vel accumsan dui lobortis. Nunc viverra tortor tincidunt dolor congue quis porta tortor auctor. Sed porta neque ac libero tristique varius. Nam id nisi lectus. Integer consectetur magna id erat volutpat adipiscing. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer risus sem, interdum sed eleifend at, tincidunt in odio. Vestibulum euismod mauris eget magna semper sit amet feugiat risus varius. Mauris non neque et arcu ultricies venenatis a non mauris. Nulla facilisi. Donec sem turpis, porttitor et posuere id, posuere eget diam. Vestibulum et aliquam nibh. Phasellus quis ligula mauris, non porttitor sapien. Duis eu est id elit blandit vestibulum quis non urna. Maecenas enim augue, cursus faucibus tincidunt eget, cursus sed sem. Curabitur dictum dolor id massa bibendum vel tincidunt nunc volutpat. Nunc lobortis augue vitae ante porta eget mattis nisl faucibus. Ut sodales lorem vel dolor malesuada bibendum. Maecenas eget neque in elit semper rhoncus. </p> <p> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec aliquet semper volutpat. Suspendisse vitae sapien pulvinar mi egestas ornare quis nec sapien. Pellentesque nec ipsum ligula, sed ultricies lectus. Duis eu ipsum et dui vehicula luctus. Sed mollis rutrum dui elementum consectetur. Nunc viverra tortor quis tellus semper a imperdiet nisl suscipit. Nullam et dolor at purus dignissim faucibus eu vitae quam. Proin lacus ante, tempus ut ullamcorper id, mattis vitae eros. Vivamus mauris lorem, interdum at ultrices in, ultrices non metus. Phasellus convallis lobortis sem, sit amet convallis ante dignissim in. Nullam id mollis nibh. Pellentesque lobortis convallis erat, suscipit lobortis velit euismod ultricies. </p> <p> Cras mollis imperdiet dignissim. Nulla sit amet elementum dolor. Curabitur luctus vestibulum sodales. Quisque eu odio velit, et pretium diam. Maecenas porttitor metus et mauris mattis sit amet facilisis odio sagittis. Aenean at turpis ac sapien ultrices pellentesque vel id erat. In ultrices pharetra erat, pulvinar molestie nisi hendrerit id. Mauris nunc eros, consequat in ultrices sed, malesuada non magna. Etiam dictum ultricies blandit. Vestibulum augue ipsum, malesuada a ullamcorper vel, porta accumsan nunc. Quisque dapibus posuere neque, sit amet lacinia justo tempus nec. Curabitur sit amet tortor nulla. Sed enim quam, facilisis eu dapibus quis, vestibulum at erat. Cras placerat sagittis eros, ac faucibus tellus ultricies vitae. </p> <p> Aenean commodo enim facilisis tellus lacinia sit amet vulputate est condimentum. Vivamus viverra vehicula felis sed rhoncus. Donec sed imperdiet est. Proin molestie velit nec urna lacinia vel fermentum sem tincidunt. Maecenas rutrum sollicitudin varius. Donec et ligula semper eros euismod interdum. Aenean ultricies magna sed nisl consectetur venenatis. Nullam quis orci sapien. Curabitur pellentesque lacinia ante, id pharetra risus sagittis id. Etiam metus turpis, rutrum vel faucibus nec, feugiat rutrum nibh. Donec fringilla sagittis ligula, nec varius felis dapibus eu. Curabitur felis quam, fermentum non eleifend ac, faucibus vel libero. In nec leo ut nulla sagittis scelerisque nec in orci. </p> </div> <div id="bodyright"></div> <div id="bodycornerleft"></div> <div id="bodybottom"></div> <div id="bodycornerright"></div> </div> <div id="bottom"> <div id="bottomleft"></div> <div id="bottomfiller"></div> </div> </body> </html> Hello, I am having some issues with a table doing weird things to my web page. It was working before, but I had to change it to put a Google AdSense spot in it. Here's the page I am viewing for testing purposes: http://www.combatfilms.com/ads/index.asp It uses ASP header and footer files, but the only actual ASP used is to include the file, the rest is HTML. The problem is that as you can see it is squishing the text to the left. The actual problem is taking place in the HTML of http://www.combatfilms.com/ads/include/header.asp The tricky part is that I need to not end the table until the footer.asp file does. This is because the title of every page is in a cell which is started on the header, but the actual text differs on pages. I don't know if this is clear, and I apologize if it isn't. The main thing I need to do here is to include the Google AdSense without changing anything on the index.asp file, only the header.asp file. Help is appreciated. Ok so I have a template from Dreamweaver that I am using with several div's. I can add content to the template fine, however when I attempt to add a table to the main content of the page, the Div's go all out of sequence. Here is my code (I know it may not be the best, but I need to quickly get the table to format correctly...): Quote: <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%> <!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=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- body { font: 100% Verdana, Arial, Helvetica, sans-serif; background: #666666; margin: 0; padding: 0; text-align: center; color: #000000; background-color: #333; } .thrColElsHdr #container { width: 60em; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left; } .thrColElsHdr #header { padding: 0 10px; background-color: #FFC; color: #039; font-family: Tahoma, Geneva, sans-serif; } .thrColElsHdr #header h1 { margin: 0; padding: 10px 0; } .thrColElsHdr #sidebar1 { float: left; width: 11em; padding: 15px 0; background-color: #FFC; color: #333; } .thrColElsHdr #sidebar2 { float: right; width: 11em; background: #EBEBEB; padding: 15px 0; } .thrColElsHdr #sidebar1 h3, .thrColElsHdr #sidebar1 p, .thrColElsHdr #sidebar2 p, .thrColElsHdr #sidebar2 h3 { margin-left: 10px; margin-right: 10px; } .thrColElsHdr #mainContent { margin: 0 12em 0 12em; font-family: Verdana, Geneva, sans-serif; color: #666; } .thrColElsHdr #footer { padding: 0 10px; background:#DDDDDD; } .thrColElsHdr #footer p { margin: 0; padding: 10px 0; font-size: 10px; } .fltrt { float: right; margin-left: 8px; } .fltlft { float: left; margin-right: 8px; } .clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; } --> </style><!--[if IE]> <style type="text/css"> </style> <![endif]--></head> <body class="thrColElsHdr"> <div id="container"> <div id="header"> <h1 align="center">RelationShare CRM</h1> <!-- end #header --></div> <div id="sidebar1"> <h3>Navigation</h3> <br/> <a href="Name.asp"> <img src="Images/button/button1up.png" border="0"/></a> <br/> <div align="center"><a href="Add_Name_170410.asp"><img src="Images/button2over.png" border="0"/></a> <a href="Edit_Name.asp"><img src="Images/buttons/button24up.png" border="0"/></a> <a href="Search_Name.asp"><img src="Images/button/searchnames1.png" border="0"/></a> </div> <a href="Address.asp"> <img src="Images/button/button2up.png" border="0"/></a> <br/> <a href="Program.asp"> <img src="Images/button/button6up.png" border="0"/></a> <br/> <a href="Campaign.asp"> <img src="Images/button/button3up.png" border="0"/></a> <br/> <a href="Support.asp"> <img src="Images/button/button4up.png" border="0"/></a> <br/> <br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/> <!-- end #sidebar1 --></div> <div id="sidebar2"> <h3>Tips</h3> <p>Creating Names</p> <p style="font-size:smaller;">Please ensure that all fields are entered correctly, and that only numbers are entered in the Telephone fields.</p> </div> <!-- end #sidebar2 --> <div id="mainContent"> <h1 align="center"> <em>Name</em></h1> <br/> <% Dim connect, Records, SQL Set connect = server.CreateObject("ADODB.Connection") connect.open = "Provider=MSDASQL;Driver={SQL Server};Server=REECE-PC\RHSQLEXPRESS;Database=RelationShare;Uid=sa;Pwd=;" Dim SCRIPT_NAME SCRIPT_NAME = Request.ServerVariables("SCRIPT_NAME") Dim strSQL Dim iRecordID SQL = "SELECT * FROM Name" Set Records = connect.execute(SQL) %> <table border="1" cellspacing="2" cellpadding="2"> <thead> <tr> <th>NameID</th> <th>Last Name</th> <th>First Name</th> </tr> </thead> <tbody> <% Do While Not Records.EOF %> <tr> <td><%= Records.Fields("Name_ID").Value %></td> <td><%= Records.Fields("LastName").Value %></td> <td><%= Records.Fields("FirstName").Value %></td> <td><a href="<%= SCRIPT_NAME %>?action=edit&id=<%= Records.Fields("Name_ID").Value %>">Edit</a></td> </tr> <% Records.MoveNext Loop %> <!-- end #mainContent --></div> <br class="clearfloat" /> <div id="footer"> <p>RelationShare CRM Pty Ltd</p> <!-- end #footer --></div> <!-- end #container --></div> </body> </html> And below are some screenshots showing the table causing all sorts of havoc with may page. In particular the Grey section with "RelationShare CRM Pty Ltd" is supposed to be a footer at the bottom of the page. Any ideas? I know it will be something simple, I just cant work it out!! I've been working on this simple single column layout for a while, and it was working just fine until the end, and for some reason, the top of the table is giving a problem, and the header isn't showing properly. http://akito.clavis-sama.com/ Any clue how to get rid of that portion right at the top? Ok my boss and I are kind of stumped and not sure why this is happening. My table is set up to be 1000px wide and im only using about 995. Anyway the table is getting repeated and the cells arnt lining up from one to the other. Here is a link to my server so you all can see what I am talking about. http://www.millermachinecompany.com/...te_listing.htm This has been testes on 1024x768 and also a 17" wide screen. On the wide screen the top most table is only about half the length for some reason. Anyway if any of you have any ideas why this is happening, the help would be greatly appreciated. Thank you When you check out the following sites in IE 7 the table cells break the text of combined cells. http://www.destinydealers.de/members.html http://www.destinydealers.de/achievements.html http://www.destinydealers.de/imprint.html In Firefox/Google Chrome/Seamonkey and so on everything is just fine. In IE 8 everything is fine too, but only for a few seconds and then it puts me back to IE 7 compatibility (...and bugs). Hello, I am having a bit of a problem with my tables and am not sure how to resolve it. @ www.scubatoo.net/test.php you will find that the top 3 rows are only 33.3% the width of the table. I understand that this is because the corresponding <tr> below are also 33.3% wide. How can I over come this? Thanks, Ryan I am not actually sure what has not been scripted correctly, I did not make these pages, my friend did & we are no longer in contact. You will have to view the source code on the page to get a better idea of things & the code is pretty short, if anyone can offer ANY advice here I would be so greatful thanks a bunch... If you goto http://stoneramerica.fatcow.com/action-add.php there is a "add url" option ( this is the page that has something wrong, but im not sure where or what ) The page is suppose to take the data from the website submitted & post that data to the tables we have created on the page below... You can view these tables here http://stoneramerica.fatcow.com/swoop.php Hey guys. I am having to rework some HTML/CSS and I am just getting frustrated with this part. I have a background image that needs to be the image behind both of the tables, but it can only be shown once. Mockup of what I need this part to look like: Here is my code at the moment -- HTML Part: HTML Code: <table id="myScheduleTable" width="100%"> <span class="sessionHeader">Session Wish List</span><br /> <tr> <form id="session_search"> <td valign="middle"> <a href="javascript:void(0);"><img src="{$APP_URL}/img/btn_save.gif" alt="Save" title="Save" onClick="saveMySchedule(true); return false;"></a> </td> <td valign="middle"> <input type="image" src="{$APP_URL}/img/clearButton.gif" Title="Clear" onClick="clearSessions();return false;"/> </td> <td valign="middle"><a href="javascript:void(0);" title="Email My Schedule" onClick="showEmailMySchedule();return false;"><img src="{$APP_URL}/img/btn_email.gif" alt="Email my Schedule"></a> {include file="$THEME/common/mail_a_friend.tpl"} </td> <td valign="middle"> <input type="image" src="{$APP_URL}/img/btn_printNow.gif" title="Print Now" onClick="new_window=window.open('','_blank');printSchedule(new_window);return false;" /> </td> <td valign="middle"> <a href="javascript:void(0);" title="Add to my Profile" onClick="exportHTML();return false;"><img src="{$APP_URL}/img/btn_addToProfile.gif" alt="Add to my Profile"></a> </td> <td valign="middle"> <div id='blankContainer'></div> </td> </tr> </table> <div id="myScheduleContainer"> <div name="userScheduleContainer" id="userScheduleContainer"> <form name="user_sessions" id="user_sessions"></form> <div id="userScheduleListContainer"> <div id='user_schedule_div'>{if !$user_sessions}No sessions selected.{/if}</div> </div> <div id="userSchedulePassContainer"></div> </div> </div> </td> <td> <span class="sessionHeader">myGDC Schedule</span><br /> <table id="myScheduleTable" width="100%"> <tr> <form id="session_search"> <td valign="middle"> <a href="javascript:void(0);"><img src="{$APP_URL}/img/btn_save.gif" alt="Save" title="Save" onClick="saveMySchedule(true); return false;"></a> </td> <td valign="middle"> <input type="image" src="{$APP_URL}/img/clearButton.gif" Title="Clear" onClick="clearSessions();return false;"/> </td> <td valign="middle"><a href="javascript:void(0);" title="Email My Schedule" onClick="showEmailMySchedule();return false;"><img src="{$APP_URL}/img/btn_email.gif" alt="Email my Schedule"></a> {include file="$THEME/common/mail_a_friend.tpl"} </td> <td valign="middle"> <input type="image" src="{$APP_URL}/img/btn_printNow.gif" title="Print Now" onClick="new_window=window.open('','_blank');printSchedule(new_window);return false;" /> </td> <td valign="middle"> <a href="javascript:void(0);" title="Add to my Profile" onClick="exportHTML();return false;"><img src="{$APP_URL}/img/btn_addToProfile.gif" alt="Add to my Profile"></a> </td> <td valign="middle"> <div id='blankContainer'></div> </td> </tr> </table> <div id="myScheduleContainer"> <div name="userScheduleContainer" id="userScheduleContainer"> <form name="user_sessions" id="user_sessions"></form> <div id="userScheduleListContainer"> <div id='user_schedule_div'>{if !$user_sessions}No sessions selected.{/if}</div> </div> <div id="userSchedulePassContainer"></div> </div> </div> </td> </tr> </table> CSS Part: Code: #myScheduleBG { background-image:url(http://test.gdconf.com/scheduler/img/mySchedule_bg.jpg); background-repeat: no-repeat; width: 872px; height: 283px; position: relative; float: left; border: none; top: 15px; left:-2px; } #mySessionWishList { float: left; display: block; border: none; } #myGDCSchedule { float: right; display: inline; border: none; } #myScheduleTable { position: relative; left:9px; top: 5px; width: 425px; } #myScheduleContainer { position: absolute; left: 9px; top:48px; width: 425px; height: 220px; border: none; background-color: #000000; } The background image is mySchedule_bg.jpg and it needs to hold both of the containers. Anyone have some insight as I am getting tired playing a guessing game with this code. All of this relative positioning is throwing me for a loop, especially in IE and Safari. Thanks. Hello, I made a very simple table layout (with photoshop and imageready) and its my very first time making this type of layout so I'm having a little trouble with the coding. I haven't added a style.css file to it, except for maybe the css that wraps my navigation to a certain width. Here is the url: http://rezina.awardspace.com/layout01 I can't seem to align the images correctly. My friend told me that one of the images was not sliced correctly, so I sliced it but .. it kind of fixed the right side, and not the left. Also, the extra.jpg (which is the outside background-the stripes) seems to repeat itself both vertically and horizontally, is there a way to fix that? Thanks. =)) oh. oops. I just read the rules, sorry for the vague title. I would try changing it to be more specific but I don't know how.. Hi Everyone- I'm hoping someone out there might be able to solve a problem I've been having with my site for a number of years. The site was designed for IE but with the growing popularity of Firefox and Safari (to name a few), I want to insure that it works properly with those browsers. For the most part, it does -- except when displaying a background image in a table. For example - look at this page: http://www.cygnus-x1.net/links/rush/...anentwaves.php When viewed in I.E., the grey background image with the woman displays properly, as does the full image of the album cover within. However when viewed in Firefox or Safari, the background image repeats near the bottom for about 20 pixels. The problem also exists on a page like this one: http://www.cygnus-x1.net/links/rush/lyrics.php Where the brown background image which includes the words "Rush Lyrics" displays properly in I.E. but seems to repeat for 20 pixels in FF. This one's been driving me crazy for years and, due to some recent changes I've been making, it's come back to haunt me. If anyone has any suggestions as to why this is happening and what I can do to remedy it, I would greatly appreciate it... Thanks so much. Hello, I just made my new site for my company and I tried to keep it extremely simple. I used wordpress to do the basic layout automatically and made some simple edits with some basic html i picked up along the way this week. There seems to be two problems though: 1) the form is inside a table which doesnt seem to align properly within any of the popular browsers (firefox/IE/chrome) .... it should look like 1 image instead of 3 separate pieces 2) i eventually got the form to align slightly better but the spot where I "Enter my zip code" doesnt align with the background image behind it.....sometimes it doesnt even say "enter zip code" which is very bad for a user experience. in firefox it doesnt say it, but in chrome it does say it....either way, both are aligned very poorly..... I put my code into this site: http://w3schools.com/html/tryit.asp?...=tryhtml_intro ...and after editing it, i've come to find that it works perfectly within that html editor and looks exactly how i want it to look. but then when i put the code back into my wordpress site, the alignment messes up again...... so i did some research and found out that wordpress has "deprecated" some of the html tags and that they dont work anymore...if i understand correctly. so now i have to find a way to pick new tags or use CSS...this is just so confusing and i thought maybe somebody here might be able to offer me some assistance to help me fix up this form/table problem. my site's url is: http://www.allautoinsurance.org my code that I'm editing is on the right sidebar, where the alignment messes up: <div style="text-align: center;"><span style="font-size: 14pt; font-family: Georgia; color: rgb(0, 0, 0);"><span style="font-size: 14pt;"><span style="font-size: 14pt;">Our free online service instantly browses the best rates in your zip code area at the click of a button. We've helped thousands of people quickly and easily save money on their auto insurance:</span></span></span><br /> <br /> <form action="http://network.mossaffiliatemarketing.com/z/61/CD62/&subid3= "method="post"> <table border="0" cellpadding="0" cellspacing="0" width="225"> <tr> <td colspan="2"><img src="http://www.allautoinsurance.org/wp-content/uploads/2009/08/top.jpg"></td> </tr> <tr> <td class="background1" valign="middle" height="54" width="153"> <style> .background1 { background-image: url(http://www.allautoinsurance.org/wp-c...tom_left.jpg); background-repeat: no-repeat; } </style> <input type="text" name="subid1" value="ENTER ZIP CODE" style="margin-left:30px; margin-bottom:5px; width:110px; border-width:0px; font-size:14px; font-family: Arial, Helvetica, sans-serif;" onClick="javascript:this.value='';"> </td> <td> <input type="image" src="http://www.allautoinsurance.org/wp-content/uploads/2009/08/bottom_right.jpg"></td> </tr> </table> </form> </div> <div style="text-align: left;"><span style="font-size: 12pt;"><span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(0, 0, 0); font-size: 12pt;">Step 1)</span> Input your zip code and click the button above to begin browsing the auto insurance providers in your area</span></span></span><br /> <br /> <span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(0, 0, 0); font-size: 12pt;">Step 2)</span> Select the auto insurance provider you're most comfortable with by clicking their picture<span style="font-weight: bold; color: rgb(255, 0, 0); font-size: 12pt;"> </span></span></span></span><br /> <span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(255, 0, 0); font-size: 12pt;">Warning</span>: Dont <span style="font-style: italic; font-size: 12pt;">always </span>go with the cheapest in the area</span></span></span><br /> <br /> <span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(0, 0, 0); font-size: 12pt;">Step 3)</span> Continue with the providers process if they meet your requirements</span></span></span></span><br /> </div> <div style="margin-left: 40px;"><span style="font-size: 10pt; font-family: Georgia;"><span style="font-size: 10pt;"></span></span></div><span style="font-size: 10pt; font-family: Georgia;"><span style="font-size: 10pt;"><br /> <span style="font-size: 12pt;">***We've been showing people how to get insurance quickly and easily for years. We respect your privacy, it is just as important to us as it is to you.</span></span></span> .....thanks for any help, i really appreciate your time and effort. if this code doesnt look smart at all its cuz i used some free WYSIWYG editor to generate it. i actually am very confused lol. thanks again. Best, Kyle P So I have this table, and I'm trying to get the overflow to work, but it's not working. Everytime I put a bunch of words it just streches and goes out of the specific height I want it to be at. Can someone help me? Make it where it overflows? Ppllleeassee. Here's my code. <table id="maintable"> <tr> <td colspan="2" width="303px" height="155px" class="words" overflow="auto"> 1111 </td> <td colspan="1" width="150px" height="155px" class="words"> 555 </td> <td colspan="1" rowspan="2" width="150px" height="205px" class="words"> 888 </td> </tr> <tr> <td colspan="1" rowspan="4" width="150px" height="300px" class="words"> 222 </td> <td colspan="1" rowspan="2" width="150px" height="150px" class="words"> 333 </td> <td colspan="1" rowspan="2" width="150px" height="150px" class="words"> 666 </td> </tr> <tr> <td colspan="1" rowspan="2" width="150px" height="125px" class="words"> 9999 </td> </tr> <tr> <td colspan="2" rowspan="4" width="300px" height="150px" class="words"> 4444 </td> </tr> <tr> <td colspan="1" width="150px" height="125px" class="words"> 777 </td> </tr> </table> <style type="text/css"> table#maintable { background-color:#222222; border: 2px solid #FF0099; } table#maintable td { padding: 5px; border: 1px solid #FF0099; vertical-align: top; text-align: left; } .words { color: #FFFFFF; } </style> Hello, I have one problem with overflow in IE, the problem results from having height of my div determined in % I guess. If I change it to fixed size in px I have no problems Here is the code : Code: <style type="text/css"> ... div.text { font-size: relative; width:85%; height:57%; overflow-y:scroll; } ... </style> <div class="text"> .... </div> I need the size of this div to be set in % and overflow to work, can I do that in any way ? (this woks nice in firefox, however not in IE6) Thank you!! Hello, I wan't to make a div filled with images in one single line, overflowing out of the visible content-part. I wan't to be able to move it left to right and back using jQuery (so that part should be covered). A sprite is not an option because of the images being links (Lightbox and stuff). CSS "overflow:hidden" and "display:in-line;" don't seem to work. Please help! I'm making a game and this is my current code: <html> <head> <title></title> <style type="text/css"> </style> <form> <input type="button" value="abc" onclick="move()"> </form> <img name="img1"> <!--http://bluebutton.info/images/home-button.gif--> <script type="text/javascript"> function c() { document.images['img1'].src = "http://bluebutton.info/images/home-buton"> document.images['img1'].width = 150 document.images['img1'].height = 150 document.images['img1'].style.position ="absolute" } function move() { var obj='img1'; move('img1',-0.5,0); } </script> </head> <body> <body onload="c()"> <body onkeypress="move()" <body </body> </html> It tells me I have a stack overflow at line 23 which is: move('img1',-0.5,0); Any suggestions of how to fix this or just clean up the code? I have a small problem with my site that I am having trouble fixing. When I add a
Quote: overflow: auto; , it goes under the nav box to the left, and adds a scroll bar. Here is a screenshot: ----- ----- Here is my CSS code: Code: #content {background:#92979c url(images/content-tail.gif) top repeat-x; padding:0 9px 0 10px; min-height: 100%; overflow: auto;} Here is the HTML: Code: <html> <head> <title>JACKASS JUNIOR</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body id="page3"> <div id="main"> <!--header --> <div id="header"> <div class="row1"> <!--<br /><br /><br />--> </div> <div class="menu"> <ul> <li class="active"></li> </ul> </div> <div class="submenu"> <ul> <div style="margin: 1.2% auto;"> <div class="marquee"><marquee><b><font color="#454545">--- NEWS: JACKASS JUNIOR HAS BEEN LAUNCHED! PLEASE ENJOY OUR VIDEOS! ---</font></b></marquee></div></div> <li class="last"></li> </ul> </div> </div> <!--header end--> <div id="content"> <div class="container2"> <div class="col-1 col-pad padding1"> <div class="box1"> <div class="tail-right"> <div class="corner-right-bottom"> <div class="corner-left-bottom"> <div class="corner-right-top"> <div class="corner-left-top"> <div class="indent"> <ul class="menu2"> <li><a href="#"><span><span>LINK</span></span></a></li> <li><a href="#"><span><span>LINK</span></span></a></li> <li><a href="#"><span><span>LINK</span></span></a></li> <li><a href="#"><span><span>LINK</span></span></a></li> <li><a href="#"><span><span>LINK</span></span></a></li> <li><a href="#"><span><span>LINK</span></span></a></li> </ul> </div> </div> </div> </div> </div> </div> </div> <br /> </div> <div class="col-2 margin-extra"> <div class="box3"> <div class="tail-right"> <div class="corner-right-bottom"> <div class="corner-left-bottom"> <div class="corner-right-top"> <div class="corner-left-top"> <div style="clear: right;"> <div class="indent"> <h3><span><span>CONTENT</span></span></h3> <div class="indent2"> <!--CONTENT--> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="clear"></div> </div> </div> <!--footer --> <!--footer end--> </div> </body> </html> It's really messy- Once I get this problem fixed I will organize it. Thanks for any help Hi, i want to add a horizontal overflow to the div element that holds the UL. each LI is displayed along side each other using Float:left. however, when they reach the end of the page it starts a new line. how can i get it so it doesnt start a newline, but carrys on in a line and can be scroll-able? thankyou Code: bodywrapper { width:930px; margin:auto; margin-top:20px; background:url(../images/layout/main_body_bg.jpg) repeat; } /*Image Gallery*/ #gallery ul { margin-left:-30px; margin-bottom:0; margin-top:-10px; } #gallery ul li { display:block; float:left; height:100px; width:100px; padding-top:10px; padding-right:10px; } .thumbnails { outline:none; border:none; } .thumbnails_link { outline:none; } A little out of my depth here, and my site is based on a DW template. I have a photo section with thumbnails, that is expanding. I have gone from 10 rows to 30, and in the process broken something. I have compared the code from my original 10 rows to the 30 and cannot find anything that would cause the issue, so am hoping for some help. http://www.uniquefinishing.co.uk/photopages/photos.html On the top horizontal menu, click on "Videos", then "photos". See the table has dropped? This is the only consistent replication of the issue I can find. If you now keep clicking on the same "photos" link on the top menu, it randomly drops and fixes itself occasionally. This happens randomly from any page to the "photos" page. Where should I be looking? |