Jump to content
helvetik_a

Border-Bottom Does Not Display In Safari+Chrome

Recommended Posts

helvetik_a    0
helvetik_a

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
catrina    103
catrina

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.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
helvetik_a    0
helvetik_a

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
helvetik_a    0
helvetik_a

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
helvetik_a    0
helvetik_a

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
helvetik_a    0
helvetik_a

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

Share this post


Link to post
Share on other sites
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      every since Chrome introduce scroll anchoring (see chrome://flags) blog posts on my page start scroll automatically as soon as the user scrolls down a bit. It is super annoying and I don't know exactly what triggers the incompatibility with Chrome's latest feature that is supposed to improve usability.
      Since I don't know what causes it (Pagelines, or a Plugin), I would like to disable the feature using a CSS override that Google describes as follow:
      "Scroll anchoring aims to be the default mode of behavior when launched, so that users benefit from it even on legacy content. A CSS property overflow-anchor can disable scroll anchoring in part or all of a webpage (opt out), or exclude portions of the DOM from the anchor node selection algorithm. This property supports the following values when applied to an element E:
      overflow-anchor: auto (the default value) declares that the DOM subtree rooted at E is eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E. overflow-anchor: none declares that the DOM subtree rooted at E is not eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E." Do you guys happen to know how to use that property with the ROOT element so it applies to the whole page?
      Thanks
      Michael 
    • jagipson
      By jagipson+
      We had this site on our cloud 9 server and moved it to a Amazon Web Service server using Cloud Front and now the Editor on chrome is missing just says USE GOOGLE CHROME TO EDIT WITH DMS. Have tried multiple computers and same results. Any solutions why we would be have this problem?  Won't work on any page.
      http://www.viaglobalgroup.com/
      Thanks
       
      Matt
      @Danny @Andrew 

    • wyo22ski
      By wyo22ski+
      Hello,
       
      I'm basically a designer and understand a little on how to change CSS, etc., so please excuse my ignorance...  I recently upgraded to the newest platform from the DMS and my old DMS theme no longer functions.  I'm trying to replace the image slider that my Horizon Photography Theme (Nick Haskins) had created.  The Impulse image slider seemed the closest to what I need, but there are problems.
      It seems the the Impulse section for sliding images defaults to the image width, no the height.  I can change the Impulse stage height and width, but this does nothing to the internal content.  For instance, if I change the height to 200 pixels, the image remains the full width and only shows a cropped section.  I would like the ability to change the Impulse height, and have the image height fit space. 
      I've put this custom CSS in, but again, this only controls the stage height of Impulse:
      .pl-sn-impulse .pl-impulse-cell .cell-wrap, .pl-impulse-container, .owl-stage-outer {
        width: 100%;
      }
       
      Any suggestions welcome.  Thanks 
    • Objectif-Mariage
      By Objectif-Mariage+
      Hello. 
      I have just realized that CSS (Less plugin) , is not working..... I have disable all plugins (except PL CUSTOM LESS and PL5) , and ... it's not working ... 
      It's not the first time. Usually I had trouble with a plugin name Autoptimize , but it's Desactivate now , all memory have been purge, and it's still not working! :-/ So it's not from this plugin. 
      NB : When I am logged on my website, if i go on the black wordpress dashboard bar, go on the PL icon, clic on </> LESS/CSS => then the page suddenly apply the CSS .... But As soon that i reload the page, nothing. I think the problem is that the plugin LESS/CSS does not load properly (if I can say that with my simples words).
      I order to keep the site "good looking" I have temporally copy/paste all my LESS code in a plugin : Script n Styles that apply the LESS/CSS code... but it's not a solution for long time.
      Can someone help me ? Did I do something wrong ? Is it an update ? 
       
      my website : https://www.wedding-photography-minneapolis.com
×