Is there a way to get rid of the border on <hr> element in IE6 without a wrapping it in another element? Another requirement is no hacks, unfortunately.
I've managed to do it for all browsers by styling the border as such:
hr.clear {
clear: both;
border: 1px solid transparent;
height: 0px;
}
Yet IE6 still renders a 1-pixel white line.
display: none does not work because you're completely removing the <hr> from element flow. That causes it to stop clearing your floats.
If you're OK with completely hiding it, just use visibility: hidden instead. It will still clear floats, and this works on all IEs:
hr {
clear: both;
visibility: hidden;
}
So the problem is that IE does not consider <hr> borders as "borders". If you set
border: 1px #f0f solid;
... it'll add a fuchsia border around the existing bevelled border. Fortunately, Firefox and IE8 render this the same and realize that border: 0; means I don't want a border. Unfortunately, IE 7 and lower versions don't do this.
So to answer your question... no... there isn't a way to get rid of the border on <hr> element in IE6 without a wrapping it in another element or hacking it (I haven't found a way to do this from my experience).
Your options are either wrap the <hr> in a <div>, if you have a solid background color, set the color property to that of the background color, or use images for the background.
Option 1:
<div style="height:1px; background: transparent;">
<hr style="display:none;" />
</div>
Option 2:
hr.clear {
border: 0 none;
height: 1px;
color: #ffffff; /* if your bg is white, otherwise choose the right color */
}
Option 3... check this out: http://blog.neatlysliced.com/2008/03/hr-image-replacement/
Sorry that IE (older versions) doesn't play by the rules. I hope this helps.
How about this:
http://blog.neatlysliced.com/2008/03/hr-image-replacement/
Related
I have a table, that for one of its cells I am using the rule
border-right: 3px solid #000 !important;
It works fine on Chrome but in Firefox the border is invisible. I say invisible because if I deactivate the rule I can see the cells' contents move slightly.
-moz-box-sizing: border-box;
Did not help in any way as far as I can see.
So if you were to run this small example in Chrome, it would look fine. In Firefox you can spot some errors though (be sure to view at a wider width to see the error)
I have tried various other suggested option with no good results. The one closer to solving the issue was removing border-collapse altogether, but that makes all borders visible as can be seen from the image below:
Is this common for Firefox, and how can I overcome the issue.
One thing to try would be to add another block element inside of the table cell and apply your border style to that element. For example, you might try to do something like this:
<table>
<tr>
<td>
<div style="border-right: 3px solid #000;">My Content</div>
</td>
</tr>
</table>
Table cells like <td> and <th> are sized differently than regular block, inline block, or inline elements and so the borders might also get computed slightly differently depending on available space.
By using a <div> inside of your table cell, you can set it's width to 100% and it's height to 100% so that it covers the entire available table cell, then you can apply any border you like to the div and with box-sizing:border-box set on the div element, it should look the way you want. For example:
<div style="border-right: 3px solid #000; width: 100%; height: 100%; box-sizing: border-box;">My Content</div>
Here is more info on table sizing / box model quirks
I have updated your original jsfiddle https://jsfiddle.net/sfodcjkz/4/ with some of the minor tweaks
https://jsfiddle.net/sfodcjkz/18/.
The changes I carried over your fiddle are:
Removed empty <tbody> elements. Best practice is to group the body rows inside a <tbody>. Some modern browsers may auto correct the errors, but not all browsers are smart enough. So for consistency, we can avoid being dependent on smarter browsers.
Next I had problems with these css:
Line:349
.responsive-table thead {
clip: auto;
height: auto;
overflow: auto;
position: relative;
width: auto;
}
Line:258
.responsive-table thead {
border: 0 none;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
Simply removed those css styles and you can see a cleaner look.
It's a known 'bug' in Firefox. It's being caused by setting the border-collapse to collapse. One solution is to set the border-collapse to separate.
I'm having some trouble with margins when viewing http://happyhourproductions.co.uk/tv-commercial-production.html in IE11.
Under the 'More like this' section on the right of this page, if you hover over either of the first two linked images the associated margin appears to change. Moving the cursor off does not change it back, but moving the cursor over any of the other links in that column does.
I thought it might be this bug: http://haslayout.net/css/Percentage-Padding-Margin-Bug but neither of those solutions worked.
I also found this question that might also be the same but without any solution: IE9 img hover add's margin to bottom
Here is the CSS, it was built using Twitter bootstrap and LESS if that's important?
.work .sidebar .morelikethis {
border-bottom: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
margin-bottom: 10.2564%;
margin-top: 7.69231%;
overflow: auto;
}
and here is the HTML
<h2>More like this...</h2>
<p>
<a class="morelikethis" title="DRTV Commercials" href="drtv-production-company.html">
</p>
<p>
<a class="morelikethis" title="Animation" href="animation-production.html">
</p>
<div class="newsflash">
<a href="/news/2013/05/happy-hour-productions-launches-new-quickquid-drtv-advertising-campaign/">
</div>
Your problem is caused by the default CSS of IE11. You could fix this by setting all the margins to 'morelikethis':
.morelikethis:hover {
margin-left: some value;
margin-right: some value;
margin-bottom: 10.2564%;
margin-top: 7.69231%;
}
Make it shorter:
.morelikethis:hover {
margin: top right bottom left;
}
Also, I would suggest using a CSS reset so that the browsers' default CSS doesn't mess with the styling. Here is a good one: https://code.google.com/p/reset5/ Before including this script in your CSS, consider the fact that you will most likely end up having to redo a lot of your styling.
Here is an example: http://jsfiddle.net/7zhLm/5/
The image inside is larger than the div supports.
Therefore it is cropping the rest (overflow-x: hidden).
I am trying to create a white border around the image, but it doesn't seem to work.
After checking what's going on there with dev tool I saw that the lower part overlays the white border.
How to I fix that?
I see you're using both overflow-x and overflow-y. You can just use overflow:hidden; as it works on any browser while -x and -y are not supported by older ones.
Anyway, to avoid it you can add another <div>. Check the live demo, and here is the updated code:
<div id="fixed_event_1" class="splashTabLogout" >
<div>
<img src="http://www.twospy.com/galleriffic/demo/Sample%202.jpg" width="300" />
</div>
</div>
.splashTabLogout {
width: 300px;
height: 100px;
cursor: pointer;
background: #fff;
padding: 10px;
/* border-radius and box-shadow stuff */
}
.splashTabLogout > div {
max-width:100%;
max-height:100%;
overflow:hidden;
}
JSFiddle
You tried to set a border with a padding. Change it to a 10px white border.
The HTML you have is fine. It's semantic, simple -- don't change it. Change the details about it, and fix the CSS, and you'll be rockin': http://jsfiddle.net/7zhLm/9/
CSS
.splashTabLogout {
border: white solid 10px;
border-radius: 3px;
box-shadow: rgba(0,0,0,.22) 0 2px 6px;
overflow: hidden;
}
.splashTabLogout img { width:300px }
HTML
<div id="fixed_event_1" class="splashTabLogout" >
<img src="your-pic.jpg" />
</div>
Note: Including width/height inside an img tag is valid. Period. In a gallery of images, or anywhere else, where you may have multiple images with the same dimensions, it's often easier, and less code to declare the width/height from the CSS file. FYI
In Internet Explorer versions 8 to 10preview, when an inline-block div gets a property of "direction: rtl;", it's background will overflow 1px beyond the border on the right.
Here's a Jsfiddle demo: http://jsfiddle.net/8KgvB/6/
(Creating this demo was a headache by itself because IE doesn't like Jsfiddle [or vice versa] but that's a different story altogether)
IE7, obviously lacking inline-block functionality, doesn't have this issue, even with the zoom:1 hack.
Is this a bug? or did I simply miss something? Maybe someone has a workaround.
Thanks!
Stupid IE... facepalm
here's a "fix" for this glaring bug in IE. you just use a wrapper with the rtl attribute.
Edit
I was informed that just posting a link is not a good idea on SO so here's the code too :P
div.outer {
border:1px solid black;
line-height:60px;
width: 100px;
text-align: center;
display:inline-block;
background-color: red;
}
div.inner {
direction:rtl;
}
I'm trying to eliminate the extra bottom margin that both FF and Chrome seem to give to Textareas. Surprisingly IE seems to do it correctly. I would like to avoid using conditional includes but CSS3 tweaks are OK.
Sample Code
.red-box {
background-color: red;
overflow: hidden;
}
textarea {
border: solid 1px #ddd;
margin: 0px; /* Has no effect */
}
<div class="red-box">
<textarea>No Margin Please!</textarea>
</div>
By default, I believe both Chrome and Firefox will set these elements as display: inline-block;. Set display: block in your styles and you should be all set.
If you want to leave it inline, simply try
vertical-align: top
Set display: block for your textarea.
Just bit by this in 2022 Chrome!
<textarea> has a default of vertical-align: baseline, which visually manifests as excess bottom margin.
Interestingly, none of the most popular reset/normalize stylesheets change this property. In my personal reset, I have added:
vertical-align: bottom
Just disable resize as follow
textarea{resize: none;}