Table background image repeats in IE looks fine in FF

Is there a reason you have two doctypes?

Ok, I reformatted the table to not use the 2nd tag. But it doesn't fix my main issue, its just a work around. Still having trouble with the hover link positions.

Ummm, I added a mod into my shopping cart program and it was part of the installation instructions to add the 2nd one. Should I delete the first one? I know nothing about doctypes or what they do. The first one was there when I bought the shopping cart.

Validate you page and find out for yourself.

Ok, I validated my site and the second one seams to come out with only 18 errors compared to 49.

Does Doctype determine where my hover text links will show up in different browsers?

Why are my text links showing up in different places in IE than in FF? How can I fix this?

Second one what?

looking at your page shows 519 errors!

You are now mixing a HTML DTD with XHTML syntax and the HTML DTD is being reported as supported anyway.

You need to do a little reading up on the purposes of Doctypes, for validation and for browser switching between 'Quirks' mode and 'Standards' mode, and then choose a suitable DTD i.e 'strict' in either flavour (XHTML or HTML) as long as you understand what is required in markup syntax between the two.

I won't elaborate further as there is all the information on this subject that is required for beginner level contained within the forum if one searches it out.

One last point you cannot comment out A dtd as you have at the top of the page as this throws IE6 into Quirks mode, it must be removed and the actual DTD the very first item at the top of the page.

One last last point why the table layout? this forum is devoted to CSS and standards based coding, laying out pages using tables is simply a no no and few of us appreciate it when they are brought to the forum, have a go at a proper layout, one that we are much more likely to be willing to help you along with when you get stuck.

If you did, I'm not seeing it. Still looks invalid to me.

What are you talking about?

http://www.systemskins.com/sscart/home.php

I went to http://validator.w3.org/ and I get 18 errors.

Am I not validating my site right?

Am I not validating my site right?

Your site is not validated until you have zero html markup errors. 18 is not 0!

Moreover a quick looks shows that many of these errors are of the type that can totally confuse a browser. Without valid html (or xhtml) markup there is no CSS standard.

The CSS standard is specified for valid html or xhtml markup. Browsers are supposed to correct for errors but there is no written standard for how to correct what errors. Consequently various web browser designers, having no standard to work to, tend to recover from different errors differently.

So get all the html markup errors in your code fixed, and come on back if the problem is still there.

So you saying that once these 18 errors are fixed then the hover location of my links in my header area will show correct positions in IE ?

Now I have 18 (red) errors but LOTS of (yellow) caution errors. Do I have to fix EVERYTHING? or just the 18 (red) errors?

I don't recall reading that anywhere.

I've got a new signature though. :thumbsup:

I was just assuming.....

fixing (red) errors now, down to 12 atm

It may well do, which is why we're so adamant that pages are valid.

If it doesn't fix them, then at least we know we're working with valid code so can try and solve the problem without being hindered by rendering inconcistencies.

Thanks, working on errors atm

OK, all errors are fixed, now my site looks even worse than it did, lol. Can you help me fix my alignment issues with the hover text links in the controller in IE? It looks great in FF.

Ah, nice work on the valid code. I'd still clear up those warnings but they don't affect anything as far as I know.

Yes, I am fixing those warnings as I open the respective pages.

Can someone help me fix the hover links in my header area? Why do they line up in FF but they are way off in IE? Is there a special kind of CSS for IE browsers? or some kind of doctype coding to place in my CSS like a Doctype is to html?

Take a deep breath. Relax a moment. At least let someone actually have a look. Honestly, no one even glanced at your page before it was validated. (Psst, your CSS isn't valid but I won't say anything to the other guys...whoops).

Tables based layout + improperly applied CSS. I'd take the paddings out of the controller links and work them in better.

You can apply CSS to IE6 only by using the "* html" hack in the CSS or use conditional comments.

No. That's not the answer. Hold please.

/deep breath...
Sorry, just frustrating...
I spent for ever getting them to look good in FF only to find out form my girlfriend who uses IE it looks like garbage.

Fixed the CSS errors. CSS validates now

