|
HTML - Content Area Won't Extend In Ie
Hi,
I currently have a blog which I designed using wordpress although for some reason when you view a post on IE the white background of my content doesn't extend all the way down like it should. If you take a look at this post from my blog you will see what i'm talking about. http://shokzguide.com/starcraft-2-gu...de-strategies/ I can't seem to understand why it won't work. The code is the same on my other pages, although for some reason in the blog single posts it does this only one IE. Thanks Similar TutorialsI know I'm probably going to get ridiculed for this being my first post, but I can't seem to find any help elsewhere. I browsed the forum a bit before posting but didn't really know what to look for. OK so this the first website I've ever made and I only have limited html knowledge but so far this is what I have. www.freewebs.com/maurerrj Here is the html: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<!-- Created with the CoffeeCup HTML Editor 2007 -->
<!-- http://www.coffeecup.com/ -->
<!-- Brewed on 1/15/2007 4:28:49 PM -->
<head>
<title></title>
<style type="text/css">
<!--
.{background: #D6D3C0;}.{background-image: url(http://img138.imageshack.us/img138/3373/newbackground4qp5.jpg);background-repeat: repeat-y;background-position: center;}
-->
</style>
</head>
</style><body topmargin="0">
<div align="center">
<table cellspacing="0" cellpadding="0">
<tr><td colspan="0" width="750"><img height="223" src="http://img223.imageshack.us/img223/7681/banner5im9.jpg" width="724"><td></td>
<tr><td colspan="0" width="750"><img height="19" src="http://img407.imageshack.us/img407/7290/fillervh5.jpg" width="724" border="0"><td></td>
<tr height="0"><td colspan="0" width="750"><img height="11" src="http://img101.imageshack.us/img101/3912/spacer1hs9.jpg" width="724"><td></td>
<tr><td valign="top" width="153"><table cellspacing="0" cellpadding="0" width="153">
<tr><td><img height="36" src="http://img260.imageshack.us/img260/1838/filler2qj3.jpg" width="153" border="0"></td></tr>
<tr><td><a href="#"><img height="22" src="http://img156.imageshack.us/img156/9990/home1pp8.jpg" width="153" border="0"></a></td></tr>
<tr><td><a href="#"><img height="22" src="http://img92.imageshack.us/img92/8751/conifersls9.jpg" width="153" border="0"></a></td></tr>
<tr><td><a href="#"><img height="22" src="http://img251.imageshack.us/img251/7016/grassesbf3.jpg" width="153" border="0"></a></td></tr>
<tr><td><a href="#"><img height="22" src="http://img525.imageshack.us/img525/5920/shrubsvf9.jpg" width="153" border="0"></a></td></tr>
<tr><td><a href="#"><img height="22" src="http://img86.imageshack.us/img86/2730/perennialszy4.jpg" width="153" border="0"></a></td></tr>
<tr><td><a href="#"><img height="22" src="http://img137.imageshack.us/img137/4079/troughgardenskr9.jpg" width="153" border="0"></a></td></tr>
<tr><td><a href="#"><img height="22" src="http://img91.imageshack.us/img91/5199/directionsae8.jpg" width="153" border="0"></a></td></tr></table></div>
</body>
</html>
Anyway, onto the point... I want to make an area to put all of my content like text and images and what not in that main area but I don't really have any idea how to do it. Also the background image isn't showing up in firefox, so if you have any idea how to fix that let me know. But for now I guess you have to look at it in IE. Also, I will be having galleries under the evergreen, perennials, etc. tabs, and I think I want to use lightbox, but I don't know much about it. So any tips with that would help. The lightbox website is http://www.huddletogether.com/projects/lightbox2/ Any help you can give me is TRULY appreciated. still learning both photoshop and html and I'm wondering if there's a way to extend an irregularly shaped header using html? I know that my header is in a fixed resolution image so viewing the site in a higher resolution display will 'cut' it down. Here's the site I'm working on: I'm trying to design a simple html website for the company I work for but I have run into a problem. I can't figure out how to make the table extend all the way down to the bottom of the page without stretching the content. I tried adding bottommargin="0px" to the body tag but that didn't work. I also tried adding height=100% to the table tag but that stretched the content of the page. Here's my code: <html> <head> <title></title> <link rel=stylesheet type="text/css" href=stylesheet.css> </head> <body topmargin="0px" bottommargin="0px"> <center> <table bgcolor="#FFFFFF" width=70% cellspacing=0 cellpadding=6 style="border: #000000 2px solid; border-bottom: 0px; border-top: 0px"> <tr><td> <center> <img src="logo.png"></a> </center> </td><td> <center> <b><big>Name</big></b> <br>Address <br>Address <br>Phone & Fax <br>License </center> </td><td> <center> <img src="logo.png"></a> </center> </td></tr> <tr><td colspan=3 style="border: #000000 2px solid; border-bottom: 0px; border-left: 0px; border-right: 0px"> <center> <img src="star.gif"> <a href=index.html>Home</a> <img src="star.gif"> <a href=testimonials.html>Testimonials</a> <img src="star.gif"> <a href=employment.html>Employment</a> <img src="star.gif"> <p><b><big>Welcome!</big></b></p> <p>Content</p> </center> </td></tr> </table> </center> </body> ----------------------- Hello there, I am pretty new to web programming. I am currently having problem with Iframe's height. here's what happen. I have a page with 2 Div. First div is the header with menu. The 2nd Div Contains 2 Iframes. The first Iframe is my title bar location, and the 2nd iframe is my content location. The menu and title bar location is fine. When I click on something from the menu bar, it changes both the title bar and the content page. I did it like this because I don't want my title bar to scroll up when my content page is longer. So here's my problem: for the 2nd Iframe which contain my content, I couldn't set the height properly so it will fill and extend to the bottom of the screen when resolution is high. Also i don't want a scroll bar to the whole website, but only to the 2nd iframe. here's an example. I made a very simple version of what is exactly my problem. So is easier to read on the forum. index.html's 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" /> <title>Untitled Document</title> </head> <body scroll="no"> <div id="apDiv1" scrolling="no"> <p>This is a test.</p> <p>This is a test.</p> <p>This is a test.</p> <p>This is a test.</p> <p>This is a test.</p> <p>This is a test.</p> </div> <div id="apDiv2" scrolling="no"> <iframe src="123.html" style="position:absolute; width:780px; height:35px; top:240px;" scrolling="no"> </iframe> <iframe src="abc.html" style="position:absolute; width:780px; height:100%; top:275px;" scrolling="yes"> </iframe> </div> </body> </html> 123.html's 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" /> <title>Untitled Document</title> </head> <body> 1234567 </body> </html> abc.html's 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" /> <title>Untitled Document</title> </head> <body> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> </body> </html> Notice, I have a long TEST there. because i want only the iframe to scroll, but not the whole website. Anyone know a solution to this? Hi, Im trying to make my footer content align correctly to the main content when a window resizes. The apdivs don't seem to want to move at all even with a relative position etc. I have tried everything but just cant get it to work can someone help please? http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5 Also some one commented before on the amount of css and JS pages. These will al be stripped out as its an Open sources system im using! Thansk alot Joe Hi, how would i got about setting up a place where people can leave comments on my website? Hello, I have a site with a big picture that use <area> and <map> tags. How can I replace piece of the big picture, by other image using OnMouseOver or by other way? (The image is defined by coords) Thank You! Big Image, and the image that I need to replace. Ok im pulling my hair out, im trying to make a small text area scrollbox. How od I change the font face, color and background color? Thank you, this is what I have so far please help. Quote: <html> <head> <title>Page title</title> </head> <body> <textarea rows="3" cols="10"> </textarea> </body> </html> I have made a layout for guild in an online game i play im new to html because im 14 so im not very good. The text at the top i want as one blog area but i want a second blog area underneath thats under a spaer here is the code i used for the first blog area <div style="position:absolute;left:450;top:330;width:375;height:304;overflow:auto"> But when i use the same code to make a second area but change the pixels to place it elsewere it just keeps messing up please could someone help me with this i need it soon Is it possible to use img map and area over an swf file the same way that you can use it on a jpeg? I want to make just specific coordinates on the video to go to specific links. I did it for a jpeg but I can't get it to work on my swf file. could any hero (who must be very advanced) send me example code if you could get it to work -Mark :wacko: :wacko: :excl: marksmolen@mail.com So the issue in question is located at Deejay Octane I am wanting the links DIV to float to the right that much is happening, however the content DIV is not stretching to contain it. Any suggestions? Thanks Hi, I don't know if this is the best board to post on so if not please move. I'm looking to offer a members area on my new website im developing at the moment. The main goal is for my customers to have a username and password which they can then log into the personal member area. I don't think i want anything too complicated but this is my ideas so far of what i would want: Inovices: I want to make invoices available as PDF's for the customers, at the moment i don't mind if this has to be a manual upload but some way of manageing it would be nice. Monthly reports: My customers receive monthly reports on teh support they used during that month, i would like to make this available on the website, again i don't mind if i have to manually upload the files but some way to manage it. Subscriptions: I want my members to be able to activate additional services which will have recurring monthly payments. Either using paypal or another trusted payment gateway. The member will need to have a list of teh additional services i offer and then the ability to either subcribe to an additional service or unsubscribe aswell from within there member area. Tutorials: All of my members require tutorials to be created for them every now adn again. At the moment i would send this by email and after a month or 2 the custoemr deletes the email to find they need the tutorial again. I would like to store tutorials in there member areas so they have access to them all teh time. Is there any software out there i can take a look at to manage something like what i'm after? If there are any Open source ones available i would prefer that as i find open source not only to be free but also easier to edit and build on in the future. Any suggestions or ideas to where i can find something to handle this would be really appreciated. If one doesnt exist then anyone interested in doing some programming for me? Send me a PM and we can discuss my requirements in more detail and also discuss price. CC_DESIGN Is it possible to define coordinates for the area in percentages of the image instead of pixels? For the map I want to use an image that resizes depending on the viewport resolution. Then pixel coordinates obviously don't work. I am looking to have an area beside my nav bar that is titled "Whats New". This would be a small square beside the nav bar with a few links under it that would link to new additions of the site or current events. I want this section to be included on all 9 pages of my website, but when I change these items I dont want to have to change the links and text on all 9 pages. How can I make it so I alter just one page and it will change on all 9 to save me time? Could I use CSS to do this? If so how? Also I thought of using an iFrame. Not sure if that would work either. Please let me know of a way to do this Thanks, PizzaStick My apologies if this is in the wrong area, i have searched forum and could not find what i'm needing/doing wrong. I have a website that was in cold fusion, i am changing it to html/css. So i sliced it up and everything is good except the area i need to be dynamic for wordpress. Only half is stretching. The part where i want widgets to go is not stretching with rest. Sorry if my code is a mess, i'm just learning. Thanks for any advise or directions. 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" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body background="images/bg.jpg">
<body>
<div id="wrapper">
<div id="header">
<div id="topleft"><!--start of content keep left -->
</div>
<div id="home">
</div>
<div id="about">
</div>
<div id="process">
</div>
<div id="yachts">
</div>
<div id="blog">
</div>
<div id="news">
</div>
<div id="contact">
</div>
<div id="headbanner">
</div>
</div><!--header -->
<div id="contentwrap">
<div id="leftcontentwrap">
<div id="static">
</div>
<div id="dynamic">
</div>
</div><!--leftconentwrap -->
<div id="rightcontentwrap">
<div id="sidebarwrap">
<div id="sidebar">
</div><!--end sidebar -->
<div id="sidedynamic">
</div>
</div><!--sidebarwrap -->
</div>
</div><!--contentwrap -->
<div id="footwrap">
<div id="footer">
</div><!--footer -->
</div><!--footer wrap -->
</div> <!--wrapper -->
</body>
</html>
CSS Code: @charset "utf-8";
/* CSS Document */
#header {
height: 280px;
width: 891px;
}
#headbanner {
background-image: url(images/island_12.png);
height: 203px;
width: 891px;
float: left;
}
#home {
background-image: url(images/island_04.png);
height: 77px;
width: 63px;
float: left;
}
#sidebarwrap {
float: left;
height: 348px;
width: 200px;
}
#dynamic {
background-image: url(images/island_15.png);
width: 659px;
min-height: 427px;
}
#contact {
background-image: url(images/island_10.png);
float: left;
height: 77px;
width: 140px;
}
#news {
background-image: url(images/island_09.png);
float: left;
height: 77px;
width: 55px;
}
#footer {
background-image: url(images/island_16.png);
height: 75px;
width: 891px;
float: left;
}
#sidedynamic {
background-image: url(images/sidedynamic.jpg);
float: left;
height: 77px;
width: 232px;
min-height: 77px;
}
#rightcontentwrap {
height: auto;
width: auto;
float: left;
}
#contentwrap {
width: 891px;
min-height: 348px;
}
#sidebar {
background-image: url(images/island_14.png);
height: 348px;
width: 232px;
}
#static {
background-image: url(images/island_13.png);
float: left;
height: 152px;
width: 659px;
}
#process {
background-image: url(images/island_06.png);
float: left;
height: 77px;
width: 93px;
}
#about {
background-image: url(images/island_05.png);
height: 77px;
width: 67px;
float: left;
}
#blog {
background-image: url(images/island_08.png);
float: left;
height: 77px;
width: 61px;
}
#leftcontentwrap {
width: 659px;
min-height: 348px;
float: left;
}
#topleft {
background-image: url(images/island_03.png);
height: 77px;
width: 347px;
float: left;
}
#yachts {
background-image: url(images/island_07.png);
float: left;
height: 77px;
width: 65px;
}
#wrapper {
width: 891px;
min-height: 800px;
margin-right: auto;
margin-left: auto;
padding-top: 25px;
padding-bottom: 0px;
padding-left: 15px;
padding-right: 0px;
}
Ok, I don't have a way to show you how it's not working, but I would like to put text boxes under each comment picture on my comments page (much like you see on comment sites for MySpace and other networking sites), where the user may copy and paste the code into their own pages and use the images I provide. I found out how to do a basic 'form' with the name being "blank" and the value being the link to my desired image in my FTP, with the "ftp://ftp." taken out and replaced with "http://". So far, all attempts have been futile, and I'm not sure just what I'm doing right or wrong anymore...can anyone help me out? Please note that I'm vision impaired, and it may be somthing as small as me not seeing a particular tag or something, but I doubt it, as I've used my screen reader to read th ecode for me both when inputting it and reading it. I also note that my posts are in larger font so I can read them easier, I'm not telling anyone to do this, only asking, to please reply in size 3-4 for me please...and th kindly Here is an example of what I've done, which didn't work: <form> <input type="text" name="blank" value="<center><a href="http://silverwolfden.com"><img src="http://silverwolfden.com/images/comments/compliments/great_pic/great_pic_10_1_sw.gif" alt="Silver Wolf Den" border="0"></a><br><a href="http://www.silverwolfden.com" maxlength=30 maxheight= 5></a></center>"> </form> If you'd like to see my website (even though there's no way to see what the problem is I noticed ppl were asking to have ppl post the sites they work on it's http://www.silverwolfden.com <A href="http://www.xyz.com">Click Here</A> Trying to find out how to modify the code above to change what is displayed in the notification area at the bottom of browser when the link is moused over. Thanks for your help. Is there a way to put text in a type of fixed width and height area? If I make a table that is 100 x 10px and type inside it, if there is too much text it will stretch the table until all the text shows inside. I want it to just cut off everything that is bigger than the demensions specified. i am encountering problem when im inserting "%d" charecters in a text area and click submit button... when i insert those two characters individually it is working... but when i insert those two characters together there the browser is giving following error.... Quote: Your browser sent a request that this server could not understand. Hi, i have the following text <td><span (some style stuff) ><a href="http://www.mysite.co.uk">We are a company in the UK that blah blah blah <br /> Our website is great blah blah </a> </span> </td> This is sitting in a table, i'd like the area where the text is located to be hyperlinked (e.g if you go anywhere inside this table cell, the mouse turns to a link) to 'www.mysite.co.uk' etc., not just the text itself.. how can i do this? Thanks P&P |
|||||||