|
CSS - 3 Columns Css Layout Ie 5 Mac Display Problem
I've converted my site to a css layout http://www.mrhodges.net and it woks well for the browsers I've checked except ie5 for mac. On this browser it drops the center column below the two floated side columns.
Now I know that the browser is no longer supported and all that but wouldn't you know... I work for a school board where almost all of the machines are macs and they are running os9 and you guessed it mac ie5. So of the miniscule number of people running this browser I'm smack dab in the middle of most of them. Consequently I need to figure out how to get my page to display properly as I'd like to use the template to put together the schools's web site. What is the best solution for this problem? I'd rather not have to write two sets of pages and redirect using javascript. Similar TutorialsHello, I'm working now on div layout that contains 3 sections (header, body, footer) in one centered wrapper with border (divs with background imgs). My problem is: - divs that are in fact borders (id="l_outerborder_b" and id="r_outerborder_b") don't stretch when main container (id="body_content_text") grows. Here is a html code: Code: <!--BEGIN TEMPLATE HEADER -->
<!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>
<link href="template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="template.js" />
</head>
<body onload="onloadprocedures()">
<div id="main_container">
<div id="template_header">
<div id="tl_outerborder"></div>
<div id="t_outerborder"></div>
<div id="tr_outerborder"></div>
<div id="l_outerborder_h"></div>
<div id="header_content">
<div id="logo"><img src="img/logo.png" alt="" /></div>
<div id="slogan"><img src="img/slogan.png" alt="Centrum zdrowia" /></div>
</div>
<div id="r_outerborder_h"></div>
</div>
<!-- END TEMPLATE HEADER -->
<!-- BEGIN TEMPLATE BODY -->
<div id="template_body">
<div id="l_outerborder_b"></div>
<div id="body_content">
<div id="body_content_text">
<p>TEST</p>
</div>
</div>
<div id="r_outerborder_b"></div>
</div>
<!-- END TEMPLATE BODY -->
<!-- BEGIN TEMPLATE FOOTER -->
<div id="template_footer">
<div style="clear:both"></div>
<div id="l_outerborder_f"></div>
<div id="footer_content"></div>
<div id="l_outerborder_f"></div>
<div id="bl_outerborder"></div>
<div id="b_outerborder"></div>
<div id="br_outerborder"></div>
</div>
</div>
</body>
</html>
<!-- END TEMPLATE FOOTER -->
and CSS: Code: @charset "utf-8";
/* CSS Document */
body {
background-color:#FFFFFF;
font-family:Tahoma, Verdana, "Times New Roman", Arial;
font-size:12px;
}
a:link {text-decoration: none} /* unvisited link */
a:visited {text-decoration: none} /* visited link */
a:hover {text-decoration: none} /* mouse over link */
a:active {text-decoration: none} /* selected link */
#main_container {
position:relative;
margin:auto;
width:960px;
height:auto;
}
#template_header {
float:left;
position:relative;
width:960px;
height:300px;
}
#header_content {
float:left;
position:relative;
width:900px;
height:270px;
}
#logo {
width:310px;
height:130px;
position:relative;
float:left;
top:0px;
left:0px;
}
#slogan {
width:580px;
height:100px;
position:relative;
float:left;
top:0px;
left:0px;
}
#tl_outerborder {
float:left;
position:relative;
background-image:url(img/tl_outerborder.png);
width:30px;
height:30px;
}
#t_outerborder {
float:left;
position:relative;
background-image:url(img/t_outerborder.png);
width:900px;
height:30px;
}
#tr_outerborder {
float:left;
position:relative;
background-image:url(img/tr_outerborder.png);
width:30px;
height:30px;
}
#l_outerborder_h {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#r_outerborder_h {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#body_content {
float:left;
position:relative;
width:900px;
overflow:hidden;
}
#body_content_text {
float:left;
position:relative;
width:600px;
margin: auto;
overflow:hidden;
}
#l_outerborder_b {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_b {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#l_outerborder_f {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_f {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#template_body {
float:left;
position:relative;
width:960px;
overflow:hidden;
}
#bl_outerborder {
float:left;
position:relative;
background-image:url(img/bl_outerborder.png);
width:30px;
height:30px;
}
#b_outerborder {
float:left;
position:relative;
background-image:url(img/b_outerborder.png);
width:900px;
height:30px;
}
#br_outerborder {
float:left;
position:relative;
background-image:url(img/br_outerborder.png);
width:30px;
height:30px;
}
Thanks in advance for info how to stretch those doomed divs EDIT: Here is layout concept. URL hTTp://qsrc.pl/layout.jpg Hi I wonder if anyone can help. I've been trying to tidy up the layout of my home page, and I'm pretty confused by the way that the header is behaving in both Firefox and Safari - the browsers I use on my Mac. I've got screen shots which show it looking good on most Windows browsers, but for some reason, all the text is bunched up at the top when I look at it on the Mac. This is a link to the page: http://www.independentliving.co.uk/index1.shtml And this is the relevant bit of the stylesheet: div#header { background-image: url("header.jpg"); background-repeat: no-repeat; color: #FFFFFF; margin-left:auto; margin-right:auto; margin-top: 0; width:780px; height: 200px; margin-bottom: 10px; font-size: 0.8em; } #header .welcome { text-align: left; width: 700px; padding-top: 90px; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } p.welcome { text-align: left; width: 700px; padding-top: 90px; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } #header .slogan { text-align: left; width: 700px; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } p.slogan { text-align: left; width: 700px padding-left: 20px; padding-right: 20px; color: #003366; } If anyone has any ideas, I'd be really grateful. I know Mac is a minority platform, but as it's the one I use, I'm pretty keen to get it working! Thanks Frances Hello, I am looking for a CSS two fixed width columns centered layout with header and footer. Could someone recommend me a good one? Thank You, Miguel Hi ya My goal is to get this page: portfolio.modernmusicians.com/portfolio.html to have the layout like this: portfolio.modernmusicians.com/port_goal.gif Notice how "description" is squared up in the image. I'm not sure if I should make nested div's or use margins or padding or what. Any guidance would be greatly appreciated. Thanks. Hello, To make my columns have equal lengths in fixed layouts, I have employed the Faux technique successfully. What would be the best technique for liquid layouts? I know of a js that suppose to equal the columns, and someone told there is a CSS method also. Can you still use the Faux? Any suggestions? Hi, Creating a Wordpress theme. I need help to clear:left JPG thumbnails in my 2nd-column div, but WITHOUT clearing the 1st-column div that is floated:left. In other words, I want these two columns to work independently, just like <TD> in html. Here is my setup -- it is a 2-column layout, with the left column being a navigational sidebar (navigation content automatically generated by wordpress), and the Right Column is the "real content" div. Wordpress generates the content in the right column, also. And since Wordpress generates the content based upon what the reader selects, I cannot assign any HEIGHT attributes to the Divs, because I do not know whether the selections have a lot of content, or very little. ----------------- HEADER DIV------------------------------------------ -- Sidebar Div-- __________ --- RIGHT DIV (not floated) ----------------- FOOTER DIV ---------------------------------------- (property of footer is set to clear:both) SIDEBAR DIV is float:left; width 160px RIGHT DIV is not floated, and contains all the content. 600px; Problem I need to solve: In column #2 -- the right div, I want to float-left small thumbnail jpgs, and write text flowing along the right side of the thumbnail. If the text does not naturally drop below the jpg, I want to clear:left to drop down to a new line and start the process over (new thumbnail, new text beside it). *** The problem is that when I clear:left on the jpg, it NOT ONLY clears the JPG, but also clears:left on the whole Sidebar DIV, thereby dropping the next line WAY DOWN on the page. So it looks like this: ___ HEADER ____ Sidebar __________________ Thumbnail #1: Text text text (clear:left clears everything....) __________________________ Thumbnail #2: Text ---- FOOTER --- Attempted solution: If I set the sidebar div to position:absolute, it works ok EXCEPT (and big except) that if there is not much content in the RIGHT DIV, then the FOOTER DIV is not low enough on the page, thereby overlapping the Sidebar Div. Obviously, this whole design could be EASILY accomplished with TABLES, but those are blasphemy these days, so I would like a more "modern" solution. I have googled this all day, and have not seen a solution. Help is appreciated. Hello, Below is css I am trying to get to work and use as a template for a two column , header, and footer layout. I can get by with css, but an not a designer so can't figure out the exact specifics on how to do this. I've looked at many sites, make examples, javascripts included, but either they are to hard to fit into what I am looking for or just cause me to hit my head against the wall. I'm trying to get the left columns background to fill height 100% to the footer. The content's doesn't need it because the wrapper's background act's as its color. Also, if either column's height changes past the screen's height. I need the footer to move down too. Currently, I tested if the left-column and the main content goes past the screen's height it will just go past the footer. This works beacuse the css I have currently is making sure that the footer is always at the bottom. Code: <html >
<head>
<title>Untitled Page</title>
<style type="text/css">
html {
overflow-y: scroll; /* forces firefox scrollbar on */
}
body {
margin: 0;
padding: 0;
background: #F2F2F2;
font: 100% Helvetica, Arial, sans-serif;
height: 100%;
}
/* text-align: center; is so that the content will float in the center*/
div.wrapper {
position: relative;
width: 100%;
height: 100%;
text-align: left;
margin-bottom: 42px;
}
div.header {
position: relative;
width: 100%;
background-color: blue;
border-bottom: 1px solid #CCCCCC;
font-size: 1.5em;
height: 42px;
}
div.footer {
position: absolute; bottom: 0;
width: 100%;
background-color: blue;
border-bottom: 1px solid #CCCCCC;
font-size: 1.5em;
height: 42px;
}
div.wrapper .left {
width: 215px;
float: left;
background: yellow;
height: 100%;
min-height: 100%;
}
div.wrapper .right {
width:auto;
margin-left: 215px;
}
div.wrapper .tabs {
background: green;
height: 35px;
}
div.wrapper .mainContent {
}
</style>
</head>
<body>
<div id="header" class="header">header</div>
<div class="wrapper">
<div id="leftColumn" class="left">left content</div>
<div class="right">
<div class="tabs">Tabs go here</div>
<div class="mainContent">Main content goes here</div>
</div>
</div>
<div id="footer" class="footer">footer</div>
</body>
</html>
Any help would be appreciated thanks in advance. Risso 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. I've run into a problem with a 3-column layout I'm making. The problem is to get the columns equally high. Previously I've just made the "illusion" of equally high columns by making a background image and repeating it in the y-direction (like this). This works fine as long as the page has a fixed with - in this case the left and right column have a fixed width but the center column is dynamic. So, how can I make all the columns look equally high? (without using tables, obviously) Btw, I can't show you an example of the page, but hopefully you'll get the picture and could point me to an article or something about the subject. EDIT: Never mind! I found an example and it worked! http://www.pixy.cz/blogg/clanky/css-3col-layout/ <-- thats the one. Hello, im trying to make Fixed width 3 columns (each column have fixed width) layout 100% height with header and footer. -Well I see alot of examples around the web, but i dont see complete one and im really tired of searching, i made the Fixed width 3 comlumns layout, left and right are absolute position, and center is relative to the header -the problem is that all columns dont fill the whole height of the browser windows, the footer doesnot work good. so the whole thing is missed up, so please show 100% working example of what i need. Thanks in Advanced Samer I have spent my entire day trying to figure out why my three columns will not behave. I have even taken all my code just get one div to show and I can not see what I am doing wrong. It renders right in css master but not in my browser. Not even one div will show and I have tried everything. Right now I'm just trying to get #left to show, and I have taken all the code out of my xhtml just to see if I missed something. The layout will be a header and footer which will be fixed and the content will move when needed. In the container div which lies under the fixed header will have three columns: #left, #right and #mainbody. I haven't even placed the footer yet. Here is the css code: Code:
div {}
body, html {
font-size: 100%;
margin: 0px;
padding: 0px;
text-align: center;
line-height: 100%;}
#header-wrap {
background-image: url(images/banner-bg.jpg);
position: fixed;
width: 100%;
height: 185px;
z-index: 2;}
#container {
margin-left: auto;
margin-right: auto;
width: 940px;
text-align: left;
background-image: url(images/container-bg.jpg);
min-height: 540px;
background-repeat: no-repeat;
}
#logo {
position: fixed;
left: 10px;
background-image: url(images/logo.jpg);
width: 438px;
height: 112px;
z-index: 3;
top: 29px;}
#left {
width: 460px;
background-color: #000000;
position: relative;
top: 200px;
margin-left: auto;
margin-right: auto;
z-index: 5
}
#mainbody {}
#Right {}
p {
margin-left: 25px;
margin-right: 25px;
font-size: .875em;
font-family: Trebuchet, Verdana, Georgia, sans-serif, "Times New Roman";
margin-bottom: 25px;}
a:link {}
a:visited {}
a:hover {}
a:active {}
Here is the xhtml markup: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Comedian Lonnie Bruhn</title>
<link rel="stylesheet" type="text/css" href="main.css" /> </head>
<body>
<div id="header-wrap">
</div><!--Header Wrap ends here-->
<div id="logo"></div>
<div id="container">
<div id="left"></div>
</div><!--container ends here-->
</body>
</html>
If anyone can see what I am doing wrong, I would appreciate it. It is very frustrating. Thanks LB http://24.166.186.237/_elementalcon...themes/default/ thats where it is, in FireFox it looks fine [although there is a bug if the contents smaller than the navigation, the navigation floats over the bottom border] and I would prefer the navigations height 100%. the problem in IE is obvious, the content div aligns itself under the bottom of the leftcolumn div. the site should be up 24/7 unless my wireless dies overnight or something, in which case it will work later. Please help thanks for reading. Oh yeah one more problem in all browsers Ive tried, the layout itself isnt positioning where I want it to, it's going all the way right, if not farther so theres a horizontal scroll bar . I cant figure out how to center it. I heard a paragraph text-align: center; containing the main div works in some browsers... My problem is, review section is completely jumbled. I'v attached screen shots of the correct layout taken from another website. Any suggestions would be appreciated. http://www.refinethetaste.com/html/default.asp?Section=product&PRODUCTID=14#fragment-3 Code:
#product .raterprofile { float:left; width:200px;}
#product .raterprofile .intprofile { font-size: 14px;color: #9e0b0e; font-weight:bold; letter-spacing: -1px;}
#product .ratercontent { float:left; width:325px; border-left:1px dotted #ccc;}
#product .ratercontent .intrating { font-size: 14px;color: #9e0b0e; font-weight:bold; letter-spacing: -1px;}
Okay, so here's my code. I need to know how to make the div's go under each other, without neither being side by side, or oddly spaced. Oh, and only Chrome and Safari honor the top: 20%;. I tried putting in a link, but I'm a new user so can't put it in. D: I would like the div's to go below each other, but not sure how to do it. Also, if possible, does anyone know how I could set a determined height? I seem to have the width down. By the way, I'm sort of new to coding, so feel free to school me on how to code it better. Here's the code that I'm using, if you can see my error from the code alone. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
<meta http-equiv="content-language" content="en-us" />
<title>Test</title>
<style type="text/css" media="all">
.navbodyleft {
color: #ffffff;
background-color: black;
font-family:arial;
font-size: 20px;
position: relative;
top:0%;
float: right;
width: 10%;
}
.hai {
color: #cc0000;
background-color: yellow;
font-family:arial;
font-size: 20px;
position: relative;
top: 10%;
float: right;
width: 10%;
}
</style>
</head><body>
<div class="hai">hai</div>
<div class="navbodyleft">hi</center></div>
</body></html>
So, in short, I would like to know: how to make the floating divs go under each other how to set a determined height for the floating divs how to make all browsers acknowledge my preset distance from top Thanks guys. I am trying to create a very basic div and css template with 3 columns. I want 3 columns visible, and want to give a backgroundcolor to the container. When my columns gets higher (the left, middle or the right column), I want the div wich contains these 3 columns to get higher (and reveiling this by the background color). All goes well in Internet Explorer 6, and even 7... but Firefox seems to have problems with it. Can anybody help me out? The following code is used: PHP 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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Test</title> <style type="text/css"> .container{ width:600px; background-color:#660066; height:auto; } .kolomlinks{ /*COLUMNLEFT*/ float:left; width:80px; background-color:#66FF33; padding:10px; } .kolommidden{ /*COLUMNMIDDLE*/ float:left; width:380px; border:dotted 10px; background-color:#FFFFCC; } .kolomrechts{ /*COLUMNRIGHT*/ float:left; width:80px; margin:10px; background-color:#FF0000; } </style> </head> <body> <center> <div class="container"> <div class="kolomlinks">Left</div> <div class="kolommidden">Middle<br /> <br /> The background color of the overall container doesn't get extended in firefox. </div> <div class="kolomrechts">Right</div> </div> </center> </body> </html> Hi, I'm still new to CSS and have been learning for the past couple of days now. I'm having trouble getting a two-column layout working correctly. Using the faux method, I have a background set so the right-column has a different background color. This works fine. But I'm having trouble placing the elements inside of the container to work correctly. When the left-column has more content than the right, instead of the container (and thus the background) moving to fit it, the column just extends down by itself. However if the right column has more content than the left, it works correctly. I think it might be because of the float: left, but I'm still new and not exactly sure what the problem is. The URL to view this is http://serve5.net/extend/ - the CSS is right in the source for you to look at. Could someone point me in the right direction as far as getting the left-column to extend down correctly? It seems to work fine in Internet Explorer - but I use Mozilla Firefox and it's having this issue. However, in Mozilla, the left-column's background extends to the border fine, but in IE, it overlaps it. What can I do to fix this also? Thanks. I've built a site for a client using a header, middle and footer. The middle is divided into content and nav. For some reason the nav drops below the content div in IE, but positions properly in FF. Could someone please help! The next step for me is to re-code the entire site and I really don't want to have to do that. http://www.cvp.jp/about.html Thank you in advance for your time and help. Hi, Since I'm a newcommer here, I'm not allowed to post proper URLs, so I'm hoping someone will have a look at the css problem in the following two images: (remove the spaces in the links) h t t p : // farm4.static.flickr.com/3192/2929163063_5b1e1d9988.jpg?v=0 and h t t p : // farm4.static.flickr.com/3188/2930025002_a7a4ed4fbe.jpg?v=0 The overlapping error in the second image occurs only in IE 8 with compatibility view turned on. The address is positioned properly in all other browsers. In the style sheet a div tag positions the address : #address {clear:both;position:relative; font-size:smaller; top: 40px; left: 0px; width: 145px; height: 80px; } I've used <!--[if lte IE 6]> <link rel="stylesheet" media="all" type="text/css" href="css/menu_ie.css" /> <![endif]--> In the page the address is written as: <div id="address"> <div align="right">The Company Name Inc.<br> 1234 Glenn View Road<br> Hilldale, OW 12345<br> 123-456-7890</div></div> ...and in menu_ie.css given the address tag top:90px or margin-top:90px instead of 40px but this does not have any effect. A few other points: The page layout is not pure css but a combo of a table + css. The menu is in an include file placed in a table column as is the address. I want to know a fix that will position the address correctly about 40px below the menu. Thanks http://www.research.buffalo.edu/newsite/ If I go to the above page in Firefox the page always loads fine. However, if I go to it in IE 6 the right side div half the time loads incorrectly and is not positioned to the right. If i hit refresh then the page looks correct. This error happens the most when I'm coming from another page and click the home button to get back to the above link. I've also noticed this happening on http://www.research.buffalo.edu/newsite/proposal_library.cfm Both pages validate correctly. Is there something I'm missing? Some kind of hack to make it work in IE? I'm trying to create a fairly easy layout, making use of DIVs. The following structure is what I'm trying to accomplish: www.dvolve[PLEASE REMOVE].org/tst.jpg And here's what I currently have: www.dvolve[PLEASE REMOVE].org/tst.htm However, I'm not really convinced that this is the right solution. I am unable to scroll in the content div (IE6) for one, which is quite a problem. I'm hoping to make this look the same for most browsers. Does anyone have a better layout that achieves this or any pointers on what I'm doing wrong? |
|||||||