Stuck! Have most of the layout working, but one issue remains...

Hi, I have made good progress helping a friend with an assignment, but we are stumped as to how to fix the remaining layout issue. The fields and labels following "Credit Card" won't line up as they should. I have tried a number of hacks trying to get closer to a solution but without positive results, so here I am asking for any advice that those with more knowledge than me might have.

The code is below, and there is also a Github Gist available here https://gist.github.com/anonymous/9881826 if anyone would prefer to look at it there/that way...

Thank you!

HTML

Sticky Nav Bar Question

Hi CSS pro's,

I want to convert the nav bar of my site to a sticky nav bar. Here is the website www.tommosoutdoorproducts.com.au

In the style.css style sheet I have changed the
#mainHeader {
background: none repeat scroll 0 0 #111111;
min-width: 100%;
padding: 20px 0;
}
to
#mainHeader {
background: none repeat scroll 0 0 #111111;
min-width: 100%;
padding: 20px 0;

position:fixed;
}

Adjust height for MAINCONTAINER

Hi all,
i have built my website on wobbly.com. i iused one of thier templates which i adjusted using the css.
i am stuck on trying to make the heioght of the main container shorter. it is too long.
in the css i tried to add a height; 400px; and height; 50%; line but nothing happens.

here is what i see

.container,
.main-container {
width: 770px;
margin: 0 auto;
}

.main-container {
position: relative;
top: -50px;

any ideas on how i can do this?

thanks in advance !

Can't change opacity of modal dialog

Hello all. I am trying to do something in pure CSS that I always used a ModalPopupExtender from the Ajax Control Toolkit. I have the popup opening correctly and I set the opacity in the outer div and set the z-index but it always dims the whole screen including the popup. My CSS is below. What am I missing?

.modalBackground
{
    background-color: #C0C0C0;
    opacity:0.4;
    filter:alpha(opacity=40);
    z-index:1000;
}
 
.modalPopup
{
    background: #4b6c9e;
    border: 2px solid black;
    border-radius: 5px;
   position: absolute;
    top: 0px;

Elements aligning different in Firefox and Chrome

Hello,

I am hoping somebody has the time to check out my site: http://www.doggy-daycare.dk.

I am using Wordpress as CMS. In the top right corner I have added the following widgets: Socialmedia icons, some text and two buttons. My problem is that they are aligning differently when viewing the site in Firefox than in Chrome. Any suggestions why this is?

Secondly - how can i make them align on top of each other, so that the text is positioned over the buttons and socialmedia icons?

The CSS:

element {
    padding-top: 62.5px;

Syndicate content