I'm working on a site for a friend, and the code I'm using is showing up differently in Firefox and Chrome - the way it is in Chrome is the way I want it to look, but Firefox is messing something up.
If anyone has any ideas how to get it to work in Firefox like it works in Chrome, I would really appreciate it.
Also, the Flash elements don't seem to be showing up in IE at all...
Any ideas?
Thanks!!
EDIT: I reinstalled Flash Player in IE and it seems to be working now...
I problem I can see is the "v1" class style to "v.." of the div do not have the desired height rendered in FF.
Try this:
CSS:
div.vItem {
height: 17px;
}
HTML:
<div class="v1 vItem'...</div>
<div class="v2 vItem'...</div>
<div class="v3 vItem'...</div>
.
.
.
<div class="v10 vItem'...</div>
For the flash, I have no problem with the Flash on IE6 and IE8 though.
strange things are happening on your site. You have an object in an object tag (flash) that is not allowed i think. This could be the problem why IE8 is not rendering the flash buttons.
Maybe you could replace al the divs with a list ul and li this is semantically better and will make styling of every button easier.
You should change the height of the divs or when replaced by the list, the height of the lis This will make them more compact as in chrome
You might put your code to following quick trials to see if the problem is solved:
1: If your doc type is strict; try replacing it with below line:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: Try adding Eric Meyer's Reset.css to your css file on top:
http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
Hope that helps.
Related
after searching and trying for about 2 hours I decided to ask you. If I call my website with Google Chrome or Safari I do not have this issue.
But if I call my website with Mozilla Firefox, I see a little white space between my 3 social media links and the next row.
Test it by yourself. Does it works with Chrome/Safari and does Firefox have a problem?
https://gamekeys-shop.de/
Can somebody tell me how I can fix that? - I do not understand why there is a difference between those browsers...
Greetings and Thank You!
You need to remove the display: inline-block; from the following selector: a.ubtn-link
Every browser has its own default stylesheet. Try using CSS reset (resets default CSS) and your problem should be solved.
To use CSS Reset, include the following source file in your web page:
at BODY tag set the line-height to zero.
like this:
<body class="home page-template-default page page-id-14 gecko osx wpb-js-composer js-comp-ver-5.0.1 vc_responsive" style="line-height:0;">
Or do it in your custom .CSS file.
ive written a css code that was kinda compatible to firefox and chrome.
i didnt check internet explorer.
when i opened my website with internet explorer the location of the boxes were all messed up.
so i needed to add a doctype.
but when i added the doctype my boxes arnt right shown at any browser.
im not really experienced with css so any help is welcome.
how it should be (not internet explorer)
" www.informatica-sj.bplaced.net "
how it is when i add a doctype rule
http://www.informatica-sj.bplaced.net/doctype/index.html
both of my css and index.html
http://pastebin.com/Rz1GH41a
Your doctype should be
<!DOCTYPE html>
This works across all browsers and should be added to the top of your HTML.
I noticed that you aren't declaring a value on the end margin property
margin: 50px 0 0 529;
Should be 529px;
I am not sure if this is an issue with the Blogger template that I'm hacking up, or if I'm just forgetting a simple CSS property.
I'm working on a template for a friend, and am attempting to show the logo on the top right above the menubar div, and it works just fine in Firefox and Chrome, however it renders behind the div in IE9.
Here is the link to the demo:
Demo blog
Essentially, what I've done is created an absolutely positioned div, with an inside image:
<div id="logo2">
<a href="">
<img border="0" src="http://1.bp.blogspot.com/-lpZjzviYzAo/T7mNUvXY6QI/AAAAAAAAAcM/XwQS-bO0Hy4/s1600/lovek-hdr.png">
</a>
</div>
and the associated CSS:
#logo2 {
position:absolute;
top: -25px;
right: -50px;
z-index: 999;
}
I'd thought that the combination of an absolute position, plus the high Z-index would overcome any issues with IE's handling of the z-index, however I was wrong.
I've also tried adding in a position (relative) and z-index (1) for the menubar div, to no avail.
Per #Dubious' suggestion, I added the following without success (the image is still clipped):
.tabs-outer, .tabs-inner {
<!-- [if ie 9]>
z-index: -1;
<![endif]>
position: relative;
}
Old Answer "Try adding a z-index of -1 instead of 1 to your menubar div"
Edit:
Okay, after doing some fiddling around in IE9 Developer Tools I noticed that your source code was telling IE to render the page in Document Mode: IE7 Standards. As you can see, after opening dev tools (and making sure the dev tools frame is active) you can press alt + 9 to render the css as it should be rendered in IE9. After this occurs, the content displays just as it should in any current browser.
So why is the page loading with IE7 Document Standards? Well you need to use correct standards-compliant !DOCTYPE directives for each of your pages. To do this just read up on this page and make sure that your html files follow the very first example.
Conditional Comments
I should have given you a better example of IE conditional comments, so I will go a little more in depth here. An IE conditional comment can ONLY be defined in html as it uses <!--> which is html specific code. Therefore, in order to add ie7/ie9/ie specific css you would need to <link> a new stylesheet inside the comment field that would have ie specific code. Further reading here. Also note, that since this issue you are experiencing is because the page is rendering IE7 quirks mode css, you might need to use an ie7 comment as opposed to ie9.
I really hope this solves your problem, good luck!
Is there a solid solution for implementing position: fixed that will be supported in all major browsers?
I was so proud of my recent code, that solved all my issues in FF, until I looked at it in IE. There seem to be a lot of hacks around but some of them seem to contradict each other...
I need to position several elements on a page relative to the window.
This code works great in FF, but not in IE, even v.9. The element is supposed to be fixed in the top-left corner even when I scroll the page. In IE it scrolls up with the page content.
#myElement{
left:0;
top:0;
position:fixed;
height:35px;
width:290px;
background-color: #f5f5f5;
z-index: 999
}
Thanks for your help.
As I suspected, you are using an invalid DOCTYPE which is sending IE into quirks mode. To keep IE in standards mode you need to make sure you use a valid DOCTYPE. So, if you want to use HTML 4.01 transitional it should be:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
However, I would use the shorter and simpler HTML5 DOCTYPE:
<!DOCTYPE html>
Only IE6 does not support position:fixed, and it's not major browser. (See browser support here.)
Try using position:relative; or position:absolute; instead of position:fixed;
These are there in IE9.
However, many a times position property gives undesirable result, thus, I always prefer to avoid it as much as I can. Do check with Chrome/Webkit also.
If anyone still has this problem.
Enter the following into your style sheet. All browsers will override position:absolute with position:fixed and you'll get what you want. IE 6 does not understand the > operator, so it never sees position:fixed and uses position:absolute. The web page is usable in all browsers, but not as pretty in IE6.
htmltag
{position: absolute;}
body>htmltag
{position:fixed;}
i have a dropdown menu in css, it works fine in Chrome, FireFox, but not IE8, i haven't checked it in IE6/7. but it seems hopeless.
my site at HERE.
The dropdown menu is the black one.
i think the problem is with the :hover, try searching around something like #button .a:hover, etc... but get no luck.
I hope you can help. the css file is HERE
Thank you sirs
The problem is that you have not included a doctype on your website.
Because you haven't included a doctype, your page is rendering in Quirks mode in IE8:
Quirks mode is a rendering mode used
by some web browsers for the sake of
maintaining backward compatibility
with web pages designed for older
browsers or coded without standards
conformance.
Add these two lines to the very top of your file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
If you add in that magical doctype line, your drop down works in IE8 and IE7.
You should move this part of your code to within your <body> tag.
<span style="float:right;margin-top:10px;">
</img>
</img>      
</span>
Also, you can change it to something like this:
<div style="position:absolute; top:10px; right: 10px">
<img src="img/vn.gif"></img>
<img src="img/us.gif"></img>
</div>
When this sort of thing happens - go to Tools --> Compatibility Mode ; and make sure it's off. I have had similar issue and switching that off made my menu work properly (where it wasn't working at all).