CSS rounded border issue

I've got a CSS rounded border issue. Safari (4.0.3) is drawing a slight white artifact on the rounded corners. Look at the comparison between the Safari screenshot and the Firefox (3.5.x) screenshot (look at the border on the Watch button):
http://www.prototypos.com/screenshots/safariroundedborder.png
http://www.prototypos.com/screenshots/firefoxroundedborder.png
Do folks on the Apple Safari dev team read this site? If so, I'd appreciate it if they take a look at this issue.
thanks, Chuck
Message was edited by: Dr. Chuck
Message was edited by: Dr. Chuck

Are you doing this with CSS3 ? If your using CSS 3 you know it hasn't really been fully implemented in all browsers, (even if they say so). Even tho CSS 3 is out and running, I myself tend to shy away from stuff like round corners.
No Apple won't see this.

Similar Messages

Correct "clip" for background with round border

Hi all. I'm having a problem with a round border and a round background. If you look at the code below you will see that I have a border specified with a radius of 5. If I run this, the background sticks outside of the border. If I also set the background to have a radius of 5, it still doesn't look correct as the outside of the border turns purple whereas I would expect it to be light red. If I change the background radius to 4 then the inside of the border doesn't quite match up to the background.
How do I set a border and just say the background should be "clipped" by it?
Thanks, Nick.
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;
public class RoundTest extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        FlowPane flowPane = new FlowPane();
        Scene scene = new Scene(flowPane, 500, 500);
        flowPane.setStyle("-fx-padding: 10;");
        Label label = new Label("Hello");
        label.setStyle("-fx-border-color: red; -fx-border-radius: 5; -fx-background-color: blue;");
//        label.setStyle("-fx-border-color: red; -fx-border-radius: 5; -fx-background-color: blue; -fx-background-radius: 5;");
        flowPane.getChildren().add(label);
        stage.setScene(scene);
        stage.show();
    public static void main(String[] args) {
        launch(args);
}

