this problem has had me stumped all day. I'm using Firefox 8 and I have a UL element that's located inside a div tag, the div tag is animated with the jQuery UI Accordion widget as the following markup shows:
<div id="accordion">
<a class="ui-accordion-header">Section 1</a>
<ul style="width: 250px !important;">
<li>
<dl id="MyDefinitionList"></dl>
</li>
</ul>
</div>
My problem is that in Firefox the inline width style for the tag gets overwritten and reset to 0px. So the above ends up getting rendered in Firefox as follows:
<div id="accordion">
<a class="ui-accordion-header">Section 1</a>
<ul style="width: 0px;">
<li>
<dl id="MyDefinitionList"></dl>
</li>
</ul>
</div>
This does not happen in Chrome or IE and I have no idea what is causing this in FF. Ideally I would like to set the width dynamically from jQuery, I tried .width(250) and .css("width", "250px") but neither has any effect, I had just set it inline in the example above to test and sure enough it gets overwritten and reset back to 0px. Is there some browser setting or feature in the Firefox rendering engine that causes this behavior. I also tried checking the styles in the jQuery UI CSS, but didn't see anything that defined the width as 0px. Any help is appreciated as we are currently trying to get this web app pushed out and it must be cross-browser compatible. Thanks.
UPDATE:
One thing I forgot to mention this snippet is part of a dynamic Javascript menu system. I don't think I can replicate it on jsFiddle in it's entirety. I'm wondering if the menu generation has anything to do with it? Although there's nothing in the menu code or CSS that specifies a width of 0px. Nor does it explain why this happens in Firefox and not IE or Chrome.
UPDATE 2
Here are some snapshots from Chrome compared to Firefox
Note in Chrome the width I calculate dynamically using jquery is applied to the element.style property as expected.
But in Firefox, the element.style is reset to 0px upon page render.
Css also follow the inheritence.. some css properties are inherited from parent controls css.
as like from body tag and other parents..
use FireBug to check all of this for cross browser issues and better UI design. I am attaching an image that showing such inhertence.
hope you will get the idea about this..
if you want to give preference to some css property must not effected by parent inherited properties then use !important with them.
e.g.
a{ display: block !important; }
may be you will get little idea from this..
if you are adding stuff at run time then observer the changes in firbug and correct the GUI according your requirements and then use .addCss() on the place of .css().
api.jquery.com/addClass/
Related
<li> tag works perfectly in google chrome, but not in Firefox and IE.
Below is my html code.
<div class = "sec2_card_info sec2_card_info1">
<ul class = "bullet_list">
<li><p>Statement made by Hon. Mangala Samaraweera, in Response to Hon. Nimal Siripala De Silva</p></li>
<li><p>May Rally in Sri Lanka</p></li>
<li><p>Hon. Mangala Samaraweera visit to China</p></li>
</ul>
</div>
Output in Google Chrome: Works Perfectly
In Firefox and IE, <li> takes a row completely and the output is as belows.
I haven't use too much CSS rather than padding-left and font-size. How to fix this?
Your paragraph tag should not be a child of the anchor. Instead, try this:
<li><p>May Rally in Sri Lanka</p></li>
Either you are specified width in parent div class ='sec2_card_info sec2_card_info1' or applying display:inline-block.
Please check whether you have added width or not. Please remove that width and apply css display:inline-block.
Here's my deal:
The boss asked me to fix a page not displaying properly in IE7.
I'm working with a div tag initially set as:
<div id="login_content" style="left: 0px; text-align: center;">
And so it is rendered in Firefox, Chrome, Safari, and IE9. The issue comes in IE7--somehow the div is cut off when IE7 automagically decides to set the inline style with a height of 8px.
There are no scripts that modify this (as I said, it doesn't get touched in other modern browsers) and upon inspection with IE9 developer tools, it's not inherited from a style sheet. Does anyone know what might cause this behavior?
If it's running through an external script it's probably an inline style in that. If you post a link we can use inspection tools.
You can use the conditional <!--[if IE7] code to fix it [endif]--> to just change how it renders on IE7.
IMPORTANT NOTE! I have only recreated this bug on a 1st generation iPhone running Safari 4.0 (528.16), but as I'm trying to make my site as widely compatible as possible this is still a potential issue...
The problem: floated elements in lists are not appearing on screen. I have narrowed the issue down to the following combination of rules:
<html>
<head>
<style>
p {
float: left;
overflow: hidden;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<ul>
<li><p>hello</p></li>
</ul>
</body>
If I place a non-floated element inside the <li> tag following the <p>, then the text in the <p> becomes visible.
So far I have tested this on the latest versions of Chrome/IE/Firefox on Windows 7, Safari on an iPhone 4, and Chrome/Firefox/Opera on Android (4.2.1 ) and the problem described has not occurred
I repeat: I have ONLY seen it occur on Safari 4.0, but as I can't test every platform/browser version combination out there, I am concerned this issue may be more widespread.
Thanks
I am also encountering this issue, however I am seeing it in Safari 5.1.7 in Windows 7.
My current hot-fix is unfortunately JavaScript-based:
$('.listContainer').hide();
$('.somethingElse').hide();
$('.listContainer').show();
I don't exactly understand why this works, but as long as .somethingElse is a valid selector, the hide/show operation shouldn't get optimized away and will actually force Safari to render the list. Someone who actually understands the nuts and bolts of this could probably lend a more graceful solution, but that's the hack I'm using right now.
EDIT
The weird thing is that if I place the dynamically-generated HTML statically into the .html file I'm working in, there is no rendering problem in Safari. There's something lower-level going on here with how the DOM is constructed in Safari that's breaking this. It's also quite possible that I'm not following some standards for how new elements should be added to the DOM in real time.
Any help? Maybe I should add a question of my own.
FINAL EDIT
Alright, I got it working through CSS, now.
The solution is to give the list-items overflow:hidden.
I don't know why, but that solved my problem. Hope it solves yours. Give it a shot.
I think the problem here is that you've got overflow:hidden which is why your element move out of range. Actually, if you have any element with some width specified and overflow: hidden then you are trying to hide some internal tags
for eg:
<div style='width:200px'>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
</div>
Then you are actually trying to hide anything that goes out of given 200px width Provided you have the inner divs float so that all of them are in same line/ section or div
When there's a bunch of float elements, the parent element will not be able to calculate its height properly.
After all your float elements include an empty element as follows
<div class="break"></div>
. break{
height: 1px;
width: 100%;
clear: both;
float: none;
}
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!
I am having trouble with IE7. I have a header, which is an IMG. Under it I have a div that represents a menu, they have to be attached to each other without space in between. Both are 1000px width. In Opera and FireFox the header and the menu are neatly attached to each other. However, in IE7, there is a small space between the menu DIV and the IMG. I have tried explicitly defining padding and margin on the IMG, however it does not work. I have had this problem before, so it seems to be a IE7 quirk.
My HTML Code:
<div id="middle">
<img id="ctl00_headerHolder_headerImage" src="pictures/headers/header_home.jpg" style="border-width:0px;" />
<div id="ctl00_menuPanel" class="menu">
<a id="ctl00_home" href="Default.aspx" style="color:#FFCC33;">Home</a> |
<a id="ctl00_leden" href="Leden.aspx">Leden</a> |
<a id="ctl00_agenda" href="Agenda.aspx">Agenda</a> |
<a id="ctl00_fotos" href="Fotos.aspx">Foto's</a> |
<a id="ctl00_geschiedenis" href="Geschiedenis.aspx">Geschiedenis</a> |
<a id="ctl00_gastenboek" href="Gastenboek.aspx">Gastenboek</a>
</div>
</div>
Try the IE Developer Toolbar, which will let you inspect what is going on with the elements and give you outlines of the areas covered. It might give you a better understanding of the problem.
The solution:
img {
padding: 0px;
margin: 0px;
display: block;
}
display: block
I run into this a lot. Rather than hunting down the specific behavior, try sanity checking by explicity setting padding and margin properties for img/div/etc selectors to 0, set border-style: none border-width: 0px border="0" etc.
IE Dev Toolbar is a must-have but whether it helps you with figuring out single-pixel issues is unlikely.
Instead of resorting to display block, note that IE7 does some seriously odd things with whitespace; try removing the whitespace between the image and the div, and see what happens.
CSS Resets (like the YUI Reset CSS) are great for this kind of thing. They reset paddings, margins, and other display properties on a lot of HTML elements to minimize the display differences.
The solution...display: block
That question couldn't be answered properly without knowing the rendering mode that the browser was in; you need to tell people what doctype you have if you have CSS rendering issues. The image behaviour you refer to is different in quirks mode as opposed to standards mode. A minimal test case must include a full HTML document and the CSS to reproduce the problem. Please don't ask people for help without giving them the information they need to answer easily without wasting their time...
The real solution:
#middle { font-size: 0; line-height: 0; }