Here's my page
It looks correct in Firefox, but of course in Internet Explorer, there's an issue.
The main body of the page is not displaying correctly. The left and right divs are not showing the white background that I'm trying to get them to.
Your HTML appears to be broken. For example <div id="mainbody" is not closed. Run it through a validator and fix all the markup problems.
Try separating your shortcut for background in your #left id in css. IE may not be parsing it correctly.
The #right div looks OK (I'm using IE7).
You need to change <div id="mainbody" to <div id="mainbody"> as i told you earlier.
Use the W3C validator: [Invalid] Markup Validation of modastudio.com/docs_new/bostondentalposters.shtml - W3C Markup Validator.
You've got a bad doctype that will throw IE into quirks mode, as well as missing tags, double charset calls (that should be UTF instead of 8859), duplicated meta tags, etc.....
You're also nesting tables and lists inside of paragraph tags which is invalid markup for the doctype you're using. A handful of the meta tags are not closed correctly along with capitalization of attributes which are also not allowed with the selected doctype. The stylesheet link tag is not closed correctly. The images tags in the table are not close correctly nor are the break tags.
Fix the html errors first and then see where you're at with your layout.
Good luck and hope this helps some.
Maybe not really an answer to your question, but since you seem to develop in Firefox, you might want to try the HTML Validator extension. Makes this kind of development a lot easier.
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
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.
I am having problems with my webpage. On all browsers the div aligns perfectly. However, on all versions of Internet Explorer the Div shows out of line. Here is an image of the difference:
Here is the page so that you can view the source:
Contact Page
I would really love the help, IE has done this to me several times. I would love to learn what to do in these types of situations. I read somewhere about an IE specific CSS file that would fix this but I did not fully understand what needed to be changed in this new CSS file. All help appreciated.
-Noah
Try fixing the issues presented by the W3 validator. http://validator.w3.org/check?uri=http%3A%2F%2Fkynikosdesign.com%2Fcontact.php&charset=%28detect+automatically%29&doctype=Inline&group=0&verbose=1
You can add this and it should work (at least it did just through in-browser modifications)
after your normal css
<!--[if IE]>
<style type="text/css">
#mainbox{padding-left:0;}
#servicesright{float:left;}
</style>
<![endif]-->
That aside, you're also missing some closing tags it would seem and probably the reason for the weirdness.
Issues I detected on your page structure so far (which are causing the display issue):
#main-container should not have width
you are using table for your form layout which is a big mistake (it's pushing the whole content together down)
as a workaround removing width in (1) and width=100% in (2) will fix your problem butI highly recommend to follow good practices for your page layout. (i.e. using div instead of table).
Is <H#> element inside HTML <li> element considered semantically correct?
Yep. According to http://validator.w3.org/check anyway... it's a great tool.
There are many tools that no web developer should be without. One of those tools is a good HTML Validator add-on for your browser.
Firefox HTML Validator Add-on:
http://users.skynet.be/mgueury/mozilla/
Chrome HTML Validator add-on:
http://robertnyman.com/2010/04/07/html-validator-extension-for-google-chrome/
I especially like the one for Firefox. If there is a validation error in your HTML, not only will it tell you, but it also tells you why it's bad and how to fix it.
To answer your question, I do believe h# are considered valid inside an <li> element. But it may also depend on DOCTYPE as there are different rules for different HTML DOCTYPES. However, with the validator you'll never need to ask a question like this again :)
my website : http://www.equipe94.com have a two column layout and in ie6 the right column is flushed at the button... it look like and inline problem, but even WITH the inline widget.. it's still at the bottom..
any idea to fix a wordpress template to play well with ie6 ?
thanks in advance
n.b.
As mentioned in the comment... my page don't validate...
after fixing the multiples problems now I validate in XHTML 1.0 Strict...
but the problem is still there !
You've got a few missing closing </div> tags that might be the problem: [Invalid]Markup Validation of equipe94.com - W3C Markup Validator. Scroll down in the validation report to see line numbers and source code.
You also should work with the IE6 specific style sheet that is in your theme at /headway-166/media/css/ie6.css
I have found the problem.... it's was an hentry that overflow the content box.... ie6 detect it !... in css i have add overflow:hidden then it's ok !.. thanks anyway