This is actually a kind of tricky question to answer well.
The standard caspian.css stylesheet for JavaFX 2.2 makes almost no use of borders.
The standard caspian controls have things that look like borders or highlighted edges, but these are almost always implemented by layered backgrounds.
For instance a focus ring around a button is a blue background which is layered underneath the button background, making the ring look like a border, even though it's not.
I don't really know why the layered background approach was chosen over a border + background approach. Possible reasons are:
- it's easier.
- it performs better.
- it provides a better visual experience.
Maybe it is one or all of the above.
Regardless, I think there was likely some good reason why the layered background approach was chosen, so you'd probably best stick to it.
One advantage of using this approach is there are lots of similar examples in caspian.css that you can copy from and use.
A sample css style string for your sample app using layered borders, might be something like:
-fx-padding: 1; -fx-background-insets: 0, 1; -fx-background-radius: 5, 5; -fx-background-color: firebrick, forestgreen;By playing around with combinations of layered backgrounds, padding and background-insets you can achieve, borders around your controls which can be either entirely enclosed within your control's standard layout or outside of it (like the focus ring), so that when you add something like a focus ring around your control it doesn't shift the control's onscreen position - it really just surrounds the control.
An updated version of your sample app which uses this is below:
import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class RoundTest extends Application {
@Override public void start(Stage stage) throws Exception {
//    System.setProperty("prism.lcdtext", "false");
    StackPane stackPane = new StackPane();
    Scene scene = new Scene(stackPane, 500, 500, true);
    stackPane.setStyle(
        "-fx-background-color: cornsilk;"
      + " -fx-border-insets: 10;"
      + " -fx-border-color: rgba(128, 128, 128, 0.5)"
    Label label = new Label("Hello");
    label.setStyle(
//        "-fx-padding: 5;"
//      + " -fx-background-insets: 0, 5;"
//      + " -fx-background-radius: 5, 5;"
        "-fx-padding: 1;"
      + " -fx-background-insets: 0, 1;"
      + " -fx-background-radius: 5, 5;"
      + " -fx-background-color: firebrick, forestgreen;"
      + " -fx-text-fill: whitesmoke;"
//    label.setScaleX(5);
//    label.setScaleY(5);
    stackPane.getChildren().add(new Group(label));
    stage.setScene(scene);
    scene.setCamera(new PerspectiveCamera());
    stage.show();
public static void main(String[] args) { launch(args); }
}Now for some other questions you raise:
If I run this, the background sticks outside of the borderYeah the background radius and border radius properties are independent, so if you use a rounded border, you also need to use a rounded background or the background will overflow the border corners.
If I also set the background to have a radius of 5, it still doesn't look correct as the outside of the border turns purple whereas I would expect it to be light redJavaFX 2.2 uses anti-aliasing in pretty much all of it's rendering (and even another trick for lcd called sub-pixel rendering of text in some cases). Your border is only one pixel wide. If the border isn't sitting exactly on a pixel boundary, it's going to be blended with the background. Even if the straight sides of the border sit exactly on the pixel boundary, when the border turns the corners, the anti-aliasing algorithms will kick in blending the border corner and the background around the inside edge of the corner.
You chose a green background and a red border. When you mix those two colors, you get purple (which is what is happening).
I don't know of anyway to enable or disable anti-aliased rendering for JavaFX scene graph objects (perhaps something to do that might come along for the ride with the 3D scene graph support in Java 8).
Regardless, you probably want anti-aliasing engaged for your rendering anyway. So you should develop your app knowing that anti-aliasing will happen. To do this, choose colors which blend well when anti-aliased. Caspian does this by deriving a lot of the outer background colors from the inner background colors (i.e. just lightening or darkening the border). This works well because they have the same base rgb component mixture, just in different portions, so the anti-aliasing mixes them seamlessly. Choosing full colors at opposite ends of the rgb spectrum such as red and blue result in jarring mixtures like purple. Even if the anti-aliasing wasn't involved, your eyes can play tricks on you and have difficulty clearly seeing the border between these kind of colors due to the weird optics of the eyes.
Another strategy to alleviate nasty blending is to use more pixels, e.g. instead of a one pixel border, use a two pixel border - the anti-aliasing blending will be far less noticeable. Using the greater pixel strategy works very well in conjunction with newer higher resolution screens (so called retina displays), where the pixels themselves are so small that the human eye is unable to distinguish the pixels and the way they blend.
All that said - your original example with the rounded borders and background doesn't look too bad to me :-)
One other issue I came across when testing this is that there is a -fx-border-style css attribute which can have values of centered, inside and outside, and when I tried to set it I got messages like:
WARNING: com.sun.javafx.css.parser.CSSParser declaration CSS Error parsing in-line style '-fx-padding: 1; -fx-background-insets: 0, 1; -fx-background-radius: 5, 5; -fx-background-color: firebrick, forestgreen; -fx-border-style: inside; -fx-text-fill: whitesmoke;' from javafx.scene.Node$22@1bd5d8ab: Unsupported <border-style> 'inside' while parsing '-fx-border-style' at [1,138]
The css reference guide notes that the border functionality copies from the w3c backgrounds and border functionality, but there is no inside, outside, centered border style in the w3c css reference, so I guess there is some error in the JavaFX 2 css documentation there around what is supported and what is implemented from the w3c css reference. Note that I'm not really advocating that the JavaFX css processing should match the w3c css reference as I find the w3c system complicated and difficult to understand.
http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#region
http://www.w3.org/TR/css3-background/#border-style
Perhaps as borders in css don't seem to be used much in JavaFX, the documentation issue isn't such a big one.

How to make a round border around my picture?

I am trying to design a logo that would fit into the center of a Frisbie, yet I cannot figure out how to make a round border around the picture. I have tried using the eliptical tool, and have also tried using the cookie cutter. The only option I can get to work with the eliptical tool, is the feather, yet I can't change the pixel number for some reason, so it just makes a thin circle around the picture. I thought I could cut and paste it, but the copy and cut options were grayed out and didn't work. When I used the cookie cutter, it made a nice border, and I pasted the picture into it, but, there are four sections that need to be filled in with the background color and the paintbucket didn't work in those spaces (they are the gray and white checked areas. (the picture ends up looking like a rectangle inside of a circle). So I made a new blank file and filled it in with the color of the picture's background, hoping to use the cookie cutter tool around the picture that was now pasted into the new blank file (I chose another color for the round border) and I used the cookie cutter around the picture, but when it was finished, the whole picture ended up being white. All I want to do is to make a border around a picture (a round border). Nothing I have done has worked though. What am I doing wrong, or what are some other options for trying to do this? Thanks.

Here is a simple way to add a border. Select the item, add a blank layer, choose the border size and color and the Outside option:
Here is the result:
Note that you don't even need to do the Stroke on a blank layer. You can Stroke directly on the picture layer. However having the blank layer preserves the picture in case you want to start again with different Stroke options.
If this is not what you are looking to do, please clarify.

Unit price in Invoice form(Rounding up issues)

Hi Gurus!
In my smartform I have used a formula to get the unit price of an item line which is giving me rounding up issues as it is calulating upto the 3 decimal places that I require in my output. Is it possible to grab the unit price field (KEBTR) directly into my form for the unit price so that I get the actual amount as in SAP into my invoice output rather than caluclting it in my code so that there is no discripancies.
Like it shows on my form sometimes 98.999 or sometime 99.001 instaed of 99.00 as is in under the condition tab of the invoice, I would like it to show straght as is in SAP 99.000 rather tahn doing caluction and coming to a smallest decimal value.
CLEAR: g_unit_price, g_min_charge_flag, g_item_tot, g_skto_kwert.
* get skto amount (Cash discount)
LOOP AT gt_konv INTO gs_konv WHERE kposn = gs_gen_del-itm_number AND
kschl = 'SKTO'. "Cash discount
g_skto_kwert = gs_konv-kwert.
EXIT.
ENDLOOP.
* For rental contracts there is no delivery so surcharges must be removed from net.
IF is_bil_invoice-hd_gen-bil_type = 'ZFV'.
CLEAR gs_gen_del-kzwi3.
LOOP AT gt_konv INTO gs_konv WHERE
kposn = gs_gen_del-itm_number AND
stunr BETWEEN 230 AND 289.
gs_gen_del-kzwi3 = gs_gen_del-kzwi3 + gs_konv-kwert.
ENDLOOP.
ENDIF.
g_item_tot = gs_gen_del-netwr - gs_gen_del-kzwi3.
IF gs_gen_del-fkimg <> 0.
g_unit_price = g_item_tot / gs_gen_del-fkimg.
ENDIF.
Thanks
Edited by: Aarav Agnihotri on Jun 11, 2009 6:58 PM

Hi Aarav,
Check this links
[Rounding|Rounding]
[Rounding off value|Re: Rounding off value]
Read Above for a clear idea about Rounding values.
[Rounding of the Values|Rounding of the Values]
[Quantity & Rounding condition values|Re: Quantity & Rounding condition values]
[Rounding down values|Re: Rounding down values]
For More results Search In SDN...
Thanks & regards,
Dileep .C

DW-CS6 Does it support css rounded corners?

Anyone know if the new release of DWCS6 will support CSS rounded corners in Design View?
Thanks
Os.

David_Powers wrote:
Dreamweaver CS5.5 wasn't an intermediate upgrade. It contained a whole swathe of excellent features, and was fully deserving of being called CS6. The problem was that Photoshop and Illustrator weren't ready for an upgrade, and they didn't want the numbers to go out of sync. Bad marketing decision, but what's new? ;-)
Yeah, most don't upgrade for 2 versions. I'm still on 4 but will upgrade to 6. Not many will upgrade from 5 to 5.5 as even if it wasn't an intermediate upgrade it reads, on the face of it, the hell like it.
David_Powers wrote:
No, I'm not in charge of the forums. Never have been. I think what's needed is a stronger horizontal rule between posts, but I suspect that will take about 12 months to implement.
A stronger keyline between the posts would help, that can't be too difficult to incorporate.

Rounded border in table but rectangle lines still visible

How can I show only the rounded outline of a table? I've selected rounded border, and that shows up, but so does the rectangle of the table shape. Is there a way to get rid of that so that only the rounded border shows? The rounded border works perfectly for a text box.

For each corner cell in the table set the border edges to 'None'.

Round border corners

Hi
have a look at this:
http://www.mrandmrssmith.com/?CMP=%20KAC-OF9998476933
specifically the corner being rounded, and the drop shaddow.
2 questions, I realise I can achieve all this by creating an
image to put in back of a table or layer, but its heavy on the
download. is it possible to achive these functions simply using
css? I have dw8 2004mx so its a little out of date, so if its not
availabe as a function in that version I need to know where to go
looking for the xhtml to create it.
any ideas?
cheers

digi-mech wrote:
> Hi
>
> have a look at this:
>
http://www.mrandmrssmith.com/?CMP=%20KAC-OF9998476933
> specifically the corner being rounded, and the drop
shaddow.
>
> 2 questions, I realise I can achieve all this by
creating an image to put in
> back of a table or layer, but its heavy on the download.
is it possible to
> achive these functions simply using css? I have dw8
2004mx so its a little out
> of date, so if its not availabe as a function in that
version I need to know
> where to go looking for the xhtml to create it.
>
> any ideas?
Google for CSS Rounded Corners, there are loads of tricks and
techniques
you can use, most of them rely on images, but after one page
load the
images are now in the cache and each page will load much
quicker.
Steve

Mac :: Firefox :: CSS border issue

Can someone with Firefox on a Mac check this page and see if
you can tell
why in the "products" boxes ( there are 3 ) .. the bottom
border is missing
on only 2 of them. I believe the 3rd box down renders the
border. If I
delete a paragraph from the 1st box, the border shows on the
1st box and not
the other two .. weird.
http://65.115.104.39/html%5Fnewsletters/stevens/urban/
The css is fairly complex for the entire page but the
relevant code for this
product box looks like this.....
#pContent .adblock {
border: 1px dashed #777;
margin: 1em 10px;
background: #fff;
}There is more going on there but the .adblock style is this
container with
the dashed border. Seems to work fine in Safari, and IE and
FF on PC.
Regards,
..Trent Pastrana
www.fourlevel.com

oops, had an extra border in there.
#outerwrap #wrap #pContent hr {
position: relative;
height:0;
border-top:1px solid #777;
Regards,
..Trent Pastrana
www.fourlevel.com
"T.Pastrana - 4Level" <[email protected]> wrote in message
news:e99fee$7lu$[email protected]..
> No, it's actually not the hr causing the missing border.
It was doing
> that before the hr was there. The hr was causing the
redraw problem
> though. Firefox also doesn't render height on hrs very
well. The way
> around both of these problems was to set the height of
the hr to 0px and
> give it a top border.
>
>
> #outerwrap #wrap #pContent hr {
> position: relative;
> height:0;
> border:0;
> border-top:1px solid #777;
> }
>
>
> --
> Regards,
> ..Trent Pastrana
> www.fourlevel.com
>
>
>
>
>
> "Osgood" <[email protected]> wrote in
message
> news:e98c42$oog$[email protected]..
>> Osgood wrote:
>>
>>> T.Pastrana - 4Level wrote:
>>>
>>>> Really? ok thanks for checking...
>>>>
>>>>
>>> Yeah...but now I check in the latest version of
Firefox they don't
>>> appear. Have you got any empty clearing
<divs> in the code.
>>>
>>> If so put a in and see it that helps.
I seem to remember that the
>>> latest version of Firefox reacts differently to
empty <div></div> on
>>> Mac.
>>
>> This is what is causing those bottom dashed lines to
not appear in Mac
>> Firefox.
>>
>> <hr width="90%" size="1">
>>
>
>

