Request for testing CSS page

	Home Register Search Help Login

Sponsors
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Request for testing CSS page

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Request for testing CSS page

Page: [1]


Geraldo Posts: 57 From: Eindhoven Status: offline	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 Posts: 6756 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	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. _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to Geraldo)


Geraldo Posts: 57 From: Eindhoven Status: offline	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 (in reply to Tailslide)


Tailslide Posts: 6756 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	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 < Message edited by Tailslide -- 8/11/2007 14:55:06 > _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to Geraldo)


Geraldo Posts: 57 From: Eindhoven Status: offline	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. (in reply to Tailslide)


Tailslide Posts: 6756 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	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. _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to Geraldo)


Geraldo Posts: 57 From: Eindhoven Status: offline	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. (in reply to Tailslide)


Tailslide Posts: 6756 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	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! _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to Geraldo)


Geraldo Posts: 57 From: Eindhoven Status: offline	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. (in reply to Tailslide)


Tailslide Posts: 6756 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	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. _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to Geraldo)

Page: [1]

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Request for testing CSS page

Page: [1]

Jump to: 1

New Messages	No New Messages
Hot Topic w/ New Messages	Hot Topic w/o New Messages
Locked w/ New Messages	Locked w/o New Messages

Post New Thread

Reply to Message

Post New Poll

Submit Vote

Delete My Own Post

Delete My Own Thread

Rate Posts