We've got a really annoying layout problem on our site only in IE (7 & 8 tested), Firefox and Chrome works fine. The problem is on this page:
http://www.foe.co.uk/community/campaigns/climate/rio_resources_33589.html
The problem code is that the report images should appear to the left of the text to the right. We have a simple that contains the item and the a inner floated to the left and another floated to the left too. Both have widths that are less than add up to less than the outer DIV. Here's an example bit of code that isn't working:
<div class="resourceitem">
<div class="resourceleft">
Test LEFT
</div>
<div class="resourceright">
Test RIGHT
</div>
</div>
The relevant CSS is simply:
.resourceitem {
margin-bottom: 10px;
overflow: hidden;
width: 100%;
}
div.resourceleft {
float: left;
margin-left: 20px;
width: 156px;
}
div.resourceright {
float: left;
padding: 0;
width: 268px;
}
Any help is much appreciated, it's driving me bonkers!
Cheers,
Chris.
UPDATE - Fixed it.
Ah. Ok found the problem folks - it's was down to my responsive linking code and IE8's Developer Tools showing rules that don't actually apply. The rules for this were in fms-res.css file but this only gets used on Browsers that understand media queries, and have width > 980px. IE8 uses a default. desktop-only file, called m-equiv.css - the rules were missing from this file. The Web Developer Toolbar very unhelpfully shows the rules as applying to the elements from the fms-res.css file, even though actually they don't. I'd forgotten this effect of Developer Tools, we usually see with our print stylesheet (print.css) rules showing, even though they don't apply (unless when actually printing).
Massive thanks for the contributions folks, sorry it was such a stupid fix in the end.
Cheers!
Remove </a> from the following code It is an extra code (might be a typo) and causing trouble in IE:
<div class="resourceleft">
<img border="0" alt="Rio+20: Is this it?" src="http://www.foe.co.uk/imgs/Rio_-_is_this_it.png" />
</a>
</div>
Note: every <div class="resourceleft"> has an extra </a>
UPDATE - Fixed it.
Ah. Ok found the problem folks - it's was down to my responsive linking code and IE8's Developer Tools showing rules that don't actually apply. The rules for this were in fms-res.css file but this only gets used on Browsers that understand media queries, and have width > 980px. IE8 uses a default. desktop-only file, called m-equiv.css - the rules were missing from this file. The Web Developer Toolbar very unhelpfully shows the rules as applying to the elements from the fms-res.css file, even though actually they don't. I'd forgotten this effect of Developer Tools, we usually see with our print stylesheet (print.css) rules showing, even though they don't apply (unless when actually printing).
Massive thanks for the contributions folks, sorry it was such a stupid fix in the end.
Cheers!
Related
I'm building a Wordpress website by customizing and editing an existing theme called 'onetone'. It's an one-pager theme. The problem I'm having is that neither the homepage (the one-pager landing page) nor the individual posts/pages will extend to full height.
Under the footer, there's a thin black line 23 pixels in height, that extends 100% of the width.
Here's the quirky thing: while I'm logged into the site as an admin, the line disappears. When I'm visiting as an unlogged, regular user the line is there. All major browsers (FF, Opera, IE, Chrome). Also, on my sister's computer with FF installed the line didn't show even when unlogged.
I've searched StackOverflow, and the usual answer to have <body> and <html> set to height:100%; (including min-height:100%;) isn't working. I've also added height/min-height to containers and wrappers to test the setting. (Not all, though, only the ones I thought were relevant to the issue I was trying to solve) I've also tried the margin: 0; & padding: 0;, but NOTHING works.
I suspected it's the footer's fault, but using the inspect element function in my browser (and some further tests) I found the footer has nothing to do with it.
In the original, untouched theme, the line doesn't appear. So it must be some of my edits causing it, though even by comparing the original and my edited CSS file line by line, I couldn't find something that should've caused this error. And the CSS is the only thing I've edited.
I'm not a coding expert, and I've about exhausted my wits and available knowledge trying to figure this out. Does anyone have any idea what may be causing this glitch?
This is my site. The glitch is best seen on posts / pages. If any specific code samples are needed, just say and I'll post them.
Your code has this weird image just before the <body> tag ends, after all javascript calls:
<img src="http://pixel.wp.com/g.gif?v=ext&j=1%3A3.4.1&blog=50532064&post=651&tz=1&host=firstinkstudios.com&ref=http%3A%2F%2Ffirstinkstudios.com%2F&rand=0.7281985701993108" id="wpstats">
Remove it and you're golden
There's a background color on body. Getting rid of that fixes the "border".
body.custom-background {
background-color: #000000;
}
Also there's a smiley on the bottom
It looks like this
<img src="http://pixel.wp.com/g.gif?v=ext&j=1%3A3.4.1&blog=50532064&post=444&tz=1&host=firstinkstudios.com&ref=http%3A%2F%2Ffirstinkstudios.com%2Fblog%2F&rand=0.1907386933453381" id="wpstats" scale="0">
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!
Lately, I've been running into more and more poorly designed websites that do things like this Hudson Website The page is some 1600 pixels wide on my 90 degree rotated monitor, it means you have to scroll left<->right a LOT. Having firebug installed, I figured I'd just go fix it on the fly for reading, but that is proving harder than imagined.
I can't seem to locate what is causing it to be so wide. There is a <table width='100%'>, but that should be 100% of the container, and I can't find a container that says "BE UNREASONABLY WIDE". So, I'm asking what tricks you use in firebug to figure out what is causing an element to have the size it has, specifically the width.
Edit:
Well, I'm still picking at it, and it turns out that
.wiki-content p {
margin: 10px 0;
padding: 0;
width: 850px; // I had to add this to make it readable, width was NOT defined
}
will make it readable, so something about the <p> tag is causing it, but I don't see anything in the css that should make it this wide. What am I missing?
The page is wide because of the <pre> elements.
At least on Firefox, you can fix it by adding the CSS rule:
pre {white-space:normal;}
You could run the page through a validator as a first step. E.g. http://validator.w3.org/
As an aside, I ran the master CSS of the linked site through the Flumpcakes optimizer, and got this result:
Before 64064
After 53832
Saving 10232
Percentage: 16%
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; }