CSS padding in IE

Hi ,
I have a simple div with this css:
width: 600px;
padding: 25px;
In Firefox the div is the correct size 650px total width.
But in IE , the padding is being applied but the total width is still 600px.
IE did not include the padding in the total width. Very confusing.
I tested in IE7 and IE8.

Review the CSS Box Model and note the IE bugs described below.
IE Bugs ~
http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/
Conditional Comments for IE ~
http://www.quirksmode.org/css/condcom.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

How can I get Firefox 4 to correctly display CSS padding for a horizontal nav bar (works in most other browsers, incl. earlier FF)?

I have just coded a horizontal nav bar for a site with CSS rollover effects using a:hover and a: focus effects. There are no images, just HTML and CSS. The layout works beautifully in IE 6 - 8, Safari for Windows, Opera for Windows...and Firefox 3.X but behaves poorly in Firefox 4. I've hardly ever had problems with FF before. :(
Here's the menu: http://sddlr01.hottubretailer.com/TestNav2.html
The rollovers extend below the height of the background div and the extra padding on the first and last li tag don't display correctly either. The page passes WebDeveloper toolbar CSS and HTML validation as well.
This is making me batty! Any help deeply appreciated!
Thanks.
All CSS code is in the page for debugging purposes.

I do not understand what you mean with "the rollover will extend the full width of the background"
A good place to ask questions and advice about web development is at the mozillaZine Web Development/Standards Evangelism forum.<br />
The helpers at that forum are more knowledgeable about web development issues.<br />
You need to register at the mozillaZine forum site in order to post at that forum.<br />
See http://forums.mozillazine.org/viewforum.php?f=25

CSS padding problems

