|
CSS - Weird Opera Behavior With Css Border Property
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? Similar TutorialsHi! Let's consider this XHTML: (I've put the CSS in a style attr. for conciseness) [HTML] <div style="width:100%;height:70px;background: #D10C23;display:block;">dfsdfdsfsd <img src="haha.gif" width="1000" height="50"></div> [/HTML] Now, if you make the browser window in FF or Opera less than 1000 pixels wide (a horizontal scrollbar appears), and scroll to the right, you'll see that the background color doesn't span until the end of the page. Why is this? Thanks OK, this is a new one to me. I'm building my first CSS-only site, and am quite happy with the way it's going, but have discovered something quite odd today. When viewed with IE, the browser handles text selection VERY oddly, not allowing users to highlight a block of text to, say, copy to the clipboard. Try it yourself: http://www.theatrebayarea.org/v2/ Any idea what this is about? It's not a huge bug, but I'd like to be able to fix it. Needless to say, non-IE browsers handle it fine. -D I'm trying to get my show/hide script working in Opera 6 and having no luck. So I know I can set CSS properties with JavaScript in Opera 6 (I'm testing on Mac) as I've managed to make it work with the visibility property. However doing: Code: document.getElementById(el).style.display = 'block'; does nothing... if I do an alert on the display setting of the element it always says undefined. I've also tried doing a className switch, but doing this : Code: <div id="el" class="hidden">...</div> alert(document.getElementById(el).className); Also gives me a 'undefined' message. Opera 6 is the only thing that's playing up on me at the moment so any help would be greatly appreciated. -D Here's the problem: aparently Opera places an inverse color highlight on links that receive the keyboard focus (see Javascript Development: How do I hide focus on Opera?), and I'd like to hide it. CSS3 property
Code: outline-style is useless here, and I've also tried setting the JScript Code: hideFocus property, but aparently this only works on IE. In fact, I've tried everything I can think of except blurring the link, which would completely defeat my purpose. I tried Javascript Development and got nothing, so maybe the answer is not Javascript. Is there possibly some proprietary CSS extension in Opera that would hide the highlight? If so, what is it and how do I use it? I'm currently working on the CSS template for a new client and running into a strange issue. The design calls for a separation bar of repeated background to resemble a negative strip (site is a portfolio piece for a commercial photographer), and below that the continuation of a gradation. For some reason, however, in Mozilla-based browsers a gap (visually as if it was a top margin) is appearing in the background repeat (gradation) in the pageblock. To see it, visit http://www.spearsphotography.com/test_index.html in Firefox or another Moz browser. The strange thing is... I noticed the contained news items were not being pushed down (that is to say, it wasn't a margin issue). I tried changing the CSS definition of the background image position on the div, etc. Finally to see exactly where the browser was drawing the div, I set a 1px green border on #pageblock. Oddly enough it fixed it! (weird, huh?) This is especially strange since the float: right; div with the splash image -is- affected by the mysterious "margin". You can see that by going to http://www.spearsphotography.com/test_index2.html. (Contains an inline style to add the border to #pageblock The css file is at http://www.spearsphotography.com/css/style.css I just don't get it. This was all coming together so quickly from the Photoshop mockups, and now a brick wall that is driving me mad. Trying to use css to make a border around an element, and am using: .navbar { border: 1px solid red; } In IE, it puts a border around the navigational bar, but in FF, it only puts 1 line above it. Even if I try independently adding: border-left border-right border-bottom etc, it only shows above for border-top and border-bottom and nothing for left and right. I can place the code if needed, but I really just have a few words typed to try and get this to work. It's of strict doctype if that matters. Does FF have something special I need to add to get border to work? Thanks. 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 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;
}
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. As you can see, the image that says view all clients has a blue border on top and to the left also. There are no borders set for this image so I am not sure why its there. It does not show up on safari, just firefox. (I am not sure about IE since I am on a mac). Here is the code: .view_all_projects{ width:245px; height:63px; position:absolute; overflow:hidden; margin: 550px 0 0px 0; } And here is the html: <div class="view_all_projects"><a href="http://www.bestdropshipper.net/order.html"><img src="images/more_project.gif" alt="Best Dropshipper"/></a> </div> This image is also clickable. Any ideas why the strange blue border? title doesnt really explain it, but i cant really explain it well in 1 line. code I use is at bottom of the post but using the below code. If I take out the border-top declaration in #bodycontainer, it seems to lose the margin-top that is declared in the flashcontainer. when i say lose, the background-color of the bodycontainer no longer exists above the flashcontainer. it seems as the flashcontainer overlays the parent and moves up or whatever, if that makes any sense. this is in Firefox 3.0.3 code validates as transitional (and even strict if i change the doctype) i cannot figure out why either. i've used firebug to see if any CSS was overriding, but it doesnt seem to be any 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" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
}
#bodycontainer {
width: 960px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
background-color: #000;
border-top: 1px solid yellow; /* remove this line */
}
.flashcontainer {
width: 950px;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
border-top: 1px solid red;
}
-->
</style>
</head>
<body>
<div id="bodycontainer">
<div class="flashcontainer">
<img src="images/home_flash_area.jpg" width="950" height="240" alt="flash container" title="flash container" />
</div>
<h2>Some Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doamet, consectetur adipisicing elit, sed do.</p>
</div>
</body>
</html>
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. 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'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... 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! Hi. I have noticed a strange behavior with my CSS and I cannot figure out a way to fix it. I have some css to override the body tag style. It sets the font family and size. I need to do this. However, when I use the font-size in the body, it adds extra pixels to a set of span tags that I use. (see attached picture). Here is my code. Does anyone know how I can include the font-size in the body, but not have that extra space in my div tags? Note: the sample image contains images on the edge of the tabs, but their presence has no effect on the issue. Also, this is for IE 6 on Windows. Thanks, Dave Code:
<html>
<head>
<style>
body
{
font-family: Tahoma,Verdana,Arial,sans-serif;
font-size:11px; /* with this line, extra space appears */
}
.tab_off
{
height:17px;
overflow:hidden;
cursor:hand;
}
.tab_off_text
{
background:#ACA899;
height:15px;
font-size:10px;
border-top:1px solid #aaaaaa;
border-bottom:1px solid #ECECEC;
padding-left:4px;
padding-right:4px;
vertical-align:middle;
}
.tabbed_panel
{
background:#ECE9D8;
border-left:1px solid #666666;
border-bottom:1px solid #666666;
border-right:1px solid #666666;
width:400px;
height:400px;
}
</style>
</head>
<body>
<div id="pnlTabs">
<span class="tab_off">
<span class="tab_off_text">Tab One</span>
</span>
</div>
<div id="pnlContent" class="tabbed_panel"></div>
</body>
</html>
Go to this page in Firefox 1.5, and view the post titled "The Definition of a Know-it-All". Notice that the first letter of this post does not line up with the second line as it should. The line itself has moved one or two pixels up. This bug appears to be triggered by these factors (all must be present):
Firefox 1.5
First letter is floated
First letter is "I"
Paragraph is two lines long
Browser is in Standards mode
It looks fine in 1.0.7. It looks fine when the letter is not "I". It looks fine if the paragraph is longer than two lines. And it looks fine if you disable the DOCTYPE tag! What could be causing this? And is there a workaround I could use? Why is this? Code: <div style='margin:0 0px 5px 3px;text-align:center;background-color:#EEEEEE;padding:4px 0;border:2px solid #CCCCCC;'> <span style='color:#888888;font-weight:bold;font-size:10px;'> RECENT BLOGS </span> </div> different than this? Code: <div style='margin:0 0px 5px 3px;text-align:center;background-color:#EEEEEE;padding:4px 0;border:2px solid #CCCCCC;'> <span style='color:#888888;font-weight:bold;font-size:10px;'>RECENT BLOGS</span> </div> Why is IE7 adding its own padding when i don't add a nl between the span and the content within the span? It's the display:block issue that also happens with images. But I just can't understand why IE7 would add spacing there, the 2 above are almost identical. |
|||||||