SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy 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?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi unprocione. Welcome to the forums.

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

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

  3. #3
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hi unprocione. Welcome to the forums.

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

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

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

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by unprocione View Post
    Oh thanks it does work
    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 .
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  5. #5
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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 =)

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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 .
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  7. #7
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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''.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You could use media queries to target those devices, you do know?

    That way you could change the height/width per device.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  9. #9
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You mean something like
    Code:
    media="only screen and (min-width: 320px)"
    Code:
    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?

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  11. #11
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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:

    HTML Code:
    @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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •