HTML - A Alignment Issue I Just Cant Get To Work
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? Similar TutorialsI'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 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 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 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. 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> 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 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! 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. 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 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! 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> Hello, I realize several threads have already been posted and that many of you dislike tables. I am having, however, a table issue that I think is only solvable through HTML adjustment of said table. In FF and IE8, my homepage looks excellent, just how I've laid it out. However, in earlier versions of IE (which the majority of my demographic still use), the layout of the table is askew. The remainder of my page is made up of various Flash movies, and I have tested that these are not the cause of the layout issue. The 2-cell table I have is being thrown for a loop (laying itself out to the right and stretching the site), and I'm not sure what the cause of it is. It needs to be left-aligned; below is my code: Code: <table summary="main content panel" align="left" bgcolor="#ffffff" width="535"> <tbody> <tr> <td align="left" width="15%"><img src="/images/369/images/content_image.png"></td> <td style="background: transparent url(/images/369/images/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">Valmont is currently conducting research on producing rice under mechanized irrigation in an effort to conserve water and energy, and increase profitability by bringing land into production, an initiative appropriately titled <i>Circles for Rice</i>.</font></h1></td> </tr></tbody></table> I'm unsure what the "scroll 0% 0%" through "-moz-initial;" is, the CMS I'm using has thrown that code in. (BTW - cannot get out of using CMS, which I would dearly love, this is a work project, so use what I'm given ) Here is why I think I still need to use a table: I need to be able to align two images (a photo and a border) but be able to insert text on top of the border. I had originally created this in Flash, but I totally spaced that I needed some text on the homepage so Google can index the text correctly. Is there another option to accomplish what I'm trying to do, one without tables? I appreciate all other options! Thanks! 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 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 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> It's not that huge of a deal because its only an under construction page... but I'd like to know how to get this page looking the same in both IE and Firefox. The only real issues with IE right now is that the image isn't centered and the yellow tape bg is 1px off from where it should be... thanks for any help! http://www.pzfantasyfootball.com Code: <html> <head> <title>PZ Fantasy Football » Under Construction</title> <style type="text/css"> * {margin: 0; padding:0;} p {margin-top: 15px;} h2 {font-size: 25px; border-bottom: 1px solid #fff; margin-bottom: 10px;} body { background-image: url(images/Metal_Texture-PhotoshopTower.jpg); background-color: #000; color: #fff; font-family: calibri, arial, verdana; } a, a:visited, a:active {color: #09f;} a:hover {color: #06c;} #wrap { width: 800px; margin: 0 auto; } .yellowtape { position: absolute; bottom: 0; width: 100%; height: 524px; background-image: url(images/yellowtapebg.gif); background-repeat: repeat-x; } .construction { position: absolute; bottom:0; background-image: url(images/pzfantasyfootballunderconstruction.jpg); width: 800px; height: 600px; } .text { position: relative; left: 300px; top: 225px; width: 500px; font-size: 18px; text-align: left; } </style> </head> <body> <div class="yellowtape"></div> <div id="wrap"> <div class="construction"> <div class="text"><h2>11/1/07 » Site Under Construction Again</h2>Well once again we enter construction mode. I just wasn't feeling the league site, no one really used it much, it didn't have much content that Yahoo! couldn't already offer, and it just really ended up being a waste of time. So now I'm going to give it a shot with a fantasy help site. I know I've done this before, but my future may hold something in the sports industry, so now I look to try and establish a well read site in order to help achieve my goals. I'm not 100% sure if the new site will be done before the end of this season, however it should be done in time for the 2008 NFL Draft. Hope to see you all soon! <p />Oh, and feel free to contact me via the forums <a href="http://www.pzfantasyfootball.com/forums">here</a>. </div> </div></body> </html> I don't understand! On my end when I upload it to the server and open an html file in the browser, everything looks fine. But when other people look at the site, it looks totally different. Text boxes are disgusting, I use CSS positioning and it puts everything totally off of the layout. Hi there. I use the following code to show a swf file and align it vertically and horizontically but i can do only the horizontal alignment. Any help about the vertical? Thanks in advance HTML 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" lang="en" xml:lang="en"> <head> <title>Site</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-utf-8" /> <style type="text/css" media="screen"> body { margin:0; text-align:center; } div#content { text-align:center; vertical-align:middle;} object#content { display:inline; vertical-align:middle;} </style> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> swfobject.embedSWF("main.swf", "myContent", "1400", "910", "9.0.0"); </script> </head> <body> <div style="vertical-align:middle"> <div id="myContent" style="vertical-align:middle"></div> </div> </body> </html> This is the first site I've done. I want to add some screenshots to the center of the page but can't figure out how to keep the links in place at the left. When I add the pics the links move down to make room for the pics. How do I get the links to stay in place at the left of the screenshots? Thank you for any help. Krytin http://ghostfleet.bravehost.com/ghostfleet.htm |