PDA

View Full Version : coding for differnt platforms and browsers


BullDog
11-16-2011, 06:42 AM
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 (http://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.

Corrosive
11-16-2011, 06:54 AM
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.

gentleone
11-16-2011, 06:57 AM
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?verbose=1&uri=http%3A%2F%2Fwww.bugorama.com%2F2012%2F

BullDog
11-16-2011, 07:04 AM
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.

Corrosive
11-16-2011, 07:11 AM
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.

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
11-16-2011, 07:12 AM
I am looking at the validation errors right now and cant even figure out the first div container error.

Time to get learning then :wink:

BullDog
11-16-2011, 07:15 AM
thank you. I guess I can use PS for slice images only then another method for rollovers.

gentleone
11-16-2011, 07:21 AM
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

BullDog
11-16-2011, 07:28 AM
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.

Corrosive
11-16-2011, 07:37 AM
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.

BullDog
11-16-2011, 07:51 AM
this would almost be easier if I was learning from scratch... I still have html standards in my head from 2000. I've been using it ever since... obviously. Thank you all. Its good to finally find a good resource for advice and help. Searching for individual errors and fixes can bit a bit much if you cant name the problem :)

In the mean time I need to get this site figured out fairly quickly, even if it means paying someone to help me bring the code and technique up to date.

gentleone
11-16-2011, 08:13 AM
Here's a useful resource for you to get your head around the IE bugs:
http://www.positioniseverything.net/explorer.html
To be honest... this is pretty much what you only need. Modern browsers fix their bugs and push them through updates to their users. Microsoft doesn't do it like that. They do it after 2 to 3 years untill the new IE comes out and therefore the old IE's will have the bug forever :roll:

BullDog
11-16-2011, 09:02 PM
ok I have taken everyone's advice and have been reading and trying to start from scratch with cleaner code. I will worry about the roll-overs and spry last.

For the life of me I can seem to figure out why I cant vertically align the youtube videos to the flyer on the left. I was able to do this in the last version but there were so many errors in the code I cant see the difference anywhere.

re-worked version:
http://www.bugorama.com/test

BullDog
11-16-2011, 09:36 PM
if it helps at all it lines up in IE6 & 7 but no other versions or browsers. according to browserling.

gentleone
11-16-2011, 09:57 PM
[quote=BullDog;201120I cant vertically align the youtube videos to the flyer on the left.[/quote]
Not sure what you mean with this. It looks okay to me in FF mac. The only thing I notice is that the top vid doesn't align with the top of the flyer... do you mean that?
If so, thats because you've wrapped the vids (iframe) in a paragraph tag (p). The default margin of the p tag is causing that. It's better to remove the p tags anyway and set a bottom margin on the iframe (in CSS) to give space.

BullDog
11-16-2011, 10:01 PM
thats exactly what I meant thank you. I figured it would be something staring me in the face all day. :roll:

BullDog
11-16-2011, 10:39 PM
for the embedded youtube videos the code generated includes an element called "allowfullscreen". This does not validate, and removing it seems to make no difference.

Is that possibly used for the following?

YouTube has switched to their iFrame version, which will detect if the browser is flash compatible. If the browser is not flash compatible, YouTube will embed an HTML 5 version of the video.

original:
<iframe width="250" height="199" src="http://www.youtube.com/embed/CsiMGwGC8JE?rel=0" frameborder="0" allowfullscreen></iframe>

edited:
<iframe width="250" height="199" src="http://www.youtube.com/embed/CsiMGwGC8JE?rel=0" frameborder="0"></iframe>

gentleone
11-16-2011, 10:49 PM
I know about the allowfullscreen, but for which browser it's needed... I don't know... have to look up this. The frameborder attribute does also not validate, but if it's not there then there is a border in IE8 around the vid. I did try to remove the border through CSS, but that didn't work... it doesn't matter so much either if you have a few errors in the validator... as long it aint 138 like you had before ;)

BullDog
11-16-2011, 10:53 PM
I couldnt find anything on it specific. if it is needed for a specific browser I will put it back. not much code yet but those are the only 3 errors thus far.

BullDog
11-16-2011, 10:59 PM
This all may be out of place in this thread but I have another dreamweaver question. I only use the design view for previewing but I notice the page looks fine in live view only. otherwise all my videos drop to the bottom of the page. Have I missed something here or is this just the nature of working local rather than on a live or test server?

gentleone
11-16-2011, 11:18 PM
I couldnt find anything on it specific. if it is needed for a specific browser I will put it back. not much code yet but those are the only 3 errors thus far.
Like I said it doesn't hurt... a few errors is okay unless it breaks the design or the experience of course.
This all may be out of place in this thread but I have another dreamweaver question. I only use the design view for previewing but I notice the page looks fine in live view only. otherwise all my videos drop to the bottom of the page. Have I missed something here or is this just the nature of working local rather than on a live or test server?
No, it has to do with design view... design view is just for quick reference and nothing else... if you develop websites in design view and don't want to see them break in design view, you're limited to devloping very simple websites.

You develop for browsers, so if it looks and perform as intended in those, that's all that count.

BullDog
11-18-2011, 05:32 AM
http://bugorama.com/test

I am trying to push the flyer and videos down a little...

I put the title graphic in a div full width of the containing div. I've tried applying margin-bottom and padding bottom with no affect at all. both with and without a "clear both"

Is there another obvious mistake I'm missing here?

BullDog
11-18-2011, 06:30 AM
sorry guys I'm learning.

padding-top:30;

is not the same as

padding-top: 30px;

Corrosive
11-18-2011, 08:18 AM
sorry guys I'm learning.

padding-top:30;

is not the same as

padding-top: 30px;

Very true :wink:

domedia
11-18-2011, 01:03 PM
Right, padding-top: 30 is invalid code. 30 what? pink elephants? ;-)

.

BullDog
11-18-2011, 10:53 PM
ok I am trying to change the navbar over to sprite rollovers, but I'm at a loss for the rollover state. As suggested all tables are gone and everything validates now. But I need to figure out the hover state for the rollovers before cutting the index file into multiple include files.

http://www.bugorama.com/test

gentleone
11-19-2011, 12:00 AM
You will have to set the navigation images as background images in your CSS with the background property and then you'll position them with the background position to the the right pixel spot. Thus not as img tags in your HTML.

Here perhaps a screen cast will make you understand the theory behind it better. The link to the CSS sprites article Corrosive gave you is actually quite old. The techniique has been evollved over the years into better ways of doing it.

http://nettuts.com/videos/screencasts/exactly-how-to-use-css-sprites/

Just play around first with this menu and if you'll get it, then you can be a lazy developer and use this generator for your next spite images :) Just joking... this will just speed up the development process when needed... has nothing to with lazy developers

http://www.spritecow.com/

gentleone
11-19-2011, 12:57 AM
Btw... was just looking at your code and I applaud that you made the switch from table layout to div/css layout, but this doesn't mean that you now should wrap every bit of content in a div. ;)

There are semantics!

This means that each tag has it's own purpose. A div (division) tag has its purpose to divide your layout in sections/modules, so like header, content, sidebar and footer... the most common ones in a basic layout, but for a navigation we use an unordered list (ul tag). The navigation is a list of links, so therefore it is semantically correct to use a unordered list. By the way this has nothing to do with validation... a validator doesn't tell you that you used the wrong tag for a piece of content... it only checks for errors like forgetting to close tags... if you used deprecated tags or attributes... stuff like that.

With semantics it's up to you as a developer to make the right choises in which tag you'll have to use.
Another example from your code. You have your title image in the HTML like this:

<div class="title">
<img src="graphics/titles/whats_new.jpg" width="600" height="91" alt="" />
</div>
In HTML there are heading tags for this (h1 most important 'till h6 less important), so semantically correct would be this:

<h2><img src="graphics/titles/whats_new.jpg" width="600" height="91" alt="2012 - what's new" /></h2>
Also notice the 'alt' attribute I filled in with the text from your title image. Search engines can't read images, so they have to read somewhere what's written on that image. This is where the alt attribute is for.

This is of course a tiny bit of what there all is, so you should really read up on the basics of html and css before you actually do clients work. Another tip is to get as fast as you can out of design view and just learn to code by hand. You will be eventually loads more faster with building websites, then if you keep on 'point & clicking' in design view. The basics of HTML and CSS is really not that difficult to understand. They're the most plain english 'programming languages' there are.

paragraph <p> tag
headings <h1>, <h2>, <h3>... <h6> tags
unorderd list <ul> tag with list items <li> tags
ordered list <ol> tag with list items <li> tags
tables <table> tag

See... peanuts and the more advanced usage of it, you will understand much easier if you know these basics.
Here... start with this site. Everything is there you'll need to know.
http://htmldog.com/

BullDog
11-19-2011, 01:18 AM
Thank you. items like the whats new, i put in a div to set a bottom margin that would apply to all pages, as there will be a similar graphic on every page.

the alt attributes I will fill out when I get it all figured out. just added them empty to try and validate everything.

I agree on being better educated and fluent before doing more work. I've been doing small sites for years but now that I look at stepping up in code basics from 2000 methods to 2011 methods. I see even sites I just finished recently are all pretty screwed up in the big picture.

And just for the record... I only use design view for a preview. :D I went from notepad, to dreamweaver cs5, and pc to mac all in one shot not too long ago.

I tried to keep as much in divs as possible to do away with all the <p> tags I was using, but more importantly to make it easier to cut and paste sections into individual include files.

Still a lot to learn and trying the sprite rollovers again from scratch now. 3rd times a charm right... maybe 7th... or was that "the 10th times a charm"

I understand the concept of whats happening but its my lack of basic css knowledge, keeping me from easily putting it together.

BullDog
11-19-2011, 05:30 AM
can someone please take a look at my rollovers? I did find a few errors I fixed and the divs are in the proper places now and the up state shows but my rollovers do not. and the bullet from the ul is still showing.

http://www.bugorama.com/test

Corrosive
11-19-2011, 07:04 AM
can someone please take a look at my rollovers? I did find a few errors I fixed and the divs are in the proper places now and the up state shows but my rollovers do not. and the bullet from the ul is still showing.

http://www.bugorama.com/test

The ul needs the CSS attribute list-style-type: none; to hide the bullet point. If you look at Dreamweaver when you create a CSS style there is a whole section called 'Lists'. That's where you'll find all that stuff.

Corrosive
11-19-2011, 07:08 AM
Your rollover code looks sound apart from this;

li#nav_home a:hover; {
background-position: 0 -49px;
}

That extra semi-colon isn't needed and is probably causing your problems.

BullDog
11-19-2011, 07:15 AM
thank you, that gave me the rollovers... but no current state.

Corrosive
11-19-2011, 07:36 AM
thank you, that gave me the rollovers... but no current state.

Which bit of the code were you expecting to give a current state?

BullDog
11-19-2011, 07:39 AM
html
<body id="body_home">

css
#body_home li#nav a {
background-position: 0 -98px;
}

Corrosive
11-19-2011, 07:40 AM
Here you go seeing as you are using includes already; http://www.alistapart.com/articles/keepingcurrent/

BullDog
11-19-2011, 07:51 AM
I havent cut the code up into include just yet but will try that.

still not sure why the method I'm using doesnt work. the only difference i see is my links are calling php files instead of html.

Corrosive
11-19-2011, 08:22 AM
still not sure why the method I'm using doesnt work. the only difference i see is my links are calling php files instead of html.

No, that's a fair comment. I'm not sure either. Something must be over-riding your chosen style but I can't see what.

BullDog
11-19-2011, 09:07 AM
Thank you either way. the current state was never part of the plan but wanted to try since it was in the video. I'm gonna hold off on that until I have a better handle on the process.