I seem to be having two problems:
My top nav bar links don't work in Firefox
The design breaks in IE7.
Any help would be much appreciated! I have validated it, and I know the slider and video don't validate, but I still have these problems even when I take those out. Thanks so much for any help you can provide!
http://www.christthesavioracademy.org
You can fix the IE7 problem by making the following changes:
On #content, add position: relative; padding-top:1px.
On #logo, remove the margin and add position:absolute; top:0; left:9px.
On #bottomnav, remove clear: both.
I can't reproduce your Firefox issue. If there is still a problem, hopefully the steps above will have helped.
Related
I got a project to fix image issues for a client and this one has bugged me for days now. The site is http://www.fonolive.com. Some of the small icons that display on the front page show white space below image.
I have tried the following on
img{
}
display:block;
vertical-align:bottom;
vertical-align:top;
vertical-align:middle;
vertical-align:sub;
font-size:0px;
display:inline;
line-height:0px;
and more.
The only thing that seems to work is if I set the image height to say 130%, but the problem is recurrent on several pages across the site and this is an absolute no no.
The other solution I have worked on is resizing the images in php or using javscript etc, but that only works if javascript is enabled and seems too complex of a solution.
Please, try it in firebug and let me know what is wrong. Thanx and appreciate every input
hi guys this is my previous post i really need to get this fixed so im gonna post this here:
trouble with padding IE, FF, Chrome
I don't know the exact problem here, but I guess it's the button.
Try putting position: relative; left: -10px; in your img tag as style.
EDIT: Or maybe a bit more pixels. Fit it to your likes.
I've been working on making my website compatible with not only chrome, but firefox as well, and it's not turning out so well as I hoped it to be. Even with Firefox 9 (that i downloaded today), advertised by themselves to be the "best" browser that is compatible with more css---css3 in specific, however there were unexplainable errors, probably on my part, with some non-working css.
My first problem is with gradients. I had two gray-gradient dividers that uses the same gradient code, but produces very different results.
background-image: -moz-linear-gradient(bottom, rgb(58,58,58) 0%, rgb(85,85,85) 100%);
was the one that really worked.
background-image: -moz-linear-gradient(bottom, rgb(42,42,42) 100%, rgb(25,25,25) 0%); however, did not. In fact it showed nothing at all. I put the first one in this one to test if it works, and it did, but this one specifically would not.
Using Firebug, it changed my line of code into: background-image: -moz-linear-gradient(center bottom , #2A2A2A 100%, #191919 0%);
So was there a mistake I made somewhere? Because I can't see the difference between example 1 and 2.
My second error is not CSS3, but it is adding padding:20px; in the tags in a table. it works very well in chrome, but no padding showed up in firefox. Is there an alternative for this other than border properties, because I'm also using borders in the tags.
Thanks again for helping me! I appreciate it a lot, because this bug has been bugging me for the past hour or two, and I still haven't figured anything out.
As you found out yourself, you cannot make a gradient from 100% to %0, so the gradient steps must be ordered with the percentage rising. (even though some browsers seem to display it, you should always keep to the standards!)
Regarding the <tr>, this tag does not take a padding attribute, see https://developer.mozilla.org/en/HTML/Element/tr
Try to achieve what you want using the cellpadding and cellspacing html attributes on the <table> or CSS padding on the <td>s.
I'm running into a vertical positioning problem with a couple of elements on a page in Firefox 5. When I set a line-height on a piece of text, and give it an equal height, it doesn't center vertically the way it should. Instead it sticks to the top of its line-height.
The page in question is here: http://www.tyndale.ca/~missiodei/
Here are the two problem elements along with their CSS. In both cases the text is pushed up in FF5 but displays properly (vertically centered within its line-height) in Chrome/Chromium.
the large title link in the banner (#blogtitle a)
position:relative;
display:block;
margin:0;
padding:0;
color:#fff;
text-decoration:none;
letter-spacing:.1em;
font-family:"Palatino Linotype", Palatino, serif;
font-weight:bold;
opacity:0.6;
height:120px;
line-height:120px;
any of the drop-caps that float at the beginning of new sections of body text (p.openingPar:first-letter)
font-size:3em;
font-weight:bold;
position:relative;
float:left;
height:48px;
color:#ccc;
line-height:48px;
margin-right:4px;
You might not see these drop caps unless you look at the page using Chrome or Safari, since most of them aren't showing up at all in FF. (I'm not sure why these styles aren't being respected either).
Finally, it would be helpful to know whether this is a problem unique to FF5 or whether 3.6 and 4.0 have the same problem. I don't have any old versions of FF available for quick testing.
Thanks ahead of time for help. I've imprinted my keyboard on my forehead bashing my head over this one!
The vertical centering seems to work fine for me....
The lack of first letter styling is https://bugzilla.mozilla.org/show_bug.cgi?id=8253
Try using <span class"dropcaps">W</span> instead of styling your opening first letter in the paragraph by selector :first-letter. Let us know if it works.
I am having a problem with Safari v5 on mac. When my Google Map Api is loaded into the page it hides some of my other divs (which are absolutely positioned). The page renders correctly until the map loads. If i have a page without a map the problem does not happen.
example: www.morecambe-lodge.co.uk
it also seems to interfere with the loading of jquery ui. Is there a better way to lazy load google maps or a solution. i have tried document ready and window.onload methods but it still persists with the problem.
I have tested in firefox, ie, chrome and safari v4 and this problem is not replicated only seems to happen in safari v5.
Any advice would be greeatly apreciated, Thanks.
The z-index has nothing to do with this bug.
After I read through the following article:
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190
I was able to fix my issue by doing two things. The first was modifying every entry in my CSS that had "text-indent" to have a value of 9999px or under. I use text-indent for all my icon buttons, whether it comes from jQuery UI css or from my css. Having it set over 9999px created issues for me.
The second problem, after the text-indent was fixed, was having blurry fonts. The following helped solve this issue:
* {
-webkit-font-smoothing: subpixel-antialiased !important;
-webkit-transform: none !important;
}
Both of these are mentioned in the article, but I found that the text indent needed to be smaller than what was suggested.
this work for me :
* {
-webkit-font-smoothing: subpixel-antialiased !important;
-webkit-transform: none !important;
}
The bug posted at Google (http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190) mentions changing "text-indent: -999999px;" to "text-indent: -99999px;" on elements. Dropping one 9 fixed the problem for me.
The z-index fixes made no noticeable changes. The webkit-transform fixes rendered the page correctly but left the map unusable. It wasn't possible to drag.
yeah looks like the same problem. i have also posted the question on google. hopefully will get to the bottom of it.
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190
A clue: it seems to be caused by the stacking of elements with -webkit-transform: translateZ(0px); Once you disable/remove them, backgrounds reappear.