Fixed the CSS errors. CSS validates now
Excellent!

Hmm. I don't suppose you want to fix it from a tables based layout do you? You're doing so well and I think it may be the only thing that's going to completely help.

If not, start by not using padding to position those links in the head. I'd have to say that's a poor way to place them where you want them.

I suppose I can give it a try. My problem is I don't know how to make that header look the way it does now without using tables. Its currently 2 sections, a top and a bottom. and I'm using an invisible spacer to stretch the table height wise to fit the background image and so that the 2 background images line up.

If not, start by not using padding to position those links in the head. I'd have to say that's a poor way to place them where you want them.
It's the only way I knew/know how.

If not, start by not using padding to position those links in the head. I'd have to say that's a poor way to place them where you want them.
It's the only way I knew/know how.

Well I do sympathize. It would be nice if we could just start applying CSS rules to our old way of doing things. And we can up to a point. But beyond that point we have to stop and relearn things more or less from the bottom up.

And that means you have to be flexible enough to change your whole way of thinking about design and the web. That isn't easy if you've been doing pages with nested tables for a decade or more, but to learn the new way it's necessary I'm afraid.

It's well worth the time, though. Once you understand the concepts semantic, valid html is much easier to write, much much easier to maintain, and more cross-browser robust than the old way.

You may think that using tables for layout is easy, but in fact you had to learn it and when you were learning it it wasn't easy at all, I'll bet. And maintaining pages with tables nested within tables within tables is a nightmare I never want to go back to.

On the other hand if you've got a deadline for a project you had better stick with the old ways you already know. Changing your whole way of looking at things and coding web pages is for projects where you have plenty of time and no rush.

But once you've learned the new approach I bet you'll never want to go back.

Good point. Since it's already a tables based layout why not just slice and splice a few new sections into it that will place the items where they belong (break out the colspan ) then when you have a bit of time to breathe you can easily replace the header with a properly coded section.

Hmmm. Please don't let this be misconstrued as me condoning tables based layout.

Also, my disappearance yesterday was due to a headache that cause me to not be able to see the word on the screen so I wasn't going to be much help.

Oh no T's condoning table layouts I must run and inform the inquisitor general; post haste }:)

Yeah, this is my personal website I'm doing to make a presence on the web. 100% of our sales are on eBay and I want to build a web site so I can keep 100% of my profits instead of paying eBay a portion. I'm not in 100% of a rush but I am working 18-20 hours a day trying to get it ready to go live in the next week or two for the x-mas rush. For the past year and a half we started publishing our website on everything. we get a lot of traffic to our site as it is already but its not set up for real time purchasing atm, just email orders.

I took the night off last night as well and this morning. Back to it right now though, gonna try to work on a table less header.

My question is... Should I make my header all one background image then instead of the two? And for the hover text links I just make them their own CSS styles right?

The two words like "My Cart" and "My Account" I want centered in 2 lines, but when I center them it places them in the center of my "970px" page, how do I get the text to stay center and be able to move them over to where I want them on the controller buttons?

Thanks for everyones help so far & the future.

The page as it exists is totally table based and designed with the "table mentality". I recommend against trying to make it over without tables, although that could actually be done. But rather I would publish it as is and then start over with another project with the object of eventually replacing it.

The existing page shows off your current skill level, after all, so anyone who is happy with that will get what they expect.

But I would then, as time allows, do the work required to "grok" the new web mentality starting pretty well from the ground up. I recommend the "truth and consequences of web design", and then go on to the "HTML Dog" site and go through the tutorials. Also, read through the links on this site's Links page and work through the "How to" forum here.

This will probably feel like a big step backwards to you, but if you trust me and actually do the work you'll find that learning the new design approach is actually well worth while.

Just as a btw, does anyone have any examples of tables based sites that break or fail in different browsers? A lot of the older tables based sites (which are still getting made) tend to hold themselves in position fine, with Dreamweavers "fun" image rollover code giving them hovers. To some people, the "tables way" actually looks better to them, which I wish I had an answer to

