logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 11-16-2011, 07:42 AM   #1
BullDog
 
Join Date: Nov 2011
Location: Alameda, CA
Posts: 156
Default coding for differnt platforms and browsers

Until recently I had been embarrassingly using mainly tables for layout and no css. the deaper I get into css the more I like it and want to stay up to date but I'm running into more and more compatibility issues.

I have no idea how to trouble shoot for IE issues not to mention I dont have a PC to run IE on.

The site I am working on now www.bugorama.com/2012 seems good on all mac browsers I could find tests and screen capture services for. But IE7 and below is all out of wack on the layout.

Any suggestions would be greatly appreciated.
BullDog is offline   Reply With Quote
Old 11-16-2011, 07:54 AM   #2
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

There are still a lot of tables in that layout. I'd be willing to bet that if you converted the whole thing to CSS/div based layout it would display a lot better and you'd have a lot more control.
Corrosive is offline   Reply With Quote
Old 11-16-2011, 07:57 AM   #3
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

There are loads of HTML erros on your page which will cause display errors. IE can hang on a error and screws up the rest of the page. Using Photoshop to generate the HTML markup with tables will give troubles as well.
Check your errors and fix them one by one.
http://validator.w3.org/check?verbos....com%2F2012%2F
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 11-16-2011, 08:04 AM   #4
BullDog
 
Join Date: Nov 2011
Location: Alameda, CA
Posts: 156
Default

The only thing I'm still using PS for in code is slices and the generated code. the table at the bottom of every page is there because I couldnt figure out how to get 4 divs side by side using float left and right.

Is there a better method you can suggest for my slices and roll overs?

I am looking at the validation errors right now and cant even figure out the first div container error.

Last edited by BullDog; 11-16-2011 at 08:09 AM..
BullDog is offline   Reply With Quote
Old 11-16-2011, 08:11 AM   #5
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Quote:
Originally Posted by BullDog View Post
The only thing I'm still using PS for in code is slices and the generated code. the table at the bottom of every page is there because I couldnt figure out how to get 4 divs side by side using float left and right.
Four divs floated left will line up nicely.

Quote:
Originally Posted by BullDog View Post
Is there a better method you can suggest for my slices and roll overs?
Yep, http://www.alistapart.com/articles/sprites. This method also allows you to offer some HTML alternative because all your text is in images. If anyone visits your website with a screen reader then aren't going to be able to navigate because they won't know what the links say! Nav should be HTML in my humble opinion.
Corrosive is offline   Reply With Quote
Old 11-16-2011, 08:12 AM   #6
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Quote:
Originally Posted by BullDog View Post
I am looking at the validation errors right now and cant even figure out the first div container error.
Time to get learning then
Corrosive is offline   Reply With Quote
Old 11-16-2011, 08:15 AM   #7
BullDog
 
Join Date: Nov 2011
Location: Alameda, CA
Posts: 156
Default

thank you. I guess I can use PS for slice images only then another method for rollovers.
BullDog is offline   Reply With Quote
Old 11-16-2011, 08:21 AM   #8
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

You have to fix the obvious things like you have double body tags in the mark up, all kinds off mark-up wrapped in a paragraph tag... unclosed img tags... and so forth.

You slice the Photoshop images by hand and insert them into the page in the CSS (design related) or in the HTML (content related).
http://dzineblog.com/2009/04/tutorials-psd-to-html.html

For rollovers you can use only css now, well... already for 8 years
https://www.google.com/search?q=css+rollovers
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 11-16-2011, 08:28 AM   #9
BullDog
 
Join Date: Nov 2011
Location: Alameda, CA
Posts: 156
Default

Thank you for all the tuts, thats what I need. until a few months ago I was using the same code I used in 2000. I do see the double body tag now that you mention it. its in my php includes which is new to me as well. lol. I cant simply remove it yet since I am still using the java rollover code generated by PS. Sounds like a HUGE mess. I wish this was a personal site I had more time to learn with.
BullDog is offline   Reply With Quote
Old 11-16-2011, 08:37 AM   #10
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Quote:
Originally Posted by BullDog View Post
I wish this was a personal site I had more time to learn with.
That's how I learnt. Might be an idea to build your own testing site that you can learn on. You don't even have to publish it

Then take what you have learnt and apply it to future projects. Takes a while to get good but a very valuable skill to have nowadays.
Corrosive is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:48 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com