15 replies [Last post]
kirkbross
kirkbross's picture
Offline
Regular
Los Angeles
Last seen: 10 years 19 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2010-02-18
Posts: 14
Points: 18

I'm having an issue that is appearing ONLY in the Chrome browser (i.e. if you look at this page in any other browser it's fine).

http://www.kenrichsounds.com/

The background image behind the menu is style42 and should be one image spanning behind all 5 cols. In Chrome, the bg image is repeating in each cell. If you don't have Chrome you won't see the problem. I'm not too concerned since Chrome is not all that common yet and it's fine in all the other browsers, but I'd like to know why it's repeating.

Here is the code for the menu bar:

    <tr class="style42">
      <td width="170"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home Button','','images/site/menuButtons/home_btn_ro.png',1)"><img src="images/site/menuButtons/home_btn.png" alt="Home Button" name="Home Button" width="170" height="42" border="0" id="home_btn" /></a></td>
 
      <td width="170"><a href="instruments.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('instruments_btn','','images/site/menuButtons/instruments_btn_ro.png',1)"><img src="images/site/menuButtons/instruments_btn.png" alt="Instruments Button" name="instruments_btn" width="170" height="42" border="0" id="instruments_btn" /></a></td>
 
      <td width="170"><a href="clients.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('clients_btn','','images/site/menuButtons/clients_btn_ro.png',1)"><img src="images/site/menuButtons/clients_btn.png" alt="Clients Button" name="clients_btn" width="170" height="42" border="0" id="clients_btn" /></a></td>
 
      <td width="170"><a href="http://kenrichsounds.com/store" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('products_btn','','images/site/menuButtons/products_btn_ro.png',1)"><img src="images/site/menuButtons/products_btn.png" alt="Products Button" name="products_btn" width="170" height="42" border="0" id="products_btn" /></a></td>
 
      <td width="170" height="42"><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact_btn','','images/site/menuButtons/contact_btn_ro.png',1)"><img src="images/site/menuButtons/contact_btn.png" alt="Contact Button" name="contact_btn" width="171" height="42" border="0" id="contact_btn" /></a></td>
    </tr>

And here's the css for style42 (I tried adding 'no repeat' after and it didn't help):

.style42 {background-image:url(../../images/site/menu_bg.jpg)}

kirkbross
kirkbross's picture
Offline
Regular
Los Angeles
Last seen: 10 years 19 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2010-02-18
Posts: 14
Points: 18

Hmmm...

If not my specific issue, perhaps someone can point me to a thread or link discussing how Chrome handles CSS in general? I always thought IE was the only or main "problem browser" for designers...

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 44 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

kirkbross wrote: If not my

kirkbross wrote:

If not my specific issue, perhaps someone can point me to a thread or link discussing how Chrome handles CSS in general? I always thought IE was the only or main "problem browser" for designers...

Well, IE8 is just fine, actually, so far as html and CSS compliance go. IE6 is the main problem. Chrome is also just fine if you use proper practices. If you have a problem with it that's a sign you are using poor coding practices. You are in fact using poor and outmoded coding practices.

Your use of tables for your menu structure is out of date - menus belong in list structures. That's what a menu is, a LIST of choices.

Your page is using a transitional document type and it should be using a STRICT one. Even worse, you are abusing tables for layout. Tables are not for layout, they are for marking up tabular data. Tthere's no tabular data on that page.

Chrome is a modern browser. If you use antiquated coding practices, such as you are on this page, you'll have to expect problems in modern browsers.

I suggest you go to "HTML Dog" and learn to do it the modern way.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 2 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Try this: .style42 td

Try this:

.style42 td {background:none}

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

kirkbross
kirkbross's picture
Offline
Regular
Los Angeles
Last seen: 10 years 19 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2010-02-18
Posts: 14
Points: 18

Thank you!

Ed Seedhouse wrote:

...Your use of tables for your menu structure is out of date - menus belong in list structures. That's what a menu is, a LIST of choices.

Your page is using a transitional document type and it should be using a STRICT one. Even worse, you are abusing tables for layout. Tables are not for layout, they are for marking up tabular data. Tthere's no tabular data on that page.

Chrome is a modern browser. If you use antiquated coding practices, such as you are on this page, you'll have to expect problems in modern browsers.

I suggest you go to "HTML Dog" and learn to do it the modern way.

Thank you for your response! I actually know that using tables for layouts is very outmoded... and when I built this site I didn't know how to do it the "right" way but had to get something done quick. I am in the process of advancing my skills and learning how to do layouts the modern way using sprites and lists. I actually just took a one day class with my gf on CSS3 and HTML5 and it was enlightening. I am very eager to learn how to build lean, fast sites using the latest coding techniques. I'm also decent in Flash, but the possibilities with jquery are also of great interest to me. Here is my personal website which I built in Flash but will be redesigning soon with a different approach.

kirkross.com

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 2 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Who are you saying thank you

Who are you saying thank you to: me or Ed? Did my suggestion work?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

kirkbross
kirkbross's picture
Offline
Regular
Los Angeles
Last seen: 10 years 19 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2010-02-18
Posts: 14
Points: 18

Sorry

Tyssen wrote:

Who are you saying thank you to: me or Ed? Did my suggestion work?

I wasn't quite sure how to implement your suggestion... did you mean to add a NEW style? .style42 is putting the bg image in the row (tr)...

