|
CSS - Ie Form Layout Problem
Hello,
I have been working for a few days on this form layout and it works pretty much the way I want it to in FF but everything goes to hell when I open it in IE. If you look at the code the three <td class="td_spacer"> elements are floated to the right but I dont know why the in IE they extend vertically off the page instead of reaching the predefined width of the form, where they should then be forced down to the row below. I hope someone can help me make sense of this. Code: form{
display:block;
width:566px;
margin:0px;
padding:0px;
}
#form_table{
border-style:solid;
border-color:black;
border-width:thin;
border-spacing:0px;
border-collapse: collapse;
float:right;
width:564px;
margin:0px 0px 50px 0px;
padding:0px;
}
#form_table thead tr{
color:white;
text-align:left;
background-color:#1B1B1B;
border:solid black thin;
}
#form_table tbody tr td{
float:right;
display:block;
}
#country_list{
list-style-type:none;
margin:0px;
padding:5px 0px 0px 0px;
}
.td_spacer{
display:block;
margin:0px;
padding:10px 0px 0px 0px;
}
.input{
width:300px;
}
#message_box{
width:558px;
height:286px;
}
Code: <form name="jobs" action="php/rtProcessor.php" method="post">
<table id="form_table" summary="post form">
<thead>
<tr>
<th><span class="">Post</span></th>
</tr>
</thead>
<tbody>
<tr>
<td style="float:left;">
<ul id="country_list">
<li id="china"><input type="radio" name="color" value="red" />red</li>
<li id="japan"><input type="radio" name="color" value="green" />green</li>
<li id="korea"><input type="radio" name="color" value="blue" />blue</li>
<li id="thailand"><input type="radio" name="color" value="orange" />orange</li>
<li id="other"><input type="radio" name="color" value="Other" />Other</li>
</ul>
</td>
<td class="td_spacer">
<label for="companyname">Company Name:</label>
<input type="text" id="companyname" name="companyname" class="input" />
</td>
<td class="td_spacer">
<label for="email">E-Mail Address:</label>
<input type="text" id="email" name="email" class="input" />
</td>
<td class="td_spacer">
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject" class="input" />
</td>
</tr>
<tr>
<td>
<label for="message">Listing:</label>
<textarea id="message_box" name="message" rows="16" cols="67"></textarea>
</td>
</tr>
<tr>
<td>
<label for="hii">1+1 is?</label>
<input type="text" id="hii" name="hii" class="input" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="Submit" name="submit" />
</td>
</tr>
</tbody>
</table>
</form>
Similar TutorialsI'm having trouble positioning my form elements how I want them. The following code shows correctly in Mozilla but in IE, there are spaces around the form elements. How can I get rid of all the spacing? PHP Code: <form> <div style="border:1px solid;width:200px;height:20px;"></div> <div style="float:left;border:1px solid;width:100px;height:20px;"></div> <div><input style="border:1px solid;width:100px;height:20px;" /></div> <div style="float:left;border:1px solid;width:100px;height:20px;"></div> <div><input style="border:1px solid;width:100px;height:20px;" /></div> <input type="submit" style="font-size:12px;border:1px solid;width:200px;height:20px;" /> </form> Take a look at this comparision image: Thank you! By the way, I've also tried using a table and was still unable to get rid of all the spacing. I need css relative positioning for a web form interface on a browser page, so it is located (Center/middle) despite browser size. Then I need each of the elements inside of the form table absolutely positioned in relation to the box. The are eight graphics that surround the table. I would actually like to get rid of the table completely if it was possible. I believe the is a cleaner and more efficient way of doing this in css, but I haven't got a clue as to where to start? I have just read that I can apply the styles to this page in the header instead of being pulled from a universal style sheet, I would like to do this as this is a login page and is page is unique from the rest of the site. Any and all help greatly appreciated. Hello, I've got a problem which kind of puzzles me. I've made a website build up trough <DIV> tags and CSS. Now all went well till I wanted to insert a <FORM> tag. The moment I inserted that my wholy CSS goes haywire. Here is an example: http://ni.guildscentral.net/without_form.html http://ni.guildscentral.net/with_form.html Now the only difference between those two pages is the following: Code: <!-- Styles start -->
<form method="POST" action="">
<div id="styles">
<select size="1" name="style">
<option value="1">Hunter 1</option>
<option value="2">Hunter 2</option>
<option value="3">Mage</option>
<option value="4">Fight</option>
<option value="5">Illidan</option>
<option value="6">Arthas</option>
<option value="7">Lich King</option>
<option value="8">Soldier</option>
<option value="9">Oversight</option>
<option value="10">Infernal</option>
</select><input type="submit" value=">" name="Go" width="8px">
</div>
</form>
<!-- Styles end -->
Now I haven't got a clue why all my frames move to the left the moment I put that FORM tag in. Do you have any ideas/suggestions ? I need some people to bounce ideas off of. I am having a real hard time coming up with a layout that is accessible and fits my layout. The form is very simple with two radio buttons and a text field. What I want is for the two radio buttons to display as a block but fit in a tight spot and the text field to float to the right and center if the two radio buttons. Here is a quick photochop of what I am going for. gary.webb.waptug.org/projects/epls/ Here is a link to the code I am building. gary.webb.waptug.org/projects/epls/images/search.gif Notice in the image that I have modified the banner a bit to fit the search form into the bottom dark blue bar. Thanks in advance. I am having a layout issue where if the contents of the left and right columns change, then the middle column increases or decreases in height. See www.eyeongames.com This is how it should look, but if you increase the font or the right or left columns expand, then the middle column shifts up or down. I want the columns to be even across the top. Thanks in advance! Here is the style sheet code I am using. Code: a {
background: transparent;
color: #ff8f02;
text-decoration: none;
}
a:hover {
color: #fff;
}
body {
background: #550a04;
color: #d7cf00;
font-family: Verdana, Arial, Sans-serif;
font-size: 12px;
margin: 10px;
padding: 0;
}
form {
margin: 0;
}
h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}
hr {
background: #abc;
border: 0 none;
color: #abc;
height: 1px;
margin: 0;
padding: 0;
}
img {
border: 0 none;
}
p {
margin: 5px 0px 5px 0px;
padding: 0;
}
th,td {
padding: 2px;
}
div.leftColumn {
background: transparent;
border: 0px solid #555;
left: 10px;
padding: 5px;
position: absolute;
top: 400px;
width: 240px; /* Incorrect IE5 value */
z-index: 2;
voice-family: "\"}\"";
voice-family: inherit;
width: 218px;
}
html>body div.leftColumn {
width: 218px;
}
div.leftColumn2 {
background: transparent;
border: 0px solid #555;
left: 10px;
padding: 5px;
position: absolute;
top: 143px;
width: 240px; /*Incorrect IE5 value */
z-index: 2;
voice-family: "\"}\"";
voice-family: inherit;
width: 218px;
}
div.topColumn {
background: transparent;
border: 0px solid #555;
margin: 0px 200px 0px 130px;
min-width: 200px;
padding: 0px;
position: relative;
width: 600px;
z-index: 3;
}
div.middleColumn {
background: transparent;
border: 0px solid #555;
margin: 0px 200px 10px 240px;
min-width: 200px;
padding: 5px;
position: relative;
top: -105px;
width: 480px;
z-index: 3;
}
div.middleColumn2 {
background: transparent;
border: 0px solid #555;
top: 0px;
margin: 0px 200px 10px 240px;
min-width: 200px;
padding: 5px;
position: relative;
width: 480px;
z-index: 3;
}
div.rightColumn {
background: transparent;
border: 0px solid #555;
padding: 5px;
position: relative;
top: 43px;
margin: 0px 0px 0px 742px;
width: 240px; /* Incorrect IE5 value */
z-index: 1;
voice-family: "\"}\"";
voice-family: inherit;
width: 218px;
}
html>body div.rightColumn {
width: 218px;
}
div.logoBlock {
background: transparent;
border: 0px solid #555;
left: 10px;
margin: 0;
padding: 0;
position: absolute;
text-align: left;
top: 10px;
width: 210px; /* Incorrect IE5 value */
z-index: 2;
voice-family: "\"}\"";
voice-family: inherit;
width: 125px;
}
html>body div.logoBlock {
width: 188px;
}
div.copyrightBlock {
background: transparent;
margin: 0px 200px 0px 200px;
min-width: 200px;
padding: 0;
position: relative;
text-align: center;
width: 500px;
z-index: 3;
}
*.newItem {
color: #ff5500;
}
*.oldItem {
color: #fff;
}
Here is part of the code. There are multiple index.tpl files with similar code only the content changes, such as when browsing the games. header.tpl Code: <div class="logoBlock"><--- LOGO IMAGE ---></div>
<div class="topColumn"><--- BANNER IMAGE ---></div>
<div class="leftColumn">
<h3>{HEADER_BLOCK1_TITLE}</h3>
<hr />
<p><--- LINKS EDITED OUT ---></p>
<h3>{HEADER_BLOCK2_TITLE}</h3>
<hr />
<p><--- MORE LINKS ---></p>
<h3>{HEADER_BLOCK3_TITLE}</h3>
<hr />
<form><--- FORM CODE ---></form>
<h3>{HEADER_BLOCK4_TITLE}</h3>
<hr />
<p>{HEADER_BLOCK4_CONTENT}</p>
<!-- <hr />
<p>{BACKEND_RSS}</p>
<p>{BACKEND_TXT}</p> -->
</div>
<div class="rightColumn">
<table style="width: 100%;background: #d7cf00;">
<tr>
<td align="center"><h3><font color="#550a04">Game Updates</font></h3></td>
</tr>
</table>
<p align="center">{GAME_RSS}</p>
<!-- <p align="center">{GAME_TXT}</p> -->
</div>
footer.tpl Code: <div class="leftColumn2">
<table style="width: 100%;background: #d7cf00;">
<tr>
<td align="center"><h3><font color="#550a04">Latest News</font></h3></td>
</tr>
</table>
<p>{BACKEND_RSS}</p>
<!-- <p>{BACKEND_TXT}</p> -->
</div>
<div class="copyrightBlock">
<p><--- COPYRIGHT ---></p>
</div>
</body>
</html>
index.tpl Code: <div class="middleColumn">
<table style="width: 100%;background: #d7cf00;">
<tr>
<td align="center"><h3><font color="#550a04">News Headlines</font></h3></td>
</tr>
</table>
</div>
<!-- <div class="middleColumn">
<p>{BACKEND_RSS}</p>
<p>{BACKEND_TXT}</p>
</div> -->
<!-- BEGIN NEWS_BLOCK -->
<div class="middleColumn">
<h3>{NEWS_SUBJECT}</h3>
<h5>{NEWS_INDEX_RELEASE}</h5>
<hr />
<p><--- NEWS TEXT ---></p>
<p>{NEWS_SOURCE}</p>
<hr />
<p><--- COMMENTS ---></p>
</div>
<!-- END NEWS_BLOCK -->
<div class="middleColumn"><p>{NEWS_INDEX_PAGES}</p></div>
Check this page: http://www.putimg.net On Ie the adsense div is staying on the other div.... This is the adsense div css: #adsense { position:absolute; margin-top:20px; border:0px; width:120px; height:240px; } Solved it: #adsense { position:absolute; margin-top:20px; left:5px; border:0px; width:140px; height:240px; } Im tying to have a simple layout with a floating box in the lower right corner. As it is now the floating box is in the top right corner of the body of the box. I just can not get it to look right in the lower right section. Click here. this is a pic of how it looks now Here is the code for the layout CSS Code:
/* main box */
.faq-def-block {
position: relative;
left: 30px;
width: 500px;
background-color: #FFFFCC;
border: 1px solid #000000;
-moz-border-radius: 0px 0px 8px 8px;
color: #000000;
font-size: 12px;
}
/* top line*/
.faq-def-block-header {
border-bottom: 1px solid #000000;
background-color:#FFCC66;
padding: 0 0 0 2px;
}
/* floating box */
.faq-def-block-footer {
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
width: 60px;
float: right;
text-align: center;
background-color:#FFCC66;
-moz-border-radius: 0px 0px 0px 8px;
}
/* body text
.faq-def-block-body {
padding: 0 0 0 6px;
}
HTML Code:
div class="faq-def-block">
<div class="faq-def-block-header">Climatic Wind Data for the United States through 1996 Publication</div>
<div class="faq-def-block-body">
<div class="faq-def-block-footer">
<a href="http://www5.ncdc.noaa.gov/documentlibrary/pdf/wind1996.pdf" target="_blank">
<img src="../images/download-icon.gif"
alt="Climatic Wind Data for the United States through 1996"
width="50"
height="50"
border="0"></a><br>
Download<BR>
PDF<br>
(102KB)
</div>
Climatic wind data in this summary were extracted from the NCDC's Edited Local
Climatological Data publication, Air Force and Navy climatic briefs, and other
sources. The total period of this summary is 1930-1996, though the period of record
(POR) for which wind data is summarized varies for individual locations, and may begin
and end at any time during the 1930-1996 period. Wind summaries from a total of 321 stations
from all U.S. states are presented. The wind elements summarized by month and overall annual
values include prevailing wind directions (given in compass points), mean wind speeds, and
either peak gusts (in miles per hour), fastest-mile, or highest 5-second winds. Peak wind
types may be combined to reflect the highest reported wind. Updated wind data for many sites
can be obtained from the post 1996 Edited Local Climatological Data - Annual publications.<br>
</div>
</div>
Thanks Tekjock Hi, Since I'm a newcommer here, I'm not allowed to post proper URLs, so I'm hoping someone will have a look at the css problem in the following two images: (remove the spaces in the links) h t t p : // farm4.static.flickr.com/3192/2929163063_5b1e1d9988.jpg?v=0 and h t t p : // farm4.static.flickr.com/3188/2930025002_a7a4ed4fbe.jpg?v=0 The overlapping error in the second image occurs only in IE 8 with compatibility view turned on. The address is positioned properly in all other browsers. In the style sheet a div tag positions the address : #address {clear:both;position:relative; font-size:smaller; top: 40px; left: 0px; width: 145px; height: 80px; } I've used <!--[if lte IE 6]> <link rel="stylesheet" media="all" type="text/css" href="css/menu_ie.css" /> <![endif]--> In the page the address is written as: <div id="address"> <div align="right">The Company Name Inc.<br> 1234 Glenn View Road<br> Hilldale, OW 12345<br> 123-456-7890</div></div> ...and in menu_ie.css given the address tag top:90px or margin-top:90px instead of 40px but this does not have any effect. A few other points: The page layout is not pure css but a combo of a table + css. The menu is in an include file placed in a table column as is the address. I want to know a fix that will position the address correctly about 40px below the menu. Thanks IE 7 has caused a problem with the layout on our website. The website worked fine with IE 6. http://www.membersequity.com/mcard/ Can anyone help determine what the problem is? Thanks. Hi, I'm having trouble creating a top bar and below this 3 column layout. IE 5.5 takes note of the widths specified, firefox does not. In fact firefox seems to treat the center and right column divs as though have been asked to display: block as soon as content is placed within the left column, even overlapping into the header div above it when padding or a margin is added. I'm wondering if I am using the DTD tag? Or is it the fact that I am css-ing the layout wrongly? See page layout here 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" xml:lang="en" lang="en"> <head> <title>This is really beginning to annoy me!</title> <meta http-equiv="expires" content="-1" /> <meta name="robots" content="no-index" /> <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> </head> <body> <div id="ContentBox"> <div class="logo"><img src="" alt="a logo here" title="" class="logo" /></div> <div id="mainmenu"><div class="blulinetop"></div>menu here<div class="blulinebot"></div></div> <div id="leftSide"> Quick Navigation <form><p></p></form> <img src="" border=0 alt="" /> <ul class="prodsnav"> <li class="prodsnav"><img src="gifs/bullet_c.gif" alt="/" title="/" class="prodNav" /> Nav LInk 1</li> <li class="prodsnav"><img src="gifs/bullet_c.gif" alt="/" title="/" class="prodNav" /> Nav Link 2</li> </ul> </div> <div id="centerSide">Center column</div> <div id="rightSide">righthand column</div> </div> </body> </html> ...the CSS Code:
body {
margin:0px 0px;
padding:0px;
text-align:center;
background-color: #fff;
font-family: arial, sans serif;
font-size: x-small;
font-style: normal;
font-weight: 400;
}
#ContentBox {
width:810px;
height: 100%;
margin:0 auto;
text-align:left;
padding:0px;
border: 1px solid #c2dacd;
background-color:#fff;
vertical-align: top;
}
#leftSide {
width: 166px;
height: 99%;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #003399;
margin: 0;
padding-top: 24px;
display: inline;
vertical-align: top;
background-color: #f00;
}
#centerSide {
width: 450px;
height: 99%;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #003399;
margin: 0px;
padding: 0px;
display: inline;
vertical-align: top;
background-color: #0f0;
}
#rightSide {
width: 177px;
height: 99%;
border: 0;
margin: 0px;
padding: 0px;
display: inline;
vertical-align: top;
background-color: #00f;
}
div.logo {
width: 100%;
height: 50px;
background-color: #c2dacd;
padding: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
vertical-align: left;
display: block;
}
#mainmenu {
height: 28px;
width: auto;
vertical-align: top;
padding: 0px;
display: inline;
border: 0;
font-size: 1px;
background-color: #0f0;
}
div.blulinetop {
width: 100%;
height: 2px;
border: 0;
background-color: #003399;
margin-top: 2px;
margin-bottom: 2px;
font-size: 1px;
vertical-align: top;
}
div.blulinebot {
width: 100%;
height: 2px;
border: 0;
background-color: #003399;
margin-top: 0;
margin-bottom: 0;
font-size: 1px;
vertical-align: top;
}
/* products nav */
ul.prodsnav {
display: block;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding: 0;
list-style-type: none;
}
li.prodsnav {
padding: 4px;
margin-top: 0;
margin-right: 2px;
margin-bottom: 2px;
margin-left: 2px;
height: 18px;
width: 165px;
border-right-color: #999;
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: #999;
border-bottom-style: solid;
border-bottom-width: 1px;
}
img.prodNav{
display: inline;
}
What to do? un-Wizeone today Hi I'm trying to layout some information on a page that would previously have been designed using a table structu Code: <table>
<tr>
<td>Item 1
<br />
Item 2
<br />
Item 3</td>
</tr>
<tr>
<td>Item 1
<br />
Item 2
<br />
Item 3</td>
</tr>
</table>
But now have tried to redesign the layout using the following CSS: Code: #boxProdDisplay
{
width:500px;
padding:0;
margin:0;
}
#boxProdDisplay p
{
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
#boxProdDisplay p.p1
{
float:left;
clear:left;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
#boxProdDisplay p.p2
{
float:left;
clear:left;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
#boxProdDisplay p.p3
{
float:right;
clear:right;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
#boxProdDisplay p.p4
{
float:right;
clear:right;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
The problem is that it doesn't quite display correctly. The <P> elements are floated correctly, but they only appear after the last <P> tag which has been aligned left. With a table structure I could use valign to send everything to the top of the page. What can I do here? Many Thanks. Hi, I'm really stuck with a template i'm making. it looks kind of o.k. in firefox Win XP, but it's screwed up in IE6 on Win XP. tried to many ways, but can't seem to solve it. template: http://www.thestateofdesign.com/template.php CSS: http://www.thestateofdesign.com/css/the_state_css.css I want the content [left & right content] to be situated under the headers, of course the left column on the left, and the right column next to the left, with a footer underneath it. in IE the footer and rightcolum move to the right. Tried to use positioning absolute, but that screws up the footer. Any help greatly appreciated, Cheers, Jarra http://www.research.buffalo.edu/newsite/ If I go to the above page in Firefox the page always loads fine. However, if I go to it in IE 6 the right side div half the time loads incorrectly and is not positioned to the right. If i hit refresh then the page looks correct. This error happens the most when I'm coming from another page and click the home button to get back to the above link. I've also noticed this happening on http://www.research.buffalo.edu/newsite/proposal_library.cfm Both pages validate correctly. Is there something I'm missing? Some kind of hack to make it work in IE? Hello there. I Have a small problem i think. I have an layout which i want to have heights in %. This seems to be difficult. In the attachement i have an example of how it is ment to look. The header should be 135px height. The 2 leftside blocks should be 50% of the page which is left, and not the whole page (viewport). I Don't have an good example, becouse i can't figure it out :S. If someone has an link to somekind of div-builder or fluid design builder etc.. that would be nice . Thx in advanced. Hi all, So I've been looking at this Glish template and I've been trying to create a website with it. The problem is that when I (or another user) chooses "Text Size - Largest" the third column disappears below the others. Is there any way to prevent this and make sure that column starts at the top, with the others? Should I be using "position: absolute" or other more specific code, in order to make the position of the columns in the layout more stable? Thanks. Hi! Am new here, been doing CSS for a few months now, had a few problems here and there, but overall, is going well I have done this website homepage so far : http://www.moretonhallglass.com/cross/ It works fine on all browsers, except 1! which is IE 6. I have read into bugs for this but have been unable to fix it as yet. The problem is that the middle picture with the painting and descripton it seems to have a break at the top of it and pushes it down the page, have tried all sorts to fix it in the CSS code, but to no avail yet. Anyone know how to fix it? Thanks for your help HTML : 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=ISO-8859-1" />
<title>Daisy Cross</title>
<script type="text/javascript">
<!--
function swap(img, ref) {
if (document.images) { document[img].src = ref; }
}
-->
</script>
<!--[if IE]>
<style>
.item {
margin: 5px;
padding: 10px;
}
</style>
<![EndIf]-->
<link rel="stylesheet" type="text/css" href="css/text.css" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
</head>
<body>
<div id="container">
<div id="header">
<img src="images/top.jpg" width="940" height="129" border="0" alt="Daisy Cross" />
</div>
<div id="mid" style="display: inline;"><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><img src="images/dcross_01.jpg" width="940" height="24" border="0" alt=""></td>
</tr><tr>
<td><img src="images/dcross_02.jpg" width="545" height="135" alt=""></td>
<td><a href="#" onmouseover="swap('mid1','images/dcross2_03.jpg')" onmouseout="swap('mid1','images/dcross_03.jpg')"><img name="mid1" src="images/dcross_03.jpg" width="194" height="135" border="0" alt=""></a></td>
<td><a href="#" onmouseover="swap('mid2','images/dcross2_04.jpg')" onmouseout="swap('mid2','images/dcross_04.jpg')"><img name="mid2" src="images/dcross_04.jpg" width="201" height="135" border="0" alt=""></a></td>
</tr><tr>
<td colspan="3"><img src="images/dcross_05.jpg" width="940" height="136" border="0" alt=""></td>
</tr><tr>
<td colspan="3"><img src="images/dcross_06.gif" width="940" height="10" border="0" alt=""></td>
</tr>
</table></div>
<div id="content-container">
<div id="content">
<br />
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="#" onmouseover="swap('nav1','images/nav2_01.gif')" onmouseout="swap('nav1','images/nav_01.gif')"><img name="nav1" src="images/nav_01.gif" width="130" height="32" border="0" alt=""></a></td>
</tr><tr>
<td><a href="#" onmouseover="swap('nav2','images/nav2_02.gif')" onmouseout="swap('nav2','images/nav_02.gif')"><img name="nav2" src="images/nav_02.gif" width="130" height="31" border="0" alt=""></a></td>
</tr><tr>
<td><a href="#" onmouseover="swap('nav3','images/nav2_03.gif')" onmouseout="swap('nav3','images/nav_03.gif')"><img name="nav3" src="images/nav_03.gif" width="130" height="30" border="0" alt=""></a></td>
</tr><tr>
<td><a href="#" onmouseover="swap('nav4','images/nav2_04.gif')" onmouseout="swap('nav4','images/nav_04.gif')"><img name="nav4" src="images/nav_04.gif" width="130" height="29" border="0" alt=""></a></td>
</tr><tr>
<td><a href="#" onmouseover="swap('nav5','images/nav2_05.gif')" onmouseout="swap('nav5','images/nav_05.gif')"><img name="nav5" src="images/nav_05.gif" width="130" height="30" border="0" alt=""></a></td>
</tr><tr>
<td><a href="#" onmouseover="swap('nav6','images/nav2_06.gif')" onmouseout="swap('nav6','images/nav_06.gif')"><img name="nav6" src="images/nav_06.gif" width="130" height="28" border="0" alt=""></a></td>
</tr>
</table>
</div>
<div id="aside" class="text">
<img src="images/welcome.gif" width="400" height="42" border="0" alt="Welcome" />
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
</div><div id="footer">
<img src="images/footer.jpg" width="888" height="60" border="0" alt="" />
</div>
</div>
</body>
</html>
CSS : Code: #container
{
margin: 0 auto;
width: 940px;
background: #fff;
}
#header
{
background: #ccc;
padding: 0px;
margin: 0 0 0 0px;
display: inline;
}
#header h1 { margin: 0px; }
#mid
{
margin: 0;
padding: 0;
background: #ffffff;
display: inline;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover { background: #383; }
#content-container
{
float: left;
width: 940px;
height:auto;
background: #fff;
}
#content
{
clear: left;
float: left;
width: 160px;
padding: 0px 0;
margin: 0 0 0 20px;
display: inline;
}
#content h2 { margin: 0; }
#aside
{
float: right;
width: 750px;
padding: 10px 0;
margin: 0 10px 0 0;
display: inline;
}
#aside h3 { margin: 0; }
#footer
{
clear: left;
background: #fff;
text-align: right;
padding: 0px;
}
Hi, I am new to using CSS to do my layout rather then tables. So far its working out well, and I can see the advantages in the long run. I am running into a small snag right now, that I was hoping someone might be able to help me out with. The site is succesfully displayed he http://www.yourbeergear.com/group/stackhouse/news.php But I found whenever the CENTER column is NOT the longest, it goes wonky, as seen he http://www.yourbeergear.com/group/stackhouse2/news.php The code I'm using basically runs like this Code:
<!-- Header -->
<div id="header">
<div align="center">HEADER</div>
<!-- end of Header --></div>
<!-- center column -->
<div id="c-block">
<div id="c-col">
//CONTENT
</div>
<!-- end of center column --></div>
<!-- FOOTER -->
<div id="footer" align="center">
<div align="center>FOOTER</div>
</div>
<!-- end of FOOTER -->
<!-- left column -->
<div id="lh-col"><br />
<h4 align="center">Left Column</h4>
</div>
<!-- end of left column -->
<!-- right column -->
<div id="rh-col"><br />
<h4 align="center">Right Column</h4>
</div>
<!-- end of right column -->
and the CSS file is as follows Code:
/* Layout Stylesheet */
body{
margin: 0;
padding:0;
background:#808080;
color: #333333;
}
#lh-col{
position:absolute;
top:62px;
left:0;
width:140px;
z-index:3;
background:#c0c0c0;
color: #333333;}
#rh-col{
position:absolute;
top:62px;
right:0;
width:140px;
z-index:2;
background:#c0c0c0;
color: #333333;}
#c-block {
width:100%;
z-index:1;
background:#c0c0c0;
color: #333333;
height:80%;}
#header{
height:60px;
border-bottom:1px solid #000000;
width:100%;
background:#eeeeee;
color: #333333;
margin:0;
}
#c-col{
margin:0 142px 0 142px;
position:relative;
background:#ffffff;
color: #333333;
z-index:5;
border: solid #000000;
border-width:0 1px;
}
#footer {
width:100%;
height:35px;
border: solid #000000;
border-width:1px 0;
background:#eeeeee;
color: #333333;
margin:0;
}
I'm trying to create a fairly easy layout, making use of DIVs. The following structure is what I'm trying to accomplish: www.dvolve[PLEASE REMOVE].org/tst.jpg And here's what I currently have: www.dvolve[PLEASE REMOVE].org/tst.htm However, I'm not really convinced that this is the right solution. I am unable to scroll in the content div (IE6) for one, which is quite a problem. I'm hoping to make this look the same for most browsers. Does anyone have a better layout that achieves this or any pointers on what I'm doing wrong? |
|||||||