1

I have two problems... I've tried altering my CSS file, the JavaScript files and all kinds of other things. A google search yielded no remedy to these problems, so I come to the awesome site of answers!

This page -> http://students.cmps.subr.edu/aaron.chauvin/misc/test2.html has some issues in Chrome and Safari. Only when my CSS is in effect, the pictures that are supposed to be side-by-side aren't, but when the CSS is off, they are. This problem isn't evident in FF/IE9. I'm thinking it has something to do with the   but I'm not totally sure. Edit Edit: Thanks for the fix Genzer!

Also on that page, even if all my CSS/JavaScript isn't linked, I have a small gap between the bottom of the images that are links and the dotted link border... I want to get rid of the gap. What's causing this gap? This happens in all browsers.

Thanks in advance.

Edit: Here's the CSS: http://students.cmps.subr.edu/aaron.chauvin/misc/style.css

Edit Edit: Fixed the side-by-side image link problem, now trying to figure out what's causing the variation in the display of the custom a:focus border (non-existent in IE9, partially encases image link in Webkit browsers) and the gap between it and the bottom of the image link (all browsers BUT IE9).

Improve this question
0

2 Answers 2

Reset to default
2

The problem is you're wrapping all your column's info in a span: <span class="reg">...</span>

IE9 and FF figure out that you want it to display as a block element, but Webkit (Chrome and Safari) don't. Set display:block on the "reg" class and you should be set. (I think this fixes the "dotted border" issue as well, but i'm not quite sure what you meant there)

To get the orange border to show up in IE9, make sure to set outline-style to something like "solid" or "double" in the a.piclink:hover css class, in style.css. Once i did that, the border shows up.

I'm still not entirely sure why your links and nested images are behaving like they are, but I found a little tweak (tweak = almost a hack) to get it to work: Set display:inline-block; on a.piclink and set a fixed height on it. Note that inline-block tacks on 4px, so the height should be 4px taller than the height of the image; in your case: 47px. It's a bit of a hack, but it's valid and it works. Unfortunately IE7 doesn't like this, but zoom:1; *display:inline; get it working.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

@Aaron Chauvin that's odd, it worked for me in Chrome... I'll take another look at it.
Please excuse my ambiguity, I was referring to the a:focus border... there is a gap between it and only the bottom of my image links.
@Thomas Shields Oh eff, I'm just seeing how putting soultion in quotes could be viewed as a smart-alek remark... sorry about that, totally didn't mean to come off as a smart-alek (if that's how you took it).
I actually found inline-block; before returning to this page but thanks nonetheless. I sorted out all the little bugs including the gap below my img links. I was even able to completely obliterate the built-in focus borders for mouse users. No borders at all on any event or status (or what have you), clicking, hover, active, focus, and even clicking the link and returning to the page (some implementations would leave the border after doing this for some reason). That took some crafty css work, but don't worry, I added custom focus borders which match the theme of my site for power users.
You heard it here first!!! =P If anybody's interested in COMPLETELY removing all focus borders for mouse users while still providing them for power users drop me a line... it works in all major (current) browsers... go to my website (link above) and send me an email!
|
2

Adding following CSS code in your style will make Chrome display your TestPage the same as IE8.

span.reg a {
    display: inline;
}
Improve this answer

5 Comments

Cool, thanks! That definitely fixed the display of the image links in chrome. Any idea why there's a gap between the a:focus dotted border (well in my case, solid orange border since I changed it with CSS) and the bottom of my image links? Also, why is the a:focus border only encasing part of the image link in Chrome?
The "partial a:focus border" doesn't happen in FF4, and IE9 doesn't display the custom orange border at all! What gives?
Correction, it fixes the problem only if my CSS file (style.css) isn't linked... what's the deal?
Mmmkaaaay, I'm such a klutz... I had display: table-cell; in one of my div id's! Now the image links are being displayed inline like I want. If only I could figure out what's going on with these custom a:focus borders (doesn't display at all in IE9 and partially encases the image link in Webkit browsers; all browsers BUT IE9 still have a gap between the a:focus border and the bottom of the image)
@Aaron I don't even see the border at all in Chrome, either. Finally got back to a computer and i'm taking a look at it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.