|
CSS - Malfuncting Border For Div's Border-style When Set As Double. Why?
I'm a little puzzled by this weird display bug by IE7, this bug doesn't occur in IE6. It had to do with the DIV's CSS's border-style.
If you set it to double then you notice some random bugs with it. Some of the time, the border is displayed without a problem. Some of the time, it is displayed with some gaps in the line as if it is not being drawn upon. Some of the other time, it is not displayed at all. I noticed if I switch from one tab to another then back, the border appeared as if nothing had happened. I also noticed that if I open the view source that overlapp the web browser then closed it, the border appeared as if nothing had happened. How do you fix that problem? Thanks... Similar TutorialsI have painted myself into a corner, and it's time to paint myself out...Hopefully with help from someone here! For the images on my website, I have added a two color border around every image (in Photoshop)...A 1-pixel green border (#6e888f) on the outside of the image, and then a 1 pixel white border just inside that. See example he mableyhandler dot com As I add more and more images to the site, it is getting harder to keep up with adding the border in Photoshop every time. Is there a (semi-easy) way to do this in HTML? OR maybe in CSS? The challenge is that it needs to be a double border...And, it needs to be a permanent design element (the image is clickable, but the border colors should not change on rollover). Thanks very much I want to apply this style to a Table TD cell: Code: border-bottom: 1px solid #D2D7DD; It works fine in firefox but not IE, as with many things. Any get-around for this, something that IE would be happy with? Thanks. heya! sorry if this is a real stupid quiestion/in the wrong area, im a bit new to css and this forum! Im wondering if there is any way to have a border only apply for part of a box... ie only the first/last 50% or 250px of the top and bottom borders. Hope this makes sence. Any help appriciated, even if it is to say it cant be done. I have the following code in my page for the links styles: Code: a:link, a:visited, a:active {
font-weight: bold;
color: #000099;
text-decoration: none;
background-color: #C4E4F7;
border: 1px solid #000066;
}
a:hover {
font-weight: bold;
color: #FC6103;
text-decoration: none;
background-color: #FFEAD5;
border: 1px solid #974B00;
}
The thing is, that in firefox, the code works fine, but on IE the top and bottom border sections are not displayed... Can't understand why... Any ideas how to fix it? Hello, Code: <table border="1"> <tr> <td class="norightborder"> Two cells, </td> <td class="noleftborder"> but no borders between them. </td> </tr> </table> Code: .noleftborder {
border-left-style: none;
}
.norightborder {
border-right-style: none;
}
I notice a pixel gap between the two cells and it's annoying me. How do I get rid of it? Thanks Rogier I would like to create an effect similar to the one found on http://www.macromedia.com that when you click in the search box, the edge of the searchbox changes color. I know how to change the color of the box, but I do not know how to make the box switch whenever it is clicked on or in focus. Can anyone help me? I have the following defined in my css file: Code:
table {
border:1px dashed #999;
}
And the following code interspersed throughout other parts of my code: PHP Code: echo "<table nowrap border=\"0\">"; The problem I have is that the border is still appearing around these tables where I have specified no border. As I understand, the inline style should take precedence, right? Is this a php issue? Or am I doing something else wrong? Hi, I have created a component which is wrapped inside a div element. Is it possible to set the border of the div element similar to the borders shown by default for a select drop down? thanks and regards, Sim085 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>
I am at a total loss on this one. I'm trying to create a simple inline unordered list menu - no problems there - I've done that plenty of times. However, this time I would like my menu to have a border around it instead of being a plain box. As soon as I add the 'border-style:solid' modifier to the div, the text misaligns straight down, roughly 15px lines, out of the box. This happens on Firefox (and apparently on Opera as well, though I haven't checked that one myself). At this point I've stripped the page to bare bones, switched from transitional to strict, tried float vs not, tried margins vs 0 margins, and padding vs 0 padding, relative vs absolute, and attempted to manually shift the text through negative positions as well. No joy. Css: Code: /* Navigation */
#nav {
width: 821px;
height: 18px;
border: 1px;
border-style: solid;
border-color:red;
}
#nav ul {
}
#nav li {
display:inline;
float:left;
background-color:#9E0C0C;
text-align:center;
color:white;
font-family: arial, san-serif;
font-size: 14px;
font-variant: small-caps;
}
and page: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" > <link href="style.css" rel="stylesheet" type="text/css" media="screen"> </head> <body> <div id="nav"> <ul> <li>Home</li> <li>XXX</li> <li>XXX</li> <li>CCC</li> <li>HHH</li> <li>JJJ</li> <li>kkk</li> <li>KKK</li> </ul> </div> </body> </html> (As I said, I've stripped it to absolutely nothing else.) Any suggestions would be welcome. (ETA: Also tried changing text size in case a too-large font size was making the text 'pop out' of the box. That is also not it.) I would like to set up a table with a different border than the cells inside it. Here's my code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
<style type="text/css">
TABLE {border: 1px solid black; border-collapse: collapse; width: 200px}
TD {border: 1px solid #ccc}
</style>
</head>
<body>
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
That's all hunky dory in (gasp!) IE, but good browsers...they only show the lighter gray color. How do I get the table border to be different? Hi, This used to be my solution: Code: <table border=1 bordercolorlight='#CCCCCC' Bordercolordark='#FFFFFF'> But this only works well on IE - not Mozilla Now I want to use CSS: Code:
.results {
border: 1px solid #CCCCCC ;
}
Code: <table class='results'> --------------- The problem is, with CSS, only the TABLE acquires the border property. The cells within it don't. If I specify Code: <td class='results'> for all the cells in the table, this also won't work, because the cell borders overlap each other and some border lines seem thicker than others (because of overlapping). Is there any simple way I can specify the border property for the table - in ONE declaration? I want the table and td borders all to be a simple 1px width ...is that possible in one declaration? Thanks a lot! How do you create an inner border around a table in css, rather than a "solid" border which creates a border line around the table on the outer half. The border needs to butt up against an image, rather than leaving a pixel space. This is the coder I have so far. Nothing big: Code:
.solid {
border: solid 1px #000000;
}
Thanks. Hi, I'm a total newbie when it comes to .. well everything. HTML, CSS etc ... I'm working on a little site, but I have a problem on (apparantly I can't post the link to my site because I'm a new user.. ) In Firefox everything is OK. But in IE when I hover over the bottom Div's (delphi.exe file) and (Delphi-files) I get a solid border instead of a dashed border as I wrote down in the CSS. Any idea what the problem is? Is it needed for me to post the CSS file? Might be a little bit embarrasing as it's probably the most rediculous CSS file you've ever seen. Thank you for your time. Hi, I am trying to box around a text, but what happen is that when I setting up borders for it, it shows the box expand longer than the text. Is there a way to have the box just as big as the text (Well, slightly bigger, but just enough for the text)? I thought border-collapse:collapse would do it, but apperantly not. This is the CSS code I am using: PHP Code: div.submenu1 { position: relative; left: 22px; padding: 4px; border-style: solid; border-width: 0px 1px 1px 1px; border-color: #0000FF; border-collapse: collapse; background-color: #3399FF } And on the html it's: PHP Code: <div class='submenu1'> <a href='somelink' class='submenu1'>somelink</a> </div> I'm having trouble with image borders showing up in browsers- From my style sheet: img { border: #FFFF91; border-width: 5px; } It's weird- it works on my header image for each page, but not the rest of my images... I tried to post the link, but I just registered today and this is my first post, so I can't... Much, much thanks for any help! claytablet Hey on my website: http://www.chamillionairechat.com I want there to be a border around the mainmenu and to look something like this: And this is the css i'm using for the mainmenu: Code: .mainmenu { background-color:#FFFFFF; padding-bottom:5px; border:1px border-color:#21511F; }
So does anyone know what i'm doing wrong Thanks OK, I'm doing the ALA trick where you construct a menu from an unordered list and its list items. Very watered down example here but suppose my menu consists of a horizontal row of text links, with each link separated by a vertical line. In my CSS I am giving the <li> container a right border that is 1px thick and black. This creates the vertical line for each link. The problem here is that the last link in the menu should not have a vertical line following it. I thought this would be an easy fix - I created a style that rendered no borders and called it via the class attribute of the <li>. Unfortunately, this dis not make the border disappear for the last menu item. All other properties defined in that style are rendered properly but the border property set in the <li> will not be overridden. Here's some code: Code: #bdrtest ul {
margin: 0;
padding: 0;
list-style: none;
}
#bdrtest li {
float: left;
padding: 0;
margin: 0;
border-right: 1px solid #000;
}
#bdrtest li a {
padding: 2px 10px;
}
.noborder {
border: 0;
}
and Code: <div id="bdrtest"> <ul> <li><a href="#">hello</a></li> <li class="noborder"><a href="#">world</a></li> </ul> </div> Now, if I use an inline style to remove the border, it displays as expected: Code: <li style="border: 0;"><a href="#">world</a></li> It also displays as expected if I redefine the scope of my style: Code: #bdrtest li.noborder {
border: 0;
}
I'd like to be able to use my .noborder style globally. Any idea as to what I'm doing wrong? OK, so I have a grid from a table. I have it so each td has a boarder on the top and left side - the td to the right/down of that is supposed to make up the boarder of the bottom and right hand side of the first td. However... there is a 1 pixel gap where they don't connect... obviously because this space is reserved for a boarder that originally would be there. Is there any way to get rid of this gap? Thank you. I'm making a dashed border, and I was wondering how can I change the pixel size and color of the border? It's been awhile for me since I've used CSS or HTML but here's what I have(I know this isn't the proper formatting, but it's for a xanga site so the way it's entered doesn't really matter =\) <style="text/css"> #box { border-style:dashed; width:700px; position:absolute; } </style> <div id="box"> <div id="da"><p>Da..daa...da da Da</p> </div> <div id="muh"><p>muh numa nah</p> </div> </div> |
|||||||