I’m not new to HTML/CSS. But, I’m new to building websites that uses sliced images that joins together to form the full image and building cross browser compliant websites.
Pls advise if its easier to use Divs or Tables to do such a layout. I’ve been told tables are less problematic? Since they’ve been around for a long time and the layout has to look the same even in IE 6.
Sometimes I had to do tables within tables, divs within tables…really all sorts of weird stuffs and end up it looks totally weird in IE.
Is there any kind of design that can’t be coded as a website?
To make things worse, I had to work in constraints of oscommerce.
But that aside, I’d like to know the best practice to build a browser compliant website up to IE6 as well as other major browsers. Any pitfalls to avoid (like negative margin? If its considered one).
Is there any kind of design that can’t be coded as a website?
No.
I’d like to know the best practice to build a browser compliant website up to IE6 as well as other major browsers. Any pitfalls to avoid (like negative margin? If its considered one).
Try to keep the document as much in normal flow as you can. Avoid using absolute positioning for basic layout of the page. I wouldnt use negative margins unless you have too. As far as the image goes, can you explain what its purpose is, maybe provide a link so we can see it? How is it to be sliced up? Tables, these days, should only be used for tabular data, not for layout.
Honestly you shouldn’t be using sliced images to build a design. The only methodology considered acceptable is to build the design (without the images) and then slice the images to meet the elements used to produce the basic design. If you build your site around images you are doing something seriously wrong. Tables for layouts are a very bad idea (and are unsemantic) and using DIV’s in the same way is just as abusive. You should only use HTML elements when they are needed to appropriately explain the contents structure, not to beautify a website, otherwise you are simply abusing the whole nature of structure and style separation.
thanks for e replies…apparently, i’m still stressed after 1wk of work. yes…i’m still on it after a wk!
i notice i’ve been naming (giving ids or class names to) almost everything that i need style them.
this is the layout i’ve to do.
the boxes are images themselves on which data will be presented on.
the big grey bounding area is a complicated background image.
the 3 boxes outside of the bounding area is linked to the display background image.
this is one of it. i didn’t slice any image for this though. but i’ve been adjusting the td tables and such. so i suppose giving a name for all the tds that need to be changed (background image/padding/margin) is fine? or do you guys do in in html itself?
to make things worse, i’ve just found out setting td width in FF doesn’t product the same result in IE.
i dont know. if we can’t use html to beautify the website? how are we supposed to do it then?
lastly is there any tools in IE thats as good as firebug in FF? something that lets me edit the css on the fly in IE?
Pls advise if its easier to use Divs or Tables to do such a layout. I’ve been told tables are less problematic? Since they’ve been around for a long time and the layout has to look the same even in IE 6.
In general that’s a “debate” that died a long time ago… with the exception of HTML emails, where CSS still holds no decent ground.
However, you say you are stuck with OSCommerce… my apologies. I took a look at that a few months ago and almost died. : (
if we can’t use html to beautify the website? how are we supposed to do it then?
Ideally not with HTML but obviously you have specific constraints. Normalyl we use CSS but if you’re good, you use the natural flow and default behaviours as much as possible. Let rocks roll down the hill themselves if they gotta be at the bottom.
IE Developer Toolbar is the only tool I know of, and it’s not as useful as Firebug.
However editing CSS on the fly, I’ve always done by having the page open in my browsers, the page and CSS files are on the server and an open ftp connection, I make a change in the open CSS file, save, and f5 my browsers. The change appears immediately.
I can’t really tell from a diagram what the page is supposed to do.
i don’t know if thats the default or it has been modified by my seniors
I dunno, I looked at the OSCommerce site back when we were looking at using a cart software thingie and it was all nested nested nested tables. Unless they’ve improved it any.
Zencart was the same way but they apparently substituted every table element for a div. So you get a hundred-nested divs.
You’re not going to be able to use default flow much with nested tables. That’s not really the fault of CSS, it’s just how your markup is. You might have to be really pedantic : (
Well, problem is I still have to manually go through each and every block of tags since the editor is not smart enough to warn me of any unclosed or overclosed tags.
So, is there an editor which has such a feature? Or a feature that auto indents the blocks correctly?
Um, I think a lot of the graphical editors out there have those features, like KDE’s Kate… Geanie (also Linux) I think has easy indentation and also has code suggestion (it recognises lots of different kinds of code).
There’s actually a thread somewhere around here, not too old either, where people put forth their favourite text editors (and a lot of them are free). I’ve only used gEdit and vi and vi is pretty powerful but for instance I’ve never looked to see if it can highlight unclosed tags (but it will highlight unclosed { } and ( ) when writing CSS or Perl or JS)… prolly can. I’ve seen KATE actually put in rows of little dots to show you how many spaces stuff is indented which is also nice:
…thingie {
…property
…property
…property
…}
which I thought was nice.
Since many of them are free, go ahead and look around at what’s out there and usually they list which languages they support for text highlighting. Find one you think you like and that looks popular enough to not get discontinued, and spend some time learning it well. I know I’m missing out on a lot of features gEdit and vi have simply because I haven’t bothered looking for them.
