issue in chrome

[StarWallace]

ok, im not entirely sure if this is the right section for this, but here goes.

I've been building my new site design this weekend and for some reason, i'm getting some odd issues with google chrome and only chrome. every other browser is fine (ok, maybe not IE 6, but who uses IE 6 any more :P)

this is what i get in firefox and is exactly what i want to get:
http://i51.tinypic.com/2z5lv9z.jpg

this is what i get in chrome and i circled the issues:
http://i56.tinypic.com/2weywxg.jpg

for some reason, it looks like Chrome is displaying the background image twice..., one where it's supposed to display, and the once again in the main content column, which causes the whole thing to shift over and look like a mess. I'm using a table to structure the page, with the background image CSSed onto the <tr> and the side bar and main content in <td>s

why is it that firefox, opera, safari, and heck, even IE display this just the way i want , but not chrome?

go and take a look at my page for you self if you wish, http://microstudios.co.cc/construction. right click > view source if you want, it's all html right now

[littlehumanity86]

Hi,

its the problem with your background image.

tr#Content {
background: url("images/content.png") repeat-y -12px 0px;
color: #B1B1C5;
vertical-align: top;
}

use the above style and view the O/P.
This may Help You.

Regards,
Little Humanity

[StarWallace]

mmm well thanks for the help, but shifting it to the left isn't going to do anything, except cause new problems... and it breaks what worked in firefox... thanks for trying though...

edit: i figured out the issue... it seems as though chrome is displaying the background image as part of each individual <td> cell rather than part of the <tr> row, regardless of the fact that the background is from the <tr> row. Now i just need to figure out how to get around this lovely little "feature". Could someone help me with that?

[Teensweb]

Works fine for me with chrome (latest ver). BTW, in your left nav menu <a> contains an <li> tag which's not correct(allowed), but in your case it won't make a difference in rendering though.

[StarWallace]

yeah i ended up figuring it out... i end up splitting the table up and putting the background image in a div around the main section... a little convoluted and not what i wanted, but at least it looks right across all browsers.

and as for the a round the li, i did that because i wanted it to create a styled link out of the whole line item, taking up the full width and height of that line... not just the text. This way i get the effect i wanted. i know it's not correct syntax, is there a better way i could do it with valid syntax?

[Teensweb]

You could do something like:

<li><a style="display: block; margin: 0; padding: 5px;" href="#">Home</a></li>

And change the padding of the parent li tag to 0.(its on your main.css under ul.SideNavList li{} )

Based on the cotent of the page, I guess the page was rendered by some template software, right? By default, did they have the same invalid html too?

[StarWallace]

nope, this is all me, hand coded. The gibberish filler in the page came from MS Word, using the function "=rand(3,4) <enter>" i just filled it with random text.

OF COURSE! block out the anchor tags! makes sense, thanks for the tip!

[Teensweb]

Uh oh, dint realize that they dumped the quick brown fox- lol!
I'm not sure about this, but I think there might be some extra css in your page that you can remove to optimize the size/rendering. Good luck anyway!