The site itself isn't too bad - I can see it is using a cms/shopping cart behind it, so definately don't just scrap what you have and learn the css way - it'd take a while.

Didn't notice anything glaringly wrong, but I can only test safari and Firefox atm. Did you sort it out?

I only have FireFox and Internet Explorer. I use FF as my primary and do all my design to match that, it was only reciently when my girlfriend pointed it out to me that it looked different in IE cause thats what she uses.

As for the main project of the site. It's actually not mine, I really can't take the credit for it entirely. It's my shopping cart that I purchased. X-cart Gold. $200 and it has everything you see on my site. I have done a lot of custom changes to incorporate our colors and such and have added a few mods that I learned from the X-cart forums to change things around a bit and customize it from the "out of the box" design. Basically its the framework I can't take credit for, and that is what is table based. It's made up of xhtml, php, CSS, and smarty. I only knew html 3 weeks ago, now I have a basic understanding of all and learning more everyday. I'm definately not against learning anything new and I will learn how to eventually turn it into a table less design but it will be after I get it to go live and I'll make a dummy site to do so.

Ed Seedhouse,

I read the "truth and consequences of web design" and went through the HTML and CSS tutorials on the HTML Dog site. A lot of good information there and raised a few questions that I answered myself though google. The tutorials were helpful as well as I bookmarked that site for future reference. I was quite impressed with myself because I actually was able to follow them all, even the advanced ones. However I still have one main question... My background image is 970 x 459 (made it into 1 image now instead of 2) without using tables, how can I tell the head.tpl (which is the header area of my shopping cart) that I want it to stretch the height to be 459px? I can set the width of the "Body" in the CSS to be 970px (which is in a different .tpl file and the header.tpl is placed inside it, but the height of the header.tpl will only be as tall as the content inside the header.tpl. Should I just cheat and make a 1 x 459 transparent image and throw it left justified and call it a done deal? or is there a height property that I can specify in my CSS?

Without a link to the new code I really can't help much. Possibly not even then since I'm not the brightest bulb around here by any means.

But I worry about how you are talking, which suggests to me you are still thinking the old table way. Not that this is surprising since it's hard to change a whole mind set. But your design process should revolve around getting good content properly marked up with valid and semantic html before you start worrying about visual design.

Just re-creating your old design without tables isn't very interesting to me. I've done that kind of stuff too often and moved on to what I find are greener fields.

I won't be able to redo the entire site without tables because my site is a shopping cart site that I purchased in a package. One that has 100's of files that are all called into the main home file. each thing you look at, header, footer, left menu, links, images are all referenced by smarty tags and each file has tables in it. Making the site completely table free will take me months.

I'm only concerned about the "header.tpl" Thats the area you see on my site that is my background image, the white page break line is the separation. Thats where I'm having my trouble of the hover links not being in the same place in IE than they are in FF. Its currently made of 2 tables with 2 separate background images pieced together to fit. If I get rid of the 2 tables I can make my background image one piece that measures 970 wide by 459 height. But the header will only stretch in height by the content that is in it. Therefore I was thinking a 1 x 459 transparent image would be one way to force the header area to the correct height in order to display my background image and then I would set up the CSS to format my hover images. Hoping that by doing this it would make my hover links look the same in IE that it would in FF.

Well it's pretty hard for me to help you with this because I'm pretty much totally against your whole concept for navigation. It just wrecks accessibility, and I had to stare at the page for around a half a minute before even seeing just what it is you are talking about.

Me, I would just never do something like that. They call it "mystery meat navigation" and the accessibility gurus warn us vigorously against doing it at all, and I happen to agree with them.

Yeah, it's broken in IE6. But it also breaks with just a couple of text resizes in Firefox as well. Why would anyone resize your text? Because you've set it so small that older folks like me (I'm 63, nearly 64) with weakish eyes can't read text on a screen at that font size!

I need fonts to be at least 18 or 20px high on my screen to read it comfortably and here you've set it to 10 pixels! I can't even see it properly, much less use it to navigate!

Oh, and there are also young people who like games that have bad eyes too.

As I said I need text at least 18 or 20 pixels high to comfortably read it on a computer screen and so I've set my browser default to 20px for comfort. And the first thing you do is over-ride my choice, and then if I'm willing to hang around long enough to try a text resize (which I'm usually not, you know) your whole navigation (presuming I could even find it in the first place where you've hidden it) breaks and becomes unusable.

That's why the web site I referred you to, "truth & consequences", advises you never to mess with the user's default font size. You say you read it and understood it but maybe you can see why I'm questioning that!

Yeah, this very site here violates that idea too, but I stick around despite that, not because of that, because of the great content. Oh yeah, and it resizes without breaking. Well not much.

So for your site with this current design concept I am really not the guy to ask for much in the way of help. Fortunately there are smarter people here with better eyes than mine and they might help you.

I appreciate your comments and your input. I did read everything on that site you recommended and now that you explained those situations I can see your point now. I too just did a few resizing and such on both browsers and see your point. IE can "ignore" the websites size and allow you to choose your own size. This is a good point to consider. However, no offense, I really don't think I will have that many people with "bad eyes" at my site, my target market is generally 10-30ish. Yes I know that some gamers have bad eyes but I'm willing to take that risk. I really do appreciate your comments and knowledge. But then again, I do think I'm pretty set on my ways with design.

All I want to figure out here is how to get my hover links to position themselves in IE as they are in FF.

Well it's your money, but why would you want to drive folks with money to spend away? Maybe that's only 10% of your visitors, but that can make the difference between profit and bankruptcy in business. Maybe some kid will send their parent to your site to buy a game for Christmas or something, and the parents will decide to go elsewhere when they can't read it.

I think the "mystery meat" navigation is a bad idea regardless of how well folks see, though. People form expectations after seeing a lot of web sites and when they go to sites that violate these expectations they generally go elsewhere quite quickly. If you make people solve a puzzle to figure out how to navigate they might not stick around to solve it.

But since I can't really help you much with this I think I'll bow out here.

Ed,

I totally see your point, however I purchased this shopping cart complete and ready to go that has a good 100+ .tpl files all with tables and their own "styles". Changing the entire cart system to CSS & tableless and converting the site to allow for resizing based on default browser font size would be a nightmare. I personally do not want to attempt that kind of a project (at least not yet). I don't want to say I'm a beginner but I'm also no expert. I know enough to know how to make changes, apply scripts & mods, and know how to understand something if I look at it and apply it. But changing the entire site to what you are asking/recommend is beyond what I'm willing to do before I can make my site live.

You information and knowledge is definitely appreciated and it is something that I will be keeping in my mind for something I will look into doing but not until after the x-mas rush. It's also something I will recommend to the shopping cart people as well.

I'm just hoping that what I'm asking for about the hover links showing up differently in the different browsers is a simple fix, otherwise I'll just have to use those links in the left menu bar instead. And as a side note, the links that I'm trying to put in the controller aren't the only links, those links are also located in the left menu bar as well. I just thought it would be cool to have the 3 main links incorporated into the controller as well.

BTW, You mentioned that you couldn't navigate through my site well? Were you also referring to the links on the left side in the categories bar? Or just the ones I'm attempting to place into the controller in the top right corner?

Thanks

Just those ones. The links on the left make sense and are clearly meant for navigation, and you should move the ones from the "controller" image over there IMO.

*double post*

I took on the header project by starting over with the header.tpl and removed all the tables. I found a site showing how to do a CSS based image map. I learned how to do it and added it to my site. It currently works in both FF and IE so I'm pretty happy. Just waiting for the girlfriend to get up & make the images for me (she's the graphic artist and I do the web coding). I currently have just transparent images up for now, but if you go to the site again, you'll notice there are links when you move your mouse over the buttons where the hover text links used to be.

I think you'd be proud

I think you'd be proud

Well, don't count your chickens... You've still got the mystery meat navigation and now I can't even make the text size on the buttons bigger because you've made it into a graphic.

At this point I really am bowing out of this thread, so I will not reply further.

hi kemble,
check my PM to you...

mihir

Got it, I replied