|
CSS - Opera Border-collapse Issue
Hello,
Here is an example of the issue I'm having.. http://www.patricksaviation.com/backend.php In Firefox and IE, the border color is correct, but in Opera the color is just black; this is caused by applying border-collapse: collapse. I tried adding, in addition to to the standard html bordercolor, a CSS border-color, which helped change Opera to a dark green (not the right color, but closer) but it also causes the border color in IE to darken (the wrong color). Does anyone know what causes this or how I could fix it? Thanks, Patrick 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 several adjoining tables (tables are stacked on top of each other) and I'm using css to set the borders using the following: border: 1px solid #FFFFFF; border-collapse: collapse; IE doesn't collapse the horizontal border of the adjoining tables (one table underneath another table). Mozilla renders fine (the horizontal borders collapse). Is there a way to get IE to collapse the horizontal borders on adjoining tables? Thanks for any help. -D- In IE-only.com Firefox is extending the bottom border of my blogTitle divs the lenth of the page. The other browsers are fine with the code. Tested on FC4, and IE was tested on XP Home. All are the latest versions (Fx:1.5, Konqi:3.x, Opera: 8.5, IE: 6.x). Why would Firefox do this? How can I correct this? Thank you. I've got such annoying thing when using border property for button: when I click on the button, which border is defined in CSS (i.e. not 'none' and has some width - 1px or more) I see some ghost rectangles appearing in certain areas of the page. These rectangles are just a garbage on screen, coz when I resize the page or make some other things like clicking on other button, it disappears... What's that and how can I beat it? Theres a small spacing issue thats only coming up in opera for the navigation on this site. It seems to be only 1px, but I cant for the life of me find out where its coming from. The hover background doesn't extend all the way down, as it does in firefox/ie. I think its some issue with top:32px; in nav ul li, but I don't know what the solution is. Any help is appreciated. Demo link at www.ryancolantuono.com/test Code:
body {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
margin: 0;
padding: 0;
}
#content {
color: #555;
margin: auto;
width: 780px;
}
/* ----------------------- HEADER ----------------------- */
#top-header {
background-color: #000;
height: 20px;
color: #eee;
border-bottom: #555 solid 1px;
}
#top-header .login {
float: right;
margin: 5px 10px 0 0;
font-size: .7em;
}
#top-header .login a{
text-decoration: none;
color: #70d5d4;
}
#mid-header {
background: #222 url("../images/mid-header.png");
height: 55px;
}
#bot-header {
background: #4eaead url("../images/bot-header.png") repeat-x;
height: 105px;
}
/* ----------------------- END HEADER ----------------------- */
/* ----------------------- NAVIGATION ----------------------- */
#nav {
float: left;
margin: 0 15px 0 0;
}
#nav ul {
margin: 0;
padding: 0 70px 0 0;
display: block;
list-style: none;
}
#nav ul li {
top: 32px;
display: inline;
position: relative;
clear: both;
}
#nav ul li a {
font-size: .8em;
color: #fff;
text-decoration: none;
padding: 3px 12px 3px 12px;
}
#nav ul li a:hover {
background-color: 70d5d4;
color: #000;
-moz-border-radius: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
padding: 5px 12px 5px 12px;
}
/* ----------------------- END NAVIGATION ----------------------- */
Code: <html> <head> <title>test</title> <link rel="stylesheet" type="text/css" href="css/main.css" media="screen"/> </head> <body> <div id="top-header"> <div class="login">Have an account? Login <a href="#">here</a>.</div> </div> <div id="mid-header"> <div id="nav"> <ul> <li><a href="#">Home</a> <li><a href="#">About Us</a> <li><a href="#">Portfolio</a> <li><a href="#">Links</a> <li><a href="#">Contact</a> </ul> </div> </div> <div id="bot-header"></div> </body> </html> I'm including some images within a UL. I've coded them in there to float. IE displays the list as I want but NN and Opera won't play along. In fact they both "get it wrong" in different ways. What am I doing wrong? (as you can see it is for a course and it is important to me to get it right not just good enough). Here's the address. The CSS coding is on the actual page for easy viewing. link Hey everyone, Just curious here, does IE and Opera have something that rounds corners like Firefox using CSS only? I figure IE would because it has some other stuff, but I am not sure sure about Opera. Any thoughts/links on this? Or will I have to fall back to Javascript? Hi all, I have a content div wrapping two inner divs. The widths of the inner divs (div A, div B) add up to the total width of the content div. div A is floated left. Everything displays correctly, until I put a 1px solid border on the content div. In IE 6, div B renders below div A. All margins and paddings are 0px. When I adjust div B's width to factor in the content div's border, the divs position correctly, but there is a gap between div B and the border. Can someone tell me why this is happening and how to fix it? Thanks in advance In a CSS I have a couple of styles defined for different tables. My problem is that on one table I want borders around each TDk and I don't want them around another. The only way I've found to affect the borders was to define a TD element, but that makes all the tables have borders. What do I do? Hey all, I am working on completely redoing our website (FizzPow.com) I have a border-right: on my left column in a wordpress template I am modifying. It looks fine in Chrome, IE9, Safari5, but in FF7, it moves my right column all the way down. Here's the site: FizzPow.com/newsite I am an experienced programmer but fairly novice with HTML/CSS. Please be kind and I very much appreciate your help! this is what happen... as you can see from the 2 images Mozilla does not use the border in the way IE6 does (it should be all around the images) why ??? Code:
<span class="minilogo"><img src="../images/minilogo/minilogo_armatabrancaleone.gif" border="0" /></span>
.minilogo {background-color:#fff;
border:2px dashed #88f;
}
the code will come from a php page with 4 gif in a row... thank you Roberto I'm building a series of navigation links in boxes on top of each other. I want to pad the links inside their div tags 3 pixels all the way around. I'm seperating the boxes using the border property, 1px solid on the bottom of each cell. The top and the bottom are handled in a seperate class. In firefox, the brower adds the 3 pixels to the overall width (maybe six since I'm padding left/right) so the page comes out like this: --------- | Link 1 | ------------- | Link 2 | ------------- | Link 3 | ------------- Now in IE, it looks correctly. I'm not sure which one is correct, but since IE looks right I assume it's correct. Any way to get the padding to be handled consistently in 2 browsers? 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? www . gameyin . com It shows as the border image twice. Er...I mean the image is showing twice and no matter what I do I can't seem to get the bottom part to stretch more to meet the content. I don't want to try pixels though because that wouldn't be fluid : \. Any help? Okay, I know this has been discussed a lot here and I did a lot of searching including reading through ie problem with drop down menu, but I'm still having a heckuva time getting mine to work. Here it is: http://www.jimandkris.com/test/verticalpopout.html When viewing in IE, on any parent menu item with children, it expands downward a few pixels when hovered over. I'm shooting for something like this: http://sperling.com/examples/menuv/ The *html hack isn't fixing it like I hoped. What am I missing? Second, and not as major, in FF my top border (in red) doesn't extend the entire length of the li for either the parent or the children. Thoughts on that? Thanks again! My site is: adventurevalley.ca/jason The current CSS file appears to work problem free in IE7 and FF, but Im having no luck in IE6. I realise things like the hover highlighting and menu indent will not work which I am fine with, however the corners and different box size are driving me insane. Can someone please point me in the right direction?! Thanks, Jason the 2 pages below have some general layout css issues, like too much white space above the grey line AND though they both use the same right bar (I uses a PHP include) the format is different in both. The green line is the toughest...it won't extend the height of the page. Any ideas? I attached my style sheet as well. thanks. http://bowtree.org/latest/luminaries.php http://bowtree.org/latest/index.php using css i've got a table in a div: e.g. div padding: 20px table width: 540px border: 10px solid red; result: the div including it's own padding should be 600px wide but using the html strict dtd ie is in strict mode (confirmed by other measurements) the whole width of the table is 540px including the borders. also setting box-sizing to contents . thoughts? I'm having some issues with getting a table border to appear in both Mozilla and IE. I had it working at one point but now it's stopped working in IE. Basicly this is the code to control it: border:1px solid #0; but IE doesn't read it, I've checked the rest of the CSS to see if there is any conflicts but found none. Anyone know how to get the table border to appear in both IE and Mozilla? I'm trying to put a 1px line on the bottom of my header that spans the width all the way. I've used border-bottom: 1px and border-style: solid; but I still have a looks like 3px border all the way around my header. Also I have my unordered list inside of my header div and it's placed directly below my header. Any help much appreciated, just learning how to layout. http://imgbin.org/index.php?page=image&id=6637 CSS code Code: body {
font-family: "Lucida Sans Unicode", sans-serif, Verdana;
background-color: #999999;
}
#header {
height: 75px;
width: 100%;
border: 0px 0px 1px 0px;
border-style: solid;
border-color: white;
background-color: #336699;
}
#container {
margin: 0 auto;
width: 900px;
height: 100%;
background-color: #666666;
}
#content {
width: 75%;
}
#sidebar {
width: 25%;
background-color: #666666;
}
ul {
list-style-type: none;
}
li {
display: inline;
}
and HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Jeremy</title> <link href="default.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <h1 class="header">Jeremy</h1> <ul> <li><a href="index.html">Home</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="forums.html">Forums</a></li> <li><a href="contactme.html">Contact Me</a></li> </ul> </div> <div id="container"> <div id="sidebar"> </div> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor dui sit amet diam molestie cursus. Vivamus a sapien sed nunc fermentum feugiat. Donec iaculis neque sit amet tortor consectetur eu lacinia est commodo. Ut lobortis fermentum felis, eu tristique elit fermentum sed. Etiam pulvinar commodo est non vestibulum. Aenean sed ante in velit vulputate tristique. Duis lacinia eleifend massa, sed volutpat dolor malesuada at. Nam convallis consequat mauris imperdiet rutrum. Aenean vitae vestibulum libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum lorem nulla, pellentesque vitae porttitor condimentum, dignissim a libero. In quis turpis orci, vitae faucibus risus. Duis tincidunt, libero tincidunt hendrerit viverra, felis lectus rutrum diam, et dictum mauris ipsum nec purus.</p> <p>Vivamus ut nunc vitae eros fermentum pretium. Nunc molestie odio vitae magna consectetur quis ultricies purus adipiscing. Curabitur ante nisl, scelerisque a consequat sed, rhoncus at turpis. Morbi blandit ante eu tellus facilisis eu semper enim auctor. Nunc sollicitudin orci nunc, vitae accumsan risus. Etiam nec est in ipsum iaculis varius. Nam enim velit, imperdiet viverra condimentum vitae, egestas eget dolor. Nullam facilisis condimentum diam, in euismod lorem mattis a. Mauris vel nulla et ipsum venenatis aliquam vitae a nibh. Nunc commodo ullamcorper odio vitae fermentum. Praesent faucibus blandit condimentum. Integer sed justo nulla. Praesent id gravida dui. Proin malesuada interdum scelerisque. Sed condimentum justo nec metus venenatis accumsan.</p> </div> </div> </body> </html> |
|||||||