|
HTML - Left Column Won't Stay A Fixed Width
This could be an HTML or CSS problem, but I can't figure out what's causing this and it's driving me nuts!
The left column on my website will not stay a fixed width of 175px in IE 8. That seems to be the only browser having a problem. Here's the link: http://www.jrsart.net/testarea/paull...cientists.html I've linked the page that has it the worst, but if you visit the other pages and keep an eye on the left column's border, you'll see it keeps moving. Please help! I'm rapidly running out of time to fix this issue, so any advice would be greatly appreciated! Similar TutorialsHello, I need to create a 3 -column lay out with the left and right columns having 200px each and the middle column take the rest. Here is my html markup: HTML Code: <div style="width: 100%"> <div style="width: 200px; float:left;">Left column</div> <div style="width: 100%; float:left;">Middle Column</div> <div style="width: 200px; float:left;">Right Column</div> </div> It's not working for me . Please help. Hi, I have the following problem i'm trying to solve with HTML: I have a simple table with 3 columns. I want the table to have a 100% width of the screen. Furthermore the center column must ALWAYS have a width of 1000. The left and right column should just be there too fill the gaps up if you have a wider screen than 1000. Setting these left/right columns to width "100%" doesn't work because than it would just make the left column fill up the space and the right column will have a width of 0. How can I solve this? Some example could would be highly appreciated Thanks, betonboor Hi, I'm a little new at this, and I'm trying to put a pretty simple website together. I have a table that is the basis for the whole website design. It's pretty fixed, so I want all the widths of the table to be constant. A couple rows have fixed heights for aesthetic purposes. A couple rows I want to expand to whatever height is necessary to accomodate the content inside. the fourth row of the table has three cells side by side that I use as the header design. 1) picture 2) space 3) title I want all these to have fixed widths and heights. underneath is a cell that spans the length of all three of those. This is where I want my content. 4) content The length of this stays fixed but the height changes as more content is addes. The trouble is, the table cells display correctly for me as long as there is limited amount of text inside the 4) content cell. Whenever I enter past a few sentences, the 1) picture cell starts taking up more of the width and shrinking the 3) title cell. And this really messes up the nice spacing I had. Any thoughts on why this would happen??? I'm just stuck. I've tried a million things, but I'm sure its something simple I can't see right now. Hopefully a pair of fresh (and knowledgeable) eyes can help! Thanks so much, heres my code: [font="Courier New"] <body> <table width="875" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="75" colspan="5"><img src="../images/RichfieldLogo.png" width="250" height="75"></td> </tr> <tr align="center"> <td height="25" colspan="5" valign="top" class="mainmenu" style="border-bottom: solid 1px #666666; border-top: solid 1px #666666"> <h1 class="menu"> <ul> <li><a href="#" class="mainmenu">Home</a></li> <li><a href="#" class="mainmenu">Party in the Park</a></li> <li><a href="#" class="mainmenu">Info</a></li> </ul> </h1></td> </tr> <tr> <td height="20" colspan="5"><img src="../images/20spacer.png" width="20" height="20"></td> </tr> <tr align="left" valign="top"> <td width="190" rowspan="2"> <img src="../images/PartynParkPlaceholder.png" width="190" height="385"></td> <td width="20" rowspan="2"><img src="../images/20spacer.png" width="20" height="20" border="0" align="top"></td> <!-- This is where the trouble starts! I can't get these cells to stay a fixed size!!! --> <td width="275" height="275"><img src="../images/SamplePicSmall1.png" width="275" height="275" border="0" align="right"></td> <td width="20" height="275"><img src="../images/20spacer.png" width="20" height="20"></td> <td width="370" height="275"> <p><font size="45px" face="Helvetica, Arial, sans-serif" weight="bold"><strong>Party <br /> in the Park</strong></font><br /> <h2 class="datetime"><font color="#666666">LOCATION </font> Richfield Park, 345 Main St in Richfield<br /> <font color="#666666">DATE </font>Saturday, October 13 2008 <br /> <font color="#666666">TIME</font> From 8am until late afternoon<br /> <font color="#666666">INFO</font> Call 704.463.1308</h2></p> </td> </tr> <!-- This seems to be the cause of it. If I have a couple sentences down here its fine, but more than a few words and it causes sheer html chaos above! --> <tr> <td colspan="3"><img src="../images/10spacer.png" width="10" height="10"><br /><hr width=100% size=1px color=#99CC33> <img src="../images/10spacer.png" width="10" heigh="10"><br /> <h2 class="text">Party in the Park is an annual Richfield tradition started in 199X to gather the town's residents and their friends together to enjoy good food, fun entertainment and each other's company. This year we'll have blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. The morning will end right with our famous Cush cookoff! Party in the Park is an annual Richfield tradition started in 199X to gather the town's residents and their friends together to enjoy good food, fun entertainment and each other's company. This year we'll have blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. The morning will end right with our famous Cush cookoff! </h2> <br /><img src="../images/25spacer.png"><br /> <p><h1 class="menu2">Features</h1></p> <p><h1 class="menu2">Photos</h1><hr width="100%" size="1px" color="#99CC33"></p> <p><h1 class="menu2">Flyer</h1></p> <p><h1 class="menu2">Directions</h1></p> </td> </tr> <!-- And everything from here on out seems to be fine from what I can tell --> <tr> <td height="75" colspan="5"> </td> </tr> <tr> <td colspan="5" valign="top"><hr width="100%" padding-bottom="1px"> <div align="right"><font color="#99CC33"><em><font color="#000000" size="-7" face="Verdana, Arial, Helvetica, sans-serif">email us at </font><font size="-7" face="Verdana, Arial, Helvetica, sans-serif">web@gorichfield.com</font></em></font></div></td> </tr> </table> </body> thanks again for any help guys! Hey everyone, I feel like this is a noob question, but I'm going to ask anyway. How do write my site so that my body stays in the same place and doesn't smash together when I manually resize my page? Any help is greatly appreciated. Thanks Hi everyone, I'm trying to work out how to have a left and right side "column" both resize when the window is resized. An example of what I am after is : http://www.news.com.au/heraldsun/0,,,00.html. I played with margin-left and -right but don't think it is quite what I am after. Thanks. Hi , I am trying to make a plugin for Mybb Forums and I needed to get the last 10 threads scrolling up , so I used the Marquee Tag . When I tried to view the plugin , I found that half the thread subject only appears while the rest is invisitble(because they don't fit in the box) , so I guessed that the Marquee's width exceeded the width of the table(box) . I tried to make a table inside the Marquee but still didn't work . I need to limit the table's width or the marquee's width so that when the thread's subject is too wide , it starts a new line , not just make the table wider . I hope you can understand what I mean , because I feel I can't understand it . Thanks Alwahsh I have created a website, and its aligned in a table Is there anyway I can make the height and width determined by the size of the screen without distorting the image? I'm fairly new to this, Thanks. Hi all, Im afraid im getting a little frustrated. My fault.. Im new here but need your help. I run a forum, phpbb3 based but the style im currently using is very much HTML based. I am looking to have a left hand column within my forum but really dont know how to do it, well to add to what i already have. I think for you to know what style docs i have you would have to have a look yourself or look at my existing source code.. http://www.pricelessparrots.com/phpbb3/ Ok i have the new style ' VistaX '. This link will take you to the original download: It can be found he It seems this style is mostly created using HTML. Could someone please tell me how to add a left hand column to the page. I would like it to be on the left hand side all the way down after the header. I thought i would have a go at it but becoming increasingly frustrated with it. such a simple thing but i cannot get it. Do i float it, using css or what? I thought about using a seperate page to create the table and then include it into the doc but this doesnt work either. Plz help.. Paul Hey, I have a sample page he www.darkdayssoftware.com/indexotheridea.html How do I make space for and create a column down the left and right (e.g. a space for adverts) and ensure that when I resize the web paste, the main column in the middle doesn't overlap the column to the left, and similarly the column on the right doesn't overlap the column in the middle? Thanks can i have fixed layout for only some part of a table? I want the first column of my table to be "auto" and the other columns to be "fixed" llike style='table-layout:fixed;'. How can I achieve this? Thanks! hello Every can any one tellme How can i make a webpage open in Fixed height and Width which is to be opened by a Hyperlink Example : like when you click On MORE link From The Smilies in this Forum it open a Small Window Resizeble Window I've attached the code for a template I'm wanting to use. I want to add a column to the left side of the page that runs the length of the page. Is there anyone out there who can assist me with the code to do that. I'd be exceedingly grateful. I'm afraid I'm table dyslexic. Thanks in advance to anyone who can help. What would be the best way to center the items listed in the left column? Thank you. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0.11 Transitional//EN">
<html><head>
<title>test</title>
<script src="java.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="styles.css">
<style type="text/css">
.test{background-color:#ffdead;}
#header {
width: 830px;
margin-left: auto;
margin-right: auto;
margin-top: -15px;
background-color: #ffdead;
}
#header_table {
width: 75%;
border-collapse: collapse;
border: solid 1px;
border-color: #b7b7b7;
}
.header_bar {
padding: 0px;
margin: 0px;
border-bottom-style: solid;
border-bottom-width: 10px;
border-bottom-color: #b7b7b7;
background-color: #800000;
width: 150px;
border-collapse: collapse;
border-right-width: 0px;
border-left-width: 0px;
}
.header_body {
padding: 0px;
margin: 0px;
border-left-style: solid;
border-left-width: 1px;
border-left-color: #b7b7b7;
border-right-style: solid;
border-right-width: 1px;
border-right-color: #b7b7b7;
}
</style>
</head>
<body bgcolor="#ffffff">
<table id="header_table" align='center' cellpadding='0' cellspacing='0'>
<tr>
<td class="header_bar" colspan='2'> </td>
</tr>
<tr>
<td align='center' colspan='2'>
<img src="imgi/img11.jpg" height="134" width="461">
<img src="imgi/topimg2.jpg" height="160" width="309">
</td>
</tr>
<tr>
<td class='header_body' valign='top' width="200">
<form action="login.asp" method="post">
<table width="100%" height="100%" align='center' cellpadding="0" cellspacing="0" border="0" >
<tr><td valign="top" class='header_bar' colspan='2'> </td></tr>
<tr>
<!-- SIDE MENU -->
<% If Session("PMMS_IN") = "True" Then '// CHECK IF MEMBER IS LOGGED IN ALREADY %>
<!-- MENU FOR LOGGED MEMBER ONLY -->
<td colspan="2"><br><br>Welcome <i><%'=Session("PMMS_NAME")%></i><br /><br /></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="profile.asp">My Profile</a></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="_purchase.asp">Purchase</a></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="newsletter.asp">Newsletters</a></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="members.asp">Member List</a></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="members_by_group.asp">Group Member List</a></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="file_cate.asp">File Repository</a></td>
</tr><tr>
<td width="15">º</td>
<td><a href="login.asp?logout=True">Log Out</a></td>
</tr>
<!-- [ MENU FOR LOGGED MEMBER ONLY ] -->
<% Else ' IF NOT LOGGED IN THEN SHOW THE LOGIN FORM%>
<!-- INCLUDE LOGIN FORM -->
<br><br><td colspan='2'><br><br>Username:<center><br /><input class="textbox" type="Text" name="username" value="<%=Trim(Request.Cookies("USERNAME"))%>" maxlength="25" size="20" /></td>
</tr><tr>
<td colspan='2'><br>Password:<center><br /><input class="textbox" type="Password" name="password" value="" maxlength="25" size="20" /></td>
</tr><tr>
<td>
<br><input type="Checkbox" name="rem" value="1"<%If NOT Trim(Request.Cookies("USERNAME")) = "" Then%> checked<%End If%> />Save Username<br />
<input style="width: 50%;" type="Submit" value="Login Now" /><br /><br /><a href="reminder.asp">Password Reminder</a>
</td>
</tr>
<tr>
<td>
<br />
<input type="Hidden" name="mode" value="login" /><input type="Hidden" name="ref_page" value="<% If Len(Trim(Request.QueryString("ref_page"))) = 0 Then%><%=Request.ServerVariables("URL") & "?" & Request.QueryString%><%Else%><%=Request.QueryString("ref_page")%><%End If%>" />
<!-- [ INCLUDE LOGIN FORM ] -->
<% End If %>
</td>
</tr>
<tr>
<td>
<br /><br />
<img src="img/linkimg1.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="index.asp"> HOME</a><br /><br>
<img src="img/linkimg3.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> FAQ</a><br /><br>
<% If Session("PMMS_IN") = "True" Then '// CHECK IF MEMBER IS LOGGED IN ALREADY %>
<img src="img/_example/arrow_gray_top_inverse_b.gif" width="15" height="14" alt="" border="0" /><a class="MainMenuLNKExample" href="login.asp?logout=True">LOG OUT</a>
<% Else %>
<img src="img/linkimg2.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> REGISTER</a><br /><br>
<% End If %>
<img src="img/linkimg4.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> TERMS OF USE</a><br /><br>
<img src="img/linkimg5.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> CONTACT US</a><br /><br />
</a>
<!-- [ SIDE MENU ] -->
<br /><br />
</td>
</tr>
</table>
</form>
</td>
<td class='header_body'>
<!-- MAIN PAGE CONTENT -->
I have a very simple table that I cannot simply get to render correctly across IE, Firefox, and Opera. At first, I was using CSS to define the cell widths/heights - when that was giving me issues I got rid of all the CSS and attempted to use plain HTML. The problem persisted. Here's the code - it doesn't get much simpler than this: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <table cellspacing="0" cellpadding="0" border="1"> <tr> <td width="15" height="33">a</td> <td>b</td> <td>c</td> <td width="15" height="33">d</td> </tr> <tr> <td colspan="4" rowspan="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> </tr> </table> </BODY> </HTML> Appearance in Opera Appearance in IE7 Appearance in Firefox (this is what I want it to look like in all browsers) I haven't done HTML seriously in 7-8 years or so but I don't really remember having these problems with IE/Netscape. The fix I found for IE was to use style="table-layout: fixed" for the table: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <table cellspacing="0" cellpadding="0" border="1" style="table-layout: fixed"> <tr> <td width="15" height="33">a</td> <td>b</td> <td>c</td> <td width="15" height="33">d</td> </tr> <tr> <td colspan="4" rowspan="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> </tr> </table> </BODY> </HTML> Now IE works fine, Firefox didn't break, but Opera's cells still are not 15 pixels. IE7 Appearance fixed Here's my attempt at getting Opera to display it properly by mixing CSS and HTML: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <table cellspacing="0" cellpadding="0" border="1" style="table-layout: fixed"> <tr> <td style="width: 15px; height: 33px" width="15" height="33">a</td> <td style="height: 33px">b</td> <td style="height: 33px">c</td> <td style="width: 15px; height: 33px" width="15" height="33">d</td> </tr> <tr> <td style="width: 100%" width="100%" colspan="4" rowspan="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> </tr> </table> </BODY> </HTML> Opera looks even worse now This seems like such a simple table. I really don't understand why I'm having such a hard time. I believe the second row - using colspan is causing the issue. Please don't answer with - "dont use tables" or something silly like that Thank you -TableTrTd in the past when ever I have string that is longer than the width specified in the <td>it always automatically line breaked for me. But now I am encountering an issue with the <td> stop auto line breaking, and instead just increase the width of the table to make the string fit in 1 line. if anyone know whats possibly causing this problem please reply, any thing suggestion is greatly appreciated. Thanks I have a left menu column but it's not stretching down the length of the page. The page is quite long and when the links are finished on left column it just ends and as it has abackground colour it looks a little strange. It is floated left and the main_section is also floated left. It is the main section div that is long. I was thinking because this is in a div that the left coumn is also in that the left column would therefore stretch to the length of it's parent div. Any ideas? http://absolute-websites.com/services.html is the link so you can see what I'm talking about. Here is a section of the HTML : HTML Code:
<div class="left_column">
<div class="breadcrumb"><p><a href="index.html">home ></a>services</p></div>
<div class="icons"><p><a href="services.html#websiteProduction"><img src="images/webIcon-01.png" title="web building" alt="web building icon"/></a></p></div>
<div class="icons"><p><a href="services.html#hosting"><img src="images/hostingImgIcon-01.png" title="Hosting & Domain Names" alt="Hosting & Domain Names icon"/></a></p></div>
<div class="icons"> <p><a href="services.html#seo" ><img src="images/seo2Icon-01.png" title="Search Engine Optimisation" alt="Search Engine Optimisation icon"/></a></p></div>
<div class="icons"> <p ><a href="services.html#marketing"><img src="images/advertsIcon-01.png" title="Marketing" alt="marketing icon"/></a></p></div>
<div class="icons"><p ><a href="services.html#design" ><img src="images/designImgIcon-01.png" title="Design" alt="Design icon"/></a></p></div>
<div class="icons"> <p ><a href="services.html#photo" ><img src="images/photoIcon-01.png" title="Photoditing" alt="Photoediting icon"/></a></p></div>
<div class="icons"> <p><a href="services.html#video" ><img src="images/videoIcon-01.png" title="Video Production" alt="Video Production icon"/></a></p></div>
</div>
<div id="main_content" class="fl">
<h1 class="h1SecHead" >>SERVICES</h1>
Good day, I am brand new here in this forum. So many knowledgeable folks here. I am relatively new to web design. I typically use templates and themes and tweak them. I can navigate a CSS doc and html to make changes, etc. However, I have a client who has an existing site that she wants to keep the aesthetic of and so I am using what the previous designer left. It is a simple html page with tables. Simple enough. Very elegant visually. No need to SEO really so it works. She has asked if we can make the left column of a two column table scroll independently. The page content is about over 6000px. The scroll column will contain a page outline and other text that will include internal targeted links. This is outside my skill set, but I want to learn. Have searched the net and found some suggestions but want it to be clean and ended up here. There is no style sheet other than the ie6 sheet. Page is he http://www.themedeaproject.com/proposaltestpage.html no graphics are loaded. Can anyone point me to a good tutorial or have any suggestions? Thanks! BlueEyedMonkey aka Tatyanna I don't know if this is supposed to be posted here or in the css forum - so correct me if I'm doing it wrong. I'm making a table with a variable number of colums. The first column should be allowed to have a width of 30 % if it is needed by the text, but less if it is not needed. (This can style="max-width:30%" do for me). The rest of the columns can use the space that the first columns doesn't use, but shouldn't be able to force the first column to be smaller. If I use max-width the first column might be smaller than 30% because of the rest of the columns forces it to be so, and if I use width=30% the width will be 30% even if the text in the first column doesn't need 30%. Can anyone help me? The following piece of code delivers a table with fixed width 666px and appr. 200px 466px wide columns, when opened within IE. Long text fits into the columns, long strings break at the border. When opening up within MS Word, the column width seem to ignore the styles. Does anybody know alternative commands delivering the same result in MS Word? Thanks, Andreas <table style="width: 666px; table-layout:fixed; word-wrap: break-word;" cellspacing="0"> <col width="30%"> <col width="70%"> <tr> <td>Floating Rate Payer Calculation Amount:</td> <td>|TRADE_CURRENCY| |CD_NOTIONAL|</td> </tr> </table> |
|||||||