• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

CSS curved borders

Guest
May 10, 2011 May 10, 2011

Copy link to clipboard

Copied

Can anyone see why this isn't working?

I have just added border radiuses (radii?) to the default stylesheet using notepad:

p.Img {

border-left-style: Solid;

border-right-style: Solid;

border-top-style: Solid;

border-bottom-style: Solid;

border-left-color: #adadad;

border-right-color: #adadad;

border-top-color: #adadad;

border-bottom-color: #adadad;

moz-border-radius: 15px;

border-radius: 15px;

padding-left: 2px;

padding-right: 2px;

padding-top: 2px;

padding-bottom: 2px;

border-left-width: 7px;

border-right-width: 7px;

border-top-width: 7px;

border-bottom-width: 7px;

}

But my borders remain stubbornly unrounded - anyone any ideas?

Thanks

Views

965

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
May 10, 2011 May 10, 2011

Copy link to clipboard

Copied

Just to be clear, the two lines actually added were:

moz-border-radius: 15px;

border-radius: 15px;

cheers,

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 10, 2011 May 10, 2011

Copy link to clipboard

Copied

Hi,

For Mozilla:

-moz-border-radius: 15px;

Include the dash before "moz".

For Safari/Chrome:

-webkit-border-radius: 15px;

For IE9/Opera 10+:

     border-radius: 15px;

For IE8 and lower: Too bad. They don't support border radius.

For more information, see http://www.css3.info/preview/rounded-border/

Greet,

Willam

Typo in border-radius

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
May 10, 2011 May 10, 2011

Copy link to clipboard

Copied

Hi - that has helped but now further problems have arisen...

How do I add an img tag to the css so that Robohelp will pick it up? All I want is an img style that adds a grey, round edged border to my images and it seems to be incredibly tricky!

At the moment I am using a p.img class in the stylesheet but that is unreliable depending on the size of the image...

Can anyone help on this?

Thanks

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 10, 2011 May 10, 2011

Copy link to clipboard

Copied

Hi,

You can simply style the image itself. For instance, if you use:

img {

     -moz-border-radius: 15px;

     -webkit-border-radius: 15px;

     border-radius: 15px;

}

you give all images a border radius of 15 pixels. I'd say that you simply take the border styles from your paragraph definition and put them in an image style.

If you only want to style certain images, create an image class, add the styling for that class and apply the class to the images in HTML mode:

<img src="myimg.png" class="border" />

img.border {

     /* Border style here */

}

Greet,

Willam

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
May 10, 2011 May 10, 2011

Copy link to clipboard

Copied

You see, this is what I figured but I just can't get it to work. I add this to my .css file:

img {

border-left-style: Solid;

border-right-style: Solid;

border-top-style: Solid;

border-bottom-style: Solid;

border-left-color: #adadad;

border-right-color: #adadad;

border-top-color: #adadad;

border-bottom-color: #adadad;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

border-radius: 15px;

padding-left: 2px;

padding-right: 2px;

padding-top: 2px;

padding-bottom: 2px;

text-align: left;

margin-left: 0px;

x-next-class: Caption;

x-next-type: p;

margin-right: 0px;

border-left-width: 7px;

border-right-width: 7px;

border-top-width: 7px;

border-bottom-width: 7px;

}

Go back into Robohelp, insert an image, nothing happens. No border at all. Any thoughts?

Thanks again...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 10, 2011 May 10, 2011

Copy link to clipboard

Copied

No surprise that RoboHelp doesn't show it. Try generating your output and see if your styles are correct in your output.

Also, I doubt that your curved borders will show if you create HTML Help output.

Greet,

Willam

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
May 11, 2011 May 11, 2011

Copy link to clipboard

Copied

LATEST

William has figured out the issue via email, I'll post it here in case it comes up again for anyone...

As for the borders of the images, RoboHelp automatically disables the borders of images you insert into your topics. You can override this setting in your css with the !important declaration. Try replacing your current style with:

img {

border: 7px solid #adadad !important ;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

border-radius: 15px;

}

The !important declaration tells the browser that this style is more important than any inline styling or user defined styling. This allows your style sheet to overwrite those RoboHelp inline styles.


Thanks for all the help,

Paul

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp