|
CSS - Borders Not Showing In Ie
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;
}
Similar Tutorialshere comes the code: the frame set code: Code: <frameset rows="50,*"> <frame class="top" name="top" src="top.html" frameborder="0" scrolling="no" noresize> <frameset cols="100,*"> <frame class="left" name="leftFrame" src="menu.html" frameborder="0" scrolling="no" noresize marginwidth="0"> <frame class="right" name="rightFrame" src="wweams.html" frameborder="0"> </frameset> and the stylesheet adding a dashed border: Code:
frame.top
{
border-bottom-style: dashed;
border-width: 1px;
}
frame.left
{
border-right-style: dashed;
border-width: 1px;
}
now when I load this in IE 6.0 it works fine, but in netscape 7.1 the dashed borders just don't show? what the deal yo? -raymond Hi there, Everyone: Firstly, I am a CSS noob... My site is: wwwDOTincenseforpeaceDOTcom (change the word DOT to a . please, new users are not allowed to post URLs on this forum. Thanks) I have a red background gif on my site. In firefox, it looks great. It DOESN'T show through the cell borders of the main table. However, it is showing through the cell borders of a table in Internet Explorer (at least IE 8, haven't checked with earlier versions of IE). Any idea on how to get it to stop showing through on IE? This is what I THINK is the main table CSS (I told you I am a noob when it comes to CSS). #content-container{ clear:both; width:100%; border-style:solid; border-color:#666666; border-spacing:0; border-width:0 0; /* was border-width:1px 0; before */ padding:0 0 0 0; margin:0; /* ie6 min-height hack */ height:270px; max-height:270px !important; Thanks in advance. img { border-width: 1px; border-color: transparent; } this is the code i used in my css sheet to invalidate the borders around the linked images. for some reason every other way i tried it was messing up my drop-down menu. now the only problem i have is that ie still shows the text-decoration. at the moment i haven't applied text-decoration none, but i have tried it and nothing worked. any other solutions? here's the page i'm applying it to:: page Hi, I had this working but somehow it's not working again. The problem I am having is that scroll bars are showing up in my iframe in Firefox, Opera, and Safari, but not IE7 and IE6. Here is the link: http://www.caillouette.com/NewCatsMeow/ I know I need to tighten up my style sheet, but if someone could tell me how to solve this, I would be very happy. Here's the iframe code in the index page: Code: <div id="bodyInfo"> <iframe name="mainBody" width="770" height="602" src ="body.html" scrollbars="NO" border="0"> </iframe> <!-- end #bodyInfo --></div> 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 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;}
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? 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? 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 there anyway to make a border smaller so that it is not bigger on the right side than on the left (i.e. On the left side, the border line is right at the edge of the picture while on the right it's about a mouse cursors length away.) Hi I'm currently testing my code within the firefox browser and have found that no borders appear whatsoever. I was using the dotted border however changed it to solid to see if that made a difference however this did not help. The css I use for the <div> is as follows: Code:
.div_surround {
width:185px;
min-height:200px;
float:left;
margin-top:5px;
margin-right:5px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
border-left-style: solid;
border-left-color: #CCCCCC;
border:1px;
}
I know a lot of people dont like the width to be specific pixels however unless this makes a difference to my situation, please ignore this for the time being. I am looking to change it in the future. By the way this code works fine in IE where I see a box with a bottom and left border. Thanks in advance for any help. Billabang! 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 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>
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;
}
i want to tell an iframe to fill 100% width, but have a border of 1px this will cause horizontal scrolling since the width property does not include the border in its calculation. how can i do this? q) In CSS or html, how can make my buttons and borders around a screen section ( created with css) have roundish borders and regular not corners q) How can i get the colors of such buttons to be a bit more exciting eg go from ligh to dark blue instead 1 uniform color? Hi, Im not sure what the problem is with my code, but it gives me full borders when I ask for only top and bottom. Here is my CSS. css Code: Original - css Code .logo{ width: 100%; border: 1px solid #FFFFFF; font-size: 32px; } .menu{ width: 150px; height: 320px; border: 1px solid #FFFFFF; text-align: left; } a.menu{ border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; color: #FFFFFF; width: 100%; }
.logo{
Here is my html of that part. html Code: Original - html Code <span style="float: left"> <div class="menu"> <a href="" class="menu">asdf</a><br /> <a href="" class="menu">asdf</a><br /> <span style="float: left"> <div class="menu"> <a href="" class="menu">asdf</a><br /> <a href="" class="menu">asdf</a><br /> Here is what it outputs. http://blacknine.net/test.html I am trying to make a nice thin border around a table and all the table cells. It need to work on both windows and macs... If I add this to my table tag [ style="border-collapse: collapse" bordercolor="#808080" ] it give me a nice border in IE, but not so great on a mac (big and thick). I also want to be able to add it into a style sheet and just add the style tag to the table, but I can't seem to get any of it to work. Anyone have any examples or advice? Thanks! I have a onMouseOver event that draws a top border over text. This works fine with Mozilla/Firefox, but it doesn't render in IE. I think I know why -- it's because I used CSS to position the text beforehand, and in IE it doesn't bother drawing the top border because it's out of the text's bounding box, right? So, how do I fix this so it works in IE? I've posted a sample page with the problem he http://aaron.verge-rpg.com/vergebrd/test.html Any help would be appreciated. |
|||||||