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.
Related
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
I have a problem with an link's background.
For my exam this must work on all browsers down to IE 6. Problem is I am using a background image that should be positioned on the left of the links, but if the link is longer than one line IE 6 gets confused and positions the background image centered left, not top left...
I am using a 2colors .gif image and the anchor tag is located as follows
<style>
#right-menu {
float:left; width: 260px; border: 1px solid #e7e7e7; margin-left: 20px;
padding: 15px 20px;
background-color: #f6f6f6; min-height: 715px;
}
#right-menu .title {
font-size: 1.5em; color: #4a493f; font-weight: bold;
}
#right-menu a {
color: #4b4a41; font-size: 1em; padding-left: 15px;
background: url(../assets/bullet2.gif) left no-repeat;
display: inline;
}
</style>
<div id = "right-menu">
<h3 class = "title">
recent comments
</h3>
<ul>
<li>
<a href = '#' title = 'title'>
Etiam placerataaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...
</a>
</li>
...
</ul>
</div>
If it cannot be done I will still appreciate someone stopping me from trying again and again.
Thank you for your time!
According to this article, several versions of IE just don't do the right things when rendering background images on multiline inline elements. There are several possible work-around mentioned in the article. The simplest looks to be using inline-block as the display style, but you can see the other work-arounds in the article.
There is also plenty written on the web about this issue so with the right Google search ("inline element background image"), you can find many other articles.
You also may want to make sure a background image is top/left by specifying both top and left:
You have this:
background: url(../assets/bullet2.gif) left no-repeat;
Might as well use this:
background: url(../assets/bullet2.gif) left top no-repeat;
It looks like top/left is supposed to be the default, but it doesn't hurt to specify what you want.
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/
I am working on changing the buttons on my site to be styled by a jquery ui theme. Mostly everything is going good with it.
But there are a few anchor tags that I wanted styled as buttons. I added the classes and it styles it how I want it except that the height is not the same. Is there any way to make the styled anchor tag have the same height as the styled button tag?
Here is some of my css:
.mine-button {
outline: 0;
margin: 0 4px 0 0;
padding: 0 1em;
height: 2em;
text-decoration: none !important;
cursor: pointer;
position: relative;
text-align: center;
-moz-border-radius: 15px;
-webkit-border-radius: 15px
}
An example using it on a button:
<button class="mine-button ui-state-default"
onclick="stuff here">
<img src="/i_common/basket_add_24.gif" border="0" align="absmiddle"/> Add
</button>
An example using it on an achor:
<a class="mine-button ui-state-default" href="bla">
<img src="/i_common/CD_down_24.gif" border="0" align="absmiddle"/> Free
</a>
This should do it:
display: inline-block;
The reason your height isn't working is because the anchor tag marks an inline element. The height property doesn't apply to inline elements, and the vertical margin, border and padding act differently.
Firefox 2 doesn't support inline-block, if you still need to support it, but you can usually get it to work by adding a rule display:-moz-inline-box before the above line.
Alternatively, you could try using the line-height property.
border and align are deprecated attributes, or at least these are about presentation, not content and as such should be done in CSS, not in the HTML code:
.mine-button {
border: 0;
vertical-align: bottom/middle/top/whatever;
}
Also, alt is a mandatory attribute of the img element. Can be empty (alt="" for fancy though meaningless images) or meaningful (if image conveys information not already present in text)
I have a div tag styled through CSS. I set the padding to 10px (padding:10px), it works just as I wanted in Firefox and IE7, but in IE6 it adds additional padding at the bottom (about 2-3px I think). Anyone has idea about what's happening here?
[update]
I just noticed this, the div tag I'm talking about has a background-image. When I removed the background-image, the extra padding on the bottom disappears. Any ideas?
[another update, code sample]
Here's the CSS applied to my div tag:
.user-info{
margin-top: 20px;
margin-right: 20px;
padding: 10px;
background-image: url("../img/user_panel_bg.png");
float:right;
border: 1px #AAAAAA solid;
font-size:12px;
}
Is there an image in your div? If there's an image, there's a bug in IE 6 that can cause white space within the div to create extra padding on the bottom
Extra padding shows up with
<div>
<img src="myimage.jpg">
</div>
Extra padding doesn't show up when you change your HTML to
<div><img src="myimage.jpg"></div>
I would highly recommend taking a look at the positioniseverything.net site and its coverage of IE issues and workarounds. Take a look at the holly hack section - I believe you will find the answer there.
[edit - added] take a look here for the 3px issue, explanation and fix
For box settings and browser difference, sitepoints box model article offers some good insight as well.
Have you tried hiding your DIV overflow? overflow:hidden;
Edit: You may also try display: inline; if you're talking about horizontal pushing.
Make sure font size is not creating the problem. Even with no text inside a container element (say for a bottom cap on a stretchable container) IE6 will still size the height of the box no smaller than the font size (even with an explicit height set.)
So, for example, if you have the HTML:
<div class="box">
<h1>Heading</h1>
<p>This is the main content.</p>
<div class="bottom"></div>
</div>
...you will need this CSS:
<style type="text/css">
.box {
background: url(bg-middle.jpg) repeat-y;
}
.box h1 {
background: url(bg-top.jpg) no-repeat;
}
.box .bottom {
background: url(bg-image.jpg) no-repeat; /* bottom cap image */
height: 10px; /* height of your bg image */
font-size: 1px; /* for IE6 */
}
</style>
potentially 'margin' or 'border' properties?
You can also look at something like a CSS reset style sheet which will let you set up defaults which should be reasonably consistent across browsers.