I have a gallery with a frame around the thumbnails, I have used max-width to shrink the thumbnail images so they all line up nicely, but in IE althought the image shrinks to the max width the frame still expands as if the image was larger. I have tried adding a max-width to the li but to no avail.
Here is a link to the page that looks nice and uniformed in Chrome and FF bt all over the shop in IE! http://wedding-photography-gloucestershire.co.uk/wedding-photography-gallery.php?gallery=Getting%20Ready
Wedding Photography Gallery
thanks in advance of any help.
This is the frame style..
.highslide-gallery ul li {
display: block;
position: relative;
float: left;
width: 106px;
height: 106px;
border: 1px solid silver;
margin: 2px;
line-height: 0;
overflow: hidden;
background-color: #000;
max-width: 106px;
}
I tried adding this which I found on another website as a solution to IE max width problems, but i don't really understand it ;
width:expression(document.body.clientWidth > 106? "106px": "auto" );
but it still didn't work.
Thank you.
IE treats padding/margin differently than the other browsers. I looked at your stylesheet (highside) and you need to have a stylesheet for ie specifically and then you can target IE specifically without worrying about how the changes you make effect the other browsers. I personally wouldn't do that but I used to do it when I was experimenting in web development.
The easiest way for you to figure out what's going wrong and where it is going wrong is to use firebug. Safari and IE have similar debug environments as well. There are some really good tutorials on using firebug out on http://net.tutsplus.com
Good luck.
Related
I want to hide the border of a recaptcha v2.0 widget so that I can better visually integrate it into my site's look and feel.
NOTE: I'm posting this as a question, and providing a solution, because most of the StackOverflow questions I've found on the topic center around removing the frameborder attribute of the recaptcha's iframe, which isn't technically what I'm after. I'm after the result of that -- an edgeless recaptcha widget that I can position within a larger visual context.
I hope this is helpful!
I wanted to hide the borders of a v2.0 ReCaptcha (the one with the "I'm not a robot" checkbox), and solved it as follows:
Wrap the recaptcha div (the one that is marked with the class "g-recaptcha") with another div, and size it a bit smaller than the iframe comes in at, and shift the iframe using position: relative and left: -10px, to hide the borders.
If you're using the "compact" version, you'll need to adjust the sizing... the css I provide works for the "normal" version.
NOTE: Tested on Safari 9.1.2 (OSX) only, but I'd guess the technique will translate to other browsers too.
Hope this helps!
html:
<div class="my-div"><div class="g-recaptcha" data-size="normal" data-sitekey="<your site key>"></div><div>
css:
.my-div {
display: inline-block;
overflow: hidden;
width: 290px; /* note the embedded iframe is 302x76 */
height: 74px;
text-align: left;
}
.my-div iframe {
position: relative;
left: -10px;
}
NOTE: for people brought here by google but with different problem
If you want to hide just borders not making it edge less keeping original design just do following:
HTML:
<div class="captcha"><div class="g-recaptcha" data-size="normal" data-sitekey="<your site key>"></div><div></div>
CSS:
.captcha iframe {
position: relative;
box-shadow: none !important;
}
Take this code and open it in Firefox and in Chrome:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
background: #EEE;
width: 100%;
height: 300px;
;
}
img {
display: block;
max-width: 100%;
height: auto;
max-height: 300px;
}
<div class="container">
<img src="http://curiosidades.batanga.com/sites/curiosidades.batanga.com/files/Los-gatos-nos-ignoran-1.jpg" alt="" />
</div>
You have to reescale the width of the container by (for example) reescaling the frame or the browser window (this may help: http://codepen.io/vandervals/pen/NqvYQZ)
You'll see the difference inmediatly: Chrome uses the max-height and the max-width at the same time for limiting the scale of the picture, while firefox, only uses the max-height.
Does anyone know how to make firefox behave like chrome? Which of the behaviours is the correct one, according to the spec?
Use firefox specific CSS, witht he code -moz
Another solution would be to use hacks
Browser Hack
Hope this helps :)
I've ran this with and without the "!important" CSS declaration and saw a minor improvement for Firefox (and I mean very minor); I did make sure I cleared my history before each run but there could be a few reasons for that. They use different engines so they're going to decide how they should load things differently and when (http://www.quora.com/What-makes-one-web-browser-faster-than-another - an old article but gets the point across).
The link Arjun for Browser Hacks is a good one to help optimize your CSS specific to the browser.
I've got a puzzling problem in that a certain bit of HTML displays fine in all modern browsers and IE7, but completely fails in IE8. I've racked my mind as to which CSS could remedy this problem but I've come up short every time.
If you look at this link in chrome, near the bottom you'll notice FB/Twitter share buttons, but if you look at the corresponding space in IE8, there's nothing. Could someone please check it out and let me know, I'm stumped...
The CSS code is:
body div.mr_social_sharing_wrapper {
clear: both !important;
overflow: hidden !important;
height: 40px !important;
width: 960px !important;
z-index: 2000 !important;
line-height: 30px !important;
float: left;
}
span.mr_social_sharing,
span.mr_social_sharing_top {
float: left;
}
And yes, I know using !important is poor form; it was inherited and not by choice :)
Seems to be solved by removing the display styles (you had both display: inline-block and display:block) and float: left from span.mr_social_sharing_top.
If there was a good reason for needing the display styles (trouble in other browsers?) you could also add fixed widths to these spans to solve the problem.
So, I have an issue with the hover state of a link in IE8. Code is as follows:
<div id="navigation">
Home
</div>
And the CSS:
#navigation {
float: right;
height: 29px;
margin: 50px 0 0 23px
}
#navigation a {
color: #FFF;
float: left;
font-size: 120%;
height: 25px;
margin-right: 7px;
padding: 2px 10px;
text-align: center;
width: 104px;
}
#navigation a.home {
background-color: #f4e034;
}
#navigation a.home:hover {
background-color: #fffbd4;
}
Now, this works fine in every other browser I have tested in (Chrome, Safari, FF, IE6, and IE7), it just won't change the background color of the link in IE8 on hover.
I have tried adding display: block and display: inline-block to the a element. I have also tried adding !important after the background-color in the hover tag. I have also made sure that there are no other elements in the CSS that is affecting this.
Googling this problem gives me a bunch of things regarding the IE8 beta, which this is not. It also gives me answers for menu related links, which this is not. It gives me answers for things being affected that aren't background-color. And it gives me things where changing the font-color works, but not the background-color (neither works in my case).
Just wondering if anyone else has ever noticed this issue and has something they can provide on this. Let me know, thanks in advance.
I had the seem problem as yours. I tried every way as you did but it has no use.
My final solution was to set a background-color on the element you need to hover, then it worked.
I felt shocked at that time and I don't know why still now.
Do you have a DOCTYPE specified on your HTML page? It might seem obvious, but I've had similar problems with the :hover state in IE8 - especially when editing old sites.
The solution for me was to add a DOCTYPE above the opening HTML tag on your HTML page
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
I hope this helps!
I have an annoying display issue in IE (7/8). I have some tabs that serve as navigation, the tabs have the top and bottom sections cut off for some reason in spite of my efforts to make the box bigger.
In Chrome and Firefox this all displays correctly as you can see in the images below. Note I have artificially moved the tabs into an empty area of the page so its easier to see whats going on.
How it looks in IE:
How it looks in Chrome
Now obviously IE doesn't render the rounded corners, that's fine (unless someone knows something I dont) but as you can see the height of the links in IE are smaller than Chrome and actually clip the top border off.
HTML
The HTML is simply <a> elements within a <div> like so
<div id="topnavcontainer">
<a href='/web/link1.html' class='current'>Link 1</a>
<a href='/web/link2.html'>Link 2</a>
<a href='/web/link3.html'>Link 3</a>
</div>
CSS
#topnavcontainer {
display: block;
color: #fff;
font-size: 14px;
position: absolute;
right: 0;
bottom: 0;
height: 40px;
}
#topnavcontainer a {
color: #555;
text-decoration: none;
padding: 5px 12px;
font-weight: 800;
overflow: visible;
background-color: transparent;
border: 0;
line-height: normal;
bottom: 0;
height: 40px;
}
As you can see I have tried to overcome the problem by specifying normal line-height as well as making the overflow visible. I have also tried making the links and containing div much higher than they should be just in case there was a weird height issue. Nothing seems to solve it.
Set the link to "display: inline-block;". As for IE6/7, do "display: inline; zoom: 1;" instead.
I've seen this problem happen before on block elements. The "inline-block" solution seemed to fix it.
Try adding float:left;
It's possible that your padding isnt even working.
if this solution doesnt work,
make a different CSS for IE and set a different height for IE.
also, try to put a button on your website asking your visitors to download Firefox or Chrome...
it will make the internet better! :D