Thread

hey css experts,

i’ve run across a small display issue that only seems to occur in safari. if you click on the link to my portfolio and click on the thumb it will bring up a tabbed modal pop-up that displays some larger samples of my work. for some reason that i have been unable to fathom, the tab in this section is being shifted over one pixel, yet when looking at my other sections, everything is hunky dori. any idears?

thanks.

my site linky

What is the URL of the template being used for the lightbox-esque content?  I’m happy to look at the markup and CSS for you, but am not keen on going source diving through files to find it. :-D

not sure i follow. the link i provided takes you to section and page where the issue occurs. just click on the graphic. do you need a direct link for the css? if so here they are…

http://www.jontoney.com/css_styles/index
http://www.jontoney.com/css_styles/lightwindow.css

I can’t see the markup for the lightbox-ish area, so I cannot match up your styles and elements.  Is it all created dynamically?  I’ve not used that type before, but am familiar with other lightbox-esque techniques, and with those, you control the markup for the content that gets displayed, typically by storing the lightbox content in a separate template that ends up being fetched by the javascript.

Ok, I loaded up a WebKit nighty and used the shnazy new Web Inspector so I could see the markup for the popup, but didn’t see anything immediately awry.  You might try modifying it so that instead of 20px borders on the content area, that its width matches the size of the width of the title area (both 578px instead of the content area having 538px width and 20px borders).  It could be a quirk of how Safari renders borders, perhaps more akin to a “stoke”, at least the first pixel.  I’ve not noticed anything like that before, though, so that’s a tremendous guess.

yeah, the strange thing is that it displays correctly in the other sections using that same method.

#lightWindow-title-bar-title and #lightWindow-title-bar-close’s width are specified as a percentage, and I think the particular width of the web section’s content popup is just right so as to cause a rounding difference in computing the width in pixels.  Methinks therein lies the difference.

Indeed, just verified looking at the computed styles: the aforementioned divs add up to 577px, and the content area is 578px.

must be in the js script some where. i just don’t get it.

It just has to do with the computed style.  The innder divs use width as a percentage of the overall container element’s size, and it’s just rounding down for that particular width 578px.  80% is 462.4 and 20% is 115.6.  WebKit is ignoring the decimal in both of those to 462 and 115 respectively, resulting in a total width of 577 instead of 578.  If you increased or decreased the image/content by a hair in either direction, it would probably resolve itself.

nope, no go.

You’ve tried an image identically sized in width to the one on the “Print” page?