vertical-align:middle problem in ie - html

I am working on a project. I am facing a problem in ie. Problem is vertical-align:middle not working for image.If you have any solution for this problem please help me.
Site link:http://dev.tenthtime.com/family/highchairs/default.aspx

vertical-align is used for tables not for images. Try using margin and padding if your image is not inside a table.

Related

Hover menu border is not displaying over iframe in IE 11

I have a same business requirement as identical to the jsfiddle example -->
`http://jsfiddle.net/tpN7m/3/`
Now this is working fine will all the browser even in IE. Here the problem is that the border is not displaying or even not working for the hover menu in IE alone. I am using IE 11. how to fix this issue.
I replicated the same code in my project .
Help me to fix this issue.
Change the z-index and position of the iframe. Alternatively, place a wrapping div around the iframe and play around with the z-index and position. Also try adding a z-index to <ul class="reltab-moremenu-content" id="tabMore">.
I am adding the screenshots from IE 11 and chrome for better clarity on the issue

Issue with site header in firefox

I've been working on a new theme for my wordpress website and after some tinkering everything looks and works fine except for my header.
When I open the website In firefox the header goes to It's full size and it ends up being too big while In other browsers It Is fine.
I've been googling solutions but none seem to work for me. Can anyone help me out so that firefox users won't get a big banner slapped in their faces?
Thanks In advance.
Link to my website
The problem is with the float on the wrapping div.navbar-header. I don't know is max-width within a float is offspec, but just override bootstraps "float: left;" with "float: none;" from on the .navbar-header and you're good to go.
You can also get rid of that img {max-width:100%;} and replace it with a simple width:100%;

cross browser css (100% height)

I'm creating a website and have a problem with the way it displays in different browsers. I'm testing using Chrome, iOS and IE8. The site displays correctly in the first two, but not so in IE.
The website in question is http://www.edalemill.co.uk/
Can anyone help point out what's wrong with my CSS to solve the problem?
Thanks!
I have taken a look and can replicate the issue.
I would suggest removing the
overflow:auto; from the #stripper
You have also used body more then once as well in your CSS, I would suggest having only one lot and tidying up your code.
Possibly consider using this as a base which should help you:
http://meyerweb.com/eric/tools/css/reset/
UPDATE
Otherwise for your code do the following for the CSS
#sidebar {
position:fixed;
}
I would recommend making that IE8 code only though
If you take out the height:100% on #container the background image fills up the rest of the text area for the about page.
Let me know if this helped.
Update
It might just be easier to have another CSS tag for the content areas that scroll. The height:100% works on those content areas that don't scroll, however, they break on those that do. My recommendation, even though it might not be the best way, is to either make a second CSS tag for the content areas that scroll, or just simply make the image bigger.

dynamic height css sticky footer

I was looking recently for a dynamic css sticky footer solution and came across this one:
http://pixelsvsbytes.com/examples/sticky-footers-the-flexible-way/simple.html
it seems to work great in most of the popular newer browsers that i've tried but for some reason chrome doesn't display it in the same way and my guess is that safari acts in the same way.
can anyone point a finger on where the problem might be?
Thank you.
ok I solved it thanks to Explosion Pills comment.
It is most likely a bug if you set the body tag display property to be display: table.
to solve it just place the elements inside another div tag and set it as display: table

Negative margin-right is not behaving correctly in chrome

Hi guys I'm trying to crop an image using another div. Margin -left,-top,-bottom work, but for some reason margin-right does not seem to be working for me on chrome. Any ideas what I should do? I've been trying to figure this out for hours :c
http://knowmad.herokuapp.com/sunapp/10/
I'm not quite sure why the margin-right isn't working but did you consider using the clip property?
http://webdesignerwall.com/tutorials/5-simple-but-useful-css-properties
Use pixels in margin-right instead of percentages. ie margin-right:20px