I have this really weird problem with Zend Framework and the view on all IE's
I'm using the HTML/CSS template for the sticky footer, where the page is also centralised in the middle of the screen. I used the same template before applying the design on the code on Zend and all browsers worked perfectly fine. Now when I applied the design on the code, all browsers are still working fine except of IE (7,8,9) ! The page isn't centralised any more, and some elements aren't taking their CSS classes. I copied the exact same code I used before moving the code to Zend (which was working on IE) and pasted it into Zend and I still had the same problem. I even created a div and tried to centralise it using the following CSS code:
#container{
position:absolute;
width:960px;
height:200px;
left:50%;
top:0;
margin-left:-480px;
}
and still, it wasn't centralised on any of the IE browsers ...
Could anyone please try and help me figure out what exactly is going on??
Many thanks in advance !
Did you try : text-align:center;
Another way to center content is to do so :
#container{
width:960px;
height:200px;
position: absolute;
margin 0 auto;
text-align:center;
}
Look : http://jsfiddle.net/5u8aM/
Hello again everyone ... I'm not sure if I'm supposed to apologise for the question or not, but after a really long time of research and many tries to fix the issue I had either by changing the HTML code or CSS, the solution was really easy (or maybe I was stupid I didn't pay attention for it). All I had to do was change the doctype of the document, once I added
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> all the CSS bugs was fixed, the page was centralised and it worked perfectly fine.
Regards
Related
I'm setting up an online form where to choose boxes and stuff.
I almost finished the whole thing when I said to my self "Let's try it in IE".
This is the result I want and what comes up in Google Chrome:
And this is what happens in IE:
And this is the CSS and HTML for that part:
HTML
<div id="choosen"><img src="img.jpg" class="center-img" /></div>
CSS
img.center-img{
margin-top:15px;
position:relative;
width: <?php echo $width; ?>px;
left:50%;
margin-left:-<?php echo $width/2; ?>px;
}
Basically the image is centered into the div as this page I'm writing will be included into another one which I never saw and someone else will do it.
EDITED
Here is the link
How about changing the CSS to
img.center-img{
margin:15px auto 0;
display:block;
}
Try using css hacks. Here is a link with some on:
http://www.paulirish.com/2009/browser-specific-css-hacks/
Without a proper doctype, you are in 'quirks mode'. Add this to your very first line with nothing else in front of it: <!DOCTYPE html> . That will take you out of quirks and put you into standards mode, especially with regard to Internet Explorer. Then let's see where we stand.
A doctype is required of all new web pages. The one I show is the newest one and puts all browsers into standards mode where you want to be. Quirks uses a broken box model from the 1990s and you never want to be there.
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;}
In this website: http://www.blackblot.co.il/kb/ I can't make the anchor ( tags) to show tooltips in IE.
It works in chrome and Firefox.
what makes it even harder to understand, is it not happenening in all the tags, but only these in the content section.
for example, the links on the left side are showing the titles, but the links in the content, altough has it, won't show it.
I checked for CSS manipulation, or js code, but nothing really stops it from showing the titles.
really need help here. Thanks
I checked out the source code and found out that the anchors didn't have titles. Did you try putting titles in those anchors? That should work in my opinion.
OK
I found the solution. which is not a real solution - but it something in IE was absolutely wrong.
it is clearly a bug in IE. Anyway, if someone have the same problem.
I have dicided to take off the css and see if I see the tooltips without any css. And then I saw it.
So I had to debug 500 lines of poorly written CSS. Among these 500 line there were 3 declarations that caused this bug. I found that when I use F12 (developer's tools of IE) the positioning of the element was not in it's actual position on the page. Please see image attached.
So I tried to figure out which css declaration causing this. For some reason 3 declaration of 3 div's padding had to be removed in order for this to work.
the CSS lines are as follow, the commented code is the bad guy:
ul,ol,dl,p,h1,h2,h3,h4,h5,h6{margin-top:10px; margin-bottom:10px; /* padding-top:0; padding-bottom:0; */}
div.post,div.page{display:block; margin:0 0 0px 0; border-bottom:solid 1px #eee; /* padding:20px */}
div.post-bodycopy p{margin:1em 0; /* padding:0; */ display:block; font-size: 13px;}
Okay so this is sort of a double question so I'll split it into two.
First part
In modern browsers the main bold labels sit above their corresponding form elements, and align to the left as is expected. However in ie7, they randomly site 10-15px inset. I went through the developer tools and could find nothing to fix it. I've made sure all my margins and padding is reset so I don't really understand =S
Here's the page demo - link
Maybe some of you ie bug fixing genius's know what the problem is? =D
Second part
Again with labels, this time the in-line ones resident next to the check boxes and radio buttons. In modern browsers again, the side beside the form elements as expected, but not so in ie7 where they take a new line. I've tried floating, changing margins and everything but to no effect in sitting it in-line with the div.checker or div.radio that is created by the uniform Jquery plugin.
Here's the page demo - link
Sorry for troubling you with my ie7 problems, I know they arent the most fun to solve. Hopefully someone has the patience to help.
Matt
Part 1:
ol,ul{
list-style-type:circle; list-style-position:inside;
}
If you change that to this:
ol,ul{
list-style-type:circle;
}
Or just remove the definition entirely, that seems to do it for me.
I think that's a reasonable thing to do, as I don't see anything actually using the bullet lists.
Edit for Part 2:
IE doesn't like this:
input{
background:#FFFFFF url(../images/input_bg.png) repeat-x;
border:1px solid #CCCCCC;
margin-bottom:20px;
-moz-border-radius:3px;
padding:7px;
-webkit-border-radius:2px;
}
If you remove the margin-bottom:20px; from that, your radio button won't be messed up.
Sorry I'm not really providing IE7 specific solutions, but at least you've got the spots that need fixing.
here's a point to where the problem lies
http://www.alistapart.com/articles/beyonddoctype
here's some points about doctype right here in SO
Which doctype do you use when writing webpages?
:)
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.