|
HTML - Annoying Embedded Googlemap Alignment Issue
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>
Similar TutorialsHi, There may be an easy solution but ive spent over 3 hours trying to correct this now. Basically i have 3 pages, each of which i 'saved as' to ensure the basic layout was identical. When the pages are aligned left they are all perfectly aligned, however as soon as i align them centrally, the heating and plumbing pages, for some reason indent themseleves slightly right compared to the bathrooms page. This is so frustrating. Can anyone see why and offer a solution to get them all aligned perfectly central? Thanks!! P.S. I think i may have wittled this down to a problem with the main content area, it seems when i apply the css h2 tag or remove the image it suddenly jumps. I have got them all aligned perfectly centrally before with no css in the main content area. any ideas? Hello guys, I have embedded this video on simple html page. I want that video to float in the middle of the screen. It looks OK on FireFox, but it appears on the left edge when played on Safari. (I have not checked it on IE.) What is wrong with that code? here is the link to that page: http://www.icebergfilms.com/cineDemo.html and here is that code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> <html> <head> <title>cinematography Demo by IcebergFilms</title> </head> <body bgcolor="#000000"> <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="256" width="320"> <param name="src" value="http://www.icebergfilms.com/demo1.mov"> <param name="autoplay" value="true"> <param name="type" value="video/quicktime" height="448" width="768"> <table width="768" height="548" align="center"> <tr> <td><embed src="http://www.icebergfilms.com/demo1.mov" align="middle" height="448" width="768" autoplay="true" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/"></td> </tr> </table> </object> </body> </html> Thank you so much for any advise. Maybe 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 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> 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 I'm in the early stages of creating a web site. I've created a banner with a logo, and some links and put it on top of each of the pages. The banner appears in the same place on all but one of the pages--on the page called "video", everything shifts over to the left a little...just a few pixels. I spent sometime looking through the HTML and the CSS for the pages, and through trial and error found the cause to be the height attribute given to a particular div on the page. I can't think of any reason why the height of the div should cause the horizontal position (not just of the div itself, but all elements on the page) to change. Any ideas? Here's the CSS for the site: Code: /***************Body, etc.*****************/
body {
background-color: #000000;
font-family: times, serif;
color: #b0b0b5;
}
#container {
margin: 0 auto;
width: 750px;
/**border: 1px solid red;**/
padding-bottom: 5px;
}
a {
text-decoration: none;
}
a:visited {
color: #b0b0b5;
}
a:hover {
color: #475890;
}
div.blank {
height: 100px;
}
div.blank2 {
height: 50px;
}
/***************Bottom Links*****************/
div.linksBot {
border: 0px;
background-color: transparent;
}
p.linksBot {
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
a.linksBot {
color: #c0c0c8;
text-decoration: underline;
}
a.linksBot:hover {
color: #475890;
}
/***************Banner*****************/
.banner {
padding: 0px;
margin: 0px;
background-color: black;
/* for testing ----border: 1px solid red;-----*/
color: #b0b0b5;
font-size: 20px;
font-family: copperplate, times, serif;
}
img.pno_ban {
opacity:0.4;
filter: alpha(opacity=40);
}
/***************Home*****************/
#home {
/**border: 1px solid green;***/
font-family: copperplate, times, serif;
}
#linksTop {
color: #c0c0c8;
width: 500px;
font-size: 20px;
text-align: center;
}
#pno {}
#welccell {
background-color: #444550;
height: 374px;
width: 250px;
}
p#welcome {
margin: 18px;
color: #d0dede;
font-family: times, serif;
font-size: 14px;
}
/***************Audio/Video*****************/
#video {
/******** THIS WAS THE PROBLEM--- height: 750px;***********/
background-color: #444550;
color: black;
padding: 20px;
}
embed {
margin-right: 15px;
}
#audio {
height: 500px;
background-color: #444550;
color: black;
padding: 20px;
border: 1px solid green;
}
and the HTML for the "video" page: Code: <body>
<div id="container">
<div class="banner">
<table cellspacing="0" cellpadding="0">
<tr>
<td><img id="pno_ban" src="assets/images/banner_pno_2.jpg" width="375px" /></td>
<td>
<table width="375px" cellspacing="0" cellpadding="0">
<tr>
<td colspan="4" height="75px"><a href="index.html">THE J-SLICE</a></td>
</tr>
<tr>
<td width="93px" height="25px"><a href="bio.html"> Bio</a></td>
<td width="93px" height="25px"><a href="audio.html">Audio</a></td>
<td width="93px" height="25px"><a href="video.html">Video</a></td>
<td width="93px" height="25px"><a href="contact.html">Contact</a></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="blank2"></div>
<div id="video">
<embed src="assets/videos/red_color_room.mov" id="myVid" width="480" height="286" autoplay="false" align="left">
</embed><p>From "The Violence Inherent In Red" - a film by Brian McCarthy</p>
</div>
<div class="linksBot"><p class="linksBot"><a href="index.html">Home</a> | <a href="audio.html">Audio</a> |
<a href="video.html">Video</a> | <a href="contact.html">Contact</a></p>
</div>
</div>
</body>
Now the problem is, the height attribute was there for a reason: since I'm embedding videos into the div, and the <embed> tag seems to not expand the div on its own, I'm not sure how to make sure all the videos (there will be more of them added later) fit within the div background. Thoughts? Thanks. Hi I have used a 2 column faux css layout and want to put a javascript calculator in the centre column but it does not align in the centre properly and i cannot see any indent in the column, could someone please help. I have tried previewing in IE, Chrome and Firefox but still have the same problem Thanks, the HTML code is below Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>iCD - Report</title>
<link href="_css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
<img src="Images/header3.jpg" width="923" height="92" alt="iCD - The authority in CD's" />
</div>
<!-- End Header -->
<!-- Begin Faux Columns -->
<div id="faux">
<!-- Begin Left Column -->
<div id="leftcolumn">
<a class="nav" href="index.html" title="Home">Home</a>
<a class="nav" href="calculator.html" title="Calulator">Calculator</a>
<a class="nav" href="slideshow.html" title="Slide Show">Slide Show</a>
<a class="nav" href="cds.html" title="CD's">CD List</a>
<a class="nav" href="contact.html" title="Contact Us">Contact Us</a>
<span class="chosen">Report</span>
</div>
<!-- End Left Column -->
<!-- Begin Content Column -->
<div id="content">
<h1>Faux Column CSS Layouts</h1>
<p>
These 2 Column Faux CSS Layouts use a background image to make it look like the
left and right columns are equal in height and independent of each other.
<br />
<br />
Things couldn't be further from the truth. I created a parent column called faux
and vertically tiled the image, that contained both the left and right child columns.
I then vertically tiled the faux background image and viola.
<br />
<br />
I first found about this method from the <a href="http://www.alistapart.com">
alistapart site</a> by a guy called <a href="http://simplebits.com/">Dan Cederholm</a>
</p>
</div>
<!-- End Content Column -->
<!-- Begin Right Column -->
<div id="rightcolumn">
<p>
hello also
</p>
</div>
<!-- End Right Column -->
</div>
<!-- End Faux Columns -->
<!-- Begin Footer -->
<div id="footer">
<div align="center">© Himesh Siyodia N0181013 </div>
</div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>
Hi folks, I'm having a distressing issue with my website. I have a table of thumbnails that must line up very specifically to fit with a background image. Not so hard, the page appears perfectly when I view it by itself (http://natehess.org/working/work/rec...rk_layout.html) But when I drop it into a Scrolling DIV script (Aaron Boodman's) a get a peculiar spacing issue on the set of 8 thumbnails in *FireFox*. The issue doesn't appear in IE, but gotta get it right. The problem page is http://natehess.org/working/work/recent_work.html If anyone would be willing to provide a reccomendation or slog through my code I'd appreciate it. I built the page in dreamweaver, so it's not the cleanest code ever, but I'm at a loss at this point. Thanks so much for any help. Hello, on my website www.PrinceArmory.com, the header and body closing tables are wider than the rest of the content and it causes alignment issues when shrinking the width of a browser. I want the wider parts to shrink with the body for content purposes instead of adding a spacer on the content left margin. So I need to somehow designate some sort of sacrificial space so that the wider tables & images are slipped behind the browser border. I'm not sure if I described what I want accurately. I couldn't figure out a search term for google to help me so that's why I'm posting here. Thanks for any help I want to display label and input element like below, Code: user name: <text box>
email address: <text box>
<some lengthy text>
confirm email address: <text box>
I don't want to use table. All the colons at the end of the label should align vertically. All the text boxes also must align vertically. <some lengthy text> must be right aligned along with text boxes. this may wrap to multiple lines. wrapped text also right aligned along with text boxes. please help me. thanks. Hi all, yes it's me again. Just a quick problem I'm trying to solve. I have a script to add tabs to my site, but I can't get the text aligned in the middle of the tabs. I realize this could be solved by having the text actually on the image, but I don't want all my webspace taken up buy a couple hundred images, when one would work. I have attached the scripting for the tabs along with a preview of how it currently looks. Anyone got any ideas? Regards Jake N00b here, brought forth out of desperation and the fact that none of my coder-friends have a clue whats causing this. Currently coding my first website ( by hand in notepad. Awesome learning... thinger ... not so great on the troubleshooting.) So- can anyone help me fix why this site looks fine on IE, but the BG doesn't quite align in firefox? Would be MUCHLY appreciated! Hi, I am working for support and got one issue raised.. My webpage has 3 print blocks .. when i minimize the browser the alignment of third block remains same and hence I good horizontal space bar for that while other two blocks align/resize themselves according to new page size.. Kindly suggest which tag /etc i need to check I am having a problem with content being misaligned in Firefox. If you look at the page in IE it looks fine. But several elements are misaligned in Firefox. If you look at the site www.displaypoints.com/promotions (currently displaying as http://69.89.31.104/~displayp/promotions.html) in IE and then Firefox you can see the issue. This is happening on several pages including this one so I'm sure it's a coding issue but I can't figure it out. Any help would be appreciated. http://www.jakobmetzger.com/misc/sites/kindling/ In IE the only pages that render correctly where the top blue line that goes across the screen is the forums page. the other pages have a black space to the right of the menu. Any ideas? I am trying to left-align this table and I cannot figure out why it will not behave. Mind you, the problem is only occurring in IE7 - IE8 and Firefox are fine. Please help? Code: <table summary="main content panel" align="left" bgcolor="#ffffff" border="0" cellpadding="0" width="535" height="200"> <tbody> <tr align="left"> <td align="left" width="15%"><img src="/images/369/images/content_image.png"><br><br><br><br></td> <td style="background: transparent url(/panel.png) no-repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; vertical-align: middle; text-align: center;" align="left" width="70%"><h2 style="font-family: Arial;"><font color="#0088ce" size="6">Project Initiative</font></h2><h1 style="font-family: Arial; text-align: center;"><font size="3" face="Arial">TEXT HERE</i>.</font></h1><br><br></td> </tr></tbody></table> I am having an alignment issue with a row of images. The site is located he http://www.teewala.com/teewala I cannot figure out why the three images are shifted slightly to the right. The code is very simple, so I figure the solution should be simple. Any help is greatly appreciated. Thanks! Having an issue with page positioning and alignment. My html skills are limited at best but Im trying to set up a layout template for my ebay sales. what I want is for the page/table to have fixed borders so that the horizontal scroll bar at the bottom doesn't' appear as I enter large amounts of text, instead I'd like to have it expand downwards to accommodate whatever I enter instead of expanding outwards to the right as its currently doing. I realize the code may be a bit of a mess, but Im seriously stuck, I've messed with all the tags but I can't seem to figure out what is causing this problem, any tips at all from anyone would be much appreciated. link to layout http://surrenderyourwings.com/layout.html When you go to my site www.sforu.com with IE 6 or IE7 the picture is all misaligned, So could you take a look and let me know whats wrong with it, because it's driving me crazy Thank you |
|||||||