|
CSS - Css Colums With Borders
how can i use:
css Code: Original - css Code .t {background: url(../images/dot.gif) 0 0 repeat-x; width: 20em; width:80%; left:50%; margin:20px; } .b {background: url(../images/dot.gif) 0 100% repeat-x} .l {background: url(../images/dot.gif) 0 0 repeat-y} .r {background: url(../images/dot.gif) 100% 0 repeat-y} .bl {background: url(../images/bl.gif) 0 100% no-repeat} .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:5px; } .t-exif {background: url(../images/dot.gif) 0 0 repeat-x; width: 20em; width:200px; right:0px;} .b-exif {background: url(../images/dot.gif) 0 100% repeat-x} .l-exif {background: url(../images/dot.gif) 0 0 repeat-y} .r-exif {background: url(../images/dot.gif) 100% 0 repeat-y} .bl-exif {background: url(../images/bl.gif) 0 100% no-repeat} .br-exif {background: url(../images/br.gif) 100% 100% no-repeat} .tl-exif {background: url(../images/tl.gif) 0 0 no-repeat} .tr-exif {background: url(../images/tr.gif) 100% 0 no-repeat; padding:10px; }
.t {background: url(../images/dot.gif) 0 0 repeat-x; width: 20em; width:80%; left:50%; margin:20px; }
to make my exif info box appear on the right of the image? i have tried using right:0px but it doesn't work, any ideas? current display page Similar TutorialsI have the terrible feeling that I will not be able to explain this properly but I will try my best. It's simple enough to make a layout with colloms using css, just by floating two or three divs, but what if I wanted to make multiple collums out of one bit of text? Kind of like when your writing in a word processer that you've set to use two colums, when your writing fills up the first it just goes strait into the second. Hello everyone, I have a web application wich i would really like to convert to css style. I have been struggling with this for almost 2 days now and i am getting nowhere... I did manage to make a few 'usable' css based on various template/book but they are either corrupted in mozilla or ie... and thus not usable in a production environment. Basicly here what i need: 1. header div located at the top of the page 2. menu div located just bellow the header div (25height) 3. left div located bellow the header/menu div (160width) 4. content div located at the right of the left div (max available width) 5. footer div located at the bottom of the page. (height 25) 6. A vertical scrollbar allowing the user to scroll the page. if possible, this scrollbar should be located between the header and footer only (that mean it will allow the user the scroll the left/content while the header/footer stay in the window), kinda like a traditional frame'd layout. My site is dynamic and the content located at the left (the left div) can be completly disabled by the user. So if the left div is missing, the content div should automaticly adjust is width. I dont want any vertical scrollbar on that site, it should auto-adjust itself. I hope i have been clear. In case i have not, here is a screenshoot of a layout that is similar to the one i would like to have. Example of what i want ! What i need is an experienced web dev who can do this for me. Since i know nothing in life if free i will reward this person with ANY book he want, with a maximum of 5. Here a few examples of what i can provide: Cascading Style Sheets: The Definitive Guide 2nd edition http://www.oreilly.com/catalog/css2/ HTML & XHTML: The Definitive Guide, 5th Edition http://www.oreilly.com/catalog/html5/ JavaScript & DHTML Cookbook http://www.oreilly.com/catalog/jvdhtmlckbk/ CSS Cookbook http://www.oreilly.com/catalog/cssckbk/index.html I have over 17,000 (250+ oreilly, 400+ mspress, etc...) on various subject, so if you have a specific title in mind, you can almost bet that i have it Anyone ready to take the 'job' can add me to is msn, my address if paologoarex@hotmail.com. I think this would take something like 1hour for an experienced web dev while for me it woud take days (if not weeks) ! Dont blame me for being lazy, i did gave it a try ! but since i am more a coder than a web dev, its very hard for me to grasb all the little tweak of css contact me if you are interested. I'm not so CSS savvy, can anyone help me with the specific changes needed here that will force the 3 columns to load height at 100% or full column height? Also is it possible to have multiple content boxes loading one above the other in the left and right columns instead of one long content box? jarsandmixes.com/liquid.php body { background-color: #FFF7EF; } div { text-align:center; } div#wrapper { background-color: transparent; border:0px solid black; margin:0px auto; text-align:left; position:relative; width:100%; height:100%; min-height:100%; } div#border { background-image: url(images/bkg2.gif); background-repeat: repeat; border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; width:100%; height:10px; } div#page { background-color: #DEC6B5; border:1px dashed black; position:relative; clear:both; float:left; width:100%; height:100%; min-height:100%; padding-bottom: 10px; overflow:hidden; } div#header { background-image: url(images/.gif); background-repeat: no-repeat; border:1px dashed black; margin:0px; padding:0px; width:100%; height:80px; } div#menu { clear: both; background-color: #CA7B93; border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; width:100%; height:30px; } div#left1 { background-image: url(images/bkg2.gif); background-repeat: repeat; border:1px solid black; float:left; margin:5px; width:20%; height:auto; } div#left2 { background-color: #FFF7EF; background-image: url(images/bkg3.gif); background-repeat: repeat; border:1px solid black; margin:0px 5px 0px 5px; padding:4px; right:20px; width:90%; height:auto; } div#content1 { background-image: url(images/bkg2.gif); background-repeat: repeat; border:1px solid black; margin:5px auto; width:54%; height:auto; } div#content2 { background-color: #DEC6B5; background-image: url(images/bkg3.gif); border:1px solid black; margin:0px 5px 0px 5px; padding:4px; width:96%; height:auto; } div#divider { background-image: url(images/.gif); background-repeat: no-repeat; margin:10px auto; width:439px; height:60px } div#right1 { background-image: url(images/bkg2.gif); background-repeat: repeat; float:right; border:1px solid black; margin:5px; right:10px; width:20%; height:auto; } div#right2 { background-color: #FFF7EF; background-image: url(images/bkg3.gif); background-repeat: repeat; border:1px solid black; margin:0px 5px 0px 5px; padding:4px; right:20px; width:90%; height:auto; } div#footer { clear: both; border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; width:100%; height:30px; } hello, ive been following a tute designed for a two column template and trying to follow this logic to make a 3 column template but i cant make it work unfortunately. any help would be really appreciated, thank you! apologies for a 'here is the code' post, but here is the code basically i want a 3 column template with 7 rows and only the 3rd row from the top really being divided into 3 columns -standard header, main content, footer, kind of design. whole 'table' is 587 wide and column sizes are 202 for left and right and 183 for center column. (no live link sorry) index page: 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" /> <title>Untitled Document</title> <link href="css/template_css.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="tag">Tag</div> <div id="header">Header</div> <div id="left">Left</div> <div id="main_content">Main Content</div> <div id="right">Right</div> <div id="login">Login</div> <div id="menu1">Menu1</div> <div id="menu2">Menu2</div> <div id="footer">Footer</div> </div> </body> </html> css file: Code: body {
background-image: url(../images/bg.jpg);
background-repeat: repeat-x;
margin: 0 auto;
text-align: center;}
#container {
border: 4px #99968F solid;
width:587px;
height: 724px;
margin: 20px auto;}
#tag {
text-align: left;
color: #64F81B;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color: #000000;}
#header {
width: 587px;
height: 135px;
background-image: url(../images/header.jpg);
background-repeat: no-repeat;}
#left {
text-align: left;
width: 202px;
height: 287px;
margin: 0 auto;
float: left;
padding-top: 39px;
background-image: url(../images/left_bg.jpg);
background-repeat: no-repeat;}
#main_content {
margin-left: 202px;
padding-top: 25px;
width: 183px;
height: 287px;
background-image: url(../images/main_content_bg.jpg);
margin: 0 auto;}
#right {
float: right;
height: 287px;
margin: 0 auto;
margin-left: 385px;
padding-top: 39px;
width: 202px;
background-image: url(../images/right_bg.jpg);}
#login {
clear: both;
width: 587px;}
#menu1 {
clear: both;
width: 587px;}
#menu2 {
clear: both;
width: 587px;}
#footer {
clear: both;
width: 587px;}
Hey all, I have been working on a site in CSS which looks pretty much how we want it to look in FF, however IE is giving me all sorts of problems. If you look at the following page http://www.mobileshop.com/3phones.com/viewphone.php in firefox you can see that the middle (white) column rests nicely between the two side columns, however, if you change to IE and look at the very same page then the middle column drops below the left side column. This is my first time at a css design and i cant work out why it is doing it, also the main logo is supposed to be centered, in IE it is left aligned. If you are viewing the source, you will see a tag soup of tables in the middle of the nice CSS, this is due to the fact that we pick up a feed and it dumps the data into our page. This will change to be pure CSS but i am running out of time to get the site launched first. One final question, i downloaded the Tidy HTML validator for firefox. I managed to get my pages passed the W3c online checker, but tidy claimed there was still errors. I went through and fixed all them to get a happy green tick but then when going back to W3C validation some things failed. I was under the impression that Tidy was developed by W3C, so why do they give varying results regarding validation? Thank you for your time. Hello, I have two columns, one is on the left and another in the middle (center). Left column is where I want it to be, central column is also aligned properly, however, it is below left column. I want it to be on the same level as left. See here see how it got below ? It is XHTML validated and CSS is fine too (some background color warnings). Plz help me to make central column go up. Thanks. this is bugging the hell out of me, cant find a working answer anywhere (i've tried a bunch of things) So I have 3 images for the top of my page and 3 images for the bottom. The page is enclosed in a div frame titled "frame" each of the 3 columns is enclosed in a frame "leftframe" "centerframe" and "rightframe" Each of the 3 columns has a top which is a fixed size image at the top, a middle which is just empty space for content to go, and a bottom which is a fixed size image at the bottom. Problem: I can't get any of the 3 column's bottoms to stick to the bottom of "frame" I've tried some code in here to do it and it doesn't work.. any help here? thanks! Code:
<style type="text/css">
body {
text-align:center;
height:100%;
min-height:100%;
padding:0px;
}
#frame {
width:800px;
height:100%;
min-height:100%;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
text-align:left;
position:relative;
}
#contentlefttop {
width:155px;
height:282px;
padding:0px;
float:left;
background-image: url(images/layout_01.gif);
background-repeat:no-repeat;
}
#leftframe {
float:left;
width:155px;
position:relative;
height:100%;
min-height:100%;
}
#contentleft {
clear:left;
float:left;
padding:0px;
width:155px;
padding-bottom:270px;
}
#contentleftbottom{
width:155px;
height:270px;
/*clear:left;
float:left;*/
padding:0px;
position:absolute;
bottom:0;
background-image: url(images/layout_07.gif);
background-repeat:no-repeat;
}
#contentcenter {
width:486px;
padding:0px;
clear:left;
float:left;
text-align:center;
min-height:100%;
height:100%;
padding-bottom:53px;
}
#rightframe {
float:left;
position:relative;
height:100%;
min-height:100%;
width:159px;
}
#centerframe {
float:left;
position:relative;
height:100%;
width:486px;
}
#contentrighttop {
width:159px;
height:282px;
padding:0px;
clear:left;
float:left;
background-image:url(images/layout_03.gif);
background-repeat:no-repeat;
background-position:top;
}
#contentright {
clear:left;
float:left;
width:159px;
padding:0px;
height:100%;
padding-bottom:270px;
}
#contentrightbottom{
width:159px;
height:270px;
/*clear:left;
float:left;*/
position:absolute;
bottom:0;
padding:0px;
background-image: url(images/layout_08.gif);
background-repeat:no-repeat;
background-position:bottom;
}
#contentheader {
width:486px;
height:135px;
float:left;
background-image: url(images/layout_02.gif);
background-repeat:no-repeat;
}
#contentfooter {
/*clear:left;
float:left;*/
width:486px;
height:53px;
background-image: url(images/layout_09.gif);
background-repeat:no-repeat;
position:absolute;
bottom:0;
}
#sitemessage {
margin-left:17px;
margin-right:31px;
height:90px;
text-align:center;
font-size:12px;
}
#wisemanquote {
margin-left:22px;
margin-right:24px;
height:85px;
text-align:center;
font-size:12px;
}
p,h1,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
#contentheader h1 {
font-size:14px;
padding:10px;
margin:0px;
}
#contentright p { font-size:10px}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">
<div id="frame">
<div id="leftframe">
<div id="contentlefttop">
<div id="sitemessage"></div>
</div>
<div id="contentleft">Left</div>
<div id="contentleftbottom"></div>
</div>
<div id="centerframe">
<div id="contentheader"></div>
<div id="contentcenter">
<p>Center</p>
</div>
<div id="contentfooter"></div>
</div>
<div id="rightframe">
<div id="contentrighttop">
<div id="wisemanquote"></div>
</div>
<div id="contentright">Right</div>
<div id="contentrightbottom"></div>
</div>
</div>
Hi All, I am trying to set a style in my CSS that will show a border-bottom for an entire row. So far I can only get it to work on a per cell (<td>) basis. I am using Dreamweaver MX 2004 and when I select an entire row and assign it a style, it just add's it to the <tr> tags at the top of those rows. Code:
<!-- This is a Row that is at the top of the table -->
<table width="100%" border="0" class="fullwidth">
<tr>
<td class="head">This is a header </td>
</tr>
</table>
<!-- This is where I want the border-bottom attribute to show up -->
<table width="100%" border="0" cellpadding="2" cellspacing="1" class="list">
<tr class="list">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="list">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="list">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="list">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="list">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Here is the CSS: Code:
table.fullwidth
{width: 100%;
background-color: #FFFFFF;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;}
tr.list
{background-color: #EFEFEF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
border-bottom: 1px dotted #000000;}
Hello, I can't for the life of me figure out how to get these thin white borders like on this website: http://www.viceland.com/index_us.php Is this done with a style sheet? I can't find any reference to a border. How is this done? Can any one suggest a better CSS script for having a border in IE So far I have the following: PHP Code: border: 1px solid #0099CC; The problem is that when ran in IE, the top border does not show. However it works fine in firefox. Also I get warnings on my script when I run my CSS validation tool. Can any one help. Thge URL is http://pfwd.org.uk/sfd/update_test3.php Hi guys, I am using the following css to style a content box: Code:
/*---------------- Start of Testimonies Content Box ---------*/
#testimonies {
WIDTH: 175px;
MARGIN: -85px 0px 0px;
POSITION: right;
height: 60px;
float:right;
BORDER-RIGHT: #d9ddb9 1px solid;
BORDER-LEFT: #d9ddb9 1px solid;
BORDER-BOTTOM: #d9ddb9 1px solid;
BORDER-TOP: #d9ddb9 1px solid;
PADDING-TOP: 10px;
PADDING-RIGHT: 10px;
PADDING-BOTTOM: 20px;
PADDING-LEFT: 10px; FLOAT: right;
BACKGROUND-IMAGE: url(images/bg-down-right.gif);
BACKGROUND-POSITION: 50% bottom;
BACKGROUND-REPEAT: repeat-x;
BACKGROUND-COLOR: #fafceb;
}
.testimonies-h2 {
PADDING-RIGHT: 3px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: #fafceb
}
#testimonies H2 {
PADDING-RIGHT: 0px; BACKGROUND-POSITION: 2px 3px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 100%; BACKGROUND-IMAGE: url(images/bg-h2.gif); PADDING-BOTTOM: 2px; TEXT-TRANSFORM: uppercase; COLOR: #8fa300; PADDING-TOP: 2px; BACKGROUND-REPEAT: repeat-x
}
/*---------------- End of Testimonies Content Box ---------*/
I want to add an inline frame inside the 'testimonies' div in my html but it keeps using the border styling of the css above. I tried using this to cancel it out (placing my inline frame in a span, but it did nothing) Code:
#testimonials {
border-left:none;
border-right: none;
border-bottom:none;
border-top:none;
}
HTML CODE: Code: <div id="testimonies"> <h2><span class="testimonies-h2">Testimonials</span></h2> <span class="testimonials"> <!-- ========== V-NewsTicker v2.2 (Freeware) ============= --> <script type="text/javascript" src="v_newsticker_1.js"></script> <!-- ======================= --> </span> </div> Is it possible to have more than one border in CSS? I want to have a grey and green border around an area of text, something like this. So is it possible to have two or more borders in CSS and if so, how? While styling table I would like to have black row border all the way, but currently cell borders (grey) overlay them (1px, but still) - like in the image: Bellow is my css. What do I change? Thanks. Code: .list_f {
padding: 0px;
margin: 0px;
border-width: 1px;
border-style: solid;
border-color: #F1EFE2;
border-collapse: collapse;
empty-cells: show;
border-top: 0px;
border-bottom: 0px;
border-left: 0px;
border-right: 0px;
}
.list_f th {
text-decoration:none;
font-weight:normal;
background-color:#F3F3F3;
margin: 0px;
padding: 2px;
/* text-align: left;*/
vertical-align:middle;
height:22px;
border-collapse: collapse;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #CCCCCC;
border-bottom-color: #000000;
border-left-color: #CCCCCC;
}
.list_f td {
margin: 0px;
padding: 2px;
border-collapse: collapse;
vertical-align:middle;
height:22px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #EBEBEB;
border-bottom-color: #000000;
border-left-color: #EBEBEB;
}
.list_f tr {
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #000000;
border-bottom-color: #000000;
}
Hello, I have a list that looks like this Code: <ul> <li><a href="#"> List item 1</a></li> <li><a href="#"> List item 2</a></li> <li><a href="#"> List item 3</a></li> </ul> ... and my CSS for the list looks like this Code:
ul {
margin-left: 0px;
list-style: none;
border: none;
border-top: 1px solid #000000;
}
li {
border-bottom: 1px solid #000000;
}
li a {
text-decoration: none;
border-bottom: 1px solid #000000;
border-left: 14px solid #82817C;
color: #FFFFFF;
background-color: #585752;
}
li a:hover {
text-decoration: none;
border-left: 14px solid #9D9E8E;
border-bottom: 1px solid #000000;
color: #FFFFFF;
background-color: #585752;
}
My problem is that I can't get the borders go the way I want them to. As you can see, the list items have two borders, a left border and a bottom border. The unorganized list-tag has one border, a top border. In both cases, the top and bottom borders are 1px in height, and the left border is 14 pixels in width. The ul's top-border is full width, meaning it starts at the left side of the page, while again the li's bottom-border starts AFTER the left-border... ok, that was confusingly explained. What I'm trying to achieve is that the li's left-border is over lapped by it's bottom-border - so that the bottom border looks just like the ul's top-border. Ok, if you put the code to your editing program and view it "in action" you should be able to see what I mean. So to summarize it all, how can I force the bottom-border to over lap the left-border? Thank you in advance, - Kimppa hi all, hoping someone could help me with an issue i'm having in css involving borders (sort of). hopefully this is the appropriate place for this question, as it does involve some html. i have a page divided into three vertical frames (i know, i know...frames are not ideal. but i would like to keep the page in this format for specific reasons). the border is set to "0" in each frame, but on the left and right frames i use a bit of css code to create a colored border on the right hand side for the left frame, and on the left hand side for the right frame (it creates a kind of vertical outline for the middle frame). hopefully this makes sense. after completely finishing the website and uploading it to my ftp, i found that it works perfectly, except when opened in firefox or navigator. when opened with either of these browsers, the content and most of the design loads fine, but the colored borders in the outer frames are offset from their sides maybe a quarter of an inch. i can't figure out what's causing it, but i know it has something to do with the border code. as i would like this site to be as compatible as possible with most popular browsers, i'd like to try and fix this somehow. i've posted my code following this message in hopes that someone could offer suggestions. any advice would be greatly appreciated. frames created in index.htm: Code: <frameset cols = "25%, 50%, 25%" border = "0"> <frame name = "side1" src = "blankleft.htm" scrolling = "no"> <frame name = "middle" src = "main.htm"> <frame name = "side2" src = "blankright.htm" scrolling = "no"> </frameset> colored border for the left frame (side1): Code: <style type = "text/css">
body
{
border-left: 0px solid #607046;
border-right: 2px solid #607046;
border-top: 0px solid #607046;
border-bottom: 0px solid #607046;
}
</style>
colored border for the right frame (side2): Code: <style type = "text/css">
body
{
border-left: 2px solid #607046;
border-right: 0px solid #607046;
border-top: 0px solid #607046;
border-bottom: 0px solid #607046;
}
</style>
Hey, searched so don't give me crap. I have 2 images, searchleft.jpg (looks like { ) and searchright.jpg (looks like } ) I only posted the Doc type just incase, I validated my webpage(www.gameyin.com) and nothing that could hurt this has happened. Anyway I want the rounded borders on the left center, for searchleft.jpg and a roundedborder for searchright.jpg on the right center. I hope I have been very clear. All the searches need 4 images...anyway... PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style type="text/css"> html { height: 100%; overflow: scroll; } body { font-family: tahoma, arial, sans-serif; font-size: 11px; background: #DEDEBA; margin: 0px 0px 0px 0px; color: #DEDEBA; } input, option, select, textarea { font-family: verdana, tahoma, arial, sans-serif; font-size: 11px; } .search { margin: 0px; padding: 5px 5px 5px 7px; width: 366px; height: 24px; float: right; } .input-search { width: 259px; margin: 0px 5px 0px 0px; padding: 5px; background: #DEDEBA; border-color: #666666; float: left; text-shadow: 808080; color: #808080; } </style> <script type="text/javascript" src="webfunctions.js"></script> </head> <body> <div class="search"> <form action="search.php" method="post" style="display:inline;"> <div> <input type="text" name="search" class="input-search" value="Enter your Search Query" onblur="if(this.value=='') this.value='Enter your Search Query';" onfocus="if(this.value=='Enter your Search Query') this.value='';" /> <input type="image" src="images/search.gif" /></div> </form> </div> if someone would, check out my testing grounds website... jon.endysis.org there are 3px #fff double borders going along each side of the layout (you can see them on either side of the space shuttle background) that are supposed to extend all the way down the layout, but only go until the end of the shuttle. I've learned that if I just have html br /'s after the the shuttle part they extend down for those, but for some reason don't extend down for my div class="contentleft" and my div class="contentright". if anyone wants to check my source, div id="racingstripes" is the layer that has the stripes, and it has ONLY the stripes. my css is: #racingstripes{ border-right:3px #fff double; border-left:3px #fff double; } any ideas please? i can't figure it out. thanks for any help! I have a small table that is not displaying borders in IE. On this page The section with Financial Aid and Parents should have a grey 3px border on the right hand side going from the header image to the person at the bottom. In FF it displays as intended. HTML Code: <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td id="finaid" class="finaid greybrdr"></td> <td id="parents" class="greybrdr"></td> <td id="students" class="students"></td> </tr> <tr> <td class="bod finaid greybrdr"></td> <td class="bod greybrdr"></td> <td class="bod students"></td> </tr> <tr> <td id="finback" class="greybrdr"></td> <td id="parback" class="greybrdr"></td> <td id="studback"></td> CSS Code:
.greybrdr {
border-right: 3px solid #e4e4e4;
}
.finaid {
border-left: 2px solid white;
}
.students {
border-right: 5px solid white;
}
.bod {
width: 183px;
height: 200px;
background-color: #FFFFFF;
}
How do i apply visible and formated border to a certain cells without afecting the entire column or row? Im using the border properties like: border-buttom-style border-top-style border-left-style border-right-style border-width border-color etc, etc, but when apply the style the colum or the row is affected entirely, this makes my top sliced image (header) with the separators visible. Im new to css and need some help in doing this. Thx I'm sure there is a simple solution, but I'm drawing a blank. I'm trying to line up absolute divs but running into an issue where IE includes the border in the width and Netscape appears to tack the borders on - so if I have a div with a width of 100px and a border of 5px, IE diplays 100px, inclusive of the border. Netscape appears to dispay a div with a total width of 110px. <div align="center" class="box" style="top:49px; left:111px; width:100px; height:100px"><br>Test<br></div> .box {position:absolute; border: 5px double black; font: 200 9px arial} Havn't been able to find the property that may control this. ???? |
|||||||