I am developing a website for a friend which was earlier developed by some other guy, basically, I am a PHP pro and don't ve much experience in HTML (or until now) ...
now, I am trying to validate my webpage, earlier it was showing 162 errors, I 've brought it down to 1 error (thank you) ... haha
earlier with 162 errors, it was looking good in firefox3 but not loading at all in ie6 or ie7 .....
now since I 've managed to get it down to 1 error, it's looking good in Firefox as usual and loads on ie6 and ie7 as well but not rendering properly in ie's .... page layout is a bit garbled.
the only error which remains now is .... Attribute "height" exists, but can not be used for this element. .....
now when I take care of all these mistakes ... i.e removing height="100%" in tables .... even firefox refuses to show it properly.
Please point me in the right direction ... I 've been working on this whole site for the last five days .. and it's pro-bono ....
I don't know the rules about posting links .... anyways ... here's the link for the page I am talking about ...... I hope I am making sense ...
http://www.shivgangaresorts.com/dev/aboutus.html
please view this page in ff3 and ie6 or ie7 to see what I am saying .... any help would be greatly appreciated ....
thanks a million in advance
You might try using style="height: 100%" instead of height="100%"
Most height/width properties on tags assume you are talking about pixels, so it doesn't know what your '%' character means.
See this article.
Before all, 100% as property on any element, in almost all cases are stupid. None of browsers applies correctly 100% value.
But, if you're trying to validate your document, quit the 100% value from and put it on a separate CSS class. e.g:
table {
width: 100%;
height: 100%;
}
Now i hope that your document comes valid! haha
Regards!
Related
To start with, I have examples and code here (a site I keep to play with stuff). This is the actual link just in case: http://www.williamrosmus.com/examples/calendar1_wf.html
This is an issue I am having specifically with Firefox (I'm using v3.6), and am wondering what is going on. Requonc displays reasonably and IE8 perfectly.
For a learning exercise I manually created a calendar in xhtml using CSS tables rather than traditional html tags. I set the height and width for the cells to be 100px by 100px. However the top and bottom rows, where some of the cells are empty display way too high in Firefox.
Any suggestions or comments on how to fix this to display correctly or what is going on with Firefox?
Regards,
BillR
Further to this, as per the suggestion by Robin, I logged this as a bug on mozilla.org. Someone just confirmed it there. In case anyone is interested:
https://bugzilla.mozilla.org/show_bug.cgi?id=634489
Just stick inside the empty cells?
I just tested, and this fixes it in Firefox.
I found a page which talks a little more about the problem you're having.
It suggests a CSS alternative; table { empty-cells: show }, see:
https://developer.mozilla.org/en/CSS/empty-cells
However, this doesn't seem to help in Firefox with your <div> tags with display: table-cell.
See discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=634489 and https://bugzilla.mozilla.org/show_bug.cgi?id=569645 for further details. (Using 'vertical-align:top' or 'vertical-align: bottom' on all the table cells should be a reasonable workaround, though.)
I believe this is a bug in Gecko. I trawled through Bugzilla (https://bugzilla.mozilla.org/) but couldn’t find any other people reporting this. It’s probably worth filing a bug with a reduced testcase (or just link in your current one) to see what the devs over there make of it.
Regarding a specific workaround, thirtydot’s suggestion of an is probably your best bet.
When i changed your display of the div.calendar_day to "inline-block" or "block" instead of table-cell and added float:left the height was rendered properly.
I have this site and for some reason in IE7 I can't click in the search field on the top right. Every other browser is fine. I have not been able to check other versions of IE but I presume they are failing as well. What is going on?
Hard to say for sure since I don't have access to IE7 at the moment, but you might want to look into setting the z-index of the input or its container.
Also, when I looked at your HTML it looked like something was malformed because I saw the attribute "value" without a value. Double check all the HTML is correct.
Your link is password protected, but in addition to checking CSS z-index issues, you may want to try using the position: relative; and zoom: 1; properties in an IE7-conditional stylesheet — a combination of the two tends to fix a good portion of IE7 issues. If you don't have the IE Developer Toolbar, it's invaluable for resolving display and functional issues.
While polishing my site I noticed there was some unwanted space between 2 elements, so I decided to remove it. But looking at the source, I found this:
Please check it by yourself, there's no trace of this server-side. Live page here: http://www.playersonline.com.ar/guias
Any help would be appreciated.
Not sure where the mysterious whitespace is coming from, but modifying your #k2Container CSS will solve the problem for you:
#k2Container {
padding:0;
position: relative;
top: -20px; /* adjust as needed */
}
Checked in Firebug, Chrome, Firefox Webmaster Tools, and via validator. Half indicate stray characters. Half don't.
Often times, you can solve an issue like this with Firefox Web Developer Tool's "View Generated Source" which is important for browsers like Firefox that are intelligent enough to fix the problems themselves (unlike IE I might add) Non breaking spaces are a great example of an element that can toy with IE but will never show up on Firefox with this feature. Here's the link if you don't have it: http://chrispederick.com/work/web-developer/
I'd say take 20 minutes to grep your code again for the string " . " If that doesn't find a result, by all means consider Pat's suggestion. That's one heck of a lot of divs to deal with!
Take a look at this html page.
In Firefox it looks just like I want it to look, in IE it looks "a bit weird", and in Chrome it's all twisted.
What non-standard HTML I am using that makes it looks so different between browsers? Specifically, how can I fix the Chrome & IE versions to look more like Firefox?
Note that Chrome only goes haywire if all or almost all columns have the yellow stickies. If one or two columns are empty, then Chrome displays the page just like Firefox.
Edit - here is the fixed page.
The page doesn't have a DOCTYPE. It is important to have one to tell the browsers that your page is standards compliant. Start from there and ensure your page passes validation for your chosen DOCTYPE.
UPDATE: Good job on fixing the validation! Your problem now is that the table element follows two floated divs without any clearing. You must clear the floated elements so that the following elements are laid out correctly below them.
Try the following. Google "clearfix" for a more elegant solution.
<div style="float:left">....
<div style="float:right">....
<br style="clear:both"/>
<table ....
One of the first things I'd have to suggest is making sure that your code is valid if you want cross-browser friendly.
The posted code comes up with 33 errors.
FF isn't quite as picky as some other browsers can be, and gives a lot of leeway in terms of valid code.
Try validating and fixing the problems with validity, then check it again; it might look at least a bit better.
Try validating your CSS and HTML if possible. That usually helps remove the biggest of glitches.
validator.w3.org
Float your calendar table to the left
Generally, what's the best way to tackle a layout bug in IE6? What are the most common bugs or problems that one should look for when trying to figure out why your page suddenly looks like a monkey coded it?
First Things First
Get yourself the Internet Explorer Developer Toolbar. It's a life saver and works great with IE6 and/or IE7. It's no replacement for Web Developer Toolbar or Firebug for Firefox, but it's better than nothing.
Know Thy Enemy
Read up on the quirks of IE — particularly hasLayout and overflow and the like. There are also many CSS niceties that you'll have to either do without or find alternatives. Look into how many of the popular JavaScript toolkits/frameworks/libraries get around different issues.
Rome Wasn't Built in a Day
The more you have to work with it, the more you'll remember off hand and won't have to lookup as often. There's just no replacement for experience in this. As several have pointed out, though, there are great resources out there on the net. Position Is Everything is certainly up there.
http://www.positioniseverything.net/ will certainly address your problem.
It provides comprehensive and in-depth descriptions of browser bugs along with options to work around them. A must read, in my opinion,
One good way to start learning about how IE happens to be mangling the page is to turn on red borders on different elements with CSS (border: 1px solid red;). This will immediately tell you whether it's a margin problem or a padding problem, how wide the element really is, etc.
The box model is usually the culprit. Basically what this means is that any div you are trying to position and use unsupported CSS with will cause this problem.
You may find it happens if you are using min-{width,height} or max-{width,height}.
this provides a great reference for checking compadibility with different versions.
http://www.aptana.com/reference/html/api/CSS.index.html
Noticed that Marc's post is at a -2 =D. He's only saying "resort to tables" even though they blow, because in sucky browsers like IE6, some of the broken CSS commands work in tables only (who know's why... dam you Bill Gates!!!). Here's a good reference to see what works and doesn't work as far as CSS goes. http://www.quirksmode.org/css/contents.html . It's a great reference to check on what cool effects work/don't work with various, widely used browsers. Also, always have a go-to plan for users who browse with IE6 (even though it's just about as old as mechanical dirt) as many businesses still use older browsers (including non-profits/3rd world countries etc.) So by all means, create the bugged out drop-down menu that looks WAY better than a standard horizontal menu, but create a secondary one specifically for IE6 that becomes the default when the page receives a request from an IE6 browser.
how do you define layout bug? the most frustrating layout implementation (i don't know if this should be defined as bug) in IE is we need to always specify style="display:inline" in the HTML <form> tag so that a blank line won't appear to disturb the form layout.
This question I believe has far too much scope.
Validate your code, and if pain persists, well, good luck.
The only real solutions, as with any other ballpark bug type are to google for a solution, or ask somebody who knows, ( ie: give the exact problem to us here at stackoverflow ).
You can use the IE Dev toolbar to glean an Idea, but many of the bugs are random, inexplicable, and esoteric. IE: the guillotine bug, the random item duplication bug, etc etc, the list goes on, and you can spend hours literally goofing with stupid variables everywhere and achieve nothing.
I have a simple strategy that works every time.
First, I develop the site using commonly accepted CSS to look good in Safari and Firefox 3. See w3schools.com for details on browser support.
Then, I go into IE6 and IE7 and alter the CSS using conditional includes.
This is hack free and lets you handle different browsers (IE6 and IE7 have separate issues).
Most of the issues you'll find come from unsupported features in IE (like min-width), errors in the box model (IE adds unseen extra padding (3px) to some boxes), or positioning issues. Go for those first as they are often the issue.
A common problem is padding not getting added to the width of a block element. So for layout div's, avoid using padding and instead use elements within them to define the padding.
I use Rafel Lima's Browser Selector when I need to tweak differences between IE/Standards browsers. It greatly reduces using "hacks" in your HTML to solve common problems.
You can target CSS statements for different browsers, or even different versions of browsers (Hello IE 6). It's very simple to implement, but requires the user has JavaScript turned on (most do).
.thing { ....}
.ie .thing { ....}
.ie6 .thing { ....}
We had a floating div issue that was only evident in a particular version of IE6. It was fixed by downloading the latest service pack.
In theory, use CSS compatible with IE6 layout bugs, utilise only well known workarounds (css and html filters) and code for them in a way that wont break forward compatibility, test for quirks/strict mode.
In reality, resort to tables.