Jump to content


Photo
- - - - -

Border-Bottom Does Not Display In Safari+Chrome

safari chrome border-bottom css

  • Please log in to reply
8 replies to this topic

#1 helvetik_a

helvetik_a

    Advanced Member

  • Members
  • 99 posts
  • Locationrome - italy
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 21 November 2012 - 02:54 PM

Hello.
I would like to know why the dotted border-bottom doesn't show up in safari and chrome. Everything is okey with firefox.
I have all elements in the content-area, without header and footer section.

Please Login or Register to see this Hidden Content



Many thanks
Corina

Css:
/*logo*/
.wp-image-92{
display: block;
margin-left:100px;
margin-right: ;
margin-top:50px;
}
/*dl*/
#container_dl{
position:relative;
border-bottom:2px dotted #CCCCCC;
}
/*pdf*/
#center_download{
width:200px;
margin-left: auto;
margin-right: auto;
margin-top:-100px;
}

#center_download{height:200px;}

#center_download img{
position:absolute;
right:100px;
top:-110px;
display:block;
width: 200px;
opacity:1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;}

#center_download img:hover {opacity:0;}

/*box generell*/
#boxes{
position:relative;
margin-top:-100px;

}
/*box class*/
.splash_box{
margin-top:-80px;
margin-left:30px;
}

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 21 November 2012 - 03:46 PM

In Safari, the dotted border doesn't work because it requires different syntax as shown here:

Please Login or Register to see this Hidden Content



In Chrome, the dotted border doesn't work because it requires that you use a border image instead (the dotted border doesn't render in Chrome):

Please Login or Register to see this Hidden Content



You can add additional CSS for these to your current CSS.

#3 helvetik_a

helvetik_a

    Advanced Member

  • Members
  • 99 posts
  • Locationrome - italy
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 21 November 2012 - 04:14 PM

Hi Catrina. Thanks for your response.
Unfortunately it does not work even with the other syntax.
I tried this:

#container_dl{
position:relative;
border-bottom:2px dotted #CCCCCC;
border-style: dotted;
}

In firefox everything ok.

#4 helvetik_a

helvetik_a

    Advanced Member

  • Members
  • 99 posts
  • Locationrome - italy
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 21 November 2012 - 04:28 PM

I tried also this:

#container_dl{
position:relative;
/*border-bottom:2px dotted #CCCCCC;*/
border-color: #CCCCCC;
border-style: dotted;
border-width: 0px 0px 2px 0px;
}

No way :(

Instead dotted border i tried also with the "solid border". i understand the google chrome problem, but it does not shows up even in safari....

#5 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 21 November 2012 - 05:38 PM

In Safari what does the dotted line show up as? Dashed instead?

#6 helvetik_a

helvetik_a

    Advanced Member

  • Members
  • 99 posts
  • Locationrome - italy
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 21 November 2012 - 05:46 PM

Nothing there's no border at all. Take a look on my site: www.komputagroove.ch

I tried also with a simply solid border, but there's nothing....

thx

#7 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 21 November 2012 - 05:53 PM

Did you add solid border?

#8 helvetik_a

helvetik_a

    Advanced Member

  • Members
  • 99 posts
  • Locationrome - italy
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 22 November 2012 - 03:25 PM

Yes Catrina i wrote you, i tried also with a solid border...

#9 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 23 November 2012 - 10:12 PM

Hi there, it doesn't look like you're adding the css correctly, you're putting in a shorthand version as a comment, then placing the full css below it, but then you're not adding the full syntax underneath, so certain instructions are missing. If you're adding as shorthand all you need to put is

Please Login or Register to see this Hidden Content


If you're adding as full css, then you need to specific area in the border you're targeting, example below,

Please Login or Register to see this Hidden Content


If you're looking for browser specific css or further examples check out

Please Login or Register to see this Hidden Content







Also tagged with one or more of these keywords: safari, chrome, border-bottom, css