On this site ( http://test.photoline.nl/biografie/ ) I have a Header2 (Biografie). When using IE8 (normal mode) the top of the header is not visible or disappears when the mouse is moved over the page.
I really have no idea why. CSS is not part of my core knowledge, so maybe there is a simple fix for this.
Thanks!
This is likely because of using a webfont. Sometimes they get clipped in older browsers. Try modifying the line-height of the <h2>:
h2 { line-height: 16px; }
I would also suggest using a CSS reset like normalize.css.
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.
I'm working on a site and I have some problems that I hope you guys can help me with :)
If I put bold on my text in the menu it looks too bold in Firefox :S, but it looks fine in Chrome.
In Firefox the double border on the #content container is outside of the shadow effect :S, but looks good in Chrome.
Screen shot on Mac Firefox 5.0.1 and Chrome 13.0.782.112:
This is my project.
I hope some one can help me out with this.
If you have something I better I can do, I will be glad to hear that too :)
Your first issue regarding bold font looking different between the browsers is just because of the way browsers render text differently. There is nothing you can do about it, unless you go the horrible route of using images instead.
Your second issue is not about the border but rather the outline. It is caused because of the way Firefox interprets the outline when box-shadow is applied. It applies it outside of the shadow instead.
You can put the code below in your css to target Firefox and bring the outline back in:
#-moz-document url-prefix() {
#content{
outline-offset: -11px;
}
}
Live example: http://jsfiddle.net/tw16/n8bet/
#1: There differences in font rendering in every browser. You can try numeric values instead of simply bold to narrow the results ( http://clagnut.com/blog/2228/ ). Also read the answer on this SO entry: Same font except its weight seems different on different browsers
#2: remove this line from #content css:
outline: 1px solid #B9BDBE;
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.