.style42 {background-image:url(../../images/site/menu_bg.jpg)}
...so if I switch to:
.style42 td {background:none}
...then the bg image will not display at all.

I'll try ADDING td {background:none} to the existing style42.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 2 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

No, it's an additional

No, it's an additional style:

.style42 {background-image:url(../../images/site/menu_bg.jpg)}
.style42 td {background:none}

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

kirkbross
kirkbross's picture
Offline
Regular
Los Angeles
Last seen: 10 years 19 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2010-02-18
Posts: 14
Points: 18

Tyssen wrote: No, it's an

Tyssen wrote:

No, it's an additional style:

.style42 {background-image:url(../../images/site/menu_bg.jpg)}
.style42 td {background:none}

Didn't work... I'm using Sublime Text (awesome text editor btw... worth $49) and with that syntax, it doesn't seem to be correct for some reason (ie, the text color isn't changing like it should for a style.

I'm actually going to just rebuild the whole site using divs and css and xHTML 1.0 Strict...

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 2 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

kirkbross wrote: I'm using

kirkbross wrote:

I'm using Sublime Text (awesome text editor btw... worth $49) and with that syntax, it doesn't seem to be correct for some reason (ie, the text color isn't changing like it should for a style

Nothing wrong with the code. I'd suggest your editor is at fault.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

kirkbross
kirkbross's picture
Offline
Regular
Los Angeles
Last seen: 10 years 19 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2010-02-18
Posts: 14
Points: 18

My bad!

Apologies... your syntax was correct... I messed up.
However, it's still repeating the tr background image in each td (in Chrome only, as was always the case).

http://www.kenrichsounds.com/

This is the exact css code:

.style42 {background-image:url(../../images/site/menu_bg.jpg)}
.style42 td {background:none}

I'm going to do this the right way now and get my css chops up to par! Back with the new page later tonight Smile

kirkbross
kirkbross's picture
Offline
Regular
Los Angeles
Last seen: 10 years 19 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2010-02-18
Posts: 14
Points: 18

No more tables! :)

Ed Seedhouse wrote:

...
Your use of tables for your menu structure is out of date - menus belong in list structures. That's what a menu is, a LIST of choices.

Your page is using a transitional document type and it should be using a STRICT one. Even worse, you are abusing tables for layout. Tables are not for layout, they are for marking up tabular data. There's no tabular data on that page.

Chrome is a modern browser. If you use antiquated coding practices, such as you are on this page, you'll have to expect problems in modern browsers.

I suggest you go to "HTML Dog" and learn to do it the modern way.

Well Ed, no more tables... Take a look at the source now Smile The site still feels a bit clunky but I rebuilt the whole thing using css so it's more up to date. Now I need to learn how to organize and name my styles and classes properly in my style sheet. It feels like a big mess. Also, I'm still not certain when to use a class and when to use an id... both work often but I'd like to have a deeper understanding.

http://www.kenrichsounds.com/

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 44 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

kirkbross wrote: Now I need

kirkbross wrote:

Now I need to learn how to organize and name my styles and classes properly in my style sheet. It feels like a big mess. Also, I'm still not certain when to use a class and when to use an id... both work often but I'd like to have a deeper understanding.

An ID may only be used once in a page, and it is intended to signify a singular structure that does not repeat itself on the page. For instance if you have a header section enclosed by a single element it's appropriate to give that element an ID.

Classes are used to signify elements that will repeat and have the same structure.

I think your markup is much improved, but you have likely overdone the DIVs slightly, nothing to really worry about. It's not necessary to class every element like you have, though, and it looks like overkill on that page. Give an ID or a CLASS to an element only when you need a hook for CSS to "see" that element. You seem to be using far too many classes here, or at least I can't see a reason for them.

In general you want to keep your code as simple as possible without extraneous elements. Layout wise this is a very simple page and shouldn't require all that complexity in your html or your CSS.

I hasten to add that this is just my opinion based on a quick look. Please don't take it as the word of a "guru", since he only reason the board classes me as one is because I have written a lot of messages! The board doesn't distinguish quality, only quantity...

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

kirkbross
kirkbross's picture
Offline
Regular
Los Angeles
Last seen: 10 years 19 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2010-02-18
Posts: 14
Points: 18

Thank You!

:relatively-speaking (or perhaps even :absolutely-speaking) you are a guru to me Smile Thanks for your response. I really want to get a grip on doing things the clean & simple way.

For example, for another site I want to create a grid of 9 thumbnail image rollovers (3 across and 3 down) each 100px square and spaced out evenly with 100px between each pic. My instinct would be to create nine divs, each with its own id (#thumb1... #thumb9) and then tweak the top and left values for each to get them spaced right. But I'm guessing there is a much easier way to do this with far less code. I suppose this is where I'd want to use classes or maybe img {} -- a css attribute(?) I'm just starting to explore.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 2 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Use an unordered list and

Use an unordered list and assign a class or ID to it then you don't need classes or IDs on each individual item because then can be styled by .myClass li. Then you can either float the list items left or use display: inline-block.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

kirkbross
kirkbross's picture
Offline
Regular
Los Angeles
Last seen: 10 years 19 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2010-02-18
Posts: 14
Points: 18

IE7 grief

Since switching to XHTML 1.0 Strict, the site isn't rendering correctly for my client who has Internet Explorer 7. (It's fine in all other browsers).

Should I go back to transitional or is there a fix for ie7?

http://www.kenrichsounds.com/