H3 css issue on IE7 - html

Custom design for <h3> tag... it work nicely on IE8, Firefox and Chrome.
But on IE7, the width (100%) is full which it shouldn't happen. How to fix this?
Also the font size don't appear to be the same as IE8, Firefox and Chrome
h3 {
background-color:white;
display:inline-block;
color:black;
padding-right:10px;
padding-left:5px;
padding-top:6px;
padding-bottom:6px;
margin-bottom:2px;
}

IE7 simply doesn't support display: inline-block on elements that aren't natively inline. You could fix it by setting display: inline and using various positioning things to make it work, or, alternatively, use an IE-specific stylesheet using conditional comments that sets the width manually.
It depends on your layout.

This is what you need:
h3 {
display:inline-block;
*display: inline;
zoom: 1;
background-color:white;
color:black;
padding-right:10px;
padding-left:5px;
padding-top:6px;
padding-bottom:6px;
margin-bottom:2px;
}
*display: inline uses a "safe CSS hack" to target only IE7. zoom: 1 provides hasLayout for IE7 and lower, which is required to make this work.
To fix the font size, specify an explicit font-size. For example font-size: 24px.

IE 7 does not support: inline-block
but you can 'hack' it by adding this to the end
zoom:1;
*display: inline;
hack found at: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Related

Styles for 'after' differ in browsers

I'm displaying a star after input box using :after. The styles are being rendered differently by different browsers. How can i make this appear similar in all the browsers. Please see this Fiddle in different browsers where in you can see the difference.
You can set width and height for a:after and give custom style to input (to avoid differences in padding, border, etc)
http://jsfiddle.net/omLc9nfe/7/
.a:after{
content:'*';
display:inline-block;
position:absolute;
top:-8px;
right:-8px;
width:8px;
height:8px;
text-align:center;
}
.a{
position: relative;
display:inline-block;
}
input {
border:1px solid #ccc;
margin:0;
padding:2px;
}
i've checked with safari, firefox and chrome.

IE 11 does not recenter DIV

I stumbled upon a bizarre behavior of IE (11) using the code below (adapted from this answer).
The centered div does not automatically adjust its position when resizing the browser window.
It works fine in Google Chrome (tested with v31 and v34 canary) and Firefox 26.
→ jsFiddle
<div id="outerWrapper">
<div id="innerWrapper">
Helllo World!<br />
Longer text, longer text, longer text.
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy.
</div>
</div>
#outerWrapper {
display:inline-block;
position:relative;
left:50%;
}
#innerWrapper {
position:relative;
left:-50%;
}
My system:
Windows 8.1 Pro 64-bit
IE 11 (I also tested the problem with the IE 7, 8 and 9 modes)
Actually, ive changed your code a wee bit so that it does.
#outerWrapper {
display:inline-block;
position:absolute;
left:50%;
width:300px;
margin-left:-150px;
}
#innerWrapper {
position:relative;
}
this auto centers it no matter what.(and i tested on ie11)
EDIT***
also, you can change the width if youd like. i just added a random smaller width
so i could see it better on my small mbp lol.
Cheers
The difference is actually the default font used by IE and Chrome. If you define the font family and size both browsers render the markup the same. This is why many use a CSS reset, there are subtle differences between each browser's default stylesheet. The reset normalizes every browser for your application so you have a consistent base to work from. JSFiddle does not do this by default.
http://jsfiddle.net/docluv/DcLFz/6/
#outerWrapper {
display:inline-block;
position:relative;
left:50%;
background-color:#990000;
height:200px;
}
#innerWrapper {
position:relative;
left:-50%;
background-color:#009900;
font-family:"arial";
font-size:10pt;
}

Border around Input Number?

I am trying to put a border around it, but i can't. Here is what i have as far as CSS:
body{ margin:1em; }
body *{ font-family: RussellSquare}
body{background-color: #363636;}
input[type=number]{
font-size:1em;
width:2.5em;
padding:3px;
margin:0;
border-radius:3px;
border: 1px solid #000;
text-align:center;
}
input[type=number]:focus{
outline:none;
}​
It works just fine. Try it yourself on different browsers here.
Short explanation would be:
border is CSS property that is supported on all major browsers.
border-radius is CSS3 property that runs on all modern browsers. IE 6/7/8 is not one of them.
In case you want to know more about Internet Explorer support of border-radius
Read: Support for "border-radius" in IE

Can't get browsers to display a div with some justified text at the same width

Below is the CSS style this div is using. The div itself
is nested within a table. Basically IE displays this differently
from FireFox and Chrome. I like the IE rendering better
and it seems more inline with what I am seeing in dreamweaver,
where as firefox and chrome will display the div wider then
it's in IE and dreamweaver for some reason.
I haven't designed anything in a while but it's sad to see
that we still have these rendering differences between browsers,
is this still the case with HTML5/CSS3 ?
.Class420 {
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
color:#000;
line-height:30px;
background-color:#F5F5F5;
width:400px;
text-align:justify;
padding:15px;
float: left;
margin-left: 15px;
height: 300px;
}
is this still the case with HTML5/CSS3 ?
Yes. And it's still Internet Explorer which is holding everyone back.

Css style problems on input in IE8

I have a problem getting the text in an input to show correct in Internet Explorer 8.
Firefox, Safari and Chrome all show the same.
Firefox, Safari and Chrome
Internet Explorer 8
<form action="" method="get">
<input id="q" name="q" type="text">
<input id="s" name="s" type="submit" value="Sök">
</form>
#q {
background:url(../../image_layout/search_field.png) no-repeat;
width:209px;
height:32px;
padding:0 5px 0 5px;
text-align:left;
margin:0;
border:0;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#09305b;
font-weight:bold;
position:absolute;
left: 0px;
top: 19px;
}
#s {
background:url(../../image_layout/serach_buttom.png) no-repeat;
width:56px;
height:34px;
padding:0;
margin:0;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
border:0;
position:absolute;
left: 225px;
top: 17px;
}
Try specifying a line-height: 34px or thereabouts.
There is a CSS3 rule: the box-sizing. This rule is supported by IE8.
The IEs(including IE8) have non-standard box model, where padding and border are included into width and height whereas other browsers go with standard and don't include padding and border into width . It is described in detail here.
By setting the box-sizing to content-box you tell the browsers not to include border and padding into width, and if you set box-sizing: border-box, all browsers will include border and padding into width. This or this, the display will be consistent across all modern browsers(not that IE8 is so modern, but it supports this rule too :).
I had to set the line-height and display: inline. No idea why, but it worked for me.
Set a line-height property for search input field #q?
Try setting a line-height targeting IE8 and below, like this:
line-height: 32px\9;
line-height value should be equal to input's height and \9 will target IE8 and below.
The position of input should be position:absolute; in order for line-height:37px; and display:inline; to work.
I had much trouble with that, and finally i resolved it:
for ex. you set
INPUT {
line-height: 44px
}
and...
INPUT:focus {
line-height: 45px
}
this one...f... pixel makes the difference (focus shoud have +1px more than normal) and now you have your cursor in good position at IE8.
Just use
line-height: 34px!important;
height: 34px;
I can't comment yet, Matthew's answer worked for me, but in case people wanted an IE-only wrapper without searching anywhere else:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
line-height: 20px;
}