|
CSS - Div Border Problem 0px Or 1px In Ff And Ie
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 Similar TutorialsHi. 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 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. Sorry problem solved! 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? 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. 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. 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. 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!! 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) The problem page is http://chris.paing.com/version5/index.php. I used suckerfish drop-down menus in that yellow menu (hover over Mission In Canada and you'll see it working). In IE6, the bottom-border of the drop-down menus does not appear until you hover over the actual dropdown (the nested <ul>). If you move your mouse off it and then put it back onto the drop-down menu, the border is still not visible. Now, if I change the 'display:block' in '#menu2 li li' to 'display:inline-block', or if I add 'height:1%' to '#menu2 li' then once you hover over the actual dropdown, the border will work correctly unless you refresh the page. However, it is still missing at first. The problem is not an overlapping background because if you look carefully you can see the border is being added to the bottom of the menu, as opposed to suddenly appearing through the bottom edge of the menu. Any solutions? Alternatively, any ideas as to which IE bug this might be? Hi, I have a problem with the css for the following page: http://www.designdictator.com/ For the img in the log i do use the following css: #content img { display : block; border : 1px solid #999; padding : 4px; margin : 20px 0; } but in IE6 the padding between the border and the img doesn't display. Firefox does all right. What's wrong? thanx jarra 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. I'm having a slight problem with the appearance of the border for the DIV below the navigation bar. Firefox runs the border through the entire width of the DIV, but IE stops the bottom border as soon as the last <LI> is reached.. Any ideas guys? Thanks in advance. http://www.manliusvillage.org/test/index.html The related CSS is below: Code:
#navigation{
height:2.2em;
line-height:2.2em;
width:758px;
margin:0 1px;
background:#578bb8;
color:#ffffff;
}
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ffffff;
border-bottom:1px solid #ffffff;
white-space:nowrap;
}
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}
* html #navigation a {width:1%;}
#navigation .selected,#navigation a:hover{
background:#80b0da;
color:#ffffff;
text-decoration:none;
}
#sublinks{
float:left;
height:1.4em;
line-height:1.4em;
width:758px;
margin:0 1px;
background:#578bb8;
color:#ffffff;
}
#sublinks li{
float:left;
list-style-type:none;
white-space:nowrap;
border-right:1px solid #578bb8;
}
#sublinks li a{
display:block;
padding:0 5px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}
* html #sublinks a {width:1%;}
#sublinks .selected,#sublinks a:hover{
color:#000000;
text-decoration:none;
}
Hi, ive been using border-radius to add some corners to things. Ive applied the border-radius.htc patch that is around to get it work in IE. Our site is built using a software package called actinic. In the software preview, and by previewing the page everything works fine. ive now uploaded the website to a test server to check on everything and it no longer works. how ever it does work to some degree in compatability mode. as a tempory measure I have added <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> to the page. which seems to work, but for some reason, on the last few items on the page it doesnt work. Please see link to see what im on about. any ideas? surftest.glowormdigital.com/acatalog/Mens_Billabong_Tee_Shirts.html Thanks. I've written a menu in css and I want to show the user what page they are on by having a little block of colour next to the link that they are on. This link should explain it better: http://www.midwivesonline.com/test.html at least it will do in everything but IE6 on windows where it stretches out too far to the right. The problem lies in the css: http://www.midwivesonline.com/styles/test.css In particular: .currentpagep { padding-right: 155px; border-right: 5px solid #85306B; } If I set the padding-right to just 5px then it's perfect in IE6 but screwed up everywhere else. From the tests I've done I don't think that it's a doctype issue - but then again not sure what the solution is... I'd really appreciate any help on this, Cheers, Tim i have created a profile at www.studavis.co.uk/audio - all done in css. The site renders fine in Internet Explorer (as expected) but when shown in Firefox there are problems. Firstly, I can't see why the border only goes along the top, despite specifying that it should go all the way round. I have a suspicion it has something to do with the floats on the two columns, though I am not certain on that. Also, the #conatainer id, despite having a background colour specified, it doesn't show through. Secondly, i need to fill the bottom of teh right column, so that it fills the same height as the larger left column. I have been racking my brain on these for the past few hours so any help is GREATLY appreciated. thanks stuart I've got a layer on my page that I'm showing and hiding through javascript. The layer is positioned absolutely and given a position of right: 0 and bottom: 10px in the CSS file. Now in one case I actually went into the page and did an inline style to change the position. So that one is given a different position, top: -5px and left: 10px. In IE it works fine. In Firefox the border sometimes won't expand to enclose the box. Here's what I've found: -Take out the position from the CSS file and position with inline style -- works. -Leave the position in the CSS file and don't position with inline style -- works. -Leave position in CSS file and change right to left and change to any value -- works. -Leave position in CSS file and change bottom to top and change to any value -- doesn't work. So the big culprit here seems to be defining a position with bottom and then switching to top causes Firefox 1.5 or 2 to fail. The same thing seems to happen in Opera 9. This seems like a bug, but why in multiple browsers? I've tried floating things within the box, setting the overflow to auto, nothing seems to make the border expand around the box. Any thoughts? This time, problem is at the left navigation menu. There should be a 10px border on the left side of Denim. It appears fine with firefox but it does not appear at all with ie. Please view the attached image. Or view at : http://www.refinethetaste.com/html/...s&CATEGORYID=16 |
|||||||