So I have this page and if you look at the 4 buttons "Take a Test Drive" "Lease To Own Options" ext...They are not lining up with the bottom of the div in IE. In firefox it looks fine..here is the html
<div class="main-img-box">
<img alt="Retail POS Systems" src="/images/software/video_pos_software.png">
<div class="main-cont-software">
<span></span>
<span></span>
<span></span>
<span></span> </div>
</div>
Here is some of the relevant CSS
.main-img-box {
height: 398px;
position: relative;
width: 100%;
}
.main-cont-software {
bottom: 0;
color: #FFFFFF;
height: 76px;
left: 14px;
position: absolute;
width: 100%;
}
.video-testdrive {
background: url("../images/software/pos-sw-btn-video-testdrive.png") repeat scroll 0 0 transparent;
display: inline-block;
height: 57px;
margin-right: 9px;
width: 169px;
}
.video-lease {
background: url("../images/software/pos-sw-btn-video-lease.png") repeat scroll 0 0 transparent;
display: inline-block;
height: 57px;
margin-right: 9px;
width: 169px;
}
Any ideas on what i am missing
Also is there a good tool to test IE..i use firebug on firefox and it works great but I always have a tough time with IE ..any suggestions there as well
You need to add vertical-align: top ..again.
.main-cont-software a {
vertical-align: top;
}
More info:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
http://www.brunildo.org/test/inline-block.html
Also is there a good tool to test IE..i use firebug on firefox and it
works great but I always have a tough time with IE ..any suggestions
there as well
By far the best option is the built-in (to IE8+) Developer Tools (hit F12).
If you want to use them while testing in IE6/7, you must download it. Though for IE7, you can just use Compatibility Mode in IE8/9 to test.
Related
I've got a problem on IE10 regarding an element with border radius and its absolute positioned pseudo content.
So, HTML:
<div id="parent">
<div id="border">
</div>
</div>
And CSS:
#parent {
width: 200px;
height: 200px;
}
#border {
width: 50px;
height: 50px;
border-radius: 5px;
background: gray;
position: relative;
}
#border:after{
content: "";
display: block;
position: absolute;
width: 30px;
height: 50px;
background: green;
left: 100%;
top: 0;
}
Rendering on Chrome:
Rendering on IE10:
Here's the JSFiddle link.
Can anyone help me solve the mystery?
Thank you!
TESTED ON: 3 different machines with Windows 7 and IE10.
I'm using IE11 (tested in IE10 as well) for this fiddle and yes I see a tiny little white space on both, and rendering good on FF.
change your left:100% to left:99.9%
One work colleague solve the problem.
He added:
border-right: 1px solid transparent;
Here is the solution.
Thank you all!
I have the following CSS:
.views-imagematrix-block .views-field-title .field-content > a .promotedstar {
position: relative;
top: -6px;
}
.promotedstar {
background: url("../img/icons/Star.png") no-repeat scroll 0 0 transparent;
font-weight: bold;
height: 25px;
padding-bottom: 10px;
padding-right: 25px;
position: relative;
top: 0;
width: 25px;
}
And the following html:
<div class="views-field views-field-title">
<span class="field-content"><span class="promotedstar"></span> Gershwins Coffee House</span>
</div>
This gives the full desired effect in Firefox, however in Chrome... It shows the span as being outside of the div (to the left), and doesn't show even with overflow: visible; set to the containing divs. (the span doesn't take the padding it seems). I don't know how to remedy this...
It looks like a Chrome bug.
I think it relates to the fact that the SPAN is empty, I found in chrome issue tracker some related bugs
I am having problems with the following link:
the play image is a <span> element with a background image used with a css sprite.
When i hover over the isotope hydrology image like in the image above everything works fine (link and css sprite). The problem is in IE9, when the cursor hovers over the css sprite(play button) the sprite goes back to the non-hover look and you cannot click to the link from inside (see image below).
If anyone knows why this is happening that would be awesome. Here's a jsfiddle I made for it, but it doesn't recreate the problem.
I have the following html and css:
html:
<div id="video-box-left">
<div class="video-img">
<a href="#" onclick="window.open('http://wwwindex.html','photoessay','scrollbars=no,resizable=yes,width=850,height=722')">
<span class="video-play-q-left">play</span>
<img src="resources-na/images/forum.PNG" width="200" height="155" border="1"></a>
</div>
<div class="video-text">
<p><strong>Food for the Future</strong></p>
</div>
</div>
css:
#video-box-left{
margin-left: 10px;
margin-right: 20px;
float: left;
width: 210px;
}
.video-img {
background-color: #EEEEEE;
border: 1px solid #DDDDDD;
margin-bottom: 5px;
padding: 4px;
width: 200px;
height: 155px;
}
.video-text {
}
.video-play-q-left {
background: url("../images/video-play-q-big.png") no-repeat scroll 0 0 transparent;
background-position: center top;
height: 50px;
position: absolute;
text-indent: -9999em;
width: 50px;
left: 100px;
top: 127px;
}
a:hover .video-play-q-left{
background-position: center bottom;
}
I'd guess this is due to an issue with the DOCTYPE of your document which causes IE9 to render the document in quirks mode. That would explain why the JSFiddle doesn't reproduce the problem. Try opening the Developer Console in IE9 and make sure Document Mode and Browser mode are both set to IE9. If that solves your problem, make sure your DOCTYPE tag is set to HTML 5, e.g.
<!DOCTYPE html>
I am working on some buttons. I want to have a rollover state and I have this in an image in a div with overflow:hidden to hide the state that's not active. It works sometimes but sometimes it looks like this:
The weirdest part is that when I try to use the Chrome Web Inspector it fixes itself! And nothing looks weird in the HTML/CSS.
I'm super confused as to why it isn't consistently either broken or working.
Here's the HTML:
<div class="hunting_card_button">
<div class="hunting_card_icon" id="gift_to_friend">
<img src="/images/icons/friend2.png?1" />
</div>
Friend
</div>
And the relevant CSS:
.hunting_card_button {
width: 65px;
overflow: hidden;
display: inline-block;
text-align: center;
margin: 0 2px 0 2px;
}
.hunting_card_icon {
position: relative;
right: 0;
}
.hunting_card_icon:hover {
right: 65px;
cursor: pointer;
}
The solution was to change one of its containers to a div from a span.
On this url http://wpbeta.nfshost.com/simplysimple/index.html, there is text "Currently, testing... " in the center of the page, but it does not display in Safari. It displays in Chrome, Firefox, and IE.
Do you know what the problem may be?
There are a few issues here.
The text is getting overlapped by the fixed header with the solid white background.
This is happening because of differences in how the browsers are interpreting </br> in your paragraphs.
Technically, these should be <br /> , but realistically you should be creating that whitespace using CSS styles, not line breaks.
Try this HTML:
<header id="fixednav">...</header>
<div id="main">
<h1>Currently testing</h1>
<p>"I believe that one day…"</p>
<p>-Cool Dude someurl.com</p>
</div>
with this CSS:
#fixednav {
background-color: #fff;
display: block;
height: 100px;
left: 50%;
margin-left: -275px;
position: fixed;
top: 0;
width: 550px;
z-index: 2;
}
#main {
margin: 100px auto 0 auto;
width: 550px;
}