Thu, 2005-10-13 12:46
Hi all,
I´ve just finished one web site made totally in CSS.
I´ve validate it, and fix some errors (not warnings).
But the problem came when previewing in Opera 8.5 and Firefox 7.02. In Firefox preview is not very well, but in Opera is a total disaster. Imagine how disaster it is, that I´m thinking in starting from CERO and use <tables>.
The thing is that in IE, preview is ok. So I ask you for advice to fix this before start from the begining.
So any advices are relly wellcome!
Thanks in advance.
backfolder.-
Thu, 2005-10-13 12:58
#1
Bad preview in Firefox, total disaster in Opera
Its a really really good idea to develop your site using Firefox and then fix the problems with IE. Its much quicker that way, Firefox provides lots of handy tools to assist in page development and debugging and it is (probably) the most compliant browser available.
The problems you are seeing are most likely IE problems, trying to debug them by looking at two browsers which do things correctly is the wrong way about.
First off, for us to be able to help you need to give us a link to your page and tell us what you are trying to achieve.
Thu, 2005-10-13 16:29
#2
Bad preview in Firefox, total disaster in Opera
Thanks Chris for your interest!
Here is the link, just for test purposes, so I do not dare to upload to the comercial domain until it be fixed at least fo Firefox.
TESST WEB: http://personal.telefonica.terra.es/web/demeargo/alyred/index.html CSS: http://personal.telefonica.terra.es/web/demeargo/alyred/alyred.css
Any coment is really and urgent needed...
backfolder.-
Thu, 2005-10-13 16:46
#3
Bad preview in Firefox, total disaster in Opera
First off you should validate your page and correct any errors - there are a few.
Is there a reason you are using the loose doctype? If you are building a new page sticking to strict will give you a more futureproof result.
You seem to have quite a few superfluous <div>s. Many divs are given a width of 700px and floated left - why is that?
On most pages you have a single column layout. I doubt there is any need to float the divs on those pages.
For your <ul> on the index page, FF indents a list using padding, IE using margins. From the look of it you have zeroed the padding, cancelling FF's indent. You should specify a margin-left to get FF to indent the list.
Thu, 2005-10-13 17:24
#4
Re: Bad preview in Firefox, total disaster in Opera
backfolder wrote:
Firefox 7.02.
Whoah, did I miss something? I thought I was on the edge with 1.5!
Thu, 2005-10-13 17:50
#5
Bad preview in Firefox, total disaster in Opera
Quote:
Whoah, did I miss something?
LOL ! Sorry it is 1.0.7...
@ Chris..S
Thanks again for your help. I will try to fix those isues, but the only thing I can´t fix is the opacity trick and the others warnings. Let´s see...
Respect "doctype" I don´t know exactly what are you mean... I use it because TopStyle generate it.
backfolder.-
Thu, 2005-10-13 17:55
#6
Bad preview in Firefox, total disaster in Opera
There are three different doctypes - Loose, Strict and Transitional/frameset
You are using the loose one - you may as well use the Strict one 
Thu, 2005-10-13 17:59
#7
Bad preview in Firefox, total disaster in Opera
Here. There's a nice DOCTYPE article in my sig. Help yourself.
->Day<-
Fri, 2005-10-14 08:54
#8
Bad preview in Firefox, total disaster in Opera
OK! Thanks for the DOCTYPE doc at ALA.
I´m just changing all the DOCYPE´s in my HTML code, and I´m using the next one:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">.
Here´s one question: ¿which DOCTYPE will be more compatible at least for IE and FF? ¿Is it correct the one I´m using now?
Things didn´t change so much, so I will start to recoding the CSS file seeking the recommendations from Chris..s.
Another last thing: FORMS. If you see Formulario.html page in FF and Op. you will see a complete desaster. How can I fix this? What I´m doing wrong? Should I use <tables>?
Thanks a lot for your time and patience!
backfolder.-
Fri, 2005-10-14 09:00
#9
Bad preview in Firefox, total disaster in Opera
RE: the doctype issue, any doctype is fine for IE and Firefox as long as they are complete (ie with the URL - which your one has got )
Once you really get the hang of CSS and HTML design, you may decide to start using the Xhtml 1.0 strict doctype - but see how you go
Fri, 2005-10-14 12:16
#10
Bad preview in Firefox, total disaster in Opera
F _ C K !!!
I´m thinking seriously to start from the begining...!!!
backfolder.-
Fri, 2005-10-14 15:49
#11
Bad preview in Firefox, total disaster in Opera
That's the best way to learn something rather than getting frustrated with what you have. Probably all new things should be created with the idea of throwing the first one away.
Fri, 2005-10-14 16:38
#12
Bad preview in Firefox, total disaster in Opera
Seems much better now. Only thing still missing is specifying margin-left for the UL on the front page.
Fri, 2005-10-14 17:12
#13
Bad preview in Firefox, total disaster in Opera
Thanks drhowarddrfine for emotional support and Chris..S for his very useful tips... =)
Quote:
Only thing still missing is specifying margin-left for the UL on the front page.
I´ve been trying but it doesn´t work or I don´t know how to fix this isue in FF...
Another thing is the head image, it apears put off center, I don´t know how to solve this in FF...
And the las thing the upside menu and the bottom menu, I can´t fix this... so I ´ve raised to start from the beginin with structure.
Maybe starting with something like this could be helpful:
<html>
<head>
<style type="text/css">
#head{background-color:yellow; height:120px;}
#colcontain{border:solid red 1px;}
#cola{background-color:green; width:30%; float:left;}
#colb{background-color:#CCC;}
#footer{background-color:#069; clear:both;}
</style>
</head>
<body>
<div id="head"> Head </div>
<div id="colcontain">
<div id="cola"> column </div>
<div id="colb"> another column </div>
</div>
<div id="footer"> footer </div>
</body>
</html>
Now that you know my work, do you have any advice for my new structure to make full compatible with IE, FF and Op ?
Thanks a lot again!
backfolder.-
Fri, 2005-10-14 21:28
#14
Bad preview in Firefox, total disaster in Opera
colb should have a margin-left: 31% (at least a little more than the width of cola). For colb, the other thing you may find useful is to either specify an overflow value (hidden or auto) or to give it a width and float it too. This will contain the effects of any clears within the column.
div.lmain - the div that contains the list on index.html should be a <ul> ... </ul>. <li> elements must be contained by either <ul> or <ol>. Simply changing that element from a <div> to <ul> in your html should be sufficient.
Mon, 2005-10-17 11:36
#15
Bad preview in Firefox, total disaster in Opera
Things are going wrong. No way to fix the problems between brownsers, so I better try to star using <tables> and totally forget about CSS layout and positioning.
Thanks to all for your patience.
backfolder.-
Mon, 2005-10-17 13:30
#16
Bad preview in Firefox, total disaster in Opera
Next time it may be better to start and build the page slowly - ensuring each "layer" and "region" is correct before proceeding to the next one. CSS is scalable so a working "region" can be plugged into the appropriate container in a "layer" and a page can be constructed from component parts which can be perfected on their own in simpler test/demo pages. As your understanding of CSS layouts improves and your library of code snippets increases you will be able to go straight to complex pages.
There are some really good links on CSS based layouts ...
- http://css-discuss.incutio.com/?page=ThreeColumnLayouts
- http://www.glish.com/css/
and other useful information ...
- http://www.cssplay.co.uk/
"layer" a level at which all elements are siblings
"region" an area encapsulated within a single element with a specific internal layout
Mon, 2005-10-17 21:06
#17
Bad preview in Firefox, total disaster in Opera
I´ve must said special thanks goes to Chris..S.
Yes, you´ve been a great support and I will still learning CSS because it´s a great value (except for the brownsers´incompatibility due to the "young baby" CSS is).
Thing is that, I´m not coder or programer, I´m graphic designer so I spend so much time doing this job, and results are a completely disaster. Maybe another useful way to me is using a PS template, less powerful to change layout/skin/appearance and more heavier in Kb´s weight and manipulation to update in a regular basis.
To watch sites like www.csszengarden.com is the best way to keep the CSS spirit alive in any graphic designer, so I will stay learning.
Finally, I will seek that links from above. That´s for sure!
Thanks a lot again, you´re great!
backfolder.-
Tue, 2005-10-18 07:20
#18
Bad preview in Firefox, total disaster in Opera
backfolder wrote:
I´ve must said special thanks goes to Chris..S.
Yes, you´ve been a great support and I will still learning CSS because it´s a great value (except for the brownsers´incompatibility due to the "young baby" CSS is).
It's only been around for what, 10 years? Hardly young
The only browser that has issues is IE, because - well, let's face it - is utter pants, and MS don't care enough to fix it.
Tue, 2005-10-18 17:34
#19
Bad preview in Firefox, total disaster in Opera
Well... I have good and bad news...
The thing is the site likes to my boss, and works in MAC (this told me a friend, I´ve don´t see). That´s the good one.
The bad one is that I will re-take and reload the project better than start from Cero (so cold!!!). Maybe I will do a main title window talking about the compatibility issue (web optimized for IE at 1024x...) until I fix this incompatibility design I have.
Yes! I said I have... because I´ve been watching several sites in those 2 problematic brownsers to me FF and Op and pages such as zengarden looks pretty good in all them... (&#%@!!!)
So, to avoid the page to "dance" vertically, should I use a main fixed container? The problem came in the footer as you can see. In FF it is a "fatal display error"...
Again, any advice from Masters is really wellcome and appreciated.
TIA.
backfolder.-
Tue, 2005-10-18 19:30
#20
Bad preview in Firefox, total disaster in Opera
It's not worth the hassle trying to get a footer stuck at the bottom of your screen. Go with the natural document flow
Tue, 2005-10-18 20:13
#21
Bad preview in Firefox, total disaster in Opera
Thanks thepineapplehead, but in this site http://www.cssplay.co.uk/index.html you can see that the footer doesn´t "dance". All I want to get is something like that.
Anyway I supose that you´re right with this, and it could be easier for any web brownser...
backfolder.-
Tue, 2005-10-18 20:32
#22
Bad preview in Firefox, total disaster in Opera
if by dancing you mean what i think you mean, themaninblue has the simplest demo/description for footers without rythm.
Tue, 2005-10-18 21:04
#23
Bad preview in Firefox, total disaster in Opera
Yes Chris... You only have to look my project menu options in FF and you see a true dancing footer, or better: runner...
All I want to get is a footer like this: [ http://www.themaninblue.com/experiment/footerStickAlt/good_example_long.htm ] So I better stay to see that demo-web code.. hehe...
backfolder.-
Wed, 2005-10-26 09:56
#24
Still mising something
Hi all again!
I´ve just tweak a little bit the code, and now all apears good in IE, FF, and Op. But foot is still "dancing" so if you can give me any advice it will be more that wellcome (and I will finish!).
Here is the test page:
http://personal.telefonica.terra.es/web/demeargo/alyred/ALYRED--CSS_3.html
As ever, thanks so much!!!
backfolder.-
Wed, 2005-10-26 15:02
#25
Bad preview in Firefox, total disaster in Opera
Quote:
#container-page {
margin: 0 auto;
width: 760px;
background: #F7F7F7;
text-align: left;
position: relative;
min-height: 100%; /* For Modern Browsers */
height: auto; /* For Modern Browsers */
height: 100%; /* For IE */
}
The red text is correctly commented that its intended only for IE. However all browsers will see it. That is what is causing your problem.
Move that outside #container-page, eg.
* html #container-page {height: 100%;} /* For IE <= 6 ONLY */
Thu, 2005-11-03 17:59
#26
Bad preview in Firefox, total disaster in Opera
YES Chris that was!!!
Now I can see perfectly in all browsers, so I´m gonna finish the other html pages...
Thanks again for all your post, and specially to Chris...s, who has been a great support and motivation for start living CSS.
Hope to see you around here =)
backfolder.-