Positioning Issues, Page moves and there is a weird artifact Options

[xenira]

Hi there,

http://lauraworks.com/antonio/index.html

I'm still learning CSS, but needed to get this site finished within a deadline, so I incorporated some positioning using tables. I know that's bad form, etc, but I haven't been able to figure out how to do it all using CSS yet. I am working on it. The problem I'm seeing is that the home page and the AC Ensemble page are a pixel or two off in the vertical positioning and I can't figure out where to fix that.

The other 2 things that have been driving me nuts is that there is a little 1 pixel thick line on the right hand edge of the navigation bar, which is only visible in IE. I don't see it in any other browser.

My client is viewing this on a larger monitor and it appears that the background tiles are not behaving as I intended. The tile that should be on the right hand side of the content area is ending up more in the center and there is a big, black vertical gap at the bottom of the page in the background. Does anyone else see that?

My mac is in storage until I finish moving, so i can't view it in Safari. Could someone check it over and let me know how it looks and how to fix these glitches?

This post has been edited by xenira: May 21 2012, 05:39 PM

[pandy]

The problem I'm seeing is that the home page and the AC Ensemble page are a pixel or two off in the vertical positioning and I can't figure out where to fix that.

Compared to each other or what? I don't see it.

[xenira]

Thanks for taking a look, Pandy.

Well, it's those two pages compared to all the rest. Those two both move ever so slightly when going from page to page.

I guess the bigger problems are the weird white line next to the nav bar in ie and the black gap between the background tiles. I could live with the 1 pixel jump for now, I suppose.

The problem I'm seeing is that the home page and the AC Ensemble page are a pixel or two off in the vertical positioning and I can't figure out where to fix that.

Compared to each other or what? I don't see it.

[pandy]

OK, that's probably because those two pages are short and don't need a vertical scrollbar. I guess you see this in other browsers than IE? EI has its "shadow bar" even if the scrollbar isn't needed. Actually, I can't spot it, but I'm not the best at spotting small differences.

If it is what I think you can trick it away.
http://www.hicksdesign.co.uk/journal/535/f...now-even-better

[xenira]

Hmmm...well, one of those pages is short and the other (AC Ensemble) is very long. In fact it's the longest of all the pages. They all have vertical scrollbars on the computer I'm using in all browsers. It looks like it's a table width issue somewhere. I'll keep looking.

Any advice on the tiled background issue? or the white line next to the right hand edge of the navigation menu?

Thanks!

OK, that's probably because those two pages are short and don't need a vertical scrollbar. I guess you see this in other browsers than IE? EI has its "shadow bar" even if the scrollbar isn't needed. Actually, I can't spot it, but I'm not the best at spotting small differences.

If it is what I think you can trick it away.
http://www.hicksdesign.co.uk/journal/535/f...now-even-better

[pandy]

You are right. I must have clicked the wrong link. Anyway, what browser do you see this in? I don't see the gaps either.

[xenira]

The 1 pixel thick line on the right hand edge of the navigation bar is only visible in IE. I don't see it in any other browser.

My client is viewing this on a larger monitor and it appears that the background tiles are separated by a black vertical strip. The tile that should be on the right hand side of the content area is ending up more in the center and there is a big, black vertical gap at the bottom of the page in the background. I can't see it because my monitor isn't big enough, but my client has a 22 in monitor and the black strip is about an inch and a half wide in the screenshot he sent me.

The tiles that are supposed to flank the content area are a brushed texture on the left hand side and a geometric pattern along the right hand side. I had originally had a little repeating black band that extended horizontally along the x axis, but he wanted it removed. When I removed that image and positioning from the css file, it caused the other tiles to display improperly, but I can't figure out how to fix it. Particularly because I can't see what my client is seeing.

You are right. I must have clicked the wrong link. Anyway, what browser do you see this in? I don't see the gaps either.

[xenira]

I still haven't been able to see the problem for myself or figure out the solution for the black gap in the background. Is there anyone out there who can help me?

The 1 pixel thick line on the right hand edge of the navigation bar is only visible in IE. I don't see it in any other browser.

My client is viewing this on a larger monitor and it appears that the background tiles are separated by a black vertical strip. The tile that should be on the right hand side of the content area is ending up more in the center and there is a big, black vertical gap at the bottom of the page in the background. I can't see it because my monitor isn't big enough, but my client has a 22 in monitor and the black strip is about an inch and a half wide in the screenshot he sent me.

The tiles that are supposed to flank the content area are a brushed texture on the left hand side and a geometric pattern along the right hand side. I had originally had a little repeating black band that extended horizontally along the x axis, but he wanted it removed. When I removed that image and positioning from the css file, it caused the other tiles to display improperly, but I can't figure out how to fix it. Particularly because I can't see what my client is seeing.

You are right. I must have clicked the wrong link. Anyway, what browser do you see this in? I don't see the gaps either.

[pandy]

What version of IE? I can't see the things you describe which makes it hard to help.

I still haven't been able to see the problem for myself

Huh?

[xenira]

What version of IE? I can't see the things you describe which makes it hard to help.

I got the IE problem fixed yesterday (It was a spacer gif that was inadvertently created in Fireworks...I'm starting to get the importance of just using CSS for positioning, now).

My client is viewing the site on a larger monitor and he reports that the background tiles are not behaving as I intended. There is a big, black vertical gap at the bottom of the page in the background. I have tried adjusting the positioning. I have tried making the left hand side graphic wider, but everything I do just moves the gap around.

screen

I still haven't been able to see the problem for myself

Huh?

He is seeing this problem on a 22" or 24" monitor on a mac. I am on a 15" HP laptop. My mac is in storage until I finish moving, so i can't view it in Safari. I was asking if there was anyone with a large iMac who could check it out on Safari and let me know how it looks and help me sort out how to fix these gap? It's hard troubleshooting a problem that you can't even see. Thanks for your help.

[pandy]

I'm on a 24", but not alas not a Mac. On http://lauraworks.com/antonio/ac.html it maybe looks like another shade of black behind the footer (Photos by Alberto Ferrante and down) if I look really long and hard, but I can't measure any difference. It's #000000 all over. Maybe the eye is tricked by the other colors.

[Frederiek]

I'm on a 24" screen on Mac (Lion), using Safari (the very latest) and I don't see the black gap as seen in the screenshot in screen.html.

But I do get a 404 (Not Found) error for tile-new.jpg on all pages.

Try passing your pages through the validators:
- http://htmlhelp.com/tools/validator/
- http://jigsaw.w3.org/css-validator/

The HTML errors related to the DW javascript can be avoided by putting them in an external .js file and link to that in a script src in the pages.

[pandy]

Maybe I misunderstand. Is the picture of the guy supposed to extend all the way down?

[xenira]

No, that brown brushed background is supposed to extend all the way across and down the page, with the patterned side going down the right hand side.

I'll see what the validators tell me.

Thanks.

Maybe I misunderstand. Is the picture of the guy supposed to extend all the way down?

[xenira]

I resolved the problem. Instead of having two different images repeating down both sides of the content area, I made one really wide (2800 px) one, positioned it in the upper right hand corner and repeated it down the y axis.