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;}
Related
my friend was helping me make a new design for my website but has since gotten a full time job. Web Design is not my strong suit and I can't get it to work across all browsers!
So right now, my website looks good in Chrome and Safari. But is broken in FireFox
http://dl.dropbox.com/u/22866203/sb%202/speedbump.html
http://dl.dropbox.com/u/22866203/sb%202/speedbump.css
I was researching/trying different CSS Resets to fix this problem (Meyers Reset) but this only seemed to break the page in Chrome and Safari as well.
Any suggestions would be much appreciated!
If you started without a reset then a reset is not going to help. You particular problem is that you're not clearing your floats. To solve it do this:
#social-media, hr { clear: both; }
Btw, you have a 404 error on an image and many other warnings. Check firebug or devtools.
As I was messing a bit with your site with firebug, I noticed that if you add to some divs the property float: left it arranges the site to look like it does in chrome.
Download FireBug for firefox (great tool) and arrange the floating divs exactly how you want them to be.
Hope it helps.
Give the #wrapper overflow:hidden and remove margin top from previous and after divs.
The problem is that you have floated elements in the body text (left) and the green box (right) but the parent isn't floated, meaning that the floated elements will not affects it's overall height. Also, don't use hr, instead, use borders.
http://dl.dropbox.com/u/33811812/stackoverflow/speedbump/Speedbump.html
The paths are now relative to my folder and you'll need to change them back.
IDs need to be unique(#wrapper) I see four ( 4 ) instances of it from the image above.
Use a class instead as it can be re-used.
.wrapper:after{
visibility: hidden;
height:0;
display: block;
clear:both;
*zoom:1;
content: '.';
}
I am creating a website and there's a strange white space at the bottom of the page (only at IE). safari is fine. i am using ie8.
I want the white background ended after that black navigation links.
http://www.applezone.com.hk/newrx/
I can't figure out which part of the css causing that white space.
Thanks.
try adding those:
.navlink{
display: inline-block;
margin-left: 51px;
}
i don't have IE8 to test on but i do use "IE tester" program which showed me the problem.
If you use Firebug (Firefox add-on) you can select that white space and it will show you where it is in the DOM, i.e. what the HTML is that is actually generating it - which element it's part of.
You can also switch on and off the individual styles on the fly.
The equivalent in IE is to hit F12 and get the 'Developer Tools' console. Find -> Select Element by Click.
Try display:block and/or margin:0 and/or padding:0 for the element in question. One of them is going to be the culprit.
IE 9 on Hover over a link, pushes some of the HTML down the page.
When i remove the color from
td.subarea > h2 > a:hover { color: #aa051a; text-decoration: none;}
the problem does not occur.
I can't paste all the code here, and fairly sure its a unique problem to this page.
But maybe someone out there has seen something similar.
Its not moving the Link(a tag) down the page, its the whole containing table that moves.
This problem seems to occur in IE9 when the container element is set to overflow: auto and there is some hover action taking place in the child element.
There is a very simple solution of adding min-height: 0px to the container element, which works.
The detailed explanation of the bug and this solution can be found in this link:
http://blog.brianrichards.net/post/6721471926/ie9-hover-bug-workaround
Make sure your line-height and font-size properties are the same for normal and hover.
Sort of found the problem, well makes the table stop moving. margin-top:-20px.
Although it olny shifted down about 10px.
Probably some IE9 rendering issue. IE7/8 actually move the table on intial loading.
The font sizes, line-heights, all that css, is all good for the link.
Marc B is probably close to the issue of IE rendering something wrong and cauing floats and such to mess up.
Now have to real style a table layout wihtin a table layout page(ugh, hate table layout).
For me I had to specify
height:100%;
Then I had to go ahead and specify
width:100%;
The 'min-height: 0px' by mohitp above got me on the right track.
Normally I'm able to fix my HTML errors by myself since it's not that complicated, but this time, I'm having a hard one.
I decided to change my navigation on my website and most of it works well & most browsers displays it correctly.
Where my problem is tho, is that I have a 5-6px margin I cannot find where is coming from. The link & image showing my problem will be below.
My second problem is that IE7 shows a huge margin, and again, I cant spot where it's coming from.
The webpage URL is: Deaglegame.net & below here is the image:
I'm leaving for work in a couple hours, so if I dont reply it's not because I dont wanna reply, I'll check this thread as soon as possible, but any help is greatly appreciated!
Thanks to anyone willing to help!
The IE7 Issue is due to compatibility view. This will be forced on you by default if you are visiting the page through an intranet address. You can get around this issue by dropping the bottom padding and setting the height to 175px: for the main div. This also seems to fix the margin issue when running compatibility view.
You menu item list is somehow causing the margin issue outside of compatibility view, I would suggest when running IE to hit F12 and that should open Developer tools, that is how I found these settings that needed to be adjusted.
#Mmerrell's fix for div#main should sort one half of the issue. Next comes #Bumble Bee's observation for your ul#navigation li a span styles. The padding of the SPAN elements is causing your links to push the content.
/* deaglegame.css (line 48) */
#navigate li:hover a span,
#navigate li.hover a span,
#navigate li.active a span {
/* removed padding: 12px 0 0; */
}
/* deaglegame.css (line 30) */
#navigate li a span {
cursor: pointer;
float: left;
height: 38px;
line-height: 2.5;
/* removed padding: 12px 0 0; */
position: relative;
}
Drop the padding on them and set the line-height property. In general, it's better to use line-height for the vertical positioning of text (it applies to content of both block and inline elements) in place of padding.
You may want to consider using YUI CSS reset in the future (or perhaps even integrating it now), http://developer.yahoo.com/yui/3/cssreset/ . I've found it helps me considerably when designing cross-browser compatible sites, and has almost eliminated weird margin or padding errors I come across.
Check the image below, which might solve your first problem. Try to specify a lesser value for the padding there. Consider using a tool like firebug to resolve this kind of issues.
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?
:)