On this page: http://catonthecouchproductions.com/fish/fishing-trips.html in IE the font is much larger and is cutting off the page. I have a simple:
<!--[if IE 7]>
<style type="text/css" media="all">.borderitem {
border-style:solid;
}
p.trip-includes-text,ul li{
font-size:10px;
}
p.about-text{
font-size:11px;
}
</style>
<![endif]-->
If conditional to change the font but I cant get it to change. As well as the includes box on the bottom left, it is being cut out.
It's not the font, it's the size of the box that contains the text that IE has changed. I've had this before and making the box bigger (with margins or padding) makes it work ok.
Related
My intro photo slightly covers the breadcrumbs panel on IE and Chrome, see here https://www.hawaiidiscount.com/luaus.htm
It looks fine on Safari and Firefox.
I have been reading on the Internet about css specific code for IE and tried different methods to fix that, but it doesn't work. What am I doing wrong? Thanks!
<!--[if IE]>
<style>
.breadcrumbs {
margin-top: -22px;
}
</style>
<![endif]-->
<style>
.ie .breadcrumbs {
margin-top: -22px;
}
</style>
<style>
#breadcrumbs {
margin-top: -22px;
}
</style>
It's possible that the different heights are due to the different font rendering engines on the different browsers, as this element is being positioned by <br /> elements.
You're able to use conditional statements, such as
<!--[if IE]>
.element{
margin-top: 10px;
}
<![endif]-->
.. to add code that only IE6 - 9 will render, however this will not work in IE10 and above.
You could also browser sniff, but this is really not a good solution as it's better to have one codebase that works across browsers. You also won't be able to anticipate all browsers that your users will use.
The website you've shared is also using quite a few negative margins and absolute positions, which can also cause inconsistent layout issues.
My suggestion would be to remove all <br /> elements, remove as many of the negative margins and absolute positions as possible and lay the page out using a simpler system. For instance, you've split out the background of the breadcrumbs from the text of the breadcrumbs - these should really be together so that you can easily style them together.
Hope that helps
I'm using the font Cardiff in a project and trying to apply the style text-decoration:underline to it.
This works fine in Chrome (Version 35.0.1916.114) but Firefox (Version. 29.0.1) the underline is crossing through the text instead of appearing under it. I believe it's something to do with the Cardiff font because when I try a 'Web Safe' font the underline is displayed correctly.
This is how the Cardiff font is being displayed
If I then change the font to Helvetica, this is how it's displayed
I've tried a few things already:
Wrapping the font in a span tag, then styling this as a block and giving it a height
I've also tried a solution provided in another question
Updated...
Using fixes provided by #touko I've put together a solution that isn't really what I wanted to settle for but it works.
I've used a border for Firefox and regular text-decoration for other browsers.
h2 {
text-decoration: underline;
}
Firefox specific CSS styling as explained on this solution...
#-moz-document url-prefix() {
h2 {
text-decoration: none;
display: inline;
border-bottom: 1px solid #4c2f04;
padding-bottom: 6px;
}
}
I hope someone finds a better solution than this though because it's more of a bodge job if anything.
Seems like an issue with the font, you could try running it through the Font Squirrel Web Font Generator to see if that fixes it.
Just dont use vertical-align: middle
The similar problem is here: Link underline appearing above text in Firefox?
But looks like your problem is with a font itself.
I do not recommend to do a hack like border under the text. Search for other font.
body {
font-family: Cardiff;
font-size: 24px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="//db.onlinewebfonts.com/c/5762715ddcc2993805a83fcd2f569ea8?family=Cardiff" rel="stylesheet" type="text/css"/>
</head>
<body>
Demo text
</body>
</html>
You could use border-bottom as underline and set the space below to desirable with padding.
yourtxt-wrap{text-decoration:overline}
yourtxt-wrap{text-decoration:line-through}
yourtxt-wrap{text-decoration:underline}
I am working on branding SP2013 and everything is working except for IE9 support the gradient. I tried adding in,
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
but it did not fix the issue and SP2013 dev console did not like the syntax. Is there a way to do this or should I just do it via an image tag?
CSS gradients were added in IE 10. Can I use...
If you want to do this using CSS-only, you'll need to use a filter for <= IE 9.
I want to show big text only in Ie9. I have a lot of div and span used in my page. I can't write for every div a css line.
I want to write a single css to applied on whole page. I want to applied it on IE9 only.
*{
font-size:120%;
}
I agree with Ben Lee, this is something you should do with a conditional statement.
<!--[if IE 9]>
<style type="text/css">
*{
font-size:120%;
}
</style>
<![endif]-->
I have a problem with displaying a set height in ie.
In my css I have set a height for my sidebar div as 2150px; which it displays fine in firefox but does not display the full height in ie.
How can I get ie to display the height I have set in ie?
Thanks in advance
The source code is below
#sidebar_newspr{
width:160px;
min-height:2150px;
margin-top:1px; margin-right:2px;
border-right-style:solid; border-right-color:#900; border-right-width:1px;
float:left;
}
#sidebar_newspr a{
text-decoration:none;
color:#FFF;
font-size:12px; font-family:Verdana,Arial,Helvetica,sans-serif;
}
#sidebar_newspr a:hover{
color:#900;
}
This is a bit of a shot in the dark because you didn't really specify which versions of IE you're testing it in. Nevertheless, min-height requires IE7 and IE8 to be operating in Standards Mode. To enable Standards Mode, you need to use a strict !DOCTYPE.
From the documentation:
In Internet Explorer 7, the min-height/max-height attributes apply to floating and absolutely positioned block, inline-block elements, and some intrinsic controls. They do not apply to non-replaced inline elements, such as table columns and row/column groups. (A "replaced" element has intrinsic dimensions, such as an img or textArea.)
In Internet Explorer 7, this property is enabled only under the strict !DOCTYPE.
min-height in IE6 applies only to th, td and tr elements.
Try to use conditional comments:
<!--[if lt IE 9]> //will target IE less than version 9
<link href="/directroy/IE.css" rel="Stylesheet" type="text/css"/>
<![endif]-->
To your head tag and use this new stylesheet to define what you want IE to do.
#sidebar_newspr{
width:160px;
height:2150px; /*change to just height*/
margin-top:1px; margin-right:2px;
border-right-style:solid; border-right-color:#900; border-right-width:1px;
float:left;
}
You can also use more than one Conditional comments to target different versions of IE.
Like so:
<!--[if IE 8]> //will target only IE 8
<link href="/directroy/IE.css" rel="Stylesheet" type="text/css"/>
<![endif]-->
Then try to set your doctype to strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Might work, if not then I'm sure someone else has another idea :)
Some versions of IE dislike min-height, I try to tend to avoid it if possible.
As a quick solution that wont weigh your page down like an IE only style, simply state height:2150px; min-height:2150px; Browsers that support min-height will take that, while the ones that don't support it will simply ignore it.