Request for testing CSS page (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Geraldo -> Request for testing CSS page (8/9/2007 16:51:39)

Dear Friends,

I have started to redesign one of the websites that I maintain to full CSS.
The layout of the current site is built with heavy use of tables and I would like to move away from that solution.

I spend a reasonable time span to learn myself some CSS, which resulted in a first page.
What I would like to ask if someone (or somemore) can/could check this first page and tell me what you think of it.
The current site is A&C Koi and the new page is A&C Koi (with CSS).

I would be pleased to receive feedback about:
- look in outher browsers than IE7 (used by me);
- structure and coding of the used external style sheet;
- use of the inline styles;
- eventually problems caused by problems in the external stylesheet;
- eventually improvements to the external stylesheet;
- any other comment about the structure and layout of the page itself.

Many thanks in advance for your feedback,



Tailslide -> RE: Request for testing CSS page (8/9/2007 17:12:24)

Hi, I'm not on my pc with FF so I can't give you too much detail but the layout is badly broken in Safari and camino on the mac.

I'll have a look tomorrow if no-one else spots the issues first but in the interim there are a few things you should do:

1. Don't use inline styles - it makes it harder to maintain the site and change stuff easily and styling can become confusing. All style rules should be in the stylesheet.
2. Once you've done that then you should go to the http://validator.w3.org/ and check that your code is correct.
3. Once you're sure your coding is correct then you need to download Firefox and Opera and check the results there.

Just a tip - IE interprets code in a much less strict manner than Firefox and Opera (and other modern browsers). So it's much much easier to use Firefox as your primary checking browser and then fix for IE rather than the other way around. Build for Firefox, check in Opera as you go along and fix for IE.

Also download the standalone versions of IE so that you can test the site in older versions of IE.

Really, if you're using a PC you should be checking your site in at least Firefox, Opera, IE7, IE6 and Safari (beta PC version now available) as you go along (not when you've finished). I'd suggest also testing in IE5 / 5.5 although I know some people don't think that's necessary.

Hopefully that will help.



Geraldo -> RE: Request for testing CSS page (8/11/2007 13:02:22)

Thank you Tailslide for your responce.

I have installed FireFox and saw that the page did not look is it was sopposed to look.
Since then I have made many improvements and now the page looks the same in IE7 and FF2.0.

Could you check it once more how it does look in the other mentioned browsers.

Further, I still would like to receive some feedback on the external style sheet used mixed with the classes on the page.

Regards
Ger Aben



Tailslide -> RE: Request for testing CSS page (8/11/2007 13:30:26)

Hi again

Yes it looks the same in FF and Opera but the right hand column is wrapping in IE6, probably due to the IE double margin bug. Add "display:inline" to the rules in the stylesheet for the central and right hand divs (just the main ones, not all the ones within them) and that should solve that problem.

I'll check on the mac browsers later on.

As mentioned, it's not a good idea to have inline rules mixed with an external stylesheet. It can lead to confusion and will make the site harder to update. Unless there's an exceptional circumstance I'd remove all the inline classes to the external stylesheet.

edit: it's fine in Camino and Safari on the mac



Geraldo -> RE: Request for testing CSS page (8/13/2007 16:30:17)

Thanks again Tailslide,

did you have a change to check the site in the other browsers such as you indicated in you previous reply.

Since last time I have updated the page a little bit.
I have brought the navigation into "header2" and removed header3 completely, I think that is better.

Also I have updated the CSS for the top navigation a little bit.

However I have found a little problem with FF and IE.
I had to give the navigation a -4px top-margin to get it properly aligned in IE.
But in FF this negtavie margin needs to be larger to make it look the same as IE.

Is there a better solution to this probem than using a negative top-margin, which comes up the same in all browsers?

Thank again for any reply.



Tailslide -> RE: Request for testing CSS page (8/14/2007 2:32:19)

Check my last post regarding other browsers.

Far as the menu goes - you need to add this in: 

#header3 {overflow:hidden;}


to get it to look nicer in Firefox as currently you can see the right hand edge of the main div border - the #header3 div won't contain a list of floats unless you either clear the float or trick it as I've done.

Otherwise - don't worry about a pixel or two difference between browsers, you'll take years off your life! As long as it looks good that's enough. The general public won't be looking at the site in two different browsers side by side comparing them. If it looks ok in different browsers then that's enough.



Geraldo -> RE: Request for testing CSS page (8/15/2007 12:16:04)

Hi Tailslide,

as indicated in my previous message I have now "really" removed the haeder3 div and brought the navigation in header2.
The navigation now looks the same in FF and IE 7 and 6.

There is however still one remaining problem in IE6 and that is that I get a double margin between the left column and the center column.
I tried to solve that as indicated by you with "display: inline;" but that does not solve the problem.

When I give the middle column a negive margin of -11px it looks OK in IE 6, but than I get another problem in IE7 (left and middle are not separated anymore.

Is there something that I can do about this?

Again, thanks for any help.



Tailslide -> RE: Request for testing CSS page (8/15/2007 12:57:36)

Yeah I'd avoid using the -11px thing. Try adding the display:inline; rule to the middle div too and ensure that you add the ";" at the end of it - it's missing from the left div's rule.

It may not be the solution but that's certainly the usual IE double-margin solution.

Persevere a while and come back if it doesn't work and we'll try something else!



Geraldo -> RE: Request for testing CSS page (8/16/2007 15:00:46)

Hi Tailslide,

Since I have now a VM installed I have installled several older browsers and did found out that the double margin problem still exists in IE5 and IE6. Opera, FF, IE7 are showing the page as I would like to see it.

Netscape 7 however shows another problem, the right hand column is pushed below the left + middle column. This is also the case if I look at the page in the design view of FP2003, in the preview screen the page looks as it should.

I thought that the problem in NS7 and the older IE5/6 lies in the fact that I had miscalculated the pixle width for the several columns.
But I recalculated and recalculated but it should be alright.

I did the "display:inline;" indication but that does not solve the problem.

I have also build a 2 column page (use the contact link on the page), but that page has the same problem.

Also if you hover over the first and over the last item in the menu bar you can see that there is a 11px margin at the right hand site.
This leads me to the thought that there is something wrong in the width of the columns below the menu, because the 11px margin shown in the menu is exactly the 11px that is shown to much between the left and the middle column.

What else could this be and it this sovable?

BTW I checked the page also in Netscape 4.7 and it looks horrible ;-)
I will use the import function "@" to connect the style sheet to page,
enabling the users of old(er) browsers to at least look at a page without all the fancy styling stuff.




Tailslide -> RE: Request for testing CSS page (8/16/2007 16:01:17)

I can't test it as the pc is off at the moment but one thing I would say is that I try never to have exact pixel widths - what I mean is that I find that it's safer to allow a little leeway - leave a few pixels spare for addition problems.

I do the same as you for NS and IE 4.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.09375