Hi
I am building a site for a client that has had the page
designed by a graphic designer and she is being EXCEPTIONALLY picky
about the font size, spacing and many other things. The problem I
have is, that on some browsers, the space between the text and the
border at the top of the container, is double what it is in IE6 and
IE7. Can anyone tell me how I can fix this so that it has the same
amount of spacing in all browsers.
Many thanks
Julie
CSS code:
/* CSS Document */
/*formatting divs*/
body a p td th div blockquote ul ol dl{
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color:#999999;
margin: 0;
body { margin: 0px; padding: 0px; background:#262425}
h1 {font-family: Arial, Helvetica, sans-serif;
font-size:36px}
a:link {
text-decoration:underline;
color: #000000;
a:visited {color:#666666; text-decoration:underline;}
a:hover {color:#ff9c04; text-decoration:underline;}
/*layout divs*/
#wrapper {width: 820px; position:relative; margin:0 auto;
top:15%}
#header {clear:both; height:50px; width:820px}
#leftcol {
width: 108px;
float:left;
padding-right:12px;
text-align: right;
#container {margin:0; padding:0; float:right; width:695px}
#content {background-color:#FFFFFF; width: 328px; padding: 0
10px 0 10px; height: 500px; float:left; color: #666666; font-size:
14px; overflow: hidden;}
#rightcol {width: 347px; float:right}
#footer {clear: both}
#text {padding: 0 10px 10px 0; height: 370px; overflow:auto}
/*menu*/
#leftcol ul {}
#leftcol li {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
list-style:none;
.logo {
margin-right: 0px;
margin-left: 0px;
padding: 23px 0px 12px 0;}
/*design elements*/
.scroll {
scrollbar-face-color: #ffffff;
scrollbar-shadow-color: #C2A2DA;
scrollbar-highlight-color: #C2A2DA ;
scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-track-color:#FFFFFF;
scrollbar-arrow-color:#C2A2DA}

Designing for the web is NOT the same as designing for print.
Graphic
designers do not understand that there are too many variables
you can't
control such as screen size, browsers, and the default text
size used by
visitors. Firefox, Opera & Safari will render pages
differently than IE. In
some cases, you can use IE hacks or CSS tricks to get it
closer to what you
want. Or you could make one big graphic or image map but I do
not recommend
this as it will impact your site's search engine rankings
& user
accessibility.
--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
"ukjooles" <[email protected]> wrote in
message
news:[email protected]...
> Hi
>
> I am building a site for a client that has had the page
designed by a
graphic
> designer and she is being EXCEPTIONALLY picky about the
font size, spacing
and
> many other things. The problem I have is, that on some
browsers, the
space
> between the text and the border at the top of the
container, is double
what it
> is in IE6 and IE7. Can anyone tell me how I can fix this
so that it has
the
> same amount of spacing in all browsers.
>
> Many thanks
> Julie
>
> CSS code:
>
> /* CSS Document */
>
>
> /*formatting divs*/
>
> body a p td th div blockquote ul ol dl{
> font-family: "Times New Roman", Times, serif;
> font-size: 14px;
> color:#999999;
> margin: 0;
> }
>
> body { margin: 0px; padding: 0px; background:#262425}
>
> h1 {font-family: Arial, Helvetica, sans-serif;
font-size:36px}
>
> a:link {
> text-decoration:underline;
> color: #000000;
> }
> a:visited {color:#666666; text-decoration:underline;}
>
> a:hover {color:#ff9c04; text-decoration:underline;}
>
>
> /*layout divs*/
>
> #wrapper {width: 820px; position:relative; margin:0
auto; top:15%}
>
> #header {clear:both; height:50px; width:820px}
>
> #leftcol {
> width: 108px;
> float:left;
> padding-right:12px;
> text-align: right;
> }
>
> #container {margin:0; padding:0; float:right;
width:695px}
>
> #content {background-color:#FFFFFF; width: 328px;
padding: 0 10px 0 10px;
> height: 500px; float:left; color: #666666; font-size:
14px; overflow:
hidden;}
>
> #rightcol {width: 347px; float:right}
>
> #footer {clear: both}
>
> #text {padding: 0 10px 10px 0; height: 370px;
overflow:auto}
>
>
> /*menu*/
>
> #leftcol ul {}
> #leftcol li {
> font-family:Verdana, Arial, Helvetica, sans-serif;
> font-size: 11px;
> color: #FFFFFF;
> list-style:none;
> }
>
> .logo {
> margin-right: 0px;
> margin-left: 0px;
> padding: 23px 0px 12px 0;}
>
>
> /*design elements*/
>
> .scroll {
> scrollbar-face-color: #ffffff;
> scrollbar-shadow-color: #C2A2DA;
> scrollbar-highlight-color: #C2A2DA ;
> scrollbar-3dlight-color: #ffffff;
> scrollbar-darkshadow-color:#ffffff;
> scrollbar-track-color:#FFFFFF;
> scrollbar-arrow-color:#C2A2DA}
>
>

- What am I doing wrong? (CSS padding works in FF, not IE)

Can anyone tell me why the padding in...
.stoneCap {
border-right-width: 1px;
border-bottom-width: 2px;
border-left-width: 3px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #8c7c6f;
border-bottom-color: #22170D;
border-left-color: #2E2012;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #998A7D;
background-position: left top;
padding: 15px;
...works in FF but not in IE, when applied to a table?
(IE ignores it... so does the Dreamweaver design view.)
How do I set padding for all tables through this class? What
am I doing
wrong? :-(

Your interpretation of tables is incorrect. When you set the
padding value
in the table tag, you are telling the HTML to pad the cells.
The table tag
itself has no padding.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"R. Jay" <[email protected]> wrote in message
news:[email protected]...
> Interesting. But that's weird, no? I mean, why do we, in
normal HTML, set
> padding on table tags and not td's? Clearly, it's the
table that receives
> the instructions for padding, spacing and border... no?
Why won't CSS
> conform to that?
>
>
> "Murray *ACE*" <[email protected]>
wrote in message
> news:[email protected]...
>>A table doesn't have padding. A td does. If you need
the padding on the
>>td, then make your rule selector -
>>
>> .stoneCap td { }
>>
>> --
>> Murray --- ICQ 71997575
>> Adobe Community Expert
>> (If you *MUST* email me, don't LAUGH when you do
so!)
>> ==================
>>
http://www.dreamweavermx-templates.com
- Template Triage!
>>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>>
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
>> ==================
>>
>>
>> "Reese" <[email protected]> wrote in message
>> news:[email protected]...
>>> On the table tag (not tr or td).
>>>
>>> Try it, you should have the same results (in
theory)
>>>
>>> "Murray *ACE*"
<[email protected]> wrote in message
>>> news:[email protected]...
>>>> Where have you applied .stoneCap?
>>>>
>>>> --
>>>> Murray --- ICQ 71997575
>>>> Adobe Community Expert
>>>> (If you *MUST* email me, don't LAUGH when
you do so!)
>>>> ==================
>>>>
http://www.dreamweavermx-templates.com
- Template Triage!
>>>>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>>>>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>>>>
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
>>>> ==================
>>>>
>>>>
>>>> "Reese" <[email protected]> wrote in message
>>>> news:[email protected]...
>>>>> Can anyone tell me why the padding in...
>>>>>
>>>>> .stoneCap {
>>>>> border-right-width: 1px;
>>>>> border-bottom-width: 2px;
>>>>> border-left-width: 3px;
>>>>> border-right-style: solid;
>>>>> border-bottom-style: solid;
>>>>> border-left-style: solid;
>>>>> border-right-color: #8c7c6f;
>>>>> border-bottom-color: #22170D;
>>>>> border-left-color: #2E2012;
>>>>> border-top-width: 1px;
>>>>> border-top-style: solid;
>>>>> border-top-color: #998A7D;
>>>>> background-position: left top;
>>>>> padding: 15px;
>>>>> }
>>>>>
>>>>> ...works in FF but not in IE, when
applied to a table?
>>>>>
>>>>> (IE ignores it... so does the
Dreamweaver design view.)
>>>>>
>>>>> How do I set padding for all tables
through this class? What am I
>>>>> doing wrong? :-(
>>>>>
>>>>
>>>>
>>>
>>>
>>
>>
>
>

Resizing image using CSS - not working in IE

Hello,
I have a standard report with couple of columns one of which a image column. The images are of varying sizes and I manged to resize them to a fixed width & height by using CSS code in page header as below:
td[headers="ITEM_PICTURE"] img {
display: block;
width: 70px;
border: 1px solid #999;
padding: 4px;
background: #f6f6f6;
}The CSS does the trick in Chrome & Firefox but does not work in internet explorer. Is there a way to make this CSS code IE friendly?
Cheers for help.

William Wallace wrote:
I am using Apex 4.2.1 (had this issue in 4.1.1 as well) and using theme 10.Ah, the Sludge Sand theme. In 4.x that's a legacy theme only really included to allow applications to run on IE6. It's therefore intended to run in quirks mode, meaning in Internet Explorer terms there's no support for anything that didn't work in IE6 (for certain values of "work"). This means no CSS3, no support for a lot of useful CSS2.1 stuff (like attribute selectors), and probably problems with jQuery which requires standards mode. Adding a DOCTYPE to the page templates to trigger standards mode Interactive Report: how can I display carriage returns?. In 4.2 you really should switch to one of the latest Standard themes, or at least one of the standards mode Legacy themes (those not marked with a "*").
If you must use theme 10, and there are no other images in this report (like edit icons) then you could add a static ID to the region and use a more basic selector like:
#static-id td.t10data img {
display: block;
width: 70px;
border: 1px solid #999;
padding: 4px;
background: #f6f6f6;
}However, it appears that one of IE's quirkier quirks mode quirks is that CSS padding is not supported on images, so the presentation you want is not possible using theme 10 in IE and CSS alone.
Switching to a modern theme is recommended.
Edited by: fac586 on 02-Mar-2013 10:31

How to add layout constraints in CSS?

Is there a way to specify layout constraints in CSS? For example how can I specify that the first column in a GridPane should be aligned right? This can be done programmatically by adding a column constraint to a GridPane, like here:
GridPane gridpane = new GridPane();
ColumnConstraints column = new ColumnConstraints();
column.setHalignment(HPos.RIGHT);
gridpane.getColumnConstraints().add(column);

As far as I understand it this is not supported in CSS. In general size and layout is not included in JFX CSS by design:
JavaFX CSS does not support CSS layout properties such as float, position, overflow, and width. However, the CSS padding and margins properties are supported on some JavaFX scene graph objects. All other aspects of layout are handled programmatically in JavaFX code.
This is from: http://download.oracle.com/javafx/2.0/api/javafx/scene/doc-files/cssref.html
This is a bit limiting at times as they are often heavily related. I imagine it was a decision around separation of concerns - I'm not sure yet whether this is a good idea or not.
[url http://download.oracle.com/javafx/2.0/api/javafx/fxml/doc-files/introduction_to_fxml.html]FXML is worth a look at for making layouts as scripts, that non-Java programmers can work with. It doesn't solve the 'style' issue but might go some way to help you.
Cheers,
zonski
Did you find this answer useful? If so, please mark as 'Correct' or 'Helpful'.

Setting width/height of a control with CSS

Hi,
I am styling a button a button in CSS and set a background-image for the button in my stylesheet.
The problem is, that the button should scale to the width/height of the image.
I added:
-fx-width: 32px;
-fx-height: 32px;
but it has no effect.
I also tried it with
-fx-min-width: 32px;
-fx-min-height: 32px;
If I use setMinWidth(32); in Java, it works.
But I rather want to set it in my stylesheets, because the image can change, if we use another skin.

CSS documentation (http://docs.oracle.com/javafx/2.0/api/javafx/scene/doc-files/cssref.html) states:
"JavaFX CSS does not support CSS layout properties such as float, position, overflow, and width. However, the CSS padding and margins properties are supported on some JavaFX scene graph objects. All other aspects of layout are handled programmatically in JavaFX code."
I thought you might be able to do something using the -fx-shape property, but the shape does not affect the size of the button - so that didn't work.
I had more luck with the -fx-graphic property - you could try to enhance the stylesheet below to get what you want.
.root   { -fx-background-color: azure; -fx-padding: 20; }
#smurf-button { -fx-graphic: url("http://bluebuddies.com/smurf_fun/smurf_race/jpg/Smurf_Race_100x100.jpg"); -fx-background-color: transparent; }
#smurf-button:hover { -fx-effect: dropshadow( three-pass-box , rgba(184,134,11,0.6) , 20, 0.0 , 0 , 0 ); }
#smurf-button:armed { -fx-effect: innershadow( three-pass-box , rgba(0,200,0,0.6) , 30, 0.0 , 0 , 0 ); }
public class ButtonStyle extends Application {
public static void main(String[] args) throws Exception { launch(args); }
public void start(final Stage stage) throws Exception {
    final Button button = new Button();
    button.setId("smurf-button");
    final Scene scene = new Scene(StackPaneBuilder.create().children(button).build());
    scene.getStylesheets().add(this.getClass().getResource("style.css").toExternalForm());
    stage.setScene(scene);
    stage.show();
}

Unordered List css

regarding list css - padding and margin.
I having trouble with lists that are next to <img src=
the list won't push over with the img padding.
If I double up the ul tag it moves over but then longer li lines don't indent inside the bullet.
example:
<ul><ul>
        <li>with others in the room</li>
        <li>TV volume remains independently</li>
        <li>Custom fidelity and clarity</li>
      </ul></ul>
here is current css:
.bar ul, .bar ol,
    .content ul, .content ol{
    list-style-position: inside;
    list-style: url(/images/ui_bullet.png);
    margin: 0px 0px 20px 30px;
    .bar ul ul, .bar ol ol,
    .content ul ul, .content ol ol{
        list-style-position:inside;
        padding:0 10px;
        margin:0px 0px 0px 0px;
    .bar ul ul li, .bar ol ol li,
    .content ul ul li, .content ol ol li{
        list-style-position:inside;
        padding:0px 10px 0px 10px;
        margin:5px 0px 5px 0px;
what do you think?
Thanks

If you're using Lists with floats, adjust your margin-left to offset the float.
See example below:
http://alt-web.com/DEMOS/CSS2-Captions-on-floated-images.shtml
Nancy O.

Css to style text input does not work

Hi,
I have a very simple form which contains one text field.
<form method="POST" action="">
<table width="100px" style="margin-left:auto;margin-right:auto" border=1>
      <tr>
            <td class="label">username</label></td>
      </tr>
       <tr>
            <td><input style="width:50px" type="text" name="username" /></td>
        </tr>
    </table>
</form>
In the real code of course I have a proper style sheet instead of embedding 'style' in the input, but doesn't matter how I tried, the text field sticks to '161px'. I searched for text '161px' in all css files only found it under emulator.css padding, which is of course not used in my case.
I tried in a plain html and the above code works. I know that this input style is defined somewhere in the hirachy which I was not able to override, any idea how to overide CQ's input style?
Thanks!

In CQ you just need to include form component and inside the form add text component. When you double click text component it will provide you with the option to add styling and specify width. Which takes precendence. Not sure why you building the entire html page.

CSS and Background Images

I am trying to create a page using CSS. I have a background
image that tiles like I want it to. Here is the CSS:
padding: 0;
Margin: 0;
background-image: url(images/background.jpg);
background-repeat: repeat-y;
background-position:center;
I want some of my various other divs to lay on top of this
background but have a different background color that overlays the
page background image. Instead of taking the background color I
specify, the main page background above shows through. For example
below, the dark brown background doesn't show:
#nav {
margin-left: 4px;
width: 802px;
height: 26px;
background-color:#211400;
Thanks in advance for helping.

This is what I did for mine:
background-image: url("../images/background.gif");
Erin
"Mike Dockray" <[email protected]> wrote:
>
Can u put floating background images in the CSS.
eg. background: #fff url(images/backgrd.jpg) bottom right no-repeat fixed;
if so what is the context, find the color but not the image, url is relative
to
what ????
(yes , i'm a newbie, first day on the case :)

DataGrid row padding?

Trying to use a DataGrid to display two columns of data.
However, there is a lot of space between the rows making this
rather unattractive. Any thoughts or ideas?
<mx:DataGrid x="10" y="10" borderStyle="none"
sortableColumns="false" selectable="false" showHeaders="false"
fontSize="12" color="#000000" fontWeight="normal" width="392"
height="207">
<mx:dataProvider>
<mx:Object Label="Manufacturer" Value="General
Mills"/>
<mx:Object Label="Category" Value="Cereal breakfast
foods"/>
<mx:Object Label="Description" Value="Toasted whole grain
oat cereal with kid-friendly ring shape"/> 
<mx:Object Label="Quantity" Value="425 g Box"/>
</mx:dataProvider>
<mx:columns>
<mx:DataGridColumn dataField="Label" headerText=""
textAlign="left" width="115"/>
<mx:DataGridColumn dataField="Value" headerText=""
textAlign="left" wordWrap="true"/>
</mx:columns>
</mx:DataGrid>

"Phrankie" <[email protected]> wrote in
message
news:go4tgo$jra$[email protected]..
>
quote:
Originally posted by:
ntsiii
> Did you look for that word ("padding") in the DataGrid
docs? Combine that
> with rowHeight, and I think you will be good to go.
>
> Tracy
>
> Nor have I found a way to lessen the distance between
the text baseline
> and
> the gridline directly below, but I sure would like to!
The datagrid rows
> are
> excessively tall in a number of my projects.
>
> Flex/CSS padding doesn't conform entirely to the normal
HTML/CSS since of
> the
> term. For instance, paddingBottom has a fixed lower
display limit, while
> paddingTop has no limitation.
>
> Additionally, some sort of inheritance causes my CSS
datagrid padding
> styles
> to affect the datagrid rows AND the header ... even when
I add a
> headerStyle
> with its own distinct padding values.
>
> This CSS works as expected, though originally I would
have expected that
> these
> padding values would not affect the header:
>
> DataGrid {
> paddingBottom: 10;
> paddingBottom: 10;
> headerStyleName: "mydataGridHeaderStyle";
> }
>
> /* However the follow declaration does NOT style the
datagrid?s header
> padding
> independently */
>
> .mydataGridHeaderStyle {
> paddingBottom:2; /*no effect */
> }
>
> Given the following declarations the heading responds as
expected ... but
> the
> datagrid rows only honor paddingTop.
>
> DataGrid {
> paddingTop: -4;
> paddingBottom: -5;
> }
>
> Perhaps the datagrid row refuse to honor negative
values, whereas the
> header
> complies.
>
> A little perplexed here.
>
> Suggestions?
That might be another manifestation of this:
http://flexdiary.blogspot.com/2008/06/using-css-typeselector-with.html
HTH;
Amy

Vertical margin/padding inconsistency with IE

I am trying to align 2 vertical spry menu's over a background image which is split up into segments. The segmented image is in the centre of a sidebar div tag so i used CSS padding-left and padding-top to align the first menu to the centre and down a notch which worked perfect and was consistent in all browsers. Now im trying to align a second spry menu underneath the first menu. Logically I figured id place it underneath the first spry menu then use padding-top or margin-top to create the gap beween the menu's. This works perfectly in design view and all browsers except from IE which seems to render the gap between the two menu's about a third of the size. I dont really fully understand why IE is recognising the div padding to centre the menu's precisely but wont recognise the vertical padding/margin between the two menu's correctly. Im using absolute units (px) for all padding/margin. Has anyone got any suggestions? I once read about something called vertical margin collapse.....is that what this is or is that something completely different?

Hi Quirky,
For best results in these forums, please post a URL to your live page. All the description in the world doesn't "show" us your problem or the underlying CSS & HTML code.
Inasmuch as 90% of browser problems are caused by malformed code, use the links below to validate your code first and fix any reported errors. If everything looks good codwise, we can rule out errors and just focus on IE quirks.
HTML Validator - http://validator.w3.org
CSS Validator - http://jigsaw.w3.org/css-validator/
HTML & CSS Tutorials - http://w3schools.com/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Printing w/ Scale Width & Height Setting?

With CS4 and CS5.
When I put in a percentage in the Height Box and then Print the InDesign document, InDesign remembers the percentage. But when I put a percentage in the Width Box InDesign does not remember the number, ie, if I put in 98.52% it reverts to 98% in the Width Box. The Height remembers all digits.
Thanks for any one's help

CSS documentation (http://docs.oracle.com/javafx/2.0/api/javafx/scene/doc-files/cssref.html) states:
"JavaFX CSS does not support CSS layout properties such as float, position, overflow, and width. However, the CSS padding and margins properties are supported on some JavaFX scene graph objects. All other aspects of layout are handled programmatically in JavaFX code."
I thought you might be able to do something using the -fx-shape property, but the shape does not affect the size of the button - so that didn't work.
I had more luck with the -fx-graphic property - you could try to enhance the stylesheet below to get what you want.
.root   { -fx-background-color: azure; -fx-padding: 20; }
#smurf-button { -fx-graphic: url("http://bluebuddies.com/smurf_fun/smurf_race/jpg/Smurf_Race_100x100.jpg"); -fx-background-color: transparent; }
#smurf-button:hover { -fx-effect: dropshadow( three-pass-box , rgba(184,134,11,0.6) , 20, 0.0 , 0 , 0 ); }
#smurf-button:armed { -fx-effect: innershadow( three-pass-box , rgba(0,200,0,0.6) , 30, 0.0 , 0 , 0 ); }
public class ButtonStyle extends Application {
public static void main(String[] args) throws Exception { launch(args); }
public void start(final Stage stage) throws Exception {
    final Button button = new Button();
    button.setId("smurf-button");
    final Scene scene = new Scene(StackPaneBuilder.create().children(button).build());
    scene.getStylesheets().add(this.getClass().getResource("style.css").toExternalForm());
    stage.setScene(scene);
    stage.show();
}

Spry tabbed panels as menu system

Hi,
This is actually for Dreamweaver CS6.    What I'm trying to do is use spry tabbed panels as horizontal my menu system.    I want to have basically the functionality of the adobe.com menu system where the drop downs are tabbed and the content box size varies depending on the tab and the content box moves it's position relative to the tab that's selected.     I did manage to get the mouseover working so the tab's change according to which tab the mouse passes over.
My current problems are these:
I managed to change the content panel box size so it's not the same width as the full panel tab group however I cannot get it to move relative to which tab is selected, it just stays fixed in one location.
The content tabs are pushing the body of my page down instead of showing up over top of it which is obvioulsy not very condusive for a menu system.
I would like the default to show none of the panels until someone mouseover's one of the tab's and for the panels to dissapear when the mouse is not in the menu system.
For something similar to the adobe.com menu system am i using the right feature (it looks like tabbed panels to me) or should I be using a different spry feature, I would like to have text and an image in the content box under each tab just for overall effect.
I'm quite inexperienced with CSS and Javascripting and have basically gotten this far with trial and error modifying the CSS settings but I'm unable to modify the javascript on my own.
Any help or suggestions would be greatly appreciated!!
Below is my tabbed panels css:
.TabbedPanels {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 1000px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
-webkit-transition: all;
-moz-transition: all;
-ms-transition: all;
-o-transition: all;
transition: all;
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
color: #FFF;
background-color: #000;
width: 1000px;
height: 25px;
.TabbedPanelsTab {
position: relative;
top: 0px;
float: left;
padding: 4px 21px;
margin: 0px 0px 0px 0px;
background-color: #000;
list-style: none;
border-left: solid 0px #000;
border-bottom: solid 0px #000;
border-top: solid 2px #000;
border-right: solid 0px #000;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
width: 1000;
height: 15px;
font-family: "Myriad Pro";
font-size: 1em;
font-weight: normal;
.TabbedPanelsTabHover {
background-color: #D31145;
-webkit-transition: all;
-moz-transition: all;
-ms-transition: all;
-o-transition: all;
transition: all;
.TabbedPanelsTabSelected {
background-color: #D31145;
border-bottom: 0px solid #D31145;
color: #FFFFFF;
.TabbedPanelsTab a {
color: black;
text-decoration: none;
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 2px #D31145;
border-bottom: solid 2px #D31145;
border-top: solid 2px #D31145;
border-right: solid 2px #D31145;
background-color: #FFFFFF;
visibility: visible;
width: 50%;
position: inherit;
height: auto;
/* This is the selector for the Content panel. The Content panel holds the
* content for a single tabbed panel. For our default style, this container
* provides some padding, so that the content is not pushed up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the Content container.
.TabbedPanelsContent {
overflow: hidden;
padding: 4px;
.TabbedPanelsContentVisible {
.VTabbedPanels {
overflow: hidden;
zoom: 1;
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
/* Styles for Printing */
@media print {
.TabbedPanels {
overflow: visible !important;
.TabbedPanelsContentGroup {
display: block !important;
overflow: visible !important;
height: auto !important;
.TabbedPanelsContent {
overflow: visible !important;
display: block !important;
clear:both !important;
.TabbedPanelsTab {
overflow: visible !important;
display: block !important;
clear:both !important;
THe Javascript for my tabbed panels are below:
// SpryTabbedPanels.js - version 0.7 - Spry Pre-Release 1.6.1
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//   * Redistributions of source code must retain the above copyright notice,
//     this list of conditions and the following disclaimer.
//   * Redistributions in binary form must reproduce the above copyright notice,
//     this list of conditions and the following disclaimer in the documentation
//     and/or other materials provided with the distribution.
//   * Neither the name of Adobe Systems Incorporated nor the names of its
//     contributors may be used to endorse or promote products derived from this
//     software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.TabbedPanels = function(element, opts)
this.element = this.getElement(element);
this.defaultTab = 0; // Show the first panel by default.
this.tabSelectedClass = "TabbedPanelsTabSelected";
this.tabHoverClass = "TabbedPanelsTabHover";
this.tabFocusedClass = "TabbedPanelsTabFocused";
this.panelVisibleClass = "TabbedPanelsContentVisible";
this.focusElement = null;
this.hasFocus = false;
this.currentTabIndex = 0;
this.enableKeyboardNavigation = true;
this.nextPanelKeyCode = Spry.Widget.TabbedPanels.KEY_RIGHT;
this.previousPanelKeyCode = Spry.Widget.TabbedPanels.KEY_LEFT;
Spry.Widget.TabbedPanels.setOptions(this, opts);
// If the defaultTab is expressed as a number/index, convert
// it to an element.
if (typeof (this.defaultTab) == "number")
if (this.defaultTab < 0)
   this.defaultTab = 0;
else
   var count = this.getTabbedPanelCount();
   if (this.defaultTab >= count)
    this.defaultTab = (count > 1) ? (count - 1) : 0;
this.defaultTab = this.getTabs()[this.defaultTab];
// The defaultTab property is supposed to be the tab element for the tab content
// to show by default. The caller is allowed to pass in the element itself or the
// element's id, so we need to convert the current value to an element if necessary.
if (this.defaultTab)
this.defaultTab = this.getElement(this.defaultTab);
this.attachBehaviors();
Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)
var children = [];
var child = element.firstChild;
while (child)
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
   children.push(child);
child = child.nextSibling;
return children;
Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
   continue;
obj[optionName] = optionsObj[optionName];
Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length)
   return children[0];
return null;
Spry.Widget.TabbedPanels.prototype.getTabs = function()
var tabs = [];
var tg = this.getTabGroup();
if (tg)
tabs = this.getElementChildren(tg);
return tabs;
Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length > 1)
   return children[1];
return null;
Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
var panels = [];
var pg = this.getContentPanelGroup();
if (pg)
panels = this.getElementChildren(pg);
return panels;
Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
ele = this.getElement(ele);
if (ele && arr && arr.length)
for (var i = 0; i < arr.length; i++)
   if (ele == arr[i])
    return i;
return -1;
Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
var i = this.getIndex(ele, this.getTabs());
if (i < 0)
i = this.getIndex(ele, this.getContentPanels());
return i;
Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
return this.currentTabIndex;
Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
return Math.min(this.getTabs().length, this.getContentPanels().length);
Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
   element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
   element.attachEvent("on" + eventType, handler);
catch (e) {}
Spry.Widget.TabbedPanels.prototype.cancelEvent = function(e)
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
return false;
Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
this.showPanel(tab);
return this.cancelEvent(e);
Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
this.addClassName(tab, this.tabHoverClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
this.removeClassName(tab, this.tabHoverClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
this.hasFocus = true;
this.addClassName(tab, this.tabFocusedClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
this.hasFocus = false;
this.removeClassName(tab, this.tabFocusedClass);
return false;
Spry.Widget.TabbedPanels.KEY_UP = 38;
Spry.Widget.TabbedPanels.KEY_DOWN = 40;
Spry.Widget.TabbedPanels.KEY_LEFT = 37;
Spry.Widget.TabbedPanels.KEY_RIGHT = 39;
Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
var key = e.keyCode;
if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
return true;
var tabs = this.getTabs();
for (var i =0; i < tabs.length; i++)
if (tabs[i] == tab)
   var el = false;
   if (key == this.previousPanelKeyCode && i > 0)
    el = tabs[i-1];
   else if (key == this.nextPanelKeyCode && i < tabs.length-1)
    el = tabs[i+1];
   if (el)
    this.showPanel(el);
    el.focus();
    break;
return this.cancelEvent(e);
Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
var stopTraversal = false;
if (root)
stopTraversal = func(root);
if (root.hasChildNodes())
   var child = root.firstChild;
   while (!stopTraversal && child)
    stopTraversal = this.preorderTraversal(child, func);
    try { child = child.nextSibling; } catch (e) { child = null; }
return stopTraversal;
Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
var self = this;
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { self.onTabClick(e, tab);return self.onTabMouseOver(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);
if (this.enableKeyboardNavigation)
// XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
// rely on adding the tabindex attribute if it is missing to enable keyboard navigation
// by default.
// Find the first element within the tab container that has a tabindex or the first
// anchor tag.
var tabIndexEle = null;
var tabAnchorEle = null;
this.preorderTraversal(tab, function(node) {
   if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
    var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
    if (tabIndexAttr)
     tabIndexEle = node;
     return true;
    if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
     tabAnchorEle = node;
   return false;
if (tabIndexEle)
   this.focusElement = tabIndexEle;
else if (tabAnchorEle)
   this.focusElement = tabAnchorEle;
if (this.focusElement)
   Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
   Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
   Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
var tpIndex = -1;
if (typeof elementOrIndex == "number")
tpIndex = elementOrIndex;
else // Must be the element for the tab or content panel.
tpIndex = this.getTabIndex(elementOrIndex);
if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
return;
var tabs = this.getTabs();
var panels = this.getContentPanels();
var numTabbedPanels = Math.max(tabs.length, panels.length);
for (var i = 0; i < numTabbedPanels; i++)
if (i != tpIndex)
   if (tabs[i])
    this.removeClassName(tabs[i], this.tabSelectedClass);
   if (panels[i])
    this.removeClassName(panels[i], this.panelVisibleClass);
    panels[i].style.display = "none";
this.addClassName(tabs[tpIndex], this.tabSelectedClass);
this.addClassName(panels[tpIndex], this.panelVisibleClass);
panels[tpIndex].style.display = "block";
this.currentTabIndex = tpIndex;
Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
var tabs = this.getTabs();
var panels = this.getContentPanels();
var panelCount = this.getTabbedPanelCount();
for (var i = 0; i < panelCount; i++)
this.addPanelEventListeners(tabs[i], panels[i]);
this.showPanel(this.defaultTab);
})(); // EndSpryComponent

Note - I agree with Nancy
As for your experiment, to prevent the "drop" reduce the spry CSS padding in line 76 selector from 21px to 18px.
.TabbedPanelsTab {
    -moz-user-select: none;
    background-color: #000000;
    border-color: #000000;
    border-left: 0 solid #000000;
    border-style: solid;
    border-width: 2px 0 0;
    cursor: pointer;
    float: left;
    font-family: "Myriad Pro";
    font-size: 1em;
    font-weight: normal;
    height: 15px;
    list-style: none outside none;
    margin: 0;
    padding: 4px 18px;
    position: relative;
    top: 0;
Don't use dummy text without normal length text with breaks

Table borders offset in PDF output

I am using RoboHelp HTML, version 9 and I need to deliver two outputs for my documentation: WebHelp and PDF.
My table borders look the way I want them to in WebHelp and Word, single line and thin (1px).
But when we go to PDF, I get two sets of lines, one all the way around my cells, another with gaps of white space.
I think its something to do with 3d borders not getting totally eliminated.
I've added "table-collapse: collapse;" to all my table styles.
Any ideas?
Note: If I create a table originally in Word with thin single line borders, it looks fine in PDF.
Here's how it looks in WebHelp and Word...
And then in PDF...

Peter,
Yes, as I mentioned in an earlier post, I really like the help design on your web site. I researched many looks in preparing for a new stylesheet project. Ended up emulating a lot of your elements rather than reinvent the wheel.
Hope you are OK with that. Imitation is the sincerest form of flattery (definitely in my case).
Anyhow, I figured out my problem. The CSS for my original tables was using 5px padding all around. In Word output, this gets converted to table cell margins.
And that's what the PDF conversion doesn't like. Take out the original CSS padding--or the converted Word cell margins--and the problem goes away, leaving clean unbroken table lines in the PDF.
Best regards.

CSS padding in IE

Similar Messages

Maybe you are looking for