|
HTML - Simple But Annoying Html Issue
Hello HTMLforums.com community!
I am doing some minor web design for an NPO (non-profit organization) in my community. There are some pages that exhibit this strange spacing between the headers and body as you will see on the following pages: http://www.gadshillcenter.org/progra...grams_main.php http://www.gadshillcenter.org/progra...enservices.php http://www.gadshillcenter.org/progra...connection.php This same thing happens with all other program_??.php pages. However, it does not happen on the following, seemingly identical templates: http://gadshillcenter.org/report/report_main.php http://gadshillcenter.org/newsevents...herreading.php http://gadshillcenter.org/newsevents...blications.php There doesn't seem to be borders on any of the pictures, so I see no reason for the indent that pushed the picture and top-left edge down one row. I use Microsoft Office Sharepoint Designer 2007. If you would like to view the code for any pages, just ask! Any ideas why? I could ENTIRELY reformat the pages, put them into tables and what-not, but that would take a while. Is there any way around this? Thank you all! Sincerely, Andrew Similar TutorialsMaybe it's not padding or whatever, but i'm having an issue with my assignment (given the very sketch instructions we get) and I simply can't figure this one out it's making me crazy -.- Look closely at the box with the paragraph, and the logo. Between them is a space of the original background color. I can't seem to figure out why that space is there and how to close the gap. Any ideas? here's the CSS code for the div class/id's around the main content(paragraph and photo) Code: #content { padding-left: 20px;
padding-right: 20px;
margin-left: 150px;
background-color: #F1E8B0;
color: #000000;
padding: 10px 20px;
overflow: auto;
}
#container {
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: #E8D882;
text-color: #000000;
border: 2px double #000000;
min-width: 700px;
}
And here is my xhtml code. HTML Code: <body> <div id="container"> <h1 id="logo"><img src="javalogo.gif" alt="Java Logo" height="117" width="619" /></h1> <div id="nav"><a href="index.html">Home</a> <a href="menu.html">Menu</a> <a href="music.html">Music</a> <a href="jobs.html">Jobs</a></div><br/> <div id="content"> <img src="windingroad.jpg" height="156" width="333" class="floatright" alt="Winding Groad Photo" /> <p>Following the winding road to JavaJam...</p> <ul> <li>Specialty Coffee and Tea</li> <li>Bagels, Muffins, and Organic Snacks</li> <li>Music and Poetry Readings</li> <li>Open Mic Night</li> </ul> <p>12312 Main Street<br/>Mountain Home, CA 93923<br/>1-888-555-5555</p></div> <div id="footer">Copyright © 2011 JavaJam Coffee House<br/><a href="mailto:whatever">SomeSite</a></div> </div> </body> Thanks a lot in advance. Hey all I've not done a simple drop menu form in forever and in trying to refresh my memory using tutorials I've stumbled down the rabbit hole and ended up in "I wonderland" There are so many different overly complicated methods and I' starting to get annoyed. So far I have this but it gives "Error on Page" in the browser bottom left bar. HTML Code: <form name='categorymenu' ACTION=URI method=get> <select name='menu' onchange='jump(this.form)'> <option>Categories</option> <option value='index.php?page=device&device=2&cat=animal'>Animal</option> <option value='index.php?page=device&device=1&cat=retro'>Retro</option> </select> </form> Any help to end my frustration would be gratefully appreciated. Hey guys, I have what seems to be a very simple problem but I cannot find the answer. I have a table with two columns. The first contains some text, the second an input box. Both columns are set to 50% and the input box is set to 100%. The input box contains a long piece of text. Under IE 6, FireFox and Opera the two table cells correctly take up 50% each and the input box takes up 100% of it's parent cell. However, under IE 7 - the input box expands to accommodate all of it's text. Does anyone know how I can stop IE 7 from doing this? The only way I have found is to make the table-layout fixed but this seems to have knock on effects. Does anybody know of a better solution? Many thanks, Ben . Here is my example code: <html> <body> <form name="ben"> <table style="width: 75%;" border="1"> <tr> <td style="width: 50%;"> Label: </td> <td style="width: 50%;"> <input type="text" style="width:100%;" value="This is reall long text that in IE 7 very annoyingly causes the table to adjust it's size beyond the set boundaries! Arghhhhh!!!!!!!!!!!!!"/> </td> </tr> </table> </form> </body> </html> Hi all, beginner question here. I'm attempting at building a small website for my local golf club, one of the tabs on the page is a "Contact" link, inside this tab page I have attempted to embed a small GoogleMap with co-ordinates of the golf club. Whilst testing with IE7 the embedded GoogleMap appears randomly at the bottom of the page totally out of place where it should be. If browsing using Firefox, IE8 or Chrome it appears in the correct place, which is in the middle of the "Contact" page, and only when you click on the "Contact" tab. I only seem to have this issue with IE7, all the other browsers I've tested so far it aligns perfectly (Firefox, IE8, Chrome). As I say above, this issue only appears in IE7 - however I'm more than sure it is just a stupid mistake on my behalf, but I've tried and tried and can't seem to resolve it. Appreciate any help anyone can offer - Many thanks in advance. The website URL is: http://staging.boarsheadgolfcentre.co.uk/ The bit of code that handle the embedded map is: Code: <div class="box" id="contact_page">
<div class="m_table">
<table width="85%" align="left" cellpadding="20">
<tr>
<td>
<h1 align="left">Contact Us</h1>
</td>
<td rowspan="5">
<div id="map_canvas" style="border-style:solid; border-width:1px; float: right; width: 350px; height: 450px"></div>
<strong style='float:right;'><a href="http://maps.google.co.uk/maps?hl=en&expIds=17259,28023&xhr=t&cp=39&um=1&ie=UTF-8&q=Boars+Head+Golf+Centre+Ltd,+Crowborough&fb=1&gl=uk&hq=Boars+Head+Golf+Centre+Ltd,&hnear=Crowborough,+East+Sussex&cid=0,0,4613151939200773413&ei=y98ITfieOYO3hQelsojLDw&sa=X&oi=local_result&ct=image&resnum=2&sqi=2&ved=0CCUQnwIwAQ" style='text-decoration: none;'><font color=#000000>For a larger map click here</font></a></strong>
</td>
</tr>
<tr>
<td>
<p style='border: none;'>
<strong>Boars Head Golf Centre </strong><br />Boars Head, Crowborough, East Sussex, TN6 3HD <br /><br />
<strong>General Manager: </strong>Peter Grenham<br /><strong>Telephone: </strong>01892 664 545<br /><br />
<strong>Professional: </strong>Keith Robson<br /><strong>Assistant Professional: </strong>George Scott
</p>
</td>
</tr>
<tr>
<td>
<p style='border: none;'>
<strong>Location/Description:</strong><br />
Situated just outside Crowborough on the way to Tunbridge Wells on the B2157. Traveling from Crowborough Town turn right on the Boars Head roundabout and head back up the B2157 for about 100 yards, entrance on your left (signposted).<br />
Parkland course with water and trees. 9 hole course, 2698 yards (5396 18 holes), S.S.S. 67 (18 holes).<br /> Practice facilities available (driving range, grass tee, putting green and chipping area).
</p>
</td>
</tr>
</table>
</div>
</div>
Code: <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAGSrquuMPubSa0rTVyaJ2-hRM3sC8BNhS4dKTfFraCAxHin8KOhRLTWtdRIc0Q2_nPROmXypLuvQBUw"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
var center = new GLatLng(51.065371, 0.183923);
map.setCenter(center, 13);
var marker = new GMarker(center, { draggable: false });
GEvent.addListener(marker, "dragstart", function () {
map.closeInfoWindow();
});
GEvent.addListener(marker, "dragend", function () {
marker.openInfoWindowHtml("Just bouncing along...");
});
map.addOverlay(marker);
GEvent.addListener(marker, "click", function () { marker.openInfoWindowHtml('Boars Head Golf Centre'); });
}
}
</script>
hi, i tried looking through forums but couldnt find an answer. i hope u can please help! i have a photography ad up on a site that i use html for, its simply a block of code hosting a list/tall page of pics, one line/pic goes like this... <img src="http://img715.imageshack.us/img715/3126/img7899small.jpg"><br> the other lines in the text are the same code. problem is they all try to load up simultaneously causing a slow ad to see anything, potentially losing observers attention span. do u know if theres some code i can add to each line so each pic loads up fully before the next one begins to load and this starts at the top? this will help keep attention due to somin at the top loading straight away, thanks! Hey guys In internet explorer, in a computer that has Skype installed on it, Skype makes all telephone numbers in webpages into Skype buttons with a Skype menu! Here is an example. http://thebrowserhighlighter.com/images/tool_skype.gif There are two problems with this: As a result, Skype takes control of the graphics, it changes the font, the size, and adds a Skype button near it! The second problem is that Skype also "thinks" IDs and or catalog numbers are PHONE numbers, and does the same thing to them! Is there a way to disable Skype from doing this (not in MY computer, in the HTML itself)? My html problem keeps failling, with all my image codes.. shown for 10 errors which are all for the images what's wrong? Here is the 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=utf-8" /> <!-- New Perspectives on HTML and XHTML 5th Edition Tutorial 2 Case 2 Fiddler Home Page Author: Date: 2-16-2011 Filename: home.htm Supporting files: fiddler.jpg --> <title>, ITSE 1411 Lab Project 2, Tutorial 2 Case 2, Due 02/23/2011</title> </head> <body> <div> <img src="fiddler.jpg" alt="Fiddler on the Roof" /> <hr /> <a href="home2.htm"><img src="home.jpg" alt="home" /></a> <a href="slide1txt.htm"<img src="start.jpg" alt="start" /></a> <a href="slide1txt.htm"<img src="back.jpg" alt="back" /></a> <a href="slide2txt.htm"<img src="forward.jpg" alt="forward" /></a> <a href="slide6txt.htm"<img src="end.jpg" alt="end" /></a> <br /> <a href="slide1txt.htm"<img src="thumb1.jpg" alt="slide1" style="border-width: 5" /></a> <a href="slide2txt.htm"<img src="thumb2.jpg" alt="slide2" style="border-width: 0" /></a> <a href="slide3txt.htm"<img src="thumb3.jpg" alt="slide3" style="border-width: 0" /></a> <a href="slide4txt.htm"<img src="thumb4.jpg" alt="slide4" style="border-width: 0" /></a> <a href="slide5txt.htm"<img src="thumb5.jpg" alt="slide5" style="border-width: 0" /></a> <a href="slide6txt.htm"<img src="thumb6.jpg" alt="slide6" style="border-width: 0" /></a> </div> <hr /> <div> <img src="slide1.jpg" alt="slide1" /> </div> <blockquote> <p><i>Do You Love Me?</i> sung by Deb Ingalls and Thomas Gates</p> </blockquote> </body> </html> Okay I have a table that has two rows and eight columns. I want to make a third row with only ONE column so that the third row is the length of the table. How do I go about doing that? This should be a pretty easy one, I think that I've just been staring at this for too long. The question is, why is the first row in this table so tall? I am expecting it to be around 400px tall, but it's about 950px. HTML Code: <html>
<head>
<style>
table.container{
width: 1400px;
}
table.subcontainer{
border: 1px solid #000;
text-align: center;
width: 100%;
}
td.container{
background: #DDD;
line-height: 4px;
vertical-align: top;
}
</style>
</head>
<body>
<table class="container">
<tr>
<td class="container" rowspan="2" width="200"><table class="subcontainer">
<tr>
<td height="1000">Toolbar<br />1000 x 200</td>
</tr>
</table></td>
<td class="container" width="400" rowspan="2"><table class="subcontainer">
<tr>
<td height="200">400 x 200</td>
</tr>
</table><br />
<table class="subcontainer">
<tr>
<td height="400">400 x 400</td>
</tr>
</table><br />
<table class="subcontainer">
<tr>
<td height="400">400 x 400</td>
</tr>
</table></td>
<td class="container" colspan="2" width="800"><table class="subcontainer">
<tr>
<td height="400">800 x 400</td>
</tr>
</table></td>
</tr>
<tr>
<td class="container" width="400"><table class="subcontainer">
<tr>
<td>400 x 200</td>
</tr>
</table></td>
<td class="container" width="400"><table class="subcontainer">
<tr>
<td>400 x 200</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
I have a simple 2 column 2 row table that looks like the code below. I want to expand cell 2's height without expanding cell 1's height. I need this to be dynamic due to different users seeing different heights in cell 2. Cell 3's height can change all it wants to...I just dont want cell 1's height to change!! <html> <head> <title>Height Issue</title> </head> <body> <table> <tr> <td width="100px" height="100px"style="background-color: ##00FF00">cell 1</td> <td rowspan="2" width ="100px" height="200px"style="background-color: #00FFFF">Cell 2</td> </tr> <tr> <td width ="100px"height="100px"style="background-color: #FFFF00">Cell 3</td> </table> </body> </html> hey forum. first timer here with what i think should be a simple fix...but i'm frustrated and out of patience. can anyone tell me why i can't get rid of the blank space above "bedrooms" in the left column here? http://jimbwayne.com/kdtest/interiordesign.html same issue with the middle column, actually. i'm stumped. any intel would be much appreciated. thanks in advance. jim Hello World! (Where did that tradition start anyways?) Yes, I am fairly new at web design, and am using the method of "search-Google-whenever-you-have-a-problem-as-you-go" to learn HTML. I am pretty happy with the results I am getting in Dreamweaver, but there is one nagging thing that is throwing a kink into my designs. I have the majority of the content that is unique to each page within a table cell (<td>). Since I wanted to have the background color of the cell match exactly to an image that tops off the page body, I decided to have the background be one pixel of that color that repeats across the whole table cell. Originally, I just defined the background in the starting tag using "style=" then specifying the background. (Dreamweaver made sure I had it right using its Code Hinting). The background shows up perfectly when in the Dreamweaver editing view, but when looking at the page in any other view (Live view, preview in browser, etc.), the background of that cell is just white. I tried defining the background with a CSS ID, which has worked on other parts of the page, but no beans. What am I doing wrong? Is the fact it is only one pixel that has to repeat an issue? Here is the code: <td width="100%" height="103" colspan="8" align="center" id="page_background_beige" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: solid; border-top-width: 1; border-bottom-style: none; border-bottom-width: medium;"> <!-- TemplateBeginEditable name="Body" --> //In here goes all of the content of the page <!-- TemplateEndEditable --></td> The CSS: #page_background_beige { background-image: url(Background_Pixel.png); background-repeat: repeat; } Thanks, Wookieguy (Heh, I know tables are a fairly sloppy way to do things, but this is a fairly simple site anyways.) I have a Very simple page laid out using <div>'s and at the bottom, IE6 is displaying some of my text (a text link) twice, and wrapping it to the next line? ANY help at all would be a life saver. http://www.jhilgert.com/em/index.html thanks in advance for any help. For some reason there is a large blank area between the form and the caption on this page. It's most likely a simple edit, but i can't figure it out Any help is greatly appreciated. http://www.blackwidowinc.com/affiliate-program.html I can't get my buttons to work in IE (workd in FF btw) I'm pretty sure the problem lies in the following code Code: <style type="text/css">
input.groovybutton
{
font-size:21px;
font-family:Comic Sans,Sans-serif;
color:#FFFFFF;
width:138px;
height:44px;
background-image:url(background/buttonnorm);
border-style:none
}
</style>
<script language="javascript">
function goLite(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.color = "#AAFFFF";
window.document.forms[FRM].elements[BTN].style.backgroundImage = "url(background/buttonon)"
}
function goDim(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.color = "#FFFFFF";
window.document.forms[FRM].elements[BTN].style.backgroundImage = "url(background/buttonnorm)"
}
</script>
<form name="groovyform1" METHOD="LINK" ACTION="BDT_main">
<div style="position:absolute;top:220px;left:22px">
<input type="submit" name="button1" class="groovybutton" value="Main Page" title="The Main Page" onMouseOver="goLite(this.form.name,this.name)" onMouseOut="goDim(this.form.name,this.name)">
</div>
</form>
Any help you can spare would be greatly appreciated I think it may have to do with changing <style type="text/css"> to something else like div, cause thats what i did to my text and it fixed it. I just dont know what to change it to No idea how to even title this thread (sorry). When viewing particular pages, the entire content of my site shifts over to the right about 4/5 pixels. I've noticed that this happens whenever the page has a table within a table. Code: body {
_text-align:center;
_font-size:125%;
text-align:center;
background-color:#000;
color:#999;
font-family:'Lucida Grande',Tahoma,'Lucida Sans','Trebuchet MS',sans-serif;
font-size:62.5%;
line-height:1.4em;
}
/* Main elements */
#container {
#overflow:hidden;
margin:0 auto;
overflow:hidden;
padding:0 8px;
position:relative;
text-align:left;
width:980px;
Is the problem there or elsewhere? thanks I have this very annoying problem with my website which i can't seem to solve. I've built this site with Dreamweaver and somewhere along the way this happaned: http://www.kobiversano.com as you can see, there is this black line on top of the gray background on the right side of the page and on the bottom. How the hell do i remove it? Thanks in advance. Super annoying problem with Firefox portable? I've been using it for almost a year with no problems. All of a sudden my bookmarks take me to completely random RSS bookmarks. In other words, I'll click on a bookmark for Yahoo answers and it takes me to a BBC new article that I don't have bookmarked but is on my RSS subscription. I've tried deleting the bookmark.html file and replacing it with an older backup bookmark file but it doesn't work. If I bookmark something today, tomorrow it will take me to a different site altogether. Any help would be greatly appreciated. _________ I'm having trouble with my form code. Every time I put it up, a message is put in saying "This form is inoperational!" Here is the code I'm using: Code: <form action="MAILTO:felinas_jellicleworld@hotmail.com" method="post" enctype="text/plain"> Name:<br> <input type="text" name="name" size="20"> <p> Email:<br> <input type="text" name="mail" size="20"> <BR> Display:<input type="radio" name="display" value="one" checked="checked"> Do not display:<input type="radio" name="not" value="two"> <br> <p> Country:<br> <input type="text" name="country" size="20"> <br><br> <input type="submit" value="Send"> <input type="reset" value="Reset"> </form> |
|||||||