Archived

This topic is now archived and is closed to further replies.

  • 0

Border-Bottom Does Not Display In Safari+Chrome


Question

Posted · Report post

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.

www.komputagroove.ch

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;

}

Share this post


Link to post
Share on other sites

8 answers to this question

Posted · Report post

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

#container_dl{

/*border-bottom:2px dotted #CCCCCC;*/

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

border-bottom-style:dotted;

}

If you're looking for browser specific css or further examples check out http://www.w3schools.com/css/css_border.asp

Share this post


Link to post
Share on other sites

Posted · Report post

In Safari, the dotted border doesn't work because it requires different syntax as shown here: http://old.macedition.com/cb/resources/safari/bordertest1.html

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): http://www.css3.info/preview/border-image/

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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....

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

Did you add solid border?

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites