Link Borders looking different in Mozilla, Chrome and Safari

Hi all!

I’m finishing this website: http://www.relifeservizi.com/ but I have a big problem.
As you can see in the index I want a bottom border on my images used as links. So I wrote this

a:hover {
border-bottom: #F0C 0.5em solid;
text-align: center}

But only Firefox is showing the right size of the borders. Moreover, one of the links (about us) is not showing the bottom border, except when viewing it on Firefox. And the same happens here http://www.relifeservizi.com/contatti.htm on the image saying “Richiedi informazioni” and in all the website with the logo on the left-top.
I’m really going crazy for this thing, I really can’t understand what I have to do!!!

And, talking about different views on different browsers, I also have problems showing an embedded google map and an embedded video from vimeo in percentage here: http://www.relifeservizi.com/contatti.htm and here http://www.relifeservizi.com/relife.htm . Firefox doesn’t show them correctly while Chrome and Safari do. I really don’t understand.

Any opinions?

Hi unprocione. Welcome to the forums. :slight_smile:

Rather than put the border on the link, I’d put it on the image. E.g.


.center img {border-bottom: 0.5em solid #000;}
.center a:hover img {border-bottom: 0.5em solid #FF00CC}

Oh thanks it does work :slight_smile:
What do you think of the google map and the vimeo video?

If you wish to have your design critiqued, or parts of your site, please use the review forum :).

No I don’t want my design critiqued, I just wish to know why they look so different in mozilla and chrome =)

Firefox is correct in these regards.

If removing the iframe in general isn’t possible, perhaps setting a fixed PX height would be a good enough solution for you?

Why can’t you use <object>'s or <embed>'s for this to have the flash player?

Also, PLEASE stop it from auto playing. It’s extremely annoying :).

I know, It’s so annoying for me too, but the manager likes it this way, no way O___O

Vimeo provides to you this code when you click on “embed” with iframe, it says it’s fine for tablets and smartphones. And I don’t know how to embed the video in a different way.
I want percentages for the video and the map because I like the website to be elastic… If i put in width or height in px it won’t be fine for tablets smartphones and screens <10’'.

You could use media queries to target those devices, you do know? :slight_smile:

That way you could change the height/width per device.

You mean something like

media="only screen and (min-width: 320px)" 
media="only screen and (min-width: 720px)" 

?

So I should create a different css only for these 2 pages where I have this problem… I should create an Id for the iframe in each different css and define it with pixel sizes, right?

Well how many iframes do you have per page? Just one?

Are all the iframes doing the same thing? Just a small video segment? If so, you can just do a general selector in the CSS. Such as “#videointro iframe{}” and have that contain the media styles.

Sorry for my late reply, I haven’t got time to do some try.

Now I’ve written this in my css:

@media screen and (max-device-width: 480px) {
    #videointro iframe { width: 450px; 
	height: 253px; }
@media screen and (min-width: 860px) {
	#videointro iframe { width: 800px;
	height: 450px; }
#videointro {float:right;
    width: 45%;
	padding: 1em; 
	border: #F3C solid thin;}

while in the html file I’ve deleted width and height.
This is the page: http://www.relifeservizi.com/relife-2.htm the design is now destroyed, the original one was like this: http://www.relifeservizi.com/relife.htm and I still can’t understand why.