|
CSS - Website Middle Column Breaks In Ie7 And Ie8 Compatibility Mode.
It's not letting me post links since I am a new member, so copy paste the link below. (it's an image of what looks wrong in the website)
img59.imageshack.us/i/52153657.jpg/ It loads correctly in Firefox and IE8, but the middle column breaks in ie7 and ie8 in compatibility mode. By break I mean the middle column gets shifted to the right side of the middle column and below the right column (while still in the middle column) I have also included the general layout and css below. I have tried changing doc types and a few small things but nothing has even effected the appearance. The website is in a layout like this: html4strict Code: Original - html4strict Code <div id="wrapper1"> <div id="wrapper2"> <div id="maincol"> <div id="leftcol"> </div> <div id="rightcol"> </div> <div id="centercol"> </div> </div> <div id="footer"> </div> </div> </div> <div id="wrapper1"> css Code: Original - css Code #centercol { position:relative; padding:0 200px; min-width: 520px; } #leftcol { position:relative; top:-10px; left:-10px; float:left; width:180px; margin:0 0 -10px 0; padding:10px; z-index:100; } #rightcol { position:relative; top:-10px; right:-10px; float:right; width:180px; margin:0 0 -10px 0; padding:10px; z-index:99; } #maincol { position:relative; margin:0; padding:10px; } #wrapper1 { position:relative; text-align:left; width:100%; min-width: 950px; background:#23415C url("images/side.gif") repeat-y top right; } #wrapper2 { position:relative; text-align:left; width:100%; background:url("images/side.gif") repeat-y top left; }
#centercol {
Any ideas on how to resolve this problem would be great. Similar TutorialsI do a lot of we development work for an intranet site. All users are on IE. Occasionally, I'll develop a page that looks fine in my browser (IE 8.0.6001) but not in others (8.0.7600). I have to set mine to compatibility mode to see what others see. I thought the compatibility mode was meant to display a web page the way it would in an older browser. Is it possible that I have something installed on my machine that makes my browser render pages differently? I know this is vague, but I am just wondering if anyone has ideas on where to look. 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 Ive tried to put stuff to the left of the news room in the blank spot and cannot seem to do so.. here is css: Code:
#header {
position: relative;
margin: 0 auto;
background: transparent url(img/bg/header-v2.gif) no-repeat bottom left;
height: 235px;
width: 760px;
text-align: left;
z-index: 10;
}
'#content {
position: relative;
background-color: #FFFFFF;
height:inherit;
width: 760px;
margin: 0 auto 0 auto;
text-align: left;
border: 1px double rgb(72,183,239);
overflow: hidden;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#leftpanel{
position: inherit;
float: left;
background-color: #f5f5f5;
height: inherit;
width: 170px;
margin-left: 3px;
}
#leftpanel-head{
width: 158px;
height: 26px;
background-image: url(img/bg/leftpanel-head.png);
padding-left: 12px;
color: #FFFFFF;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-top: 4px;
}
#content-right {
width: 585px;
height: inherit;
float: right;
}
#newsroom {
float: right;
width: 300px;
height: 30px;
margin-left: 2px;
}
#newsroom-header {
width: 300px;
height: inherit;
background-image:url(img/bg/video-player-head.png);
color: #FFFFFF;
font-weight: bold;
padding-left: 3px;
padding-top: 4px;
}
#welcome{
float: left;
height: 27px;
width: 279px;
color: #FFFFFF;
font-weight: bold;
padding-left: 3px;
padding-top: 4px;
}
#welcome-text {
float: left;
height: 27px;
width: 279px;
color: #FFFFFF;
font-weight: bold;
padding-left: 3px;
padding-top: 4px;
}
#primary-nav {
position: absolute;
background: transparent url(img/bg/primary-nav-v2.gif) no-repeat;
list-style: none;
width: 760px;
height: 26px;
top: 203px;
left: 1px;
z-index: 10;
padding-left: 5px;
}
#primary-nav li {
float: left;
background-position: 0 -26px;
}
#primary-nav li ul {
position: absolute;
background: transparent url(img/primary-nav-top.png) no-repeat;
list-style: none;
width: 159px;
left: -9999px;
margin-left: -9px;
padding-top: 5px;
}
#primary-nav a {
display: block;
height: 0px !important;
text-decoration: none;
overflow: hidden;
}
#primary-nav li a {
background-position: 0 0;
}
#primary-nav li#nav-1 {
background: transparent url(img/bg/nav-1.png) no-repeat;
margin-right: 1px;
}
#primary-nav li#nav-2 {
background: transparent url(img/bg/nav-2-shopping.png) no-repeat;
margin-right: 1px;
}
#primary-nav li#nav-3 {
background: transparent url(img/bg/nav-3-restaurants.png) no-repeat;
margin-right: 1px;
}
#primary-nav li#nav-4 {
background: transparent url(img/bg/nav-4-hotels.png) no-repeat;
}
#primary-nav li#nav-5 {
background: transparent url(img/bg/nav-5-history.png) no-repeat;
}
#primary-nav li#nav-6 {
background: transparent url(img/bg/nav-6-links.png) no-repeat;
}
#primary-nav li#nav-7 {
background: transparent url(img/bg/nav-7-about.png) no-repeat;
}
#primary-nav li#nav-1:hover,
#primary-nav li#nav-1.sfhover,
#primary-nav li#nav-2:hover,
#primary-nav li#nav-2.sfhover,
#primary-nav li#nav-3.hover,
#primary-nav li#nav-3.sfhover,
#primary-nav li#nav-4:hover,
#primary-nav li#nav-4.sfhover,
#primary-nav li#nav-5:hover,
#primary-nav li#nav-5.sfhover,
#primary-nav li#nav-6:hover,
#primary-nav li#nav-6.sfhover,
#primary-nav li#nav-7:hover,
#primary-nav li#nav-7.sfhover{
background-position: 0 -26px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#primary-nav li#nav-1 a,
#primary-nav li#nav-2 a,
#primary-nav li#nav-3 a,
#primary-nav li#nav-4 a,
#primary-nav li#nav-5 a,
#primary-nav li#nav-6 a,
#primary-nav li#nav-7 a {
width: 107px;
height /**/: 26px;
padding: 26px 0 0 0;
}
#primary-nav li#nav-1 ul li,
#primary-nav li#nav-2 ul li,
#primary-nav li#nav-3 ul li,
#primary-nav li#nav-4 ul li,
#primary-nav li#nav-5 ul li,
#primary-nav li#nav-6 ul li,
#primary-nav li#nav-7 ul li{
background: transparent url(img/bg/primary-nav-link-up.png) no-repeat;
height: 21px;
}
#primary-nav li#nav-1 ul li.bottom,
#primary-nav li#nav-2 ul li.bottom,
#primary-nav li#nav-3 ul li.bottom,
#primary-nav li#nav-4 ul li.bottom,
#primary-nav li#nav-5 ul li.bottom,
#primary-nav li#nav-6 ul li.bottom,
#primary-nav li#nav-7 ul li.bottom{
background: transparent url(img/bg/primary-nav-bottom.png) no-repeat;
height: 14px;
width: 159px;
}
#primary-nav li#nav-1 ul li a,
#primary-nav li#nav-2 ul li a,
#primary-nav li#nav-3 ul li a,
#primary-nav li#nav-4 ul li a,
#primary-nav li#nav-5 ul li a,
#primary-nav li#nav-6 ul li a,
#primary-nav li#nav-7 ul li a {
overflow: hidden !important;
overflow: visible;
font-size: 10px;
color: #FFF;
height: 19px !important;
height: 19px;
width: 107px;
padding: 1px 3px 2px 19px;
}
#primary-nav li#nav-1 ul li a:hover,
#primary-nav li#nav-2 ul li a:hover,
#primary-nav li#nav-3 ul li a:hover,
#primary-nav li#nav-4 ul li a:hover,
#primary-nav li#nav-5 ul li a:hover,
#primary-nav li#nav-6 ul li a:hover,
#primary-nav li#nav-7 ul li a:hover {
background: transparent url(img/bg/primary-nav-link-over.png) no-repeat 0 0;
}
#primary-nav li:hover ul,
#primary-nav li.sfhover ul {
left: auto;
}
html: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html class="sIFR-active" id="home" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head style="background-color: rgb(255, 0, 0);">
<title>TysonsCorner.com™</title>
<link rel="shortcut icon" href="#">
<link href="home.css" rel="stylesheet" type="text/css">
<link href="global.css" rel="stylesheet" type="text/css">
<link href="nav1.css" rel="stylesheet" type="text/css">
</head><body>
<div id="container">
<!-- HEADER AREA STARTS HERE -->
<div id="content">
<div id="header">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="760" height="200" id="Banner(FLASH) - Beta" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="Banner(FLASH) - Beta.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /> <embed src="Banner(FLASH) - Beta.swf" quality="high" bgcolor="#ffffff" width="760" height="200" name="Banner(FLASH) - Beta" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<ul id="primary-nav">
<!-- PRIMARY NAVIGATION (CATEGORIES) STARTS HERE -->
<li id="nav-1"><a href="#" title="Tysons Corner Homepage">Tysons Homepage</a>
<ul>
<li><a href="#" title="Tysons 1 Stores">News</a></li>
<li><a href="#" title="Tysons 2 Stores">Events</a></li>
<li><a href="#" title="More Tysons Shopping">Contact Us</a></li>
<li class="bottom"></li>
</ul>
</li>
<!-- PRIMARY NAVIGATION (BRANDS) STARTS HERE -->
<li id="nav-2"><a href="#" title="Tysons Corner Shopping">Tysons Shopping</a>
<ul>
<li><a href="#" title="Tysons 1 Stores">Tysons I</a></li>
<li><a href="#" title="Tysons 2 Stores">Tysons II</a></li>
<li><a href="#" title="More Tysons Shopping">More Shopping</a></li>
<li class="bottom"></li>
</ul>
</li>
<!-- PRIMARY NAVIGATION (PRODUCTS) STARTS HERE -->
<li id="nav-3"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
<ul>
<li><a href="#" title="Cajun Food">Cajun</a></li>
<li><a href="#" title="Grilled Food">Grilled</a></li>
<li><a href="#" title="Foreign Food">Foreign</a></li>
<li><a href="#" title=" Full List Restaurants">Complete List</a></li>
<li class="bottom"></li>
</ul>
<li id="nav-4"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
<li id="nav-5"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
<li id="nav-6"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
<li id="nav-7"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
</li>
</ul>
</div>
<div id="leftpanel">
<div id="leftpanel-head">
Search
</div>
<form id="form1" method="post" action="">
<p>
<label>
<input type="text" name="IDsearch" id="IDsearch" width="150"/>
</label>
</p>
</form>
<div id="leftpanel-head">
Events Calendar
</div>
<div id="leftpanel-head">
Sponsored Ads
</div>
<script type="text/javascript"><!--
google_ad_client = "pub-8246327012745782";
/* 120x600, created 10/23/08 */
google_ad_slot = "1782998545";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div id="newsroom">
<div id="newsroom-header">News Room</div>
</div>
<div id="welcome">Test</div>
<div id="newsroom">
<script language="javascript" src="http://www.thenewsroom.com//mash/swf/voxant_player.js?a=V3126802&m=669243&w=300&h=290&v=2"></script>
</div>
</div>
</body></html>
Demo: http://www.reston.com/Tysons Corner COM Hello, 1st post on this forum. How can I create a three column layout with the left and right div-containers sticking to the left and right sides and then make the middle container stay centered? I would post links to the pages but this forum will not let me. Thanks for the help hello, well im try to make three columns, left,center,right. the left and the right have fixed width,but the center colums should be stretched, so if the left and right each is 200px the center should be the space left in the browser screen in the center. Is it possible to do this using CSS divs? Please this is urgent. Thanks in Adanved Samer I have a 2 column layout using a left float which breaks in IE, sending the right column way down the page. It works perfectly in Firefox. I've been staring at it for days, and can't grok what I'm doing wrong. Please help! Code: body {
background-color: #ffffff;
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
#container {
background-image: url(images/background.gif);
background-repeat: repeat-y;
width:700px;
margin: 0 auto;
margin-top: 10px;
}
#header {
background-color:#FCF6EA;
}
#content {
background-color: #FCF6EA;
width:497px;
float: left;
padding-left: 0px;
border-style: solid;
border-color: #F8CA52;
border-left-width: 1px;
border-right-width: 0px;
border-bottom-width: 0px;
border-top-width: 0px;
padding-top: 5px;
}
#sidenav {
background-image: url(images/navback.gif);
margin-left: 500px;
width: 200px;
}
#container > #sidenav {
width:203px;
}
#footer {
background-color: #ffffff;
background-image: url(images/footer.gif);
clear: both;
}
h1 {font-size: small;
margin-top: 0px;
margin-bottom: 0px;
font-family: Arial, Helvetica, sans-serif;
}
a:link {
color: #663333;
}
a:visited {
color: #000000;
}
B. 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. I'm trying to create a printable version of a website that uses two columns of text. But then I have to know where the page will end, and this depends on the default header & footer margins of the browser. Is there some kind of coding trick for getting this to work? Hi all, I've tried searching around for this issue, but I've not found any help so far and it's driving me nuts. I hope someone here can advise. This is an abridged version of the site's code for example: Code: <style type="text/css">
<!--
#main1 {
padding: 0px;
margin: 0px;
}
#left {
width:260px;
margin:0;
padding:0;
float: left;
}
#left-top {
background-image: url(../images/panel-top-left.gif);
background-repeat: no-repeat;
background-position: center top;
height: 16px;
margin: 0px;
padding: 0px;
}
#left-middle {
background-image: url(../images/panel-middle-left.gif);
background-repeat: repeat-y;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 2px;
}
#left-bottom {
background-image: url(../images/panel-bottom-left.gif);
background-position: center;
height: 18px;
}
#logo {
background-image: url(../images/swalingslogo.gif);
background-position: center top;
width: 260px;
height: 120px;
background-repeat: no-repeat;
}
/* Navigation List */
#navlist
{
padding-left: 0;
margin-bottom:10px;
width: 217px;
}
#navlist li
{
list-style: none;
margin-bottom:4px;
padding: 0;
font-size:1.2em;
line-height:1.8em;
width:217px;
height:32px;
background-image:url(../images/nav2.gif);
background-repeat:no-repeat;
margin-top: 0;
margin-right: 0;
margin-left: 0;
}
#navlist li a:link, #navlist li a:visited {
display:block;
text-decoration: none;
color:#039;
width:207px;
height:32px;
font-weight:bold;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
#navlist li a:hover {
text-decoration: none;
color:#FF6600;
}
/* Testimonials */
div#fscroller {
width:200px;
height:200px;
background-image:url(../images/bg-testimonials.gif);
background-repeat:no-repeat;
margin-left:8px;
}
div#fscroller p {
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 5px;
}
/* Middle Column */
#middle {
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
text-align: justify;
margin-left: 260px;
}
#middle #top-left {
background-image: url(../images/panel-top-rightleft.gif);
height: 16px;
font-size: 2px;
background-repeat: no-repeat;
}
#middle #top-right {
float: right;
margin-top: -16px;
background-image: url(../images/panel-top-rightright.gif);
height: 16px;
width: 20px;
font-size: 2px;
}
#middle a {
color: #003399;
}
#middle a:hover {
text-decoration: none;
}
/** Country Titles **/
#middle h2#unitedkingdom {
background-image: url(../images/title-unitedkingdom.gif);
background-repeat: no-repeat;
height: 26px;
width: 201px;
margin-bottom: 6px;
}
#middle h2#antigua {
background-image: url(../images/title-antigua.gif);
background-repeat: no-repeat;
height: 26px;
width: 128px;
margin-top: 16px;
margin-bottom: 6px;
}
/* Minisite Links */
div.minisite {
float: left;
}
div.minisite span {
display: none;
}
div.minisite a {
background-position: top;
background-repeat: no-repeat;
height: 168px;
width: 190px;
display: block;
}
div.minisite a:hover {
background-position: bottom;
}
a#minisite-swimminglessons {
background-image: url(../images/swimming-lessons-uk.jpg);
}
.clear {
clear:both;
}
.hidden {
display: none;
}
.notopgap {
margin-top: 0;
}
.nobottomgap {
margin-bottom: 0;
}
.inside {
background: #EFEFEF;
padding-left: 10px;
padding-right: 10px;
}
-->
</style>
<div id="main1">
<div id="left">
<!-- Logo -->
<div id="logo"></div>
<div id="left-top"></div>
<div id="left-middle">
<!-- Navigation -->
<!--#include file="../inc/nav2.asp" -->
<!-- Testimonials -->
<!--#include file="../inc/testimonials.asp" -->
<!--#include file="../inc/special-offers.asp" -->
</div>
<div id="left-bottom"></div>
</div>
<!-- Middle Column -->
<a name="skipnav" class="hidden"></a>
<div id="middle">
<div class="top-left"></div><div class="top-right"></div>
<div class="insideleft"><div class="insideright"><div class="inside"><div class="gap-saver"></div>
<!-- UK Sites -->
<h2 id="unitedkingdom"><span class="hidden">United Kingdom</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swimming Lessons</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Residential Courses</span></a></div>
<div class="clear"></div>
<!-- Antigua Sites -->
<h2 id="antigua"><span class="hidden">Antigua</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Soccer</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Parties and Events</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings International School of Swimming</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Babysitting and Nanny Agency</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Rugby</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Volleyball</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="clear"></div>
<div class="gap-saver"></div>
</div></div></div>
<div class="bottom-left"></div><div class="bottom-right"></div>
</div>
<!-- End Middle Column -->
</div>
I've placed the Country Title in an H2 tag, then beneath that, each anchor is enclosed in a DIV, and is set as a left-floated block. Then I placed a spacer DIV (clear: both) to create a new line, then repeated with H2 and links. This all works fine in Firefox, IE7 and Opera, but of course IE6 is being a pig as usual. The spacer DIV is pushed to sit alongside the bottom of the left column, and I can't figure out how to (or if I can) stop this. I can't add in links properly, so I hope this is acceptable under the rules -- The site in question is: www.swalings .com/swalings/index4.asp and here's a screenshot of IE6 behaviour: www.swalings .com/images/swalings-ie6-troubleshoot.jpg Hopefully that's enough information to go on, please let me know if there's something I missed out. Thanks a lot! Rob Hi 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 Question title: A 2 column layout, let only the second column scroll horizontally and let them both scroll vertically Hello I did try several idea's, but all failed. Then I did search the web but found a list of > 400.000 in google. If someone is willing to tell me if it is possible and give me some directions, please do. Everything is welcome. I got a list with 3 columns ( basically you could say I have only two columns because 2-3 could be concatenated to together, but they have a different style and justification, but I could live to start with a two column sample) f.e line 1 : value_one - ( some_text - value_two (right justified) ) line 2 : value_one - ( some_text - value_two (right justified) ) line 99:.... e.t.c Column one has a fixed width of 32px. 'some text' can be longer then the wide available and value_two is with 3 spaces appended to column 2. I want that column one is fixed horizontal and that the second and the third column can scroll horizontally. Of course when there are more line's then the height of the container is should be posable to scroll vertically. Finally I need the color behind column one be different then the column 2 and 3. So what I did create is a container with two containers where the left one has a different colour then the right one and above those a container with the list. I have overflow on auto, so I get scroll-bars when necessarily. But my problem is that when I scroll horizontally that my first column scrolls away to the left. Basically my question is. How can I get a 2 column layout, let only the second column scroll horizontally ( first is locked in horizontal place ) and let them scroll both vertically? We've got something odd happening on our site. Check out: newser.com/story/82843/conan-obriens-twitter-woman-shows-class.html If you leave your browser window alone for about 5 minutes, eventually the content on the page jumps down. If you scroll, or mouseover the window, it jumps back. Any ideas on the issue? One thing to note -- we're watch for breaking news periodically -- when something big happens, we load a banner above the nav via AJAX. Seems like this may be a factor even though it's usually empty. Hello guys, i've been trying for the past 2 days to google for textarea sizing under strict mode. i have found no solution and at the moment my problem is this... here is the code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style type="text/css">
.style1 {
text-align: center;
width: 800px;
}
</style>
</head>
<body>
<div class="style1" style="padding: 0px; margin: 10px auto 10px auto; background-color: #D6EBF5; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; font-style: normal; color: #000000; width: 800px;">Little Bunny</div>
<div class="style1" style="margin: 0px auto 0px auto; background-color: #D6EBF5; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; font-style: normal; color: #000000;">
<div style="width: 400px; float: left; background-color:#EBEDF3; height: 100px; text-align: center; line-height: 100px;">Text</div>
<div style="width: 400px; overflow:visible; float: left; background-color:#F2F9E8" id="OuterDiv">
<form method="post">
<textarea cols="0" id="T1" name="TextArea1" rows="3" style="float:left; width:100%; height:100px; margin: 5px; padding:0">efefefefefef</textarea>
</form>
</div>
</div>
</body>
</html>
The Textarea expend over the surrounding Div and it shows differntly under FireFox 3.5.7 and IE 8 (tested for both) I'm trying to do the following: make the textarea width 100% and height 100px for example. + padding 5px outside the textarea (space 5px from left, right, top, bottom).. most importent thing is to see it equaly under both ff and ie.. hope you can correct my code since i'm clueless.... have a nice day Hey, does anyone know if there's a mozilla equivilent to writing-mode? um .. that's all Thanks Hi folks, I am super excited about the box-sizing css rule. I've always thought the original IE box model was better and it was a shame that we had to ditch their superior model for the w3c one to be cross browser. Now all the browsers are starting to support box-sizing which will allow me to go back to the model I prefer. Unfortunately, pioneering the border-box sizing model, the only way I can get to it (that I know of) in IE6/7 is via quirksmode. Quirksmode has a whole bunch of other issues I don't want so this doesn't see a solution. I'm hoping someone out there will no how I can trigger box-sizing: border-box; in IE6/7 without quirksmode. If it's possible I'll be ditching the w3c box model in a hurry. Cheers, Pete I have a combo box written via JS that only seems to work in quirks mode in firefox. In IE it works in both quirks and SC mode. here is my js code (i know this is the CSS forum but javascript is changing the css) Code:
var fInitCombo=true;
// resdraw the combo box locations based on the windo resizing -- if need be
window.onresize=resizeCombos;
function resizeCombos(complete) {
// i take the select and place it in the right position. I also size the text box to be the same size as the combos
var oText, oSelect, obj, x, y;
for(var i in arrCombo) {
x=0;
y=0;
oText=arrCombo[i].textField;
oSelect=arrCombo[i].selectField;
obj=oText;
while(obj.tagName!="BODY") {
x+=obj.offsetLeft;
y+=obj.offsetTop;
obj=obj.offsetParent;
}
if(fInitCombo) {
oText.style.width=oText.offsetWidth-16;
//oSelect.selectedIndex=-1;
fInitCombo=false;
}
if(complete) {
//oSelect.selectedIndex=-1;
oText.style.marginRight=16;
}
oSelect.style.left=x;
oSelect.style.top=y;
oSelect.style.width=oText.offsetWidth+16;
oSelect.style.clip="rect(0,"+(oText.offsetWidth+18)+","+(oText.offsetHeight)+","+(oText.offsetWidth-2)+")";
oSelect.style.display="block";
}
}
function updateCombo(instance,use,oHiddenField) {
var oText=arrCombo[instance].textField;
var oSelect=arrCombo[instance].selectField;
if(use == "t")
{
oText.value = oSelect.options[oSelect.selectedIndex].text
}
else if(use == "v")
{
oText.value = oSelect.options[oSelect.selectedIndex].value
}
if(arguments.length > 2)
{
oHiddenField.value = oSelect.options[oSelect.selectedIndex].value
}
updateComboSelection(arrCombo[instance].selectField,arrCombo[instance].textField);
}
function comboLoad() {
resizeCombos(true);
}
function updateComboSelection(oSelect,oText)
{
oSelect.selectedIndex=-1;
for(var i=0;i<oSelect.options.length;i++)
{
//if(oSelect.options[i].text==oText.value)
if(oSelect.options[i].text.indexOf(oText.value) == 0)
{
oSelect.selectedIndex=i;
break;
}
}
}
subset of my html Code: <form action="##" name="data"> <fieldset style="width:600px"> <LEGEND>Appointment time</LEGEND> <table> <tr> <td> Start: <input type="text" name="start_time" id="start_time" onchange="changeHandler(this);" /><select name="start_time_select" id="start_time_select" onchange="changeHandler(this);" style="position:absolute;display:none;"><option>asdfasd</option></select> </td> </tr> </table> </fieldset> </form> arrCombo is just an array of objects pointing to the text and select fields. Any idea why this only works in quirks mode rather than SC mode it's the Resize combo method is the one thats running to do the combos 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! Hi, hopefully you enjoyed the title, I had a good laugh thinking of it in that split second it took me to write it. So, I found a 3 column css layout on a CSS generator website, because I got sick of trying to hack up layouts I've made in the past that didn't work. Anyhow, it was working fine with one line of content in each column when I tested it out, however, once content in the middle column was added, and stretched vertically beyond a certain point, it will drag the left columns content down with it. The right column is not affected in any way. I have spent a few hours trying to look for reasons as to why it would happen, but I had no luck. I would appreciate any help... so thank you in advance if you take a stab at it. Here's the html: Code: <body> <div id="pagewidth"> <div id="header"></div> <div id="wrapper" class="clearfix" > <div id="twocols" class="clearfix"> <div id="maincol">Main Text, woot. (aka hi hi hi)</div> <div id="rightcol">Sidebar, yippee.</div> </div> <div id="leftcol"> <div id="navigation">test</div> </div> </div> <div id="footer"></div> </div> </body> and the CSS: Code: html, body
{
background: #333399;
margin:0;
padding:0;
text-align:center;
font-family: Verdana, Arial, Tahoma;
font-size: 12px;
font-weight: normal;
color: black;
}
#pagewidth
{
width: 750px;
text-align:left;
margin-left:auto;
margin-right:auto;
background: #333399 url('images/bodycontent.gif') repeat-y center top;
}
#header
{
position:relative;
height:138px;
background: url('images/header.gif') center;
width: 100%;
}
#leftcol
{
width: 118px;
float: left;
left: 25px;
position: relative;
background-color: transparent;
margin:0; padding:0;
}
#twocols
{
width: 700px;
float: right;
position: relative;
}
#rightcol
{
width:180px;
right: 25px;
float:right;
position:relative;
background-color: transparent;
}
#maincol
{
background-color: transparent;
float: left;
left: 100px;
display: inline;
position: relative;
width: 390px;
}
#footer
{
text-align: center;
height:39px;
background: url('images/footer.gif');
clear:both;
}
.clearfix:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */
/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
/*hide the right column when printing*/
#rightcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}
Again, thank you in advance if you can come up with anything. can i make my left column, the same height as my right column? or infact, if the left is taller than the right, the right extends to it and if the right is taller than the left the left extends to it? is this possible, cheers heres my css: left column, is #leftNav and the right column is #contentMain PHP Code: #content { margin:0px auto; padding: 0; width: 760px; } #contentMain { padding: 0; margin: 0; float: right; width: 632px; } #leftNav { color: #000; float: left; margin: 0; padding: 0; width: 128px; } |
|||||||