|
CSS - Two Floated Divs Too Wide In Ie But Works In Ff
Similar TutorialsHere's the site in Question: http://www.winchps.vic.edu.au It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6. Here's the CSS code for the basic layout: Code:
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}
#header {
width: 802px;
}
#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}
#content {
padding: 0px;
margin: 0px;
}
#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}
#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}
#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}
#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc). Anyone got any ideas? Hi everyone I have a 3 column layout with a footer. If the content ends up being too wide for the middle column (ie a large data table) I can't get the middle column to push the right hand column beyond the width of the screen. If the right column is absolutely positioned, the middle column just continues underneath the right column (overlaps). If the right column is floated right, it just drops down below the middle column. What I want it to do is bring up a horizontal scroll bar in the browser and let people scroll across for the right column. Based on the code below, if anyone has any ideas I would be unbelievably greatful. I've been pulling my hair out all day... My HTML is as follows: Code: <div id="content_container"> <div id="lft"> ... </div> <div id="mainbody"> .... </div> <div id="rght"> ... </div> <div id="footer"> ... </div> </div> My relevant CSS is as follows: Code: #content_container {
position: relative;
min-height: 100%;
top: 0;
left: 0;
width: auto;
height: auto;
border: 1px solid red;
}
#lft {
float: left;
left: 0;
top: 0;
width: 24%;
visibility: visible;
}
#mainbody {
position: relative;
left: 0;
top: 0;
width: 50%;
height: auto;
visibility: visible;
}
#rght {
position: absolute;
right: 0;
top: 0;
width: 22%;
visibility: visible;
padding-right: 10px;
}
#footer {
float: left;
bottom: 0;
left: 0;
top: 0;
clear: both;
width: 100%;
margin-top: 40px;
padding-top: 15px;
padding-bottom: 15px;
visibility: visible;
}
I am new to css, and am eager to build the equivalent of a work-week calendar using only css. Basically, a five item table without using table tags. I have succeeded with firefox, but for some reason I am getting an odd reordering of the div elements in IE. I will post the html and the css below, and could really use some pointers. I am sure it has something to do with the float commands, but am not even sure what to call this problem to search for it! Here's the html page <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="killmer.css"> <title>Killmer's Science Page - Chemistry Assignments</title> </head> <body > <div class="left"> <h1><a href="chemcalendar.html" class="one">Chemistry Calendar</a></h1> </div> <div class="left"> <h1>Chemistry Textbook Online</h1> </div> <div class="left"> <h1>Chemistry Today Calendar</h1> </div> <div class="left"> <h1>Chemistry Today Textbook Online</h1> </div> <div class="right"> <img src="./images/logo.jpg" ></img> </div> <div class="right"> <h2>Chemistry Daily Assignments</h2>. </div> <div class="right"> <div class="monday"> <h1>MONDAY</h1> </div> <div class="tuesday"> <h1>TUESDAY</h1> </div> <div class="wednesday"> <h1>WEDNESDAY</h1> </div> <div class="thursday"> <h1>THURSDAY</h1> </div> <div class="friday"> <h1>FRIDAY</h1> </div> <div class="monday"> <h1>MONDAY</h1> </div> <div class="tuesday"> <h1>TUESDAY</h1> </div> <div class="wednesday"> <h1>WEDNESDAY</h1> </div> <div class="thursday"> <h1>THURSDAY</h1> </div> <div class="friday"> <h1>FRIDAY</h1> </div> </div> </body> </html> And here's the css a.one:link {color:black; text-decoration: none;} a.one:visited {color:black; text-decoration: none;} a.one:hover {color:red; text-decoration: none;} a.one:active {color:black; text-decoration: none;} body { background: url(./images/backgroundblend.jpg); background-repeat: repeat-y; background-color:black; } h1 { color:black; font-family:"times new roman",serif; font-size:100%; } h2 { color:silver; font-family:"times new roman",serif; } div.left { border:black; padding:3px; border-style:outset; border-width:2px; background-color:silver; width:150px; font-family:courier, monospace; float:left; clear:left; margin:5px; } div.right { margin-left:250px; margin-top:0px; margin-right:0px; margin-botton:0px; padding:0px; } div.monday { border:black; padding:3px; border-style:outset; border-width:2px; background-color:silver; width:15%; font-family:courier, monospace; margin:1px; float:left; clear:left; } div.tuesday { border:black; padding:3px; border-style:outset; border-width:2px; background-color:silver; width:15%; font-family:courier, monospace; margin:1px 1px 1px 1px; float:left;} div.wednesday { border:black; padding:3px; border-style:outset; border-width:2px; background-color:silver; width:15%; font-family:courier, monospace; margin:1px 1px 1px 1px; float:left; } div.thursday { border:black; padding:3px; border-style:outset; border-width:2px; background-color:silver; width:15%; font-family:courier, monospace; margin:1px 1px 1px 1px; float:left; } div.friday { border:black; padding:3px; border-style:outset; border-width:2px; background-color:silver; width:15%; font-family:courier, monospace; margin:1px 1px 1px 1px; float:left; } Thanks for the time! Hey all, please check this page: http://www.trshady.com/eminemdownloads/ You'll see for floated grev divs. These are working well but the red sentence underneath is not adding margin like it should and it seems the block element is starting in line with the 1st floated div when it shouldn't as the width is too large. I'm unable to use clear as that would place the red sentence below the left hand menu which is floated.Any idea what I could do here? The only solution I see is to wrap the four boxes within a div and add a height larger then all boxes, but there must be a straight forward method. Cheers I have a 3 column layout. Each column may contain one or two articles with a border at the bottom of each article. The There are two borders between the three columns. I'm trying to use floated divs as containers for each of the columns, with a left-hand border in the center and right columns. You can see a non-css example at: http://www.sananselmopreschool.org/pilot/ Well, no matter what I do, I haven't been able to get the column containers to extend to the bottom of the page in IE. If I set them to height:100%, they seem to shoot out to 150% or so. body { height:100%; padding:0; margin:0; background-color:#ECF6DD; font-family: Tahoma; font-size: 11px; color: #707070; text-align:center; border: 1px solid purple; } .body_container { position: relative; height:100%; width:100%; left: 0px; border: 1px groove darkred; } .body_position_center { height:100%; position:relative; width:780px; margin-right: auto; margin-left: auto; border-collapse:collapse; border: 1px solid #999 ; } .header { padding:0; margin:0; position:relative; width:766px; height:195px; } .leftblock { position: relative; height:100%; border-left:3px dotted #228B22; float:left; width:250px; } .centerblock { position: relative; height:100%; border-left:3px dotted #228B22; float:left; width:250px; } .rightblock { position: relative; height:100%; border-left:3px dotted #228B22; float:left; width:250px; } .blockcontents { padding-top:14px; padding-bottom:14px; border-bottom : 3px dotted #228B22; text-align:left; } Any suggestions would be appreciated. I haven't used much javascript, so unless I can see an example, it might be tough to work out a javascript solution. The problem is that I have a wrapper div that will contain two "boxes", one that has a white background one that has a black background. I want the white background box to be to the left of the black background box, but inside the wrapper div which has a red background. It works just fine in IE (which surprised me) but Firefox is doing something really strange. The black background box starts all the way to the left of the wrapper with the white background box on top of it. Not only that, but the text for the black background box starts below the white background box. I'm new to inserting code, but I'll give it a try: 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>linking to style sheets 2</title>
<style type="text/css">
body {
background-color: #ccccff;
}
h1 {
font: bold 20px arial, tahoma, verdana;
color: #6633ff;
border-bottom: 1px solid #444444;
margin: 25px 0;
padding: 5px;
}
p {
font: 15px verdana;
line-height: 1.5em;
color: #000077;
margin: 0;
padding: 0;
}
.leftbox {
width: 300px;
background-color: #ffffff;
padding: 10px;
margin: 10px 10px;
float: left;
}
.rightbox {
width: 300px;
padding: 10px;
margin: 10px 10px;
background-color: #000000;
}
.wrapper {
width: 800px;
background-color: #ff0000;
}
.end {
clear: both;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="leftbox">
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Cras pede sem, lobortis tempus, sodales sed, vehicula vitae,
lorem. Fusce nec massa id erat lobortis semper. Vestibulum
dignissim orci et orci. Fusce quis tortor eu sapien gravida
pretium. Sed vel lacus. Aliquam erat volutpat. Pellentesque
suscipit imperdiet nibh. Vivamus ut turpis. In leo. Quisque
augue. </p>
</div>
<div class="rightbox">
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Cras pede sem, lobortis tempus, sodales sed, vehicula vitae,
lorem. Fusce nec massa id erat lobortis semper. Vestibulum
dignissim orci et orci. Fusce quis tortor eu sapien gravida
pretium. Sed vel lacus. Aliquam erat volutpat. Pellentesque
suscipit imperdiet nibh. Vivamus ut turpis. In leo. Quisque
augue. </p>
</div>
<div class="end"></div>
</div>
</body>
</html>
You'll see that I've floated the white background div, but again, this is making that div sit on top of the black background div. Can anybody help? P.S. I know this isn't really pleasing to the eye, but it's just for demonstration purposes Hi, I'm trying to redesign my website to be CSS and XHTML compliant. While I've managed it and everything is almost perfect, IE has one very minor glitch. The page is http://hiveworldterra.ibboard.co.uk/HWTv2.html My 3-col design is based on (and modified from) a 3 col layout I found on the net (there is a credit in the CSS of the page).IE displays everything perfectly and even resizes horizontally without a problem, but as soon as you try to resize vertically, the left column will often overlay the center column. Refreshing the page without resizing the window fixes it and resizing the page horizontally fixes it. As per usual, Firefox is perfectly fine, no matter how you resize the page (until you get down to rediculously small, at which point its to be expected!) It doesn't seem to be a width issue, as I've got a 1280x1024 monitor at work and at full width on one monitor or down at 500px wide there are only a handful of vertical sizes where the left column doesn't overlap, but every time it does overlap then if you resize horizontally by a single pixel then it fixes itself. Anyone have any ideas or IE only hacks (preferably neat ones!) to stop this minorly annoying behaviour? From problems I had while modifying the original layout, it almost seems as if IE is losing the float on the left column. Thanks I've been unable to replicate this issue in IE, but it's plaguing all other "free" browsers I use (Firefox, Galeon, etc.). Take a look at http://www.skudd.com/blog/view/1370 for example. The bar on the left is floated left, as are the label elements in my comment form. In the li of each form item, I have a br with the clear property set to "left". What I'm trying to accomplish is I want to clear the previous label, so as to prevent the "stair step" effect. Why would "clear: left;" in this case cause the element to clear everything that has been floated left? What should I try in place of it? This is my code essentially: <div id="bottom"> <div style="float:left">store hours</div> <img src="map"> <div style="float:right">contact info</div> </div> It looks fine in Safari but it messed up in Firefox. I fixed it a bit by adding overflow:auto to the parent item (bottom div), so it actually has the red background and doesn't collapse. I haven't yet uploaded that fix yet as the problem still isn't solved. Now the div is expanding too much because the 3 items aren't being displayed inline. In firefox the image is pushing the first div beneath it. Any solutions please? In Firefox, I've got a right div that is not repsonding to an auto width in FF. I am not a pro a CSS (yet ) and I hope that someone can give me the one line solution that I am missing. I've included a screen shot of the problem, any help is greatly appreciated. - K CSS Code Code:
#MainContainer
{
float: left;
width: auto;
}
#Main
{
margin-right: 0.2em;
}
#MainContent
{
padding: 0.5em 0.5em 0.5em 0.5em;
}
#SidebarContainer
{
float: right;
width: 250px;
border-top: 1px solid #C0C0C0;
padding-top: 5px;
clear: right;
}
#Sidebar
{
padding-bottom: 5px;
background: #ADADAD;
background-image: url(../images/SidebarBackground.jpg);
background-repeat: no-repeat;
clear:left;
}
#SidebarContent
{
margin: 0.2em 0.2em 0.2em 0.2em;
}
imagine this set up, div floated left, div floated right, div in between. the middle div has text that wraps and expands the page to the required height. however in firefox, because it expands to the width of the entire page before wrapping, the middle div drops below the two floated divs. i cant fix it's width as it needs to expand to fill the middle width depending on the size of the browser (the left/rigtht floats have fixed width) if i put one or both of the floated divs within the middle div the text then wraps around the floats and doesnt remain in a column, setting each floats height to 100% is unsatisfactory, adding a further text container div only reproduces the original problem. so it's a 3 column problem, but also it isnt. going to have a sandwich and try to attack it again, looking for fresh ideas. ultimatley i might have to go back and use a big table. ouch! edit: just to clarify, the left and right floats are fixed width and height, the middle div can change width to accomodate the browser width, and height to accomodate the text. **** EDIT PROBLEM FIXED Hey guys I'm turning a psd I got from a designer into an html template, but I'm having a little trouble with ie7. It's giving me a ton of space on the right side. I also have a body background set to center and with the space on the right, it's not lining up right. I've spent way too much time trying to figure out what it is, any help would be awesome. http://www.bryanlbuchanan.com/sierra/ css: http://www.bryanlbuchanan.com/sierra/includes/style.css **** EDIT Problem fixed. I had a div nested inside another div that had a defined width. I thought div's inherited the width of it's parent when there was no width defined, but apparently ie7 was rendering the nested div 100% of the screen width while it was offset to the right by about 600px by it's parent. I defined the nested div's width and it all seems to be working fine now. Hi, I'm trying to set a box to be offset over a table that contains a jpg. My code is: Code:
.holder {
position: relative;
}
.offset {
position: absolute;
top: 60px;
left: 50px;
height: 140px;
width: 203px;
padding: 8px;
background-color: #FE9900;
color: #003366;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 9px;
}
<div class="holder">
<table align="center" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td><img src="images/homepage_flyerdeals_pic.jpg" alt="" width="71" height="71" border="0"></td>
<td><img src="images/homepage_flyerdeals_header.gif" alt="" width="127" height="31" border="0"></td>
</tr>
</table>
<div class="offset">
text here </div>
</div>
My problem is, the offset box is too high and wide in Netscape. It looks fine and lines up perfectly in IE. How can I get it to look the same in Netscape?? I have a div like this: Code: <div class="image_box"> <img src=""> </div> I have a border and background-color going on w/the div, but I want it to only be as wide as the image. It is stretching as wide as the screen. How do I force it shrink down and only be as big as the image that is inside of it? This should be simple, I just don't know how to do it. Thanks. Hi, how do i set a table to be table 100% wide 100 % high using css? i am using the new dreamweaver that includes this in the header: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> the 100% height and 100% width html values dont' work, i have tried css to get the table 100% but can't can anyone help? Paul Probably there already was such question, but my Internet connection is very slow and I don't have time to search thru topics. So, when I put an image into centercolumn that has big width my right column stays where it was, but center column with the picture goes to the right widely, and right column stays over the picture. But I want right column always follow center column (stays on the right of centercolumn whatever size it is). How to fix it in css? here is my code: BODY { PADDING-RIGHT:0; PADDING-LEFT:0; BACKGROUND:url(img_86.gif) #ddd; PADDING-BOTTOM:0; MARGIN:0; PADDING-TOP:0; FONT-SIZE:12px; LINE-HEIGHT:18px; FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif; } .registered { BACKGROUND-COLOR:#ff9; } #centercolumn { BORDER-RIGHT:#666 0 solid; PADDING-RIGHT:4px; BORDER-TOP:#666 0 solid; PADDING-LEFT:4px; PADDING-BOTTOM:10px; MARGIN-LEFT:179px; BORDER-LEFT:#666 0 solid; MARGIN-RIGHT:179px; PADDING-TOP:10px; BORDER-BOTTOM:#666 0 solid; } #header { PADDING-RIGHT:8px; BORDER-TOP:#182746 2px solid; PADDING-LEFT:8px; BACKGROUND:url(img_87.gif) #314e8c; PADDING-BOTTOM:8px; PADDING-TOP:8px; BORDER-BOTTOM:#182746 2px solid; } #leftcolumn { MARGIN-TOP:4px; LEFT:0; WIDTH:180px; POSITION:absolute; FONT-SIZE:11px; LINE-HEIGHT:16px; } #rightcolumn { MARGIN-TOP:4px; RIGHT:0; WIDTH:180px; POSITION:absolute; FONT-SIZE:11px; LINE-HEIGHT:16px; } #footer { CLEAR:both; MARGIN-BOTTOM:12px; } .block { BORDER-RIGHT:#999 1px solid; PADDING-RIGHT:4px; BORDER-TOP:#999 1px solid; PADDING-LEFT:4px; BACKGROUND:#fff; PADDING-BOTTOM:4px; MARGIN:6px 6px 12px; BORDER-LEFT:#999 1px solid; PADDING-TOP:4px; BORDER-BOTTOM:#999 1px solid; } .block H3 { PADDING-RIGHT:4px; PADDING-LEFT:4px; FONT-SIZE:11px; BACKGROUND:#a7b6c9; PADDING-BOTTOM:4px; MARGIN:-4px -4px 4px; COLOR:#26344c; PADDING-TOP:4px; BORDER-BOTTOM:#999 1px solid; } .block P { MARGIN:0; } .content { BORDER-RIGHT:#999 1px solid; PADDING-RIGHT:4px; BORDER-TOP:#999 1px solid; PADDING-LEFT:4px; BACKGROUND:#fff; PADDING-BOTTOM:4px; BORDER-LEFT:#999 1px solid; PADDING-TOP:4px; BORDER-BOTTOM:#999 1px solid; } .entrycontent { BORDER-RIGHT:#999 1px solid; PADDING-RIGHT:12px; BORDER-TOP:#999 1px solid; PADDING-LEFT:12px; BACKGROUND:#fff; PADDING-BOTTOM:12px; BORDER-LEFT:#999 1px solid; PADDING-TOP:12px; BORDER-BOTTOM:#999 1px solid; } .content P { MARGIN:4px 2px; } H1 { DISPLAY:inline; FONT-SIZE:16px; MARGIN:4px; COLOR:#fff; } H2 { PADDING-RIGHT:2px; PADDING-LEFT:2px; FONT-SIZE:13px; PADDING-BOTTOM:2px; MARGIN:0; COLOR:#26344c; PADDING-TOP:2px; BORDER-BOTTOM:#999 1px dashed; } H3 { FONT-SIZE:13px; } .entryfooter { CLEAR:both; PADDING-RIGHT:0; PADDING-LEFT:0; FONT-WEIGHT:normal; FONT-SIZE:11px; PADDING-BOTTOM:6px; MARGIN:0; COLOR:#666; LINE-HEIGHT:16px; PADDING-TOP:6px; FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif; TEXT-ALIGN:right; } .entryfooter_linkdump { PADDING-RIGHT:0; PADDING-LEFT:0; FONT-WEIGHT:normal; FONT-SIZE:10px; PADDING-BOTTOM:6px; MARGIN:0; COLOR:#666; LINE-HEIGHT:16px; PADDING-TOP:6px; BORDER-BOTTOM:#666 1px dashed; FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif; TEXT-ALIGN:right; } A { COLOR:#253a69; } .prevnext_links { FLOAT:right; COLOR:#fff; } .searchbox { FONT-SIZE:10px; WIDTH:10em; } .searchbutton { BORDER-RIGHT:#000 1px solid; BORDER-TOP:#000 1px solid; FONT-SIZE:10px; BORDER-LEFT:#000 1px solid; BORDER-BOTTOM:#000 1px solid; } IMG.badge { BORDER-TOP-WIDTH:0; BORDER-LEFT-WIDTH:0; BORDER-BOTTOM-WIDTH:0; MARGIN-BOTTOM:2px; BORDER-RIGHT-WIDTH:0; } A IMG.badge:hover { MARGIN-BOTTOM:1px; BORDER-BOTTOM:#314e8c 1px solid; } P,HTML,TABLE,TD { FONT-SIZE:12px; LINE-HEIGHT:18px; FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif; } #leftcolumn P,#rightcolumn P { FONT-SIZE:11px; LINE-HEIGHT:16px; } H4,.subtitle { DISPLAY:inline; FONT-SIZE:14px; MARGIN:4px; COLOR:#fff; FONT-STYLE:italic; } .date_linkdump,.date { FONT-WEIGHT:normal; FONT-SIZE:10px; FLOAT:right; COLOR:#666; LINE-HEIGHT:16px; FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif; } .entryfooter A,.date A,.entryfooter_linkdump A,.date_linkdump A { FONT-WEIGHT:bold; COLOR:#5c6b8e; TEXT-DECORATION:none; } .date A:hover,.entryfooter A:hover { FONT-WEIGHT:bold; COLOR:#5c6b8e; TEXT-DECORATION:underline; } H1 A,.prevnext_links A { FONT-WEIGHT:bold; COLOR:#fff; TEXT-DECORATION:none; } and here's screenshot Hello, I'm afraid I'm back with more problems I have a 3 column layout. the Left column is floated left, right floated left and the middle column uses left and right margins. I then had cause to set a width on the middle column to give something with Layout for IE. When I add the width to the middle column, it looks fine in firefox but for some reason in IE, my middle div drops underneath the two floated divs, as if it is too wide. I have tried debuging by using background colours on the Divs and the width of the coloured area is the same in both browsers. It is as if there is something leaking out the sides. Even on this most basic example. Am I missing something basic? Code: <div id="wrapper" style="width:996px; background-color:#666666; margin-left:auto; margin-right:auto;"> <div id="lbar" style="float:left; width:170px; padding-left:10px; background-color:#FF0000; "> <p>left</p> </div> <div id="rbar" style="float:right; width:305px; background-color:#0033FF;"> <p>right</p> </div> <div id="middle" style="margin-left:190px; width:491px; margin-right:315px; background-color:#99CCCC;"> <p>middle</p> </div> </div> Thank you for any time taken in reading this JJ Hi guys, I've got both long and wide table to be showed and printed. Customer would like that for scrolling, some left columns will freeze on the left (when printed, will be printed on every page), same for table header (fixed when scrolling, repeated on top of every page when printing). For fixed table headers, there are lots of tutorials, like: http://www.cssplay.co.uk/menu/tablescroll.html And for printing, good browsers can repeat thead on every page (don't know how to achieve this for IE). But for columns locking (repeating for print), I'm totally stuck. Yes, some stuff can be found for scrolling, like: http://web.tampabay.rr.com/bmerkey/...column-csv.html But these solutions usually use JavaScript or are not cross-browser. Is there any way how to do this? Primarily for IE 6.0/7.0 Help! I am trying to build my site in CSS. Here is the CSS for my top layer, despite the size being specified to 130px and an image inside it being 130px high, it is still 5px too high... any ideas? Code: #page_top_sizing {
background-color: red;
width: 764px;
height: 130px;
position: absolute;
top: 5px;
left: 5px;
z-index:1;
padding:0;
}
Thanks. This is the line in my index.html: PHP Code: <PRE class=yup>blah blah blah and more blah blah blahblah more blah blah blah yes yes blah blah</PRE> This is my PRE code in style.css: PHP Code: PRE { BORDER-RIGHT: #2f6fab 1px dashed; PADDING-RIGHT: 1em; BORDER-TOP: #2f6fab 1px dashed; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; BORDER-LEFT: #2f6fab 1px dashed; COLOR: #000000; LINE-HEIGHT: 1.1em; PADDING-TOP: 1em; BORDER-BOTTOM: #2f6fab 1px dashed; BACKGROUND-COLOR: #f9f9f9; width: 90%; } PRE.yup { COLOR: #000000; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px; text-align: left; width: 80%; margin: 12px auto; } The PRE tag is in a table and i want the long text the same lenght as the short text, but i have no clue how to do it. Any ideas? |
|||||||