26 replies [Last post]
backfolder
Offline
Regular
Last seen: 14 years 1 week ago
Joined: 2005-10-13
Posts: 14
Points: 0

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.-

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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.

backfolder
Offline
Regular
Last seen: 14 years 1 week ago
Joined: 2005-10-13
Posts: 14
Points: 0

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.-

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

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!

Verschwindende wrote:
  • CSS doesn't make pies

backfolder
Offline
Regular
Last seen: 14 years 1 week ago
Joined: 2005-10-13
Posts: 14
Points: 0

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.-

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

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 Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 14 years 2 weeks ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

Bad preview in Firefox, total disaster in Opera

Here. There's a nice DOCTYPE article in my sig. Help yourself.

->Day<-

backfolder
Offline
Regular
Last seen: 14 years 1 week ago
Joined: 2005-10-13
Posts: 14
Points: 0

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.-

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

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 Laughing out loud)

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 Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

backfolder
Offline
Regular
Last seen: 14 years 1 week ago
Joined: 2005-10-13
Posts: 14
Points: 0

Bad preview in Firefox, total disaster in Opera

F _ C K !!!

I´m thinking seriously to start from the begining...!!!

backfolder.-

drhowarddrfine
Offline
Leader
Last seen: 9 years 46 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

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.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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.

backfolder
Offline
Regular
Last seen: 14 years 1 week ago
Joined: 2005-10-13
Posts: 14
Points: 0

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.-

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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.

backfolder
Offline
Regular
Last seen: 14 years 1 week ago
Joined: 2005-10-13
Posts: 14
Points: 0

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.-

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Bad preview in Firefox, total disaster in Opera

Shock

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

backfolder
Offline
Regular
Last seen: 14 years 1 week ago
Joined: 2005-10-13
Posts: 14
Points: 0

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.-

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

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 Laughing out loud

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.

Verschwindende wrote:
  • CSS doesn't make pies

backfolder
Offline
Regular
Last seen: 14 years 1 week ago
Joined: 2005-10-13
Posts: 14
Points: 0

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.-

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

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 Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

backfolder
Offline
Regular
Last seen: 14 years 1 week ago
Joined: 2005-10-13
Posts: 14
Points: 0

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.-

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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.

backfolder
Offline
Regular
Last seen: 14 years 1 week ago
Joined: 2005-10-13
Posts: 14
Points: 0

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.-

backfolder
Offline
Regular
Last seen: 14 years 1 week ago
Joined: 2005-10-13
Posts: 14
Points: 0

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.-

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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 */

backfolder
Offline
Regular
Last seen: 14 years 1 week ago
Joined: 2005-10-13
Posts: 14
Points: 0

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.-