|
CSS - Ie Messes Up My Column Width
Hi guys,
This is another standard "why won't it work in IE"-post. I'm making a multi-column news-style site (<spam>first link in my signature</spam>), and IE screws up the widths. The layout is basically three .col's which are floated left, and a #menu on the right. Here's the relevant css: Code:
#menu
{
float: left;
margin-left: 0%;
width: 20%;
line-height: 120%;
padding: 2%;
font-size: larger;
}
.col
{
float: left;
width: 24%;
font-size: 0.8em;
}
.col ul{
list-style-type: none;
padding-left: 0;
}
.col .story{
background: #F5F8ED;
padding: 0 ;
margin: 1%;
border: 1px solid #71804D;
color: #333;
text-align: justify;
}
Here's some example html: Code:
<div class="col">
<ul>
<li class="story">
<p class="story_title"> story title </p>
<div class="story_body">
<p>blah blah</p>
</div>
<div class="sub">
<p>stuff</p>
</div>
</li>
</ul>
</div>
<div class="col">
<ul>
<li class="story">
<p class="story_title"> story title </p>
<div class="story_body">
<p>blah blah</p>
</div>
<div class="sub">
<p>stuff</p>
</div>
</li>
</ul>
</div>
<div class="col">
<ul>
<li class="story">
<p class="story_title"> story title </p>
<div class="story_body">
<p>blah blah</p>
</div>
<div class="sub">
<p>stuff</p>
</div>
</li>
</ul>
</div>
<div id="menu">
<div id="menu_title">
<h1> title </h1>
</div>
<ul id="navbox">
<li> ... </li>
</ul>
... etc
</div>
The problem is that IE renders the .col's very narrowly, and has some major space vertically between them. This means that #menu gets pushed down below the .col's. Can anyone point me in the right direction to fix this width issue? Thanks, Simon Similar TutorialsHi I am trying to make a table to display some stuff within a fix sized window. I want to have 5 columns of fixed width and one column that spans the rest of the remaining space. The Idea is to allow the widths of the first 5 columns to be changed by a script and having the last one adapting as needed... html Code: Original - html Code <div class="container"><table cellspacing="0"> <colgroup> <col width="40" /> <col width="220" /> <col width="120" /> <col width="65" /> <col width="40" /> </colgroup> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th style="width: 100%;></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td style="width: 100%;></td> </tr> </tbody> </table></div> <div class="container"><table cellspacing="0"> <colgroup> <col width="40" /> <col width="220" /> <col width="120" /> <col width="65" /> <col width="40" /> </colgroup> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th style="width: 100%;></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td style="width: 100%;></td> </tr> </tbody> </table></div> css Code: Original - css Code div.container { height: 400px; width: 800px; overflow: scroll; } table { width: 100%; } td { border-style: solid; border-color: silver; border-width: 0px; padding: 1px 3px; } th { border-style: outset; border-color: silver; border-width: 2px; background: silver; padding: 1px 3px; }
It really does fill the entire space but the last column crushes all the other into their minimal width resulting in linebreaks between words inside the cells... Please help me Hey, So I have a three column layout being implemented as such: html: Code:
<div class="content">
<div class="col1 column"></div>
<div class="col3 column"></div>
<div class="col2 column">
<div class="header">Header</div>
</div>
</div>
CSS: Code:
.column {
padding: 10px;
position:relative;
}
.header {
background:#cfe6f5;
color:#416383;
font-size:11px;
font-family:Arial;
font-weight:300;
padding-left:15px;
}
.col1 {
float: left;
width:250px;
}
.col2 {
margin-left: auto;
margin-right: auto;
}
.col3 {
float:right;
width:250px;
}
The problem is that the width of the header div extends all the way to the left and right of the page when it's in the middle column, but behaves the way I want it to (extends to the left and right of the column) when it's in the left or right column. Any ideas? Thanks. --Surgery Hello, I am having difficulty with the center column on the following page: http://cbo4edu.org/index2.html I want to widen the center column so that the CBO NEWS heading touches the blue line which divides the center and right column. When I try to add width to the style sheet the left column moves out of alignment. Any help is much appreciated, thanks! Hello, (please also see attached/uploaded style sheet) I'm puzzled why (in the following code) the TEST #2 table renders as required (i.e. 2 rows in 1 column, all with the same cell WIDTH) but the table in TEST #1 seems to render the table cells (i.e. 2 columns in 1 row) without a common cell WIDTH. How can I get all the cells (there are plenty more!) in table TEST #1 to all be exactly the same width (preferably 85px)? Code: <link rel="stylesheet" type="text/css" href="http://thinet/cgi-bin/thinetStyleSheet.css"> TEST #1 <table class="menu" border=1 CELLPADDING=2> <tr> <td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td> <td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td> </tr> </table> <P> TEST #2 <table class="menu" border=1 CELLPADDING=2> <tr><td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td></tr> <tr><td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td></tr> </table> I don't think I've quite grasped the idea of CSS yet?!?! Any help/pointers would be appreciated. Thanks, Andy I've been designing a template for my phpBB install to make it integrate with my site better, and what I have so far I like, but I noticed one small problem. I'm not sure if it's a bug in mozilla or what the cause is, but at random times my Author details column will take up 100% of the screen with, when it's defined via css to only take up 12%. A simple reload is all that is required to fix it, but it can be quite annoying when it happens. The problem only seems to happen on the post view, which is available he http://kicken.mine.nu:8008/forums/viewtopic.php?t=4 It seems I have more luck getting it to happen if I start clicking around between the Home page and the post view, or from the index to a post view. I havn't had access to any browser other than mozilla to check things in either, so I'm not sure what results will show in other browsers. Hello all, I am implementing a 2 column fixed width template. The problem is that the smaller column does not stretch to match the height of the taller column. All of the online templates I have found remedy this problem by setting a 1 px high background image to span the width of the container div. My problem is that I would like to place an image at the top and bottom of the smaller column. How can I achieve this? Currently I have 2 fixed columns and a fluid center column. When I resize the window horizontally I want the columns to stay fixed until the center column will begin to overlap the side columns, at which point I'd like the side columns to begin fluidly squashing to accommodate. Is it possible to do this? Only thing I know of is max-width, but I'm not sure if that's correct as I've never used it before. Any help would be VERY appreciated guys, as I need to know this quite soon. -Luke I've been working on a CSS style for a web site, and I've got a small issue with the right hand column not staying within the bounds of the screen. When using a tool to see where the div's borders the right is about 200 px going off the right of the screen, making the screen horizontally scrolling. I am not a CSS expert. I know enough to get around, but this I don't understand. (I might have posted too much, but I figured if someone needed something more, it's already all there.) Thanks for any assistance that can be provided. HTML 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=iso-8859-1">
<title>Experience Inc. - Warren and Forest Counties Office of Aging</title>
<link href="css/grey_style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<span style="float:left;">
<img src="images/logo.gif" />
</span>
<span style="float:right;">
<div style="text-align:center">
<div id="outerFirst"><a href="index.php"><span>Home</span></a></div>
<div id="outerFirst"><a href="index.php"><span>Services</span></a></div>
<div id="outerFirst"><a href="index.php"><span>Senior Centers</span></a></div>
<div id="outerFirst"><a href="index.php"><span>Calendar / Menu</span></a></div>
<div id="outerFirst"><a href="index.php"><span>Trips / Events</span></a></div>
<div id="outerFirst"><a href="index.php"><span>About / Contact</span></a></div>
</div>
</span>
</div>
<div class="CellBackGround">
<table width="100%">
<tr>
<td> </td>
</tr>
</table>
</div>
<div id="pictureContainer">
<div id="largeHomeText">
Warren and Forest Counties Area Agency on Aging
</div>
<div class="together">
<img src="images/home_image_bar/image1.jpg" />
<img src="images/home_image_bar/image2.jpg" />
<img src="images/home_image_bar/image1.jpg" />
</div>
</div>
<div class="CellBackGround">
</div>
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="navigation">
<p>
</p>
</div>
<div id="extra">
</div>
<div id="footer">
<p>This is the footer area. </p>
</div>
</body>
</html>
CSS Code:
body {
font-family: "Times New Roman", Times, serif;
font-size: 12pt;
font-style: normal;
font-weight: normal;
color:#FFFFFF;
background-color:#666666;
margin-left:0;
margin-top:0;
margin-right:0;
}
#header {
width: 100%;
background-color: #666666;
overflow:auto;
vertical-align:top;
height:auto;
}
#menu {
height: 54px;
margin: 3em 0;
padding:0 1em;
border-bottom: 0px solid black;
overflow:inherit;
}
#outerFirst {
float: left;
width: 90px;
height: 130px;
margin: 0 0px 0 0;
background: url( '../images/greyFirst.gif' ) 0 -50px no-repeat;
}
#outerFirst a {
cursor: pointer;
display: block;
margin: 0; padding:0;
width:90px;
height:54px;
overflow:hidden;
font-family: Arial;
font-size:0.7em;
font-weight:normal;
color:#FFFFFF;
text-decoration: none;
background: url( '../images/greyFirst.gif' ) top left no-repeat;
}
#outerFirst span {
height: 54px;
display: block;
margin:0;
padding: 25px 0px 0px 0px;
}
#outerFirst a:hover {
width:90px;
height:54px;
background: url( '../images/greyFirstRoll.gif' ) top left no-repeat;
color: yellow;
}
#outerFirst a:active {
background: url( '../images/greyFirstRoll.gif' ) top left no-repeat;
}
.CellBackGround {
height:2px;
background: url('../images/redPixel.gif') center center;
}
.CellBack2 {
background: url('../images/redPixel.gif') center center;
}
#pictureContainer {
width:100%;
background-color:#666666;
overflow:auto;
height:95px;
}
#largeHomeText {
color:#999999;
font-size:13pt;
float:left;
padding-top:74px;
padding-left:3px;
}
.together img {
padding: 0;
margin: 0;
border: 0;
display: inline;
float: right;
overflow:hidden;
}
#mainTextContaner {
color:#660000;
margin-left:-5px;
}
#footer {
color:#666666;
}
/* This code is straight from http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml */
.bl {background: url(../images/bl.gif) 0 100% no-repeat #FFFFFF; width: 45%;}
.br {background: url(../images/br.gif) 100% 100% no-repeat}
.tl {background: url(../images/tl.gif) 0 0 no-repeat}
.tr {background: url(../images/tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}
/* This code is straight from http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml */
.bl2 {background: url(../images/bl.gif) 0 100% no-repeat #FFFFFF; width: 35%;}
.br2 {background: url(../images/br.gif) 100% 100% no-repeat}
.tl2 {background: url(../images/tl.gif) 0 0 no-repeat}
.tr2 {background: url(../images/tr.gif) 100% 0 no-repeat; padding:10px}
a:link {
font-size: 14pt;
color:#999999;
}
a:hover {
font-size: 14pt;
color:#660000;
}
a:visited {
font-size: 14pt;
color:#999999;
}
#news {
background: url(../images/news.jpg) 100% 0 no-repeat;
width:370px;
height:600;
}
div#wrapper{
float:right;
margin-right:-30%;
width:99%;
}
div#content{
margin-right:30%;
border-left:2px solid #FFFFFF;
border-left-color:#660000;
padding-left:10px;
padding-right:10px;
height:400px;
padding-top:10px;
}
div#navigation{
float:left;
width:32.9%;
padding-top:10px;
}
div#extra{
float:left;
clear:left;
width:32.9%;
padding-top:10px;
}
p{
margin:0 10px 10px
}
div#footer{
clear:both;
border-top:2px solid;
border-top-color:#660000;
border-bottom:2px solid;
border-bottom-color:#660000;
text-align:left;
color:#FFFFFF;
}
div#footer p{
margin:0;
padding:5px 10px;
width:10%;
}
Hi everyone! i have this mockup in fireworks for my personal site.. problem is... i cant put it together the way i like it using CSS here is my mockup and the slices ive made... http://www[dot]phpugph[dot]com/talk/index.php?action=dlattach;topic=8005.0;attach=1720;image im sorry for the link... i cant seem to post a proper one do u guys know how i should go about it? the middle column should be fixed width but the right and left column should be fluid thanx I need a combination of this: http://bonrouge.com/3c-hf-fixed.php and this: http://bonrouge.com/3c-hf-fluid.php I need the middle column to be a fixed width and the outer two to be fluid. I also need to maintain the 100% with header and footer at top and bottom respectively. Any ideas how to do this? Thanks. Hi, I have a multi-column layout where I want every column to always be the same height. Any one of the columns may be the longest on any given page, so the other columns have to automatically adjust to match that height. Usually I'd just use the faux column technique where you repeat a background image, but that won't work because of two elements on this page: 1. each column has a border all the way around it. 2. one column resizes with the page. I've read the articles on liquid layouts with faux columns, but as far as I can tell those techniques won't work if your columns have borders. Does anyone know any technique that would work here? Thanks. Alrighty, I'm trying to produce a layout similar to that of what is shown in the attached image. Please ignore the image being the rainbox colors, but I had to differentiate sections. I can get the banner/search line to appear properly, but the rest will not. Left menu gets positioned fine, the content does as well (more or less), but the right column is displaced, and shifted down to the very bottom of the window -- far right, though. I can't explain much better than that, so without further ado: CSS: Code: .columns-float{
float : left;
width : 80%;
}
.column-one
{
width : 75%; /* NOTE: This needs to be dynamic! THIS is what I'm
inquiring about. The above problem assumes this attribute
is set to "auto". */
float : right;
}
.column-two
{
width : 25%;
float : left;
}
.column-three{
width : 20%;
float : right;
}
.box-footer{
clear : both;
}
.column-one-content{
margin-left: 1px;
margin-right: 1px;
}
/*Hack below:*/
.box-wrap, .columns-float, .column-one, .column-two, .column-three, h2{
p\osition: relative;
}
(Above was borrowed from here, albeit with modifications.) HTML: Code: ... <div class="columns-float"> <div class="column-one"> <div class="column-one-content"> <h2>column 1</h2> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p><a href="#" title="fake link for testing">test link</a></p> </div> </div> <div class="column-two"> <div class="column-two-content"> <h2>column 2</h2> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p><a href="#" title="fake link for testing">test link</a></p> </div> </div> <div class="box-clear"> </div><!-- # needed to make sure column 3 is cleared || but IE5(PC) and OmniWeb don't like it --> </div><!-- close boxbody --> <div class="column-three"> <div class="column-three-content"> <h2>column 3</h2> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p><a href="#" title="fake link for testing">test link</a></p> </div> </div> <div class="box-clear"> </div><!-- # needed to make sure column 3 is cleared || but IE5(PC) and OmniWeb don't like it --> <div class="box-footer">Footer </div> Do not link me to Position Is Everything. Been there already, and it wasn't helpful; the used terminology was too abstruse for me. Any help would be appreciated, and I thank you very much for your time. This is driving me batty. Hi all, I'm trying to achieve the following: <div id="left">This column is of blue background, and stretches all the way to the left.</div> <div id="center"> THIS COLUMN IS FIXED WIDTH, 760px </div> <div id="right">This column is of red background, and stretches all the way to the right.</div> Hope that is self explanatory.. I've Googled all this but can only find solutions for fluid "center" columns with fixed width right/left columns. I'm trying to do the opposite. Could anyone let me know how I can do this? I've got some messy CSS that definitely needs to be corrected, I'm trying out different things so here's my 'trial& error' code: Code:
#left {
background-color: blue;
float: left;
margin: auto;
position: absolute;
}
#center {
background: #DFDFEB url(../images/body/top.jpg) no-repeat;
width: 760px;
margin: 0 auto;
}
#right {
background-color: red;
}
Thanks in advance! http://www.innerspect.net/blog/ can anyone confirm this? offer some fixes? Hi to all of you, I've started this new page just this morning, i have some experience with sitebuilding and css but not much. the result can be found here I spent most of my afternoon trying to fix this little error in IE (works fine in FF, opera and netscape). I've tried everything I could find, box model, floating boxes, lots of tricks and hacks but nothing seemed to work (or I implementer everything the wrong way). The problem seems quite simple, it looks like it has something to do with padding or margin for as long as text appears in the left column things in the right column are shifted a little to the right. Pleas help me out on this one, thanks in advance, kind regards, Jef Hi, Im new to totally CSS designs im more a table guy but im trying and getting a problem if you look at http://www.michaelwoodward.co.uk/clients/RSS on the shop page when you go into a department the footer moves up to the top of the main content section - why?? its not related to the height of the page so im guessing is something to do with the databse driven information that is placed in there (in a table). Can anyone help? Thanks Hello, I was wondering if someone could take a look at my website and tell me what the CSS error is and some possible work arounds or fixes. The problem is CSS is messing with links and general text/input boxes. This problem does not occur in Internet Explorer where the css isn't rendered correctly. If you take a look around the site you'll see the error in a few seconds. Not working in: Mozilla and Google Chrome url: egames.hostoi.com/test/home.html problems with positions divs and images within them ... when I have a positioned div, and I insert an image, or another div with image inside, it makes the div too high, and not sure how to get it straight. Code: ?>
<div id="cmp" style="position: absolute; left: <?=$cmp_left*$x_scale+$offx+$leftcolwidth+$xspace ?>px; top: <?=(($startrow*$y_scale)+($cmp_y)*$y_scale)-$offy ?>px; width: <?=($cmp_right-$cmp_left)*$x_scale+$leftcolwidth+$xspace ?>; height: <?=$y_scale+1 ?>; background-color: <? if( $cmp_row[ $j ] != null ) echo $cmp_row[ $j ]->type->getcolour( -1, $connect ); ?>; border: solid black 1px; z-index:<?=$i ?> " >
<div style="position: absolute; left: <?=$cmp_left*$x_scale+$offx+$leftcolwidth+$xspace ?>px; width: <?=($cmp_right-$cmp_left)*$x_scale+$leftcolwidth+$xspace-20 ?>; height: <?=$y_scale ?>;" align="left" width="20px" height="<?=$y_scale ?>px">
<? if( $cmp_row[ $j ] != null ) echo substr( rtrim( $cmp_row[ $j ]->getName() ), 0, $maxchars ); ?>
</div>
<div style="position: absolute; left: <?=$cmp_right*$x_scale+$offx+$leftcolwidth-20 ?>px; width: <?=20 ?>; height: <?=$y_scale ?>; align: right" >
<img src="images/<?=$icon ?>" alt=<?=$alt ?> border="0" <?=$mousey ?>>
</div>
</div>
<?
the code above has got a bit messy with trying to fix the problem... Cheers Adam [edit] New question, see http://forums.devshed.com/css-help-...tml#post1377956 below for details. Thanks! --------- old question ------------ Hi, I'm trying to get some checkboxes aligned in a form that i'm creating. I can get it to work perfectly in Firefox, but not in IE6. In Firefox: In IE6: I don't care so much about the height/spacing issue as much as the left/right reversal. the relevant css(i think) is here Code: #application p {text-indent: 0px;}
#application div.col1 {width: 50%; float: left;}
#application div.col2 {width: 50%; float: right;}
#application label {
float: left;
width: 70px;
text-align: right;
height: 2em; line-height: 2em;
}
#application .label_checkbox {width: 100%;}
#application .label_checkbox p{
clear: both;
float: none;
position: relative;
}
#application .label_checkbox input {
position: absolute;
top: 1px;
left: 1px;
}
#application .label_checkbox label {
display: block;
margin-left: 22px;
text-align: left;
width: 160px;
}
and relevant xhtml: Code: <div class="label_checkbox">
<div class="col1">
<p><input type="checkbox" id="ch" value="Classroom Helper" name="roles" /><label for="ch">Classroom Helpers</label></p>
<p><input type="checkbox" id="lt" value="Literacy Tutor" name="roles" /><label for="lt">Literacy Tutor</label></p>
<p><input type="checkbox" id="ta" value="Technology Assistant" name="roles" /><label for="ta">Technology Assistant</label></p>
<p><input type="checkbox" id="ce" value="Campus Enrichment" name="roles" /><label for="ce">Campus Enrichment</label></p>
<p><input type="checkbox" id="ote" value="One-Time Events" name="roles" /><label for="ote">One-Time Events</label></p>
</div>
<div class="col2">
<p><input type="checkbox" id="frn" value="Family Reading Night" name="roles" /><label for="frn">Family Reading Night</label></p>
<p><input type="checkbox" id="rad" value="Read Aloud Day" name="roles" /><label for="rad">Read Aloud Day</label></p>
<p><input type="checkbox" id="dd" value="Dictionary Day" name="roles" /><label for="dd">Dictionary Day</label></p>
<p><input type="checkbox" id="gs" value="Guest Speaker" name="roles" /><label for="gs">Guest Speaker</label></p>
<p><input type="checkbox" id="other" value="Other" name="roles" /><label for="other">Other</label></p>
</div>
</div>
you can see the page at http://oaklandheroes.org/beta/application.php. Thanks for the help! Hi all, with your great help, the pages looks now almost fine in both IE and FF. But, the photogallery looks much more better with all the photos bordered, like on this screenshot from FireFox. Unfornutely, when you check it in IE, all the images are messed around in a totally upredictable way (screenshot from IE). It was the same using vertical-align, but it's not so essential. So, is there please any solution to handle this? And is there a way how to center floating <div> within his parent <div> ("Unfortunately, there is no easy way to center floated elements." - But is there any way)? The red bordered div is floating, including all the images put in <div>, which are floating too, I'd love center the red bordered <div> inside the green bordered one. To be specific, I don't insist on the red bordered div to be floating, I just looking for a way how to center all the images inside the green bordered <div>. Here are CSS used: Fotogalerie.css, Web.css. Webdesign isn't really easy thing to learn , if all would work how it's supposed to work, it'd wonderful, but IE makes it all 3times harder , I really start to not to like him (more than before ) |
|||||||