|
CSS - Column And Border Problem, Need Help Please
I'm having problems with my CSS.
I have three columns. 1) Left for navigation 2) Middle for content 3) Right for sidebar I am using this format for a template. The right sidebar column sometimes will be longer in height than the middle column depending on content of the page. The Middle column has a 1px solid line on the left and right (using it as a visual divider). So I really want the Middle column to extend and follow the height of the Right sidebar. I can't add the border to the Right sidebar column because it has it's own border already. What code should I use for the middle column? I currently have this: Code: #middle {
float: left;
width: 375px;
background: #fff;
margin: 0 auto;
padding-top: 0px;
padding-left: 15px;
padding-right: 15px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
Thanks in advance. Similar TutorialsI'm working on a new design for my blog and having a problem with a border. I have a three column layout and want to have a border on the left, right, and bottom the container div, but instead of surrounding it it just sticks it at the top by itself. Heres the page and css 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=utf-8" />
<link href='http://fonts.googleapis.com/css?family=PT+Serif:regular,bold' rel='stylesheet' type='text/css' />
<link href="style.css" rel="stylesheet" type="text/css"/>
<title>3 Column Liquid Fixed Fixed CSS Layout</title>
</head>
<body>
<div class="wrapper3">
<div class="header3">
<img src="logo.png" alt="SuperSonicMoose" />
<div id="line1"></div><div id="line2"></div>
</div>
<div class="wrapleft3">
<div class="left3">
<div class="article">
<h1>Article Title</h1><h2>Posted on Friday, March 11th, 2011</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#">Read More >></a></p>
</div></div>
</div>
<div class="middle3"><div class="article">
middle fixed
</div> </div>
<div class="right3"><div class="article">
right fixed
</div> </div>
<div class="footer3">
footer
</div>
</div>
</body>
</html>
Code:
.wrapper3{
width: 93%;
min-height: 100%;
margin: 0 auto;
border:4px solid #333333;
}
.header3{
background-image: url(headbg.png);
float: left;
width: 100%;
background-color: white;
}
.wrapleft3{
float: left;
width: 100%;
background-color: #ffffff;
}
.left3{
margin-right:410px;
background-color: #ffffff;
min-height: 200px;
border-right:#E9F6FC solid 2px;
}
.middle3{
float: left;
width: 265px;
margin-left: -406px;
background-color: #ffffff;
min-height: 200px;
}
.right3{
float: right;
width: 135px;
margin-left: -137px;
background-color: #ffffff;
min-height: 200px;
border-left:#E9F6FC solid 2px;
}
.footer3{
float: left;
width: 100%;
background-color: #ffffff;
}
body {
background-image: url(pgbg.png);
padding: 0px;
margin: 0px;
background-color: #8CD4F1;
font-family: 'PT Serif', arial, serif;
}
#line1 {border-bottom-style: solid; border-bottom-color: #8CD4F1; border-left-width: 0px; border-bottom-width: 4px; border-right-width: 0px; border-top-width: 0px; width:99%; margin: auto;}
#line2 {border-bottom-style: solid; border-bottom-color: #E9F6FC; border-left-width: 0px; border-bottom-width: 4px; border-right-width: 0px; border-top-width: 0px; width:98%; margin: auto;}
.left3 h1 {
margin: 0;padding: 0;
color: #4A7280;
font-size: 20px;
border: 0px;
border-bottom: 1px solid #E9F6FC;
width:70%;
}
.left3 h2 {font-size: 11px; color: #666666;margin: 0;padding: 0;
}
.left3 p {font-size: 12px; color: #5F5F5F;}
.article {padding:10px;}
a { text-decoration: none; color: #B83352; }
I'm sure its something stupid but I haven't been able to figure it out all day. Hi All, I'm having a problem with column lengths and subsequently the borders that define them. On the following site: http://www.oharenoise.org/new/ The layout is exactly how I want it, roughly a 3-column deal. However, you'll notice that the far right column border does not go down to meet the top border of the footer (like the middle column does). This is because it has less content than the middle. I've tried putting a container div around these two columns thinking that if I put the border on the right side of the container that both columns would expand to the container size but that didn't do anything. I also tried adding paragraph tags to the right column but could never get both columns to ever match up. Any ideas? Thanks. Hi, I have a border around the content of my page which is limited in width but not height. Some of the pages have more content then others so the height adjusts. I also have a left column and a black background with and image in this column but I have 2 problems 1. In IE I can't seem to get this black column(div) to extend to the full height of the column so that it reaches the border. 2. In Firefox this left column extends all the way down the page and the border doesn't surround the text it sort of collapses The column is left floated and in a div and the content is right floated and in a div as well which is all surrounded by a div with a border. I would appreciate any help that you might offer. Thanks Hi. Have created some simple tabs using table cells. Active tab should have bottom-border color equal to page background-color. Non-active tabs should have bottom-border=black. Works fine in IE, but does not work very well in Firefox. If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell. So is there a way to make this work in both IE and Firefox... and hopefully most other browsers... See code below: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
a.menu_top:link {color: #000000; text-decoration: none;}
a.menu_top:visited {color: #000000; text-decoration: none;}
a.menu_top:hover {color: #000000; text-decoration: none;}
a.menu_top:active {color: #000000; text-decoration: none;}
td.menu_top_passive {
background-color: #777;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
td.menu_top_active {
background-color: #bbb;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #bbb solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
</style>
<script language="JavaScript">
function change(id, url) {
for (i=1; i<6; i++){
eval("document.getElementById("+i+").className='menu_top_passive'");
}
eval("document.getElementById("+id+").className='menu_top_active'");
}
</script>
</head>
<body style="margin:0; padding:0; background-color:#bbb;">
<br><br>
<center>
1. Load the page.<br>
2. Click Item 4.<br>
3. Click Item 2.<br><br>
Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br>
None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br>
Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br>
If I remove border-collapse, then there is no strange behaviour in Firefox.<br>
Any way to get this working in Firefox without breaking it in IE?
</center>
<br><br><br>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;">
<tr>
<td id="1" nowrap class="menu_top_active" onClick="change('1');"><a href="javascript:;" class="menu_top">Item 1</a></td>
<td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td>
<td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a href="javascript:;" class="menu_top">Item 3</a></td>
<td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a href="javascript:;" class="menu_top">Item 4</a></td>
<td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a href="javascript:;" class="menu_top">Item 5</a></td>
</tr>
</table>
</body>
</html>
Hello! I'm new to CSS, so any help would be greatly appreciated! I'm working on this page: sugarhooker[dot]com/testing/index2.html *The CSS is included in the head The right column is suppose to start where it says 'Are you hooked...' It should be right underneath the navigation bar. Anyone know what I'm doing wrong? Thanks in advance! I posted this query over at webdeveloper.com but nobody has offered any working suggestions for a solution, apologies to those who read it there as well. Basically I have a 2 column layout with a header div containing a floated tabbed navigation bar. The page. The css. As you can see the big red background on my right hand column goes all the way to the top of the page rather than staying below the tab bar. How can I get it to stay beneath the header and not start after the content ie. not clear it to the bottom? Sorry problem solved! On my new layout I have a navigation box in which the inside needs to contain 5 x 75px wide boxes, all on the same line (Using float:left), but due to the way FireFox and IE handle borders differently the size needs to be 381px wide in IE (Due to the 3px border) and only needs to be 375px in Firefox. Obviously for now I have opted to go for 381px as the width, as it works in Firefox too, but it makes a few pixel gap on the right, is there anyway to get around this?? Thanks in advance. Hi, here's the CSS layout: http://www.abhiram.astahost.com/newlayout4/ The menu layout has been taken from 'Suckerfish menus' in http://www.alistapart.com The curved borders has been taken from http://www.webreference.com/program..._borders/2.html I've been trying to make curved borders for the header and the content. It displays it just the way I want it to in Firefox, but for some reason, the content part is giving a big gap in IE. I've used the same code with minor adjustments for both header and the content, but there is a problem only with the content. I've spent 2 hours and am at my wits end. Any leads? Source: http://www.abhiram.astahost.com/newlayout4/index.html http://www.abhiram.astahost.com/newlayout4/mystyle.css http://www.abhiram.astahost.com/newlayout4/iefix.js Thanks. I have a small problem with the way borders are displaying around a rounded box in IE. Below are screen shots of what it looks like in FF (which is correct) and IE (broken): http://img332.imageshack.us/img332/7734/example1do7.jpg http://img307.imageshack.us/img307/4980/example2xo5.jpg As you can see, in IE the border runs over the GIF corner on the lower left and right, and the upper right. Here is the relevant CSS code: Code:
b.cn {
position: absolute;
height: 10px;
width: 10px;
margin: 0;
padding: 0;
background: url(images/greycircle.gif) no-repeat;
line-height: 1px;
font-size: 1px;
}
.box {clear: both; position: relative; background: #000; width: 425px;}
b.tl {top: -1px; left: -1px; background-position: top left;}
b.tr {top: -1px; right: -1px; background-position: top right;}
b.bl {bottom: -1px; left: -1px; background-position: bottom left;}
b.br {bottom: -1px; right: -1px; background-position: bottom right;}
div.box {
margin: 0 0 20px 0;
}
div.box {
border: 1px solid #999999;
background-color: #be9;
color: #000000;
background: url(images/boxgrad.gif) repeat-x top left;
float: left;
}
div.box .boxbody {
padding: 10px 20px 10px 20px;
border: none;
}
.boxhead {
font-size: 16pt;
font-weight: bold;
}
.boxtext {
font-size: 11pt;
}
and the relevant HTML code: Code: <div class="box"> <div class="boxbody"> <span class="boxhead">This is the title</span><br> <span class="boxtext"> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. <p> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </span> </div> <b class='cn tl'></b> <b class='cn tr'></b> <b class='cn bl'></b> <b class='cn br'></b> </div> Any help would be greatly appreciated. New to using CSS for layouts and I'm having an issue with getting an img to appear within a div without a border. Here's my code, with a screenshot showing below it: Code:
<div class="leftmenu">
<div class="lnavbtn">
<img src="images/leftnavbtn1.gif" border="0">
</div>
</div>
.leftmenu {
margin:0px;
border:0px;
padding:0px;
width:150px;
height:100%;
background-color:black;
}
.lnavbtn {
align:right;
margin:0px;
border:0px;
padding:0px;
}
Even with all the padding/margin/padding 0 stuff, I still get a 2 px border around the image. I want it to be clean all the way around. This happens in firefox and IE. Any suggestions? Hi, I've got weird issue: I have three div's that are positioned relative below each other. Together they compose a box, where the top has a background, the middle has a background and the bottom has a background. The middle part holds content and can expand vertically so the box is flexible in height. The background tiles vertically so the picture of the border stays intact when it increases in height. The weird thing is that when a border is not defined for the middle part: PHP Code: border: 0px solid #ffffff; that FF gives it a default white border of some 5 pix or so. In IE it works fine. When I do define a border, the div shows properly, but then I have a border that I don't want (see example white border). I can define the border to be transparent: PHP Code: border: 1px solid transparent; but that only works in FF and not in IE (where it shows up black). I can also define the border to be none: PHP Code: border: 1px none #ffffff; But that works fine in IE, but in FF I get the 5px white border again.... Here's my css: PHP Code: .contentbin { position: absolute; margin: 0px; height: 475px; width: 780px; top: 146px; left: 222px; padding: 0px 0px 0px 0px; border: 0px solid #ff0000; z-index: 1; } .contenttop { position: relative; margin-top: 0px; margin-left: 0px; margin-bottom: 0px; margin-right: 0px; padding: 0px; width: 780px; height: 17px; border: 0px solid #ff0000; background-image:url(../images/contentvensters/contentframe_gr1.jpg); background-repeat: no-repeat; } .contentmid { position: relative; margin-top: 0px; margin-left: 0px; margin-bottom: 0px; margin-right: 0px; padding: 0px 0px 0px 0px; width: 780px; border: 1px solid transparent; background-image:url(../images/contentvensters/contentframe_midback.jpg); background-repeat: repeat-y; } .contentbottom { position: relative; margin-top: 0px; margin-left: 0px; margin-bottom: 0px; margin-right: 0px; padding: 0px; width: 800px; height: 17px; background-image:url(../images/contentvensters/contentframe_gr1_onder.jpg); background-repeat: no-repeat; } .contentpadder { position: relative; margin-top: 10px; margin-left: 20px; margin-bottom: 10px; margin-right: 10px; padding: 0px 0px 0px 0px; border: 0px solid #000000; } Here's the html: PHP Code: <div class="contentbin"> <div class="contenttop"> <img src="images/spacer.gif"> </div> <div class="contentmid"> <div class="contentpadder"> Example text </div> </div> <div class="contentbottom"> </div> </div> I've attached screenshots for the different situations. Any help is greatly appreciated! Cheers, Gurt Hi, I am trying to apply a bottom-border to a TR element. The border shows fine in Firefox, but will not display in IE6. Any ideas what is causing this? Page: http://explosiveracing.net/wow-guild/forum/ CSS: http://explosiveracing.net/wow-guild/css/forum.css(Under the .headers declaration) Well, just imagine. My table displays beautifully in Firefox, but it looks like a third-grader did it in IE7. IE7 will not display a border in connection with cells that have no data. The list is populated from a five-column database and not every field has an entry for every column. In Firefox the bottom border extends across every cell regardless of content. Any ideas? CSS: .NewSOL #guardtable td { vertical-align:top; border-bottom-style:solid; border-color:#666666; border-bottom-width:thin; } .NewSOL #guardtable tr { border-bottom-style:solid; border-color:#666666; border-bottom-width:thin; } THANK YOU!! why is the top border on the links called "Sva Ponuda Farovi Felge Pragovi Retrovizori Spojleri" not showing up in IE?? http://www.xtreme-style.com/item.cfm?prodID=371&ID=0 here is my css code for the links Code:
/**BEGIN CATEGORY LINK EFFECTS**/
a.category_links:link {
color:#003366;
text-decoration: none;
background-color:#efefef;
padding:2px 4px 0px 4px;
border-bottom:0px solid #333333;
border-top:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
margin-right:5px;
}
a.category_links:visited {
color: #003366;
text-decoration: none;
background-color:#efefef;
padding:2px 4px 0px 4px;
border-bottom:0px solid #333333;
border-top:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
margin-right:5px;
}
a.category_links:hover {
color:#FF3300;
text-decoration: none;
background-color:#FFFFFF;
padding:2px 4px 0px 4px;
border-bottom:0px solid #333333;
border-top:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
margin-right:5px;
}
a.category_links:active {
color: #003366;
text-decoration: none;
background-color:#efefef;
padding:2px 4px 0px 4px;
border-bottom:0px solid #333333;
border-top:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
margin-right:5px;
}
/**BEGIN CATEGORY LINK EFFECTS**/
a.category_links_selected:link {
color:#FF3300;
text-decoration: none;
background-color:#FFFFFF;
padding:2px 4px 0px 4px;
border-bottom:0px solid #333333;
border-top:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
margin-right:5px;
font-weight:bold;
}
a.category_links_selected:visited {
color:#FF3300;
text-decoration: none;
background-color:#FFFFFF;
padding:2px 4px 0px 4px;
border-bottom:0px solid #333333;
border-top:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
margin-right:5px;
font-weight:bold;
}
a.category_links_selected:hover {
color:#FF3300;
text-decoration: none;
background-color:#FFFFFF;
padding:2px 4px 0px 4px;
border-bottom:0px solid #333333;
border-top:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
margin-right:5px;
font-weight:bold;
}
a.category_links_selected:active {
color:#FF3300;
text-decoration: none;
background-color:#FFFFFF;
padding:2px 4px 0px 4px;
border-bottom:0px solid #333333;
border-top:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
margin-right:5px;
font-weight:bold;
}
Thanks in Advance. Im trying the faux column technique but somehow it wont work. I use: Code: body{
background-image: url('themes/default/faux_bg.gif');
background-position: 20% 0%;
background-repeat: repeat-y;
margin: 0%;
padding: 0%;
}
.. in my css file. However it doesnt do anything. I am sure the css file is loaded because when i remove the <link> line the rest of the elements lose their style. When i place the code directly into the body tag like this: <body style="background-ima... etc. it does do something. What am i doing wrong? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="themes/default/basic_sheet.css">
</head>
<body>
<?php require('includes/structure.php'); ?>
<div class="contentsDiv">
blabla blab,ala<br><Br>
dsjkdasdas<br>djsadhjksad<br>djsuiohashd
</div>
<div class="panelDiv">
contact 1<br>
contact 2<br>
contact 3<br>
</div>
</body>
</html>
(PS the image is a 10px line with the first 20% filled with blue and the other 80% filled with white. thanks in advance. I have this problem on 2 sites I'm working on. I can't seem to nest 2 divs in a content div to create a 2 column layout. In FF it seems to work fine but IE is pushing the left column content down below the right column content. I've tried many things and I'm stuck. Am I going about the whole concept the wrong way or is there some small hack I'm missing somewhere? Any help would be great. link Thanks, Brad I took the faux column idea, and from it created a left and right border image for my site. The following CSS from Dan Cederholm's faux column article on ALA is what I used, which is below.. Code:
/* image width is 760px, with one px on each end leaving 758px for the content area */
body {
background-image: url(images/bgborder.gif);
background-repeat: repeat-y;
background-position: 50% 0;
text-align: center;
margin: 0 0;
padding: 0 0;
}
To test to make sure it worked well, I placed a content div on the site, which is centered and has a background color, to test to make sure the border image worked as it should. This is below... Code:
#allcontent {
width: 758px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0 0;
background-color: #ccc;
}
In FF this works great, but I found a bug in IE (as usual ) that I can't figure out. In IE 6.0, when the window is resized, the background from the content that should be inbetween the border image actually overlaps the image on the left hand side. I can't think of anything that would trigger this, has anyone ever run into it? If not, does anyone have any idea why it happens? -B |
|||||||