My page has an H2 class that says
H2.clearboth {clear: both; height:16px;}
This works fine in I.E. but in Firefox and Chrome I need to ignore the height property because that is what is messing up the design. Is there a way for me to do this for Firefox and Chrome?
So I tried to do a browser specific -moz but there is no specific property for ignoring just height.
Thanks for any help or advice on this,
thanks,
Paul
You could treat IE as exception, and in your html add:
<!--[if IE]>
<style>
H2.clearboth {height:16px;}
</style>
<![endif]-->
Then your css could be fine:
H2.clearboth {clear: both;}
Better yet, why do you use H2{height:16px;} only on IE and not on all browsers?
Related
i have a website with productpages and just found out that it looks really different between chrome and Internet explorer. Example page:
Website
In IE the images are really large. Now if i change CSS it will also change on chrome where it looks like how i want it.
Thanks for your time,
Sjoerd
you need to set max-width on the image. But use pixels, not percentage!
.thumbnail.alignleft > img {
width: 100%;
max-width: 116px;
}
I believe that you can set a CSS for IE only
<!--[if IE]>
<link rel="stylesheet" href="ieCSS.css" />
<![endif]-->
Also refer to this link How to target only IE (any version) within a stylesheet?
I used
.thumbnail.alignleft > img {
width: 100%;
max-width: 116px;
}
Not sure why someone downvoted my question for no reason but for the people that are here on this site to actually help people thanks!
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
If my css is:
font-family: inherit;
Is there any mozilla firefox specific attribute as:
-moz-border-radius-bottomright: 20px;
which can be used for mozilla browsers only?
I know you can do this to only target Firefox, the only problem is it's not in the CSS, I'm not sure if there is a way of doing this for font-family in the CSS.
<html>
...
<head>
<style type="text/css">
#-moz-document url-prefix() {
font-family: inherit;
}
</style>
</head>
...
</html>
There is no Firefox specific way to write font-family: inherit;. Mozilla support inherit like any other browser, if that is what you mean?
Vendor-prefixed properties (like those used for some CSS3 properties) are only used for properties that are still "experimental" or evolving. The inherit keyword has been around for ages and therefor Firefox, like any other browser, implement it the way the CSS-specification states, without a vendor prefix.
If you want to target only Firefox with some specific CSS, this SO answer states that you can wrap the Mozilla specific properties with a #-moz-document rule. As only Mozilla will recognize that as valid CSS, all other browsers will ignore it. A bit "hacky" perhaps, but it sounds like your best shot.
Edit:
To target only IE with specific CSS, one way is to put it in an IE-specific stylesheet file, and then use the conditional comments for IE. All browsers but IE will see this as an HTML-comment, and therefor ignore it, but IE will apply the styling in that file.
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![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.
I know in order to include a browser specific css file you can do the following
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style.css" />
<!-->
But is there a way to do this in the actually stylesheet itself?
EDIT
Thanks for the replies, I am just going to build a new IE specific stylesheet and override what I need there. I think this is prob the best way to do things.
Check this post, scroll down to Hacks:
http://www.dezinerfolio.com/2009/02/20/css-standards-best-practices
Actually, yes there is.
It wont validate, but if you add _ before the property name so div {width: 200px;_width: 100px;} will be 200px wide in non-ie browsers and 100px in IE.
I have decided that building a separate stylesheet and then using the comment IF statement is the best solution. Keeps the stylesheets clean and it is more obvious to others as to what you are doing (overriding properties due to browser quirks).
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="StyleIE.css" />
<!-->
These work...
.foo{
border:1px solid #000;
*border:3px dotted #00f;/*IE6 & IE7 Only*/
_border:2px dashed #f00;/*IE6 Only*/
}
Thus the outcome is:
W3C Browsers (Firefox, Safari, Opera, etc.)
1px solid black border
IE7
3px dotted blue border
IE6
2px dashed red border
As a last resort (and not highly recommended) you can use the dynamic properties by using expression() then test for the browser version (if you care)
you can also use the !important flag to do this, but that may have unintended side effects.
Click Me I'm !important