|
CSS - Positioning Of <td> In Ie Troubles (may Be Html Related)
I have a gap between my <td> data.
HTML Code: <table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="11" height="31"><img src="/images/header_left.jpg" width="11" height="31" border="0" alt="" /></td> <td class="header" height="31"><? echo $query_data[3]; ?> <? echo $query_data[0]; ?></td> <td width="16" height="31"><img src="/images/header_right.jpg" width="16" height="31" border="0" alt="" /></td> </tr> <tr> <td class="smaller" colspan="2"><b><? echo $query_data[1]; ?></b><br /> <? echo nl2br($query_data[2]); ?><br /> and so on... CSS Code:
.header {
background-image: url(http://www.mysite.com/images/header_fill.jpg);
background-repeat: repeat-x;
}
This displays nicely in Firefox et al. But IE sucks so... Any suggestions? Please and thanks. Similar TutorialsHere's my page. It's a catalogue of all my DVDs. I'm having a problem such that rows underneath rows with multiple lines of text (you'll see what I mean) are missed out. Anyone know what I'm missing? To save you all some time, here's the CSS for it: Code: div.dvd {
float: left;
width: 200px;
margin: 20px 40px 20px 40px;
text-align: center;
border: 1px;
}
I have a section of my application where I need a menu containing forms in a box aligned to the left. When one of these form names are clicked, I need it to unhide the div and display the proper form to the right of the menu. This works fine in Internet Explorer, but when the forms become visible in Firefox they completely cover up the menu. Here's what I've got: CSS Code: #forms .form { display: none; position: absolute; left: 0; top: 0; }
#forms { position: relative; }
#adminbar { float: left; border: 1px solid #000; padding: 5px; position: relative; }
HTML Code: <div id="adminbar">
<a href="javascript:void(0);" onclick="hide(getElementsByClassName('form')); show('software');">Software</a>
</div>
<div id="forms">
<div id="software" class="form">
<h1>Software Administration</h1>
<form class="ttcform">
<fieldset>
<legend>New Software Item</legend>
<ol>
<li>
<label>Software Name</label>
<input type="text" size="30" name="name"/>
</li>
</ol>
</fieldset>
<fieldset class="submit" align="center">
<input type="submit" name="submit" value="Create Software"/>
</fieldset>
</form>
<hr>
<form class="ttcform">
<fieldset>
<legend>Edit Software Item</legend>
<ol>
<li>
<label>Software Name</label>
<input type="text" size="30" name="name"/>
</li>
</ol>
</fieldset>
<fieldset class="submit" align="center">
<input type="submit" name="submit" value="Create Software"/>
</fieldset>
</form>
</div>
</div>
Javascript (In case you need it): Code: function show(el) {
if(typeof el == 'string') {
document.getElementById(el).style.display = 'block';
return true;
}
else if(typeof el == 'object') {
for(var i = 0; i < el.length; i++) {
if(typeof el == 'object') {
hide(el[i].id);
}
else {
hide(el[i]);
}
}
return true;
}
return false;
}
function hide(el) {
if(typeof el == 'string') {
document.getElementById(el).style.display = 'none';
return true;
}
else if(typeof el == 'object') {
for(var i = 0; i < el.length; i++) {
if(typeof el == 'object') {
hide(el[i].id);
}
else {
hide(el[i]);
}
}
return true;
}
return false;
}
function getElementsByClassName(className) {
var retEls = [];
var els = document.getElementsByTagName('*');
for(var i = 0; i < els.length; i++) {
if(els[i].className == className) {
retEls.push(els[i]);
}
}
return retEls
}
I design a layout of the page using css for an html but i have problem i want footer block must be 5px up from bottom the footer block is as follow Code: #Footer {
Position : Absolute;
Background-color : Transparent;
Border : 1px Solid Black;
Top : 730px;
Left : 5px;
Bottom: 5px;
Width : 768px;
Height : 70px;
}
Hi, Have a problem with a left-hand table, the content of which is dragged down the page when the right-hand table grows in the same direction, say when filling it with content. I need to anchor that left-hand table in place but allow the right-hand table to stretch vertically. Have tried absolute CSS positioning, spacers, extra tables, 100% height - nothing seems to work. I've simplified the HTML code for readability, but the general layout is pretty much intact: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <table width="668" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="49" colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="667" height="49"> </td> </tr> </table></td> <td width="1"></td> </tr> <tr> <td width="147" rowspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="147" height="147"> </td> </tr> </table></td> <td width="520" height="32" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="520" height="32"> </td> </tr> </table></td> <td></td> </tr> <tr> <td height="24" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="520" height="24"> </td> </tr> </table></td> <td></td> </tr> <tr> <td rowspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="517" height="419" valign="top"><div align="center">RIGHT-HAND TABLE </div></td> </tr> </table></td> <td height="91"></td> </tr> <tr> <td height="328" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="146" height="328" valign="top"><div align="center">LEFT-HAND TABLE </div></td> </tr> </table></td> <td></td> </tr> <tr> <td height="482"> </td> <td> </td> <td></td> </tr> </table> </body> </html> Thanks, Dyb greetings. i have a small problem. i have a relatively positioned layer and an absolutely postioned layer. i want the rel layer to appear visually below the absolute layer. i'm not referring to z-index. simply i have a header layer and content layer. the header is absolute and the content is relative, BUT IE6 is demanding that in my code, i put the content first and header second. also if I drop the width property from the content/relative layer IE6 will allow me to have the absolute layer ontop of the relative layer in my markup. examples to be viewed in IE6 win. appears proper but was coded backwards Page appears correct, Header on top, content below BUT in the code the layers are in the wrong order. Coded in correct order but margin ignored Here the layers are coded with top layer first and bottom layer second. IE drops the top margin of the content layer and rams it to the top of the page. THIS IS THE PROBLEM Coded in correct order but i dropped the width attribute In this example the layers are coded in the proper order and they display properly but only if i remove the width attribute from the relatively positioned layer. i would appreciate any help. the page i'm working on is much more complex so although i can get both browsers to display properly, i don't like having the code for my navigation at the bottom of the page. thanks alot! carl Can someone please take a look at my CSS on this page and let me know what fixes I need to implement/read about in order to get the page to look acceptable in IE. I've checked and both the CSS and HTML are valid. I'm feeling more and more confident in my CSS abilities as time goes by but I can't seem to get a grasp on ALL the fixes IE seems to require. Thanks in advance! stuboo Hi, First post, first issue ... I am having some difficulties with the tag <table> in a fluid layout. without the attribute width set to 100%, the table is at the the top. If I set it up, the table goes down to the bottom. Can anybody explain why? ----------- 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>Title Here</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> <STYLE> #outer_wrapper { width: 800px; } #container { float: left; } #left { background: #BBB; width: 150px; float: left; padding: 0px; border: solid 1px #000; } #main { background: #EEE; padding:4px; padding-left:160px; border: solid 1px #000; } table { border: solid 1px #A4A4A4; } </STYLE> </head> <body> <div id="outer_wrapper"> <div id="container"> <div id="left"> left here<br/><br/><br/><br/><br/><br/> </div> <div id="main"> <table cellspacing="0" cellpadding="2" width="100%"> <tr> <td align="top" valign="top"><b>Line 1</b></td> <td align="right">Line 2</td> </tr> </table> </div> </div> </div> <div id="footer"> footer here </div> </center> </body> </html> I have been setting up a wordpress blog for my family, and have run into troubles getting it to show up the right way between browsers. In older versions of IE (5.0, 6,0), the blog posts are pushed down, and begin where the sidebars end. I am using a newer version of IE and the blog shows up perfectly. I have family members who use the older versions, and it shows up terrible. Is there anything that can be done with it? I am fairly new at web design. I am using the RockinPaper 3 column theme if that helps at all. Thanks for any help and advice! here is the code [html] <center> <table width="750" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <table width="750" class="forumhome_bdr" border="0" cellpadding="0" cellspacing="0"> <tr> <td> content content content content ></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> [/html] well im adding something below "></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>" but it appears within the border...see the attached picture i want it to be under the border...... how? Hello everyone. I am new to CSS and I have been trying to create a CSS layout composed of a 2x2 grid using DIVs. The top cells have fixed width and height, with the bottom ones having fixed width and variable height depending on the content. I achieved this with success as they look as intended in IE8 (don't have 9 available) and the latest versions of Firefox and Opera. In Chrome (and Safari for that matter), sometimes it will render just fine or look one or two pixels out of place depending on the width of the browser window. Here is my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title</title>
<style type="text/css">
html,body {
margin: 0px;
background-image: url(http://i.imgur.com/NHbHt.png);
background-repeat: repeat-y;
background-position: center;
background-color: #f7f4ee;
text-align: center;
}
#wrap {
width:750px;
margin:0px auto;
text-align:left;
}
#topleft {
display:block;
margin-left:1px;
float:left;
width:572px;
height:127px;
background-color:#ccc;
padding:0px 0px
text-align:left;
}
#topright {
display:block;
margin-left:1px;
margin-right:1px;
float:left;
width:175px;
height:127px;
background-color:#ffffff;
padding:0px 0px;
text-align:left;
}
#bottomleft {
display:block;
margin-left:1px;
float:left;
width:572px;
background-color: yellow;
padding:0px 0px
text-align:left;
}
#bottomright {
display:block;
margin-left:1px;
margin-right:1px;
float:left;
width:175px;
background-color:green;
padding:0px 0px;
text-align:left;
}
</style>
</head>
<body>
<div id="wrap">
<!-- Slideshow -->
<div id="topleft">
topleft
</div>
<!-- Logo -->
<div id="topright">
<img src="logo.png" alt="logo" width="175" height="127">
</div>
<!-- Contents -->
<div id="bottomleft">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id ipsum nec justo auctor tristique in eu sapien. Vestibulum commodo lacinia volutpat. Donec tempor imperdiet sagittis. Cras gravida viverra nisi eget adipiscing. Mauris quis sollicitudin odio. Nunc eu nulla enim, at tempor nibh. Maecenas iaculis egestas condimentum. Praesent non odio velit.
</div>
<!-- Menu -->
<div id="bottomright">
bottomright
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<p>Sidebar</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id ipsum nec justo auctor tristique in eu sapien. Vestibulum commodo lacinia volutpat. Donec tempor imperdiet sagittis. Cras gravida viverra nisi eget adipiscing. Mauris quis sollicitudin odio. Nunc eu nulla enim, at tempor nibh. Maecenas iaculis egestas condimentum. </p>
</div>
</div>
</body>
</html>
The lines shown are part of the background, as it was the easiest solution I came across with to make it look like the columns go all the way down to the bottom of the page. So, I believe my issue lies on the DIVs and/or the centered background but I have no idea how to work around this. Thanks in advance for your time and advice. Cheers Hi all probably a stupid question but i cant find the answer i am making a site and when i zoom out in the browser the page sits to the left, how do i make it stay in the center Cheers Howdy, Very simple css layout, but IE (7) is messing it up. What else is new. Header div is centered with the curved top border (16 pixels high), uses background tag in css. body mas a main background, which is centered. it's an 800pixel wide gif with 20 pixel sides which leaves 760 white pixels in the middle. main container is 760 pixels wide, and centered thus creating the layout. header and body combined should make a seamless border around the main container. but it doesn't in IE. why not?!?! it works well in FFX, Chrome, Safari, Opera. argh. can't seem to post urls, so i'll have to post my code: 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> <title>GreenSky Capital Inc. :: Customized Financial Solutions :: Home</title> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="header"></div> <div id="container_main"> Put some text here. </div> </body> </html> CSS: Code: html,body {
margin: 0px;
padding: 0px;
background: #e0e0e0 url(../images/bg_main.gif) repeat-y center top;
font-family: verdana,"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #6C6C6C;
text-align: center;
}
#header { margin: 0 auto; width:800px; padding:0; height: 16px; background: #e0e0e0;background: url(../images/bg_top.gif) no-repeat top right ;}
#top_nav { margin: 0; padding:0; width:230px;height: 180px;}
#top_sep { margin: 0 auto; padding:0; }
#container_main { margin: 0 auto; padding:0;width:760px; background:#fff; }
#container_content { width:720px; margin: 0 20px 0 20px; background:#fff; text-align: left; }
#roscripts_m4 { margin:0; padding:0;width:100%;}
#roscripts_m4 li { margin:0; padding:0;display:inline;list-style-type: none; }
#roscripts_m4 a:link, #roscripts_m4 a:visited { color: #056839;width:230px;text-align:left;text-indent:15px;float:left;font-size:11px;height: 30px;line-height: 30px;font-weight: bold;text-decoration: none;border-bottom:1px solid #6AB94E;}
#roscripts_m4 a:link.active, #roscripts_m4 a:visited.active, #roscripts_m4 a:hover {color: #fff;background: url(../images/bg_nav.gif) no-repeat top left ;}
#news, #support {background: #efefef; }
#footer { margin: 0 auto; padding:0; width:760px; height: 30px; clear:both; text-align: center;}
.sidebox { margin-top:40px; background: url(../images/bg_side.gif) no-repeat top center; height: 300px;}
.sidebox_head h2 { margin: 0; padding: 16px; 0 0 10px; color: #fff; font-size: 12px; }
.sidebox_body { margin: 0; padding: 0 0 0 10px; border: 0; font-size: 11px; }
.sidebox_body p, .sidebox_body form {margin: 0; padding: 0;}
.sidebox_body form label { width: 200px; position : relative; display : block; }
.sidebox_body form label input { position : absolute; left : 40%; top : 0px; }
.sidebox_body form input,.sidebox_body form textarea { font-size: 10px; border: 1px solid #c0c0c0; background: #e0e0e0; }
.sidebox_body form textarea { font-family: verdana, arial, helvetica; font-size: 10px; width: 200px; height: 50px; overflow:hidden}
.sidebox_body form span { float:right;margin-right:20px;}
.sidebox_body form submit {border: 1px solid #c0c0c0; background: #e0e0e0;}
#content_right h1 { font-size: 20px; color: #056839; width: 100%; border-bottom:1px solid #056839; }
#content_right h2 { font-size: 12px; color: #056839; width: 100%; }
#content_right li {padding-bottom: 10px;}
any help would be much appreciated! thanks, ynot2k is there any way to have the background of a table be at 50% opacity and the text be at 100% opacity? i've been playing with this code: style="filter:Alpha(Opacity=xx)" ...where xx is 50 or 100 and have placed it within the <table> tag and also within a <font> tag, but nothing seems to work. the font wants to be the same opacity as the table. is there any way around this? on a possible workaround, i've tried using semi-transparent PNG file as the background of the table, and that didn't work. i couldn't get the PNG file to do semi-transparent. it wanted to do a diffusion transparency, which looked like @ss. http://turkeybot.info/flash/play.php?id=121 When you go below the game eand hover where it says to, the instructions for the game come up. Problem is, the z-index I set for it isn't working, and it's letting the form below it override it. What's the problem? K, finally got a working drop down menu, pretty well exactly how I want it...however, in IE it works properly, but in FF it seems to grow in width and cover the drop down part up. Probably somethin to do with a preset 'td' width in my html, but not sure. Here is what i'm talking about, and here is the style sheet. Any help is greatly appreciated! http://www.sdtars.com/development/ I can't figure out why I can't get them to popup over the other menus. Can anyone see what I am doing wrong? Thanks! Hi all, Building a test site here. The drop-down menus work fine in FF and Opera, but in IE, the sub-menus appear to the right when they come up. I can't figure out why. Help? Also, for some reason, the submenus seem awfully wide. I can't seem to find the place in the CSS that controls this width. Help? Thanks! Chris I have a layout of the following structu Code: #page {
background-color:#000000;
width: 780px;
margin: 0px;
padding: 0px;
}
#content {
width: 650px;
height: 500px;
background-color: #FFFFFF;
padding: 0px;
margin: 0px;
float: right;
}
#sidebar {
width: 130px;
height: 450px;
background-color:#666666;
padding: 0px;
margin: 0px;
float: right;
}
Inside the body tags, I placed the following code: Code: <div id="page"> <div id="content">/*some content*/</div> <div id="sidebar">/*navigation*/</div> </div> Now I am running in the following troubles. As you can see, the parent layer (page) has a black background, the others are white and grey, respectively. I would like the parent (background) layer to grow with the navigation/content layers, dependent on which layer is higher/taller... get the idea? Thus far, the parent layer "page" does not show at all, neither does its black background. Any idea how to make it dependable? I've been trying hard to figure it out, can't seem to do it. Perhaps the float attibutes cause it not to have any influence on the parent layer? Thanks guys! |
|||||||