|
CSS - Small Problem With Ie Height
Hi,
I've been a close watcher of this forum for some time now, and it's now that I've run into a problem I can't figure out. http://donimusic.com/test/ In the above site (currently in progress), I have made the #ctop and #cbottom divs a height of 2px, yet in IE it displays the height much more and thus creates the image to repeat itself. I can't figure out how to fix this (for view wanted - view in FF). Thank you kindly for your help. Stacey Similar TutorialsI'm having trouble with overlapping clickable areas when the line height is set smaller than 1em. i.e. Code: <ul style="line-height:0.825em;font-size:60px;"> <li><a href="#">TOO</a></li> <li><a href="#">BIG?</a></li> <ul> live example at: http://www.beechersmithstackhouse.info/buggs.html the buginess being that when you mouse over the lower portion of "TOO" , the "BIG?" is in it's hover state and is clickable. ... ... setting line-height for each item doesn't work. ... help? I've never done much CSS work, but I know this has to be an easy fix. Each DIV appears to be 10px higher when viewed in IE. I want them to be 8px high and they end up being 18px high. In Firefox, Netscape, and Opera it works fine. Anyone mind correcting this imbarrassing little problem? 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" xml:lang="en" >
<head>
<title>IE 10px Padding Problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin:0px; }
#container {
position:relative;
margin:auto;
width:730px; }
#header {
height:110px; }
.textualtop {
border:1px solid #000000;
height:8px; }
.textualbottom {
border:1px solid #000000;
height:8px; }
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<p>Notice how in IE6 each DIV is 10px higher then in FF. Why is it doing this?</p>
</div>
</body>
</html>
Hi, I'm new to using forums, and need a little help trying to fix an IE6 problem. My code is all valid, and i'm using xhtml strict. my page works fine in all the main browsers (including ie:7/8) just not ie6. Here is the problem i have. I have a div (links) which is 956px wide and i am floating 5 other divs (1-5) within the links div. The widths and padding for all of the 5 divs equals 956px's But for some reason the last div (lower5) is dropping out of alignment, it looks like ie6 thinks there is not enough room for all of the 5 divs to fit within the outer div. As you can see i have tried using line height:0; and that did not help. Here is my code...........Any idea's HTML: <div id="lower-links"> <div id="lower1"></div> <div id="lower2"></div> <div id="lower3"></div> <div id="lower4"></div> <div id="lower5"></div> </div> CSS: #links { margin:0; padding:0; background-color: #FFFFFF; width: 956px; height:374px; float: right; line-height:0; } #lower1,#lower3 { background-color: #FFFFFF; width: 161px; height:308px; float: left; padding-top:33px; padding-left:15px; padding-right:15px; line-height:0; } #lower2,#lower4 { background-color: #FFFFFF; width: 162px; height:308px; float:left; padding-top:33px; padding-left:15px; padding-right:15px; line-height:0; } #lower5 { background-color: #FFFFFF; width: 160px; height:308px; float: right; padding-top:33px; padding-left:15px; padding-right:15px; line-height:0; } Well I got sick of reading through tons of <td> and <tr> tags today so I sat down and tried to write my first CSS script ever. I got the basic idea of it and tweaked it using Firefox/Firebug to get it working great. The problem was I checked back in IE (since most people use it =/...) It looked all messed up and I tried changing a lot of things around and I just got frustrated. Since I am new to this whole thing with CSS, I don't know what to look for or change. I know that the top links are messed up but I will fix those after I get my layout working in both browsers. Can anyone help me out? www.etwcweb.com/ETWC.html Here is the CSS code also: Code: /* Main Part */
body {
font-family: Arial, Helvetica, sans-serif;
background: #333333 url(Images/mainbacknew.png) repeat-y;
font-size: 14px;
margin: 0px;
}
h1 {
font-size: 115%
font-weight: bold;
color: #000000;
}
p, ol, ul {
line-height: 145%
}
a {
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #CCCCCC;
font-weight: bold;
text-decoration: none;
}
ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-left:0pt;
padding-left:0pt;
}
ul li {
list-style: url(Images/bluearrow.png);
padding-left:15px;
}
img {
border:medium none;
}
img.left {
float:left;
margin:5px 9px 0pt 0pt;
}
img.right {
float:right;
margin:5px 9px 0pt 0pt;
}
hr {
display:none;
}
/* Floating part of Page */
#main_content {
width: 800px;
margin: 0pt auto;
background: url(Images/bg_content.jpg) repeat;
}
#main_content a {
color: #000000;
text-decoration: underline;
}
#main_content a:hover {
color: #666666;
}
/* The Top Picture */
#top_area {
background: url(Images/CSSHeader.png);
height: 433px;
width: 100%;
}
#top_area li {
display: block;
}
#top_area a {
color: #FFFFFF;
display: block;
float: left;
padding: 40px 20px 0pt;
text-decoration: none;
}
/* Search Form */
.search {
float: right;
padding-right: 20px;
margin-top: 50px;
margin-bottom: 50px;
}
.search h1 {
color: #FFFFFF;
font-size: 150%;
}
/* Top Links */
#main_links {
/* background-color: #000000;
opacity: 0.7; */
width: 800px;
margin: 0pt auto;
}
#main_links ul {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-left: 0pt;
padding-left: 0pt;
}
/* Right Side of Floating Page */
#stories {
background: transparent url(Images/bg_content.jpg) repeat;
width: 535px;
padding: 30px;
float: right;
margin: 0pt auto;
}
#stories h2 {
padding-left: 20px;
padding-top: 15px;
}
/* Left Side */
#left_bar {
background: transparent url(Images/bg_content.jpg) repeat;
float: left;
width: 205px;
margin: 0pt auto;
}
.left {
padding-right: 10px;
padding-top: 0px;
}
.left_list {
padding: 20px;
}
.left_list ul li {
border-top: 1px solid #CCCCCC;
padding: 10px 15px;
}
#left_bar h1 {
background: url(Images/LeftHeaders.png) repeat-x;
padding-left: 20px;
padding-top: 5px;
color: #FFFFFF;
}
/* Message */
#top_footer {
width: 800px;
margin: 0pt auto;
background-color: #666666;
color: #FFFFFF;
font-size: 90%;
font-weight: bold;
padding-top: 4px;
padding-bottom: 4px;
text-align: center;
line-height: 150%;
}
/* Bottom Links */
#links {
width: 800px;
margin: 0pt auto;
text-align: center;
background: #000000;
color: #FFFFFF;
font-size: 90%;
line-height: 160%;
padding-top: 8px;
padding-bottom: 3px;
}
#links a, #links a:hover {
text-decoration: none;
font-weight: bold;
}
#links .contact {
}
#links .contact a, #links .contact a:hover {
text-decoration: underline;
color: #0000CC;
}
Thanks in advance guys and sorry if this is already posted here, but my brain is frazzled and I couldn't find it with a quick search or three im making a panel with rounded corners just 4 divs , topLeft, topRight etc... i have them inside 1 container div that is 80% width, the 4 corner div's are all 50% width and 50% height it's all floated left and theres a <BR> between the top en bottom section but it works only in firefox...in IE they just line up below eachother unless i make the width of them 49%....so wheres the 1 ****ing % ? Building a online store website... If you go here, you can see my problem. My problem is, when the product title is longer than a single line, then it moves the transparent box down. I need the transparent box to move up. If anyone can help, thanks! hey just got a small problem i dont know hw to fix, take a look at my site http://funnyguys99.tripod.com/index.htm if u hover over the links on the left side of the page, the border around them is not even. I want the border to end at the same spot when u hover over them, no matter how many more letters there are in the link. Here's the Css for the left bar, please fix it [CODE] div#menubar { padding-right: 0.5em; padding-left: 0.5em; padding-bottom: 20%; margin: 120px 0px 0px 0px; padding-top: 0.5em; left: 0px; width: 8em; top: 0px; height: auto; position:absolute; background:#FFFFFF; border-right:1px solid black; border-bottom:1px solid black; border-top:1px solid black; } div#menubar ul { padding-left:0px; padding-top:0px; list-style:none; line-height: 85%; margin:0px; } div#menubar a { font-weight: bold; text-decoration: none; font-size:0.6em; padding-right:7.5em; padding-top:0px; padding-bottom:0px; } div#menubar a:link { color: #ffa500; } div#menubar a:visited { color:dark red; } div#menubar a:active { font-weight: normal; } div#menubar a:hover { color: white; background:#999999; border:1px solid black; } [CODE] Hi everyone, I am new to the forum. I am new to CSS and just trying to learn as much as i can as i go. I am currently working on a website and having a small problem with my drop down menus. It works great in Firefox, but in Safari when i hover over the drop down, it shifts to the left by a few pixels. I haven't added the IE workaround yet because i wanted to get this sorted before doing that so it won't work in IE yet. I would post a link but can't because i'm too new. I'm new to this, so be kind on my coding The code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Center test - "text-align: center" set for body, "text-align: left" for containing div</title>
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
text-align: center;
}
div#container
{
width: 100%;
background-color: #EAFBFF;
width:760px;
height:220px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #0066FF;
border-right-color: #0066FF;
border-bottom-color: #0066FF;
border-left-color: #0066FF;
}
div#container2
{
width: 760px;
background-color: #ddd;
width:760px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #0033FF;
border-right-color: #0033FF;
border-bottom-color: #0033FF;
border-left-color: #0033FF;
padding-top: 15px;
padding-bottom: 15px;
}
div#container3
{
width: 760px;
background-color: #666666;
width:760px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #0033FF;
border-right-color: #0033FF;
border-bottom-color: #0033FF;
border-left-color: #0033FF;
padding-top: 13px;
padding-bottom: 10px;
}
#container {
}
#Layer1 {
position:absolute;
width:760px;
height:115px;
z-index:1;
left: 405px;
top: 102px;
background-color: #0000FF;
overflow: scroll;
}
#container2 {
}
#Layer2 {
position:relative;
width:760px;
height:600px;
z-index:1;
left: 405px;
top: 102px;
background-color: #0000FF;
overflow: scroll;
}
#container4 {
font-family: Arial, Helvetica, sans-serif;
width: 500px;
font-size: 14px;
font-style: normal;
color: #DDDDDD;
text-decoration: none;
text-align: left;
margin-right: 110px;
margin-left: 125px;
background-color: #999999;
border: thin solid #999999;
padding-left: 15px;
}
#Layer3 {
position:relative;
width:200px;
height:600px;
z-index:1;
left: 405px;
top: 102px;
background-color: #0000FF;
overflow: scroll;
}
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.style2 {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#navbar {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
background-color: #666666;
margin: 0px;
padding: 0px;
height: 20px;
}
#navbar ul {
padding: 0;
margin: 0;
list-style: none;
}
#navbar li {
float: left;
text-align: center;
background-color: #666666;
position: relative;
width: 130px;
}
#navbar li ul{
position: absolute;
display: none;
text-align: center;
line-height: 25px;
padding-top: 7px;
}
#navbar li > ul {
top: auto;
left: auto;
}
#navbar li:hover ul {
display:block;
text-align: center;
text-indent: 0;
}
#content {
clear: left;
}
#mainphoto {
padding: 0px;
float: right;
border: 1px solid #0066FF;
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 30px;
}
#container6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
padding-right: 30px;
padding-left: 30px;
}
.style3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
.style4 {color: #000000}
.style5 {font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; }
a {
font-size: 12px;
color: #FFFFFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #CC6600;
}
a:active {
text-decoration: none;
color: #CCCCCC;
}
</style>
</head>
<body>
<div id="container">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="(URL address blocked: See forum rules)=7,0,19,0" width="760" height="220">
<param name="movie" value="(URL address blocked: See forum rules)">
<param name="quality" value="high">
<embed src="(URL address blocked: See forum rules)" quality="high" pluginspage="(URL address blocked: See forum rules)" type="application/x-shockwave-flash" width="760" height="220"></embed>
</object>
</div>
<div class="style2" id="container3">
<div id="navbar">
<ul>
<li><a href="(URL address blocked: See forum rules)">Home</a></li>
<li>About the Office
<ul>
<li><a href="">Meet Dr. Toolson
</a></li>
<li><a href="">Meet the Team</a></li>
<li><a href="">Office Tour</a></li>
<li><a href="">Location</a></li>
</ul>
</li>
<li>About Orthodontics
<ul>
<li><a href="">Adults</a></li>
<li><a href="">Children</a></li>
</ul>
</li>
<li>Life with Braces</li>
<li>Contact Us
<ul>
<li><a href="">Contact Information</a></li>
<li><a href="">Request Appointment</a></li>
<li><a href="">Location</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="container2">
<div id="container4">
<p class="style3">Contact Information Form</p>
<form action="(URL address blocked: See forum rules)" method="post" class="style4">
<span class="style1">
<label>Name
<br>
<input type="text" name="Name">
</label>
</span>
<span class="style1">
<br>
<br>
<label>Email
<br>
<input type="text" name="Email Address">
</label>
</span>
<span class="style1">
<br>
<br>
<label>Phone Number
<br>
<input type="text" name="Phone Number">
</label>
</span>
<span class="style5">
<br>
<br>
<label><span class="style4">Description (if neccessary)</span> </label>
</span>
<span class="style4">
</span>
<label><br>
<textarea name="Description" rows="5"></textarea>
</label>
<label>
<br><br>
<input name="Submit" type="submit" class="style1" value="Submit">
</label>
<label>
<input name="Reset" type="reset" class="style1" id="Reset" value="Reset">
</label>
<input name="recipient" type="hidden" id="recipient" value="jeff@dinorestoration.com">
<input name="redirect" type="hidden" id="redirect" value="(URL address blocked: See forum rules)">
</form>
</div>
</div>
<div class="style1">
Copyright Toolson Orthodontics 2009 </div>
<p> </p>
</body>
</html>
Ok, I have a two column layout. And I'm trying to get the base of the div stacks to match eachother. Here's the stripped down code I've been playing with to try to create this behavior. Code: <div style="width:600px;">
<div style="width:50%; background-color:#66C; float:right; text-align:center;">
<img src="#" width="150" height="300" alt="Fake Content"/><br />
</div>
<div style="width:50%; height:150px; background-color:#0F0;">1</div>
<div style="width:50%; height:30px; background-color:#C96;">2</div>
<div style="width:50%; height:50px; background-color:#CCC;">3</div>
<div style="clear:both;"></div>
</div>
So the size of div #1 is always fixed, #2 contains dynamic content, and #3 is fixed content but I would like the height of #3 to stretch to match the right column when needed. For the right column, the content is dynamic, and I would like it to stretch to match the bottom of #3 when needed. So basically, the height of both column will vary and I'd like the shorter of the 2 to stretch. I looked around and experimented a bit with some success, but not exactly the behavior I was looking for. The things that have been giving me the most trouble, is that the left column consists of 3 divs, and the right column is floated. From the left, I could probably get away with removing the content from #1 from it's div and let it hang out in the parent div, but the other two really need their own containers. Also, I don't know how else to put the right column on the right side other than to use a float or absolute position (and absolute won't expand the parent div) because both columns are dynamic... Anyhow, I'm searching for suggestions. One thing that sucks is I know this would be a non issue using tables, but this is a page layout and I'm not about to cave now. thanks Hey Everyone, I would greatly appreciate any help. I created a drop down menu and it works perfectly on all browsers except for Internet Explorer. The ONLY issue is that it centers the text on the drop down. It should be LEFT aligned. If you see the menu on any other browser EXCEPT for Internet Explorer, you can see how its supposed to look. The drop down menu items should just be left aligned. See: ratemodifiers.com/menu.htm Thanks for all help!! Id appreciate all help! thank you so much hi, I would like my #leftNav to have 100% height and fit the hiehgt of its container. After looking into it I found that the parent has to have 100% also, and body and html My problem is that in IE, it works but leaves a ridiculous amount of white space under the bottom of the site. And in FF it #leftNav does not go 100% height but still has some white space under the bottom of the site (meaning u can scroll down but its just white) see it here so heres my css: PHP Code: html { height: 100%; } body { margin: 0; padding: 20px 0 0 0; color: #000; font-size: 12px; font-family: times; background: #fff; height: 100%; } #container { height: 100%; margin:0px auto; padding: 0; width: 760px; display: table; } #content { margin:0px auto; padding: 0; width: 760px; height: 100%; } #contentMain { padding: 0; margin: 0; float: right; width: 632px; height: 100%; } #leftNav { color: #000; float: left; margin: 0; padding: 0; width: 128px; height: 100%; } thank you I've been browsing the web for a while now and all I can find are issues relating to people being unable to get their divs to span the whole viewport, but I'm having the opposite problem. I just want this div to span the distance of the content inside it, but at 100% height. This is just an experimentation of mine. I'm trying to get a div to go from 0% height to 100% height, but that 100% height I only want to be the 100% height of the content in this div, and not the entire content. What attributes need to be set for 100% of this div to be just the intrinsic height? thanks~ Problem fixed... I'm stupid... a moderator can delete this... here is my style sheet.....simplified, so i can figure out the problem before i get too deep: body { margin:0; padding:0; height:100%; } #container{ height: 100%; width: 750px; margin: 0 auto; } #left_col{ height: auto; width: 200px; float:left; } #right_col{ width: 550px; height: auto; float:left; } and my page very very simplified: <body> <div id="container"> <div id="left_col">content </div> <div id="right_col"> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </div> </body> Problem is that the right column will stretch down to accommodate the text, but the left column will not....nor will the container.. how can i get the left_col or container to stretch when the right_col stretches...??? It works in IE6 and IE7 but not Fire Fox... Okay so I essentially have 3 divs. #header #body #footer header will ALWAYS be 60px footer will ALWAYS be 20px I would like body to fill 100% of the remaining space no matter what, with no scrollbars showing. Is this even possible? I had gotten it to work in FF and then saw IE7 was a no go. I did something conceptually like this Code:
<div id="container">
<table>
<tr>
<td><div id="header"</td>
</tr>
<tr>
<td height=100%>
<div id="body"></div>
</td>
</tr>
<tr>
<td valign="bottom"><div id="footer"></div></td>
</tr>
</table>
</div>
in CSS, the HTML, BODY, #body, and #container are set to 100% height the html: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="aoms.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <div id="header"> d </div> <div id="nav"> d </div> <div id="contentTop"> d </div> <div id="content"> d </div> <div id="contentBottom"> d </div> </div> </body> </html> the css: Code: body{
margin:5px 5px 5px 5px;
padding:0px 0px 0px 0px;
height:100%;
}
#container{
min-width:800px;
max-width:800px;
width:800px;
min-height:100%;
max-height:100%;
height:100%;
background-color:#ffffff;
}
#header{
background-image:url('images/header.jpg');
background-repeat:no-repeat;
min-height:124px;
max-height:124px;
height:124px;
padding:0px 0px 5px 0px;
}
#nav{
background-image:url('images/nav.gif');
background-repeat:no-repeat;
min-height:30px;
max-height:30px;
height:30px;
padding:0px 0px 5px 0px;
}
#contentTop{
background-image:url('images/contentTop.gif');
background-repeat:no-repeat;
min-height:28px;
max-height:28px;
height:28px;
padding:0px 0px 0px 0px;
}
#content{
background-color:#A1A1A1;
min-height:400px;
max-height:100%;
height:100%;
}
#contentBottom{
background-image:url('images/contentBottom.gif');
background-repeat:no-repeat;
min-height:28px;
max-height:28px;
height:28px;
padding:0px 0px 0px 0px;
}
the problem 'FF': 'container' is not stretching to 100% height, its only as big as the other divs stretch and in IE its more than 100%? hope you can understand that. Shem The problem is that it seems to be making a 10px scrollbar that I just can't seem to get rid of. I've tried all sorts of things to get rid of the scrollbar and none of them seem to work. Can anyone give me a helpful hand or some pointers? This is my first go at a fully css xhtml document. Code: <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>glish.com : CSS layout techniques : static width and centered</title>
<style type="text/css">
html,body {
height:100%;
}
#frame {
width:770px;
margin-right:auto;
margin-left:auto;
margin-bottom: 0px;
padding:0px;
text-align:left;
height:100%;
background:#cdcdcd;
}
#contentleft {
width:170px;
padding:0px;
float:left;
background:#dadada;
height:100%;
}
#contentcenter {
width:600px;
padding:0px;
float:right;
background:#eee;
height:100%;
}
#contentheader {
background:#fff;
}
#contentmenu {
background:#fff;
}
p,h1,h2,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
h2 {
font-size:11px;
}
#contentheader h1 {
font-size:14px;
padding:10px;
margin:0px;
}
#contentright p { font-size:10px}
</style>
</head><body>
<div id="frame">
<div id="contentheader"><h1><a href="home.asp">LAYOUT TECHNIQUES</a>: static width and centered (Title Pic Here)</h1></div>
<div id="contentmenu"><h2><a href="home.asp">Menu Could go here</a></h2></div>
<div id="contentcenter">
<h1>contentcenter</h1>
<p>3 columns all with static widths, and contained in a parent DIV wihich remains centered in the window. One rather serious limitation of this particular technique is that if any of the three content DIVs contains an image or a really long word that is longer than the width of the DIV, it totally breaks the layout. Each browser breaks it differently.</p>
<p><strong>Scroll down for the source.</strong></p>
<p >Enterprise engenderment accelerates initiative platforms, reducing staffing components, integration of technical accessibility, resulting in bottom line pluralisms, benefit-wise. Incidental re-sizing staff requirements through attrition can be accelerated by paridigm shifts and focusing on core suitability and cross-training. </p>
</div>
<div id="contentleft">
<h1>contentleft</h1>
<p>Marketing teams input produce cross purposing in view of goal alignments due to knowlege paucity, necessitating workflow education and orientation. </p>
</div>
</div>
</body>
</html>
I am trying to display some data from a mysql file in a spreadsheet format. The first column of data displayed is boolean so I want to show it as a check box, which requires defining a form. When I do this is it increases the row height on the screen, regardess of what I set the height to in the css file. If I take out the form column, it respects the row height setting in the css file. Any thoughts on why the form overrides the row setting and how to fix it? PHP Code: <tr class="firstrow"> <td class="colDone"> <form class="form1" name="form1" method="post" action=""> <input <?php if ($row_rsList['isDone']) {echo "checked=\"checked\"";} ?> type="checkbox" name="checkbox" value="checkbox" disabled="disabled" /> </form> </td> <td class="colItem"><?php echo $row_rsList['taskitem']; ?></td> <td><?php echo $row_rsList['taskpriority']; ?></td> <td><?php echo $row_rsList['taskcategory']; ?></td> <td><?php echo date("m-d-Y",strtotime($row_rsList['taskduedate'])); ?></td> </tr> from css file: tr.firstrow { background-color:#FFFFCC; height: 20px; } |
|||||||