CSS rounded corner problem

Another question regarding my site which I'm working on.
I have used a tutorial on a css corners website and put the code on the tutorial on my site to test it out.
The url is http://www.lindendesign.co.uk/test/templates/header2.html
In the bit under my navigation menu, there is block with the rounded corners, which appears correctly.
I have added the exact same code further down, but in the content div, but it appears incorrect.
Does anyone know why this is happening?
Also, if anyone could help with the gap between web hosting header (with the green background), and the bit below it (with the borders on the side), that would be great too.
I've tried everything and I'm really struggling so would really appreciate any help.

Just to clarify, CSS won't round off the corners on images. CSS will produce rounded borders around the images.
CSS:
img {
float: left;
margin: 45px;
border: 2px solid #999;
padding: 25px;
background: #FFF;
/**ROUNDED BORDERS FOR MOZILLA,
WEBKIT, LINUX, IE9, OPERA**/
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
-khtml-border-radius: 16px;
-ms-border-radius: 16px;
border-radius: 16px;
HTML:
<img src="some-image.jpg" width="100" height="100" />
<img src="some-image.jpg" width="100" height="100" />
<img src="some-image.jpg" width="100" height="100" />
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Css shows this issue

padding does not apply because it's not inherited, and it is
applied to an enclosing tag.

Padding applied to an enclosing tag will affect the enclosing
tag's
available interior space (and effective width/height), but
will NOT inherit
into a descendent tag. In other words -
<p style="padding:10px;border:1px solid red;">Test
words</p>
There will be 10px of padding top/right/bottom/left within
this <p> tag, as
you will see from the red border.
But -
<div style="padding:10px;"><p style="border:1px
solid red;">Test words</p>
there will be no padding within the <p> tag here.
This is not an issue. It's normal CSS behavior.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Melchior912" <[email protected]> wrote in
message
news:goe5gi$87o$[email protected]..
> padding does not apply because it's not inherited, and
it is applied to an
> enclosing tag.

(CSS) Rounded corner divs with shadows...

Hi,
It appears that with IE9, it's now safe to use CSS-generated rounded corner divs.
What about rounded corner divs with shadows?
Is this now do-able? (and by do-able, I mean viewable in IE9 and FF4)
Thanks!

Most modern browsers support CSS Border-Radius. However, you will need some webkit and mozilla specific rules for Firefox 3, Safari/Chrome.
BORDER-RADIUS
#Your-Div-Name{
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
/**NOTICE THE SYNTAX DIFFERENCES FOR MOZILLA**/
#Complex-Borders {
background: #FFF;
color: #000;
border: 9px solid red;
/**MOZILLA**/
-moz-border-radius-topright: 55px;
-moz-border-radius-bottomright:8px;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 22px;
/**WEBKIT**/
-webkit-border-top-right-radius: 55px;
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius:0;
-webkit-border-top-left-radius:22px;
/**OPERA, OTHERS**/
border-top-right-radius: 55px;
border-bottom-right-radius: 8px;
border-bottom-left-radius:0;
border-top-left-radius:22px;
BOX-SHADOWS:
#Your-Div-Name {
-moz-box-shadow: 5px 5px 5px #000;
-webkit-box-shadow: 5px 5px 5px #000;
box-shadow: 5px 5px 5px #000;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Rounding off Issue (Net Value not equal to Net Price * quantity)

Dear Gurus,
Here is an interesting issue.The default calculation done in the pricing procedure is two decimal places.Now we consider a real scneario,consider the net value of 324 quantities of an item calculated is 36,049.86 .When it is divided by quantity the resulting value of net price is 111.265 but the system shows 111.27 by rounding it off.
Now here comes the problem,my client needs the rate to be shown on the order script to be two decimal places and the net value should be equal quantity * net price.So if we apply this,
324 * 111.27 = 36051.48
But the net value calculated by the system is 36,049.86.So it can be consluded that:
"Quantity * Net Price Shown is not Equal to Net Value calculated by the System"
Need an urgent resolution,project is stuck on this
Regards,
Sam Ahmed
Edited by: Lakshmipathi on Nov 3, 2011 12:14 PM
Please dont add URGENT in subject or in your post

Here is the pricing procedure,
We start with the amount condition types
                                        Unit Price        Units Condition Value
ZMRP     MRP                     1,700.00           10     PAC     55,080.00
ZTRP     Trade Price     1,445.00           10     PAC     46,818.00
ZDPR     Dist. Price     1,445.00           10     PAC     46,818.00         (GL)
Using Trade Price we apply the product discount of 23%
ZPRD     Product Discount     23.000-     %                    10,768.14-
Then we send discount amount to the gl by using condition type ZDIS
ZDIS      Discount Value     100.000-     %           10,768.14-      (GL)
tHE RESULTING NET VALUE IS 36,049.86      as 46818.00 - 10,768.14
     Order Item value     111.27      1     PAC     36,049.86
And the Net Price is 111.27

Re:Total(LC) Rounding off issue in Sale Order document ..!!!

Dear SAP Members,
My end user facing a issue while entering the sale order.The scenario is,For a item say 'X',its quantity is 24,unit price is 41.15,discount is 8%,then the total amount (ie)Total (LC) should be 908.59, but the system shows as 908.64.Why I'm getting this issue.
I have given Rounding Method by currency.
Display settings as:
Amount-2
Price-2
Rates-4
Quantities-2
Percent-6
Units-2
Currency settings:
Rounding Method-Round to one.
Decimals-Default
I have tried all possibilities in test database but still I'm facing the same issue..
Please give me solution to solve this issue.
With Regards,
Revathy

The software's logic is as follows it calculates the unit price after discount then times that rounded amount to the quantity. That is also why there is net unit price on the row level if you look in the DB. You could do a manual adjustment on the total but that will play abound with the discount a bit. Business one logic is very relational and because of the cascading of header tables and row level tables the calculations are not intuitive to most users. But on the upside you are guarantee consistent rounding by the software across the board.

Css text alignment issue

Hey guys,
I re-did a small site for an author and some of the text very misaligned in IE. You can see on the homepage as well on each individual book page. http://lifesizemacroimages.com/.
I am able to fix the problem in IE but then it just misaligns in FF etc..
Hopeing a fresh set of eyes might notice the problem. My css is below. Thanks
html, body {
    margin: 0;
    padding: 0;
#page-container {
    width: 750px;
    margin:auto;
    margin-top:10px;
    margin-bottom:20px;
    border-top:#fff 1px solid;
    border-left:#fff 1px solid;
    border-right:#fff 1px solid;
    border-bottom:#fff 1px solid;
#header {
    background:url(../images/banner.jpg);
    height: 200px;
    clear:both;
#content {
    width:720px;
    height:550px;
    background-color:#eafcd0;
    /*background-image:url(../images/spider-bg.png);*/
    border-right:#64aa51 15px solid;
    border-left:#64aa51 15px solid;
    border-bottom:#64aa51 15px solid;
#title {
    width:722px;
    height:50px;
    background-image:url(../images/title.png);
#nav {
    height:12px;
    width:280px;
    position:absolute;
    margin-top:9px;
    margin-left:275px;
#footer{
    width:650px;
    position:absolute;
    color:#FFF;
    font-size:8pt;
    margin-top:500px;
    margin-left:50px;
#footer a:link {
    color:#FFF;
    font-size:8pt;
    text-decoration:none;
#footer a:visited {
    color:#FFF;
    font-size:8pt;
    text-decoration:none;
#footer a:active {
    color:#FFF;
    font-size:8pt;
    text-decoration:none;
#footer a:hover {
    color:#000;
    font-size:8pt;
.maintext {
    font:Arial, Helvetica, sans-serif;
    font-size:11pt;
    color:#000000;
.maintext a:link {
    font:Arial, Helvetica, sans-serif;
    font-size:11pt;
    color:#000000;
    text-decoration:underline;
.maintext a:visited{
    font:Arial, Helvetica, sans-serif;
    font-size:11pt;
    color:#000000;
    text-decoration:underline;
.maintext a:active {
    font:Arial, Helvetica, sans-serif;
    font-size:11pt;
    color:#000000;
    text-decoration:underline;
.maintext a:hover {
    font:Arial, Helvetica, sans-serif;
    font-size:11pt;
    color:#000000;
    text-decoration:none;
#emailhover a:link {
    color:#000000;
    font-size:11pt;
    text-decoration:none;
#emailhover a:visited {
    color:#000000;
    font-size:11pt;
    text-decoration:none;
#emailhover a:active {
    color:#000000;
    font-size:11pt;
    text-decoration:none;
#emailhover a:hover {
    color:#000000;
    font-size:11pt;
    text-decoration:underline;
/* ---------- Individual Page Div's ---------- */
#homediv {
    width:500px;
    margin-top:30px;
    margin-left:30px;
    position:absolute;
#hometext {
    width:350px;
    margin-top:15px;
    margin-left:230px;
    position:absolute;
#Book1div {
    width:180px;
    height:250px;
    position:absolute;
    margin-top:35px;
    margin-left:25px;
#Book1Text {
    width:170px;
    position:absolute;
    margin-top:65px;
    margin-left:195px;
#Book2div {
    width:180px;
    height:250px;
    position:absolute;
    margin-top:35px;
    margin-left:370px;
#Book2Text {
    width:170px;
    position:absolute;
    margin-top:65px;
    margin-left:540px;
#Book3div {
    width:180px;
    height:250px;
    position:absolute;
    margin-top:255px;
    margin-left:25px;
#Book3Text {
    width:170px;
    position:absolute;
    margin-top:285px;
    margin-left:195px;
#Book4div {
    width:180px;
    height:250px;
    position:absolute;
    margin-top:255px;
    margin-left:370px;
#Book4Text {
    width:170px;
    position:absolute;
    margin-top:290px;
    margin-left:540px;
#Author {
    width:500px;
    position:absolute;
    margin-top:60px;
    margin-left:100px;
#upcoming {
    width:500px;
    position:absolute;
    margin-top:60px;
    margin-left:100px;
.booktext {
    font-size:9pt;
    color:#000000;
    font-family:Arial, Helvetica, sans-serif;
.booktext a:link {
    font-size:9pt;
    color:#000000;
    font-family:Arial, Helvetica, sans-serif;
    text-decoration:underline;
.booktext a:visited {
    font-size:9pt;
    color:#000000;
    font-family:Arial, Helvetica, sans-serif;
    text-decoration:underline;
.booktext a:active {
    font-size:9pt;
    color:#000000;
    font-family:Arial, Helvetica, sans-serif;
    text-decoration:underline;
.booktext a:hover {
    font-size:9pt;
    color:#000000;
    font-family:Arial, Helvetica, sans-serif;
    text-decoration:none;
.back a:link{
    font:Arial, Helvetica, sans-serif;
    font-size:9pt;
    color:#000000;
    text-decoration:none;
.back a:visited{
    font:Arial, Helvetica, sans-serif;
    font-size:9pt;
    color:#000000;
    text-decoration:none;
.back a:active{
    font:Arial, Helvetica, sans-serif;
    font-size:9pt;
    color:#000000;
    text-decoration:none;
.back a:hover{
    font:Arial, Helvetica, sans-serif;
    font-size:9pt;
    color:#000000;
    text-decoration:underline;
#butterflydiv {
    width:500px;
    margin-top:15px;
    margin-left:15px;
    position:absolute;
#butterflytext {
    width:500px;
    margin-top:0px;
    margin-left:170px;
    position:absolute;
#availablediv {
    width:100px;
    position:absolute;
    margin-top:210px;
    margin-left:15px;
    float:left;

Trouble-man, you should know better than to use APDivs by now
http://apptools.com/examples/pagelayout101.php
Use margins and floats -
http://alt-web.com/DEMOS/CSS2-Captions-on-floated-images.shtml
Also, check your code.
HTML Validator - http://validator.w3.org
CSS Validator - http://jigsaw.w3.org/css-validator/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb

Css auto center issue

http://www.pmcgvideoportfolio.info/test.htm
I have been following a tutorial from Adobe relating to "Working with Background Images and CSS - Part 3 Altering the Appearance of Your pages with Drop Shadows." I think I have stayed pretty close to the instructions until the last page where I wasn't sure if I was in the right place.
Basically, I've had this site up and running for a while, but I've been cheating by using a single image and linking everything to it. Now I'm trying to get caught up and learn the CSS. I have found that I'm more successful if I do small bits at a time, thus if you go into code you will see that I've done some very simple slicing (for now). What I'm trying to do is get the base to automatically center in the browser, but no matter what I do it still wants to center in the middle of the page rather than automatically center in the browser.
So, if someone would be so kind, what am I doing wrong here? Or can you direct me to a good tutorial?
I've not set up any links on this page - it is a test page...
Hans and Nancy - it took me awhile to get to it, but I finally got this on the net for you.
Thanks in advance,
Ron
This is the CSS:
body {
    background-color: #ffffff;
    margin:0px;
    padding:0px;
.p {
    margin:0px;
    padding:0px;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    text-align: inherit;
    color: inherit;
    line-height: inherit;
    vertical-align: top;
p {
    padding-top:0px;
    margin-top:0px;
img {
    border:0px;
div {
    margin:0px;
    padding:0px;
    font-family:verdana; font-size:12px;
.AbsWrap {
    width: 100%;
    position: relative;
.rowWrap {
    width: 100%;
.clearfloat {
    clear:both;
    height:0px;
a:link, a:visited{
    COLOR:inherit;
    text-decoration:inherit;
#background {
    background-color: #660000;
    width:1500px;
    padding-top:0px;
    height:1071px;
    position: absolute;
    left:0px;
    top:0px;
    margin-bottom:0px;
#Div {
    width:332px;
    padding-top:0px;
    height:203px;
    position: absolute;
    left:814px;
    top:181px;
    margin-bottom:0px;
#body_bg {
    position: absolute;
    left:0px;
    top:0px;
    width:50px;
    height:50px;
    margin-bottom:0px;
    background-image: url(body_bg.gif);
    overflow:hidden;
#wrapper_bg {
    position: absolute;
    left:406px;
    top:0px;
    width:661px;
    height:716px;
    margin-bottom:0px;

Please don't use Absolute positioning. It is not a good primary layout method.
Instead, use default CSS positioning (which is no positioning).
To center a web page you need 3 things:
1) a valid document type -- DW does this for you when you create a new HTML page,
2) a container width in pixels, percentages or ems,
3) margin-left and margin-right of auto (browser default).
CSS:
#wrapper {
width: 900px; /**adjust as req'd**/
margin:0 auto; /**centers on screen**/
text-align: center; /**for older browsers**/
HTML:
<body>
     <div id="wrapper">
           all your page content goes inside this wrapper division.
     </div>
</body>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

CSS rounded border issue

Similar Messages

Maybe you are looking for