I'm having a weird problems with one of my Arabic sites.
See that gray rectangle with the red heading in the homepage? right underneath it shows up a horizontal gray border in IE8 that I just couldn't get rid of unless I remove the border under the black headings below, which I don't want to do.
There's even an extra space between those two elements that's not supposed to be there. You can view the page in Firefox vs. IE8 to see what I mean.
Any idea how can I fix this?
Your help is much appreciated :)
there's a duplicate h2 under the episode_summary producing in ie8.
u should try validating the site first. http://validator.w3.org/
Related
I recently noticed that my site is broken in Chrome despite displaying well in Firefox. Having studied the HTML and CSS at my page -
http://www.designlagoon.com/what-we-do/
There is a larger gap below the 4 blue titles in Chrome than in Firefox - which is breaking the frame of the containing box. This seems to be related to padding / margin of the table layout I'm using but I'm struggling to work out a fix.
If anyone can shed some light on what might be causing the problem I'd really appreciate it!
This is related to a question I posted yesterday: Firefox: wrong interpretation of box model?
Actually, it's Chrome that's behaving correctly: td with height 150px + padding 15px (x2) = 180px.
Firefox does a miscalculation when adding padding to td.
So your best shot would be to remove the padding on the cells, and add a margin to their contents instead.
Thanks for the advice. I tried removing padding from the table and td and applying it to the paragraph instead. This improved the problem to an extent but we were still left with different borders in firefox, IE and chrome.
In the end we decided to remove the table completely and use 4 floated 25% columns instead. I will avoid using tables for any site layout in future. Lesson learned!
I can't seem to find out why some images at a project of mine (http://www.de-drie.nl) have a strange (grey?) border at the bottom. Could it be since the images aren't scaled? I have scaled them to fit content with css.
At first this problem was there in: FF, Chrome, IE and Safari. After playing a bit with the width (in css) of the images the strange border disappeared in FF.
The other browsers are still showing the border problem.
I have seen multiple posts here at stackoverflow which describe the same kind of problem.
The solution should be display:block or vertical-align:bottom, but this really doesn't seem to work for my problem.
All your images with grey border in the html, literally the actual images contain a small grey border underneath
For example this: http://www.de-drie.nl/images/uitbouw.jpg contains this:
I'm having some trouble with the CSS in my site, both with image sprites and IE compatibility.
Here is a jsfiddle: http://jsfiddle.net/lipestyle/EjQTP/7/
The two main problems are:
In IE, the contact links at the bottom are not appearing in the blue bar, but way down and to the right of the rest of the site.
The image sprites for MMA Cage Door and FightNight Nutrition are not working. It appears that the hover image is on constant display, as the non-hovered image is supposed to be much lighter than what we are looking at.
On a side note - For some reason the background image repeating isn't working in the jsfiddle, but I haven't noticed a problem with it outside of that.
Any advice that you all can offer would be greatly appreciated.
Thank you.
EDIT
One other thing I am noticing with the sprites. It appears when I hover over an image the first image doesn't disappear, it still remains while the hover image appears on top of it. Is that how it is supposed to work? Because my images are semi-transparent, this is something I would like to avoid if possible.
Here is a link to the site in action: http://bit.ly/h1OXQA
Could be a width, margin-left, or even position relative/absolute giving problems here. I have not checked in depth through all css code to see the cause. A fast/dirty fix, obviously loading alternative css or html for IE7, is that setting (in IE7) the UL #social with top:190px and left:100px , it seems to fit ok (or fine tune to the preferred position) .I'd go from here to guess what is causing to act differently.
Seems you already fixed, images seen light when not hovered, darker when hovered. All in IE7.
I have one problem with borders it TD tags. I have no idea why Firefox don't display borders and Google Chrome displays.
Look at this: http://mirgorod.us/sandbox/labirint/
Problem solved.
td must have
I looked at your website, you should put
in the td to see the border. By keeping the cells empty, Firefox doesnt display borders.
In the bottom cap of this page (bottom with corners) I seem to be having a weird IE6 issue. I've tried Google with no luck, as really, how do you ask this question.
In IE6, the corner images that are floated left and right seem to cause the whitespace to drop.
http://www.duncanhadleytriathlon.ca/
Any suggestions for why this may be?
Are you using paddings? If so, you must subtract the padding from your other values (left/right).
I don't know if it helps or not but I noticed that there is also an issue (probably the same one that you said) in Firefox 3.6.3.
I suggest you use the DD_roundies javascript for making rounded corners in IE browsers. It can be found at:
www.dillerdesign.com/experiment/DD_roundies/
[Edit]: The issue that i said is about the green panel's rounded corner at the bottom of the page.
My suggestion would be to use position: absolute to place the images instead.
Other ideas would be:
Drop #mtmi and just make the background of #mtm white (you'd need to modify the images to make the background black instead of transparent.
Even possibly drop #mtm and but the images directly in #main
Ignore old browers and use CSS3 rounded corners.