I know its my fault. I know by the way the height is working correctly with the packages and that I offset the problem (just to get a design done) by using a bunch of breaks (br tags) lol.
Anyways, the site looks exactly how I want it to in chrome (minus the breaks (br tags) hack)...In firefox, its a mess. It actually looks good on IE...but not functional -.-
Will take me a good 2-3 hours of tweaking and changing tid bits of the CSS. Would take a CSS expert 5 minutes, so I came to ask what the heck is going on? Is chrome just really forgiving of my bad coding or is firefox confused?
My main concern right now is getting everything to look the same, and properly (none of those breaks (br tags) hacks). Then I will focus on getting IE functional later.
Here is the site.
To fix the Payment Section in firefox i have modified your html as follows-
<div class="Savings0 custom-radio-Length"><label style="border:white;"> </label></div>
<div class="Savings3 custom-radio-Length"><label style="border:white;">15% off Total <br/> Save $1.35</label></div>
<div class="Savings6 custom-radio-Length"><label style="border:white;">20% off Total <br/> Save $3.60</label></div>
<div class="Savings12 custom-radio-Length"><label style="border:white;">25% off Total <br/> Save $9.00</label></div>
After going through the validation as Sotiris suggested, I realized that having block elements in an inline element was causing firefox trouble.
I had DIV's and H3's in label tags, which is why it got messed up. Weird that IE8, Chrome, Safari still displayed OK...But firefox got weird. I understand its valid for firefox to get weird because it was against the rules to do so, but it should be more forgiving about that.
I replaced using H3 with a span that had similar formatting that I wanted, and also replaced the DIVs I had as containers to inject HTML using javascript and instead just appended the HTML instead of looking for a DIV.
Related
My testing link is jcleung.com/m2g-test/
For some reason, the styling I have on my form is working on every browser (inclduing lower versions of IE) except for IE9!
Anybody else have this issue of know a fix?
Firstly, you have some validation errors that may be worth fixing.
Secondly, for some reason the element (on which you target your CSS) doesn't contain all the fields in ie9:
You have your <form> wrapped with <p> tag and I wonder if that makes it go crazy? Anyway, I'm pretty sure it's a html bug and I'll keep you updated if I find the problem.
EDIT:
Ok, I did some tests and I'm 99.9% sure it's because the form is wrapped with p
I have been trying to give my (wordpress-powered) website a standard look and feel across all platforms and browsers. I think I'm almost there, but have a weird problem with Internet Explorer.
The font size looks completely fine on everything except IE, where it is huge. I understand this is a fairly common problem do to IE/CSS quirks, but I have not been able to solve it using any of the fixes found in this forum or elsewhere (for example I've changed all font sizes to .em rather than px).
I know there's a number of errors when you use the validator, but I don't see any errors there that seem to be causing it.
To make matters worse, everything renders perfectly when viewing an individual post (and only posts- it's still weird when you see a page). I've tried going through the html line-by-line to try to figure out what's on the single.php that isn't on anything else (and vice versa), but have come up short. IE also seems unresponsive to pretty much any changes I make to the font.
My site is http://andrewkurjata.ca if anyone is able to figure it out.
Thank you in advance!
If you view Source then you will find following Code
<h1>
<h1>AndrewKurjata.ca
</h1>
Now here you have started two < h1 > and ending only one...
In Firefox and other browser it is closing first < h1 > automatically. But in IE8 it is not closing.
So inner < h1 > is taking 160% of outer < h1 > giving you bigger size issue
Remove one h1 to solve
Maybe CSS reset might work with you http://developer.yahoo.com/yui/reset/
When using IE8 to view IE7 through the developer tool's browser mode feature, I am having an odd recurring problem with CSS. When I make changes to an external stylesheet and then reference that class in the HTML, it's like IE7 won't recognize it at all. If, however, I put that same styling inline, IE7 will obey it. Has anyone heard of this before? Here's a simple example to help illustrate what I'm saying:
External stylesheet:
.bold {
font-weight:bold;
}
Call in HTML:
<p class="bold">My paragraph here</p>
No changes will be effective in IE7, although all other browsers are fine.
If however, I do this:
<p style="font-weight:bold;">My paragraph here</p>
IE7 seems happy. What's the difference? Do I really have to make CSS changes this way, or is there another workaround?
I'm baffled as to what the issue could be. I don't know if the developer tool's browser mode has a quirk and doesn't quite work as a real-life version of IE7 would, or if this is something completely different. I am using IE8 (I can't upgrade to IE9 at this government computer), but I've heard the problem persists with my changes in IE9's browser mode of IE7 too.
We're using ColdFusion to generate the HTML, using an HTML5 doctype (), and I've added a timestamp parameter to the 2 external stylesheet references so the browser is forced to grab a new copy every time.
Any help with this mystery would be hugely appreciated - thank you!
======
For #Stano or anyone else who is interested in recreating the exact problem, here is a stripped down version of it: https://docs.google.com/open?id=0B02DZPpIlMwGSk1VZHRDUHNCTkU (Can click File > Download to get the zip). Notice in IE7, "Photographer" is fine because it has inline styling, but the others aren't picking up anything.
With regards to your comments, you're right in saying that it could be a caching issue, but it could also be an issue with that stylesheet (though it doesn't look like that's the case), another stylesheet, or invalid HTML.
One of the things that I want to correct you on, because I think it may influence your understanding of how CSS and HTML interact, is that class attributes in HTML elements do not call CSS. Rather, CSS rules tell the browser agent how to render things with certain attributes. This is why we are able to use the elements ID, name, groupname, class, and other values to identify which elements to apply which class to.
I mention this because if you have invalid HTML (a missing end tag, a missing arrow, etc.) it can do all sorts of weird things. A few days ago it helped me solve an issue where a misplaced tag was actually causing a script of mine to loop on one of my pages.
Take a quick second and validate your HTML using the W3C Markup Validator.
Problem:
Thanks for taking the time to read this. I'm having a problem which I need to solve as simple as possible. There's a website I'm re-developing, but since I updated to IE8, I've totaly forgotten about IE7, but ofcourse, there are still people using it.
I need to know what specific things I should change for this site to display the same way as it does in IE8. But I don't know where to start. Is there anyone with experience in this, who can give me a guideline? Are there scripts for doing so?
URL: http://www.testsite.c-tz.nl/
If you view this with IE8 it looks perfect.
But if you view it with IE7, things are not where they supposed to be, very ugly.
As the other said, your question is to broad. You'll need to break it down in smaller problems - which will possibly help you solve it yourself along the way.
One thing I did notice: IE has problems with display: inline-block on elements, which were orignally block elements. Either use span (only possible if it doesn't contain block elements), or use another method to places blocks side by side such as float.
BTW, you have far too many divs in your HTML. It's not necessary to wrap every img, every ul, etc. in it's own div. Usually any styles you apply to the div can just as well be applied you the "wrapped" element directly.
This is not a cool idea... But you can try when you are sick with very old browsers like ie6 or ie5 ...
1.use javascript to detect the browser and version..
2.later use the similar way to redirect the visitor to download the IE 8..
<script>
if(''+browserName+''+fullVersion+'' == "Microsoft Internet Explorer6.0" )
{
alert("You're using an Old Browser.Update the browser to view the website.(or) Try Latest Google Chrome , Firefox , Safari, Opera")
window.location = "http://www.microsoft.com/download/en/details.aspx?id=43"
}
//document.write(''+browserName+''+fullVersion+'');
</script>
I need to prepare print css style for some page. It's possible to have footer on every printed page?
I tried the code, I've found on the web:
display:block;position:fixed; bottom:0px;
but it works only in Firefox.
I can try to fix it with table, but in Q. here: CSS: Repeat table headers in print mode is info, that it doesn't work in IE5 (maybe I made some error, but it seems, that it doesn't work even in IE7).
Does anybody fixed problem with printing footer on every page in IE? Doesn't matter if with tables or without them.
Thanks for help.
I do not think it is possible to print headers and footer using IE current, since Even in IE8 it is compliance to CSS 2.1. But there are other tweaks to get around the problem. Hope this URL will help: http://msdn.microsoft.com/en-us/library/dd433064(VS.85).aspx.
PS: The URL you referenced, on the bottom of the page specifically said works only on safari.