So this is what I did so far :
#mybutton {
background-color: #08c2f3;
width: 200px;
height: 35px;
padding: 6px;
color: white;
font-size: 30px;
font-family: sans-serif;
text-align :center;
border: 1px solid white;
}
body {
background-color: #1599e1
}
#myBar {
width: 100%;
height: 9px;
background: white;
transform: rotateZ(-54deg);
position: relative;
left: 42px;
}
<div id="mybutton">
<span>OK</span>
<div id="myBar"></div>
</div>
but my goal is :
Just add overflow: hidden to the parent container as it will hide your unwanted portion peeping out.
#mybutton {
background-color: #08c2f3;
width: 200px;
height: 35px;
padding: 6px;
color: white;
font-size: 30px;
font-family: sans-serif;
text-align: center;
border: 1px solid white;
overflow: hidden;
}
body {
background-color: #1599e1
}
#myBar {
width: 100%;
height: 9px;
background: white;
transform: rotateZ(-54deg);
position: relative;
left: 42px;
}
<div id="mybutton">
<span>OK</span>
<div id="myBar"></div>
</div>
You don't actually need the "bar" element at all.
This can be achieved with an angled background gradient
#mybutton {
background: linear-gradient(124deg, #08c2f3 70%, white 70%, white 75%, #08c2f3 75%);
width: 200px;
height: 35px;
padding: 6px;
color: white;
font-size: 30px;
font-family: sans-serif;
text-align: center;
border: 1px solid white;
}
body {
background-color: #1599e1
}
<div id="mybutton">
<span>OK</span>
</div>
Whenever I load my page, the content area for the product jumps to position (shifts downwards) and so do the social media icons in the footer. You'll see this happen if you refresh the page or simply click on either of the product categories on the left or the navigation links in the fixed footer.
This is happening predominately in Safari. I'm running 8.0.7 on Mac OS X 10.10.4 (Yosemite). Firefox 45.0.2 seems ok. Chrome 50.0.2661.86 acts a little weird with the icons flashing and copyright text, so I believe that has the same issue though the load time may be quicker.
I've looked at my CSS, but I can't fathom why it's doing it(?). I'm really stuck and realise it's perhaps something simple I'm overlooking. Driving me loopy! :-(
A friend told me it has something to do with the floats for the catalogue_wrapper_right, it shouldn't be there. That's for the content. And, I'm not sure again for the footer. Help much appreciated to get this fixed.
The product content text is being populated using PHP from my database.
The key elements here to look at are catalogue_wrapper and catalogue_wrapper_right for the content, and then container and social for the footer div blocks.
Thanks.
CSS:
/* ===============================
Author: Ashley Smith
Date: July 11, 2015
Notes:
Colour Palette:
---------------
Light Cream: #f2f3ee
Orange: #d17f38
Yellow: #e8c04f
Brown: #4b2707
=============================== */
/* General */
body {
background: url('../images/wood 4.jpg') top left no-repeat; top no-repeat; background-attachment: fixed;
background-size: 100% 100%;
color: black;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
font-size: 14px;
font-family: 'Open Sans', "Helvetica Neue", Arial, sans-serif;
}
.container {
width: 1280px;
margin: 0 auto;
padding: 30px 24px;
background: white;
-webkit-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
clear: both;
}
/* Typography */
p {
margin: 0;
padding: 0;
}
a {
text-transform: uppercase;
text-decoration: none;
list-style: none;
padding: 0px 10px;
font-weight: bold;
color: black;
margin: 0;
}
/* Header */
header.main{
background: white;
padding: 10px;
margin-top: -30px;
margin-bottom: -30px;
height: 141px;
}
header nav {
text-align: center;
}
header nav ul {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
line-height: 141px;
}
header nav ul li {
display: inline-block;
padding: 0 20px;
}
header nav ul li a {
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
header nav ul li#logo a {
display: block;
width: 200px;
height: 150px;
padding: 0;
background: url('../images/LogoM.svg') center center no-repeat;
background-size: 300px;
}
header nav ul li#logo a p {
opacity: 0;
}
/* Small Basket */
#small_basket {
width: 200px;
margin-bottom: 20px;
}
#basket_left dt {
clear: left;
width: 170px;
}
#basket_left {
margin-top: 30px;
margin-bottom: 0;
}
#basket_left dd {
text-align: right;
width: 150px;
margin-bottom: 15px;
}
#basket_left, #basket_left dd, #basket_left dt {
float: left;
}
#basket_left dd.bl_ti, #basket_left dd.bl_st, #basket_left dd.bl_vat, #basket_left dd.bl_total {
display: block;
width: 0px;
padding: 0;
clear: all;
margin-left: 0px;
}
.your_bas {
width: 200px;
border-bottom: dashed 1px #aaa;
padding-bottom: 9px;
}
.check_button {
border-bottom: dashed 1px #aaa;
}
.check_button, .check_button a {
clear: left;
padding: 0px 0px 14px 0px;
font-style: normal;
font-size: 14px;
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
font-weight: normal;
text-transform: none;
}
.red {
color: red;
}
span.cart_pic {
background: url('../images/cart.png') center center no-repeat;
display: inline-block;
position: relative;
top: 10px;
left: 15px;
width: 30px;
height: 30px;
}
/* Store Content Styling */
#wrapper {
width: 1280px;
text-align:left;
margin:0 auto;
padding: 14px 0;
}
#outer {
width: 1280px;
margin: 0 auto;
padding: 30px 24px;
background: white;
-webkit-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#cat_left {
width: 150px;
}
#cat_left p {
font-size: 20px;
margin: -5px;
font-weight: 300;
text-indent: 5px;
}
#cat_right {
margin-left: 147px;
width: 900px
}
#cat_navigation {
margin-top: 20px;
margin-bottom: 14px;
width: 200px;
line-height: 35px;
list-style: none;
border-top: dashed 1px #aaa;
padding: 0;
float: left;
}
#cat_navigation li {
float: left;
background-color: rgba(209,209,209,0.4);
text-align: center;
width: 100%;
padding: 2px;
margin-bottom: 10px;
}
#cat_navigation li a {
width: 150px;
opacity: 0.2;
font-size: 14px;
font-weight: 300;
padding: 0;
}
#cat_navigation li a.act {
opacity: 1;
font-weight: 700;
}
#cat_prod {
border-bottom: dashed 1px #aaa;
margin-bottom: 0;
padding-bottom: 14px;
}
#cat_prod h1 {
font-size: 20px;
margin: -5px;
margin-bottom: 1px;
font-weight: 300;
}
/* Catalogue Styling For Products Alignment... Continued */
.catalogue_wrapper {
width:100%;
border-bottom: dashed 1px #aaa;
height: 100%;
display: block;
clear: both;
position: static;
}
.catalogue_wrapper_left {
display: inline-block;
width: 120px;
margin-top: 20px;
}
.catalogue_wrapper_right {
display: block;
width: 750px;
position: relative;
left: 150px;
height: 180px;
margin-top: -120px;
margin-bottom: -40px;
}
.catalogue_wrapper_right h4 a {
padding: 0;
font-size: 20px;
}
.catalogue_wrapper_left a img {
width: 120px;
height: 150px;
}
.catalogue_wrapper_left a {
padding: 0;
}
/* Catalaogue Floats */
#cat_left, #cat_right, #catalogue_wrapper, #catalogue_wrapper_left, #catalogue_wrapper_right {
float: left;
}
/* Catalogue Products Pages */
.catalogue_wrapper_product_right {
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
display: block;
width: 750px;
position: relative;
left: 150px;
height: 180px;
margin-top: -70px;
margin-bottom: -40px;
}
.product_info {
font-size: 14px;
display: block;
width: 750px;
text-transform: none;
top: -63px;
}
/* Buttons */
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/* Basket and Checkout Buttons */
.sbm, .btn {
vertical-align: middle;
cursor: pointer;
display:block;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
}
.sbm_blue {
background: transparent;
background-color: #43a9d9;
border-radius: 4px;
border: none;
padding: 10px 15px;
}
.btn {
text-transform: uppercase;
background: transparent;
background-color: #43a9d9;
border: none;
border-radius: 4px;
color: white;
}
#btn_login {
text-transform: uppercase;
border-radius: 4px;
background: transparent;
background-color: #43a9d9;
border: none;
color: white;
padding: 0px 15px;
}
#btn {
text-transform: uppercase;
background-color: #43a9d9;
border-radius: 4px;
color: white;
padding: 0px 15px;
}
.fl_l {
float: left;
}
.fl_r {
float: right;
}
/* Basket Button */
.add_to_basket {
padding: 6px 12px;
text-transform: uppercase;
background-color: #43a9d9;
border-radius: 4px;
color: white;
}
/* Basket Page */
.ta_r, th.ta_r, .td.ta_r {
text-align: right;
padding: 10px;
}
.ta_left {
text-align: left;
padding: 10px;
}
.ta_right {
text-align: right;
padding: 10px 0px;
}
.col_15 {
width: 15%
}
.tbl_repeat {
width: 900px;
margin-top: 25px;
}
.ta_left_name {
text-align: left;
padding: 10px;
width: 650px;
}
.ta_left_qty input {
width: 40px;
}
.ta_r a {
padding: 0;
text-transform: none;
}
.fld_qty {
border: solid 1px #aaa
}
.fld_qty {
width: 30px;
text-align: right;
padding: 0
}
/* Checkout Page */
.tbl_insert {
margin-bottom:14px;
width: 900px;
line-height: 34.5px;
}
.tbl_insert td {
padding:3px;
}
.tbl_insert th {
padding: 3px 10px 3px 0;
width: 170px;
font-weight: normal;
vertical-align: top;
}
.fld {
width: 700px;
}
.warn {
display: block;
color: #900;
padding: 0;
vertical-align: text-bottom;
}
/* Orders Table */
.order_table {
width: 900px;
}
th.fix_width {
width: 900px;
}
hr#prod_break {
/* Gradient transparent - color - transparent */
border: 0;
height: 1px;
width: 600px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.tbl_repeat
{
position:relative;
-webkit-box-shadow:0 1px 10px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 10px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 10px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.tbl_repeat:before, .tbl_repeat:after
{
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:400px / 100px;
border-radius:400px / 100px;
}
/* Product Paging */
.paging {
list-style: none;
width: 900px;
float: left;
/* background: #efefef; */
padding: 10px 10px;
color: white;
}
.paging li {
float: left;
margin-right: 10px;
font-size: 14px;
}
.paging a {
text-transform: none;
text-decoration: underline;
color: black;
padding: 0;
font-weight: normal;
color: white;
}
/* Pagination Navigation Buttons
http://www.flaticon.com/packs/metrize - - no class colour: #D9D9D9
*/
a.first {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/first.svg') top center no-repeat;
background-size: 32px;
}
a.firstno {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/firstno.svg') top center no-repeat;
background-size: 32px;
}
a.previous {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/previous.svg') top center no-repeat;
background-size: 32px;
}
a.previousno {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/previousno.svg') top center no-repeat;
background-size: 32px;
}
a.next {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/next.svg') top center no-repeat;
background-size: 32px;
}
a.nextno {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/nextno.svg') top center no-repeat;
background-size: 32px;
}
a.last {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/last.svg') top center no-repeat;
background-size: 32px;
}
a.lastno {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/lastno.svg') top center no-repeat;
background-size: 32px;
}
a#top_of_page {
display: block;
position: relative;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
background-color: #43a9d9;
top: -31px;
left: 45px;
color: white;
border-radius: 4px;
padding: 7px;
}
/* Proceed to Paypal */
#frm_pp {
display: none
}
.dn {
display: none;
}
/* Google reCAPTCHA */
.g-recaptcha {
display: inline-block;
position: relative;
width: 304px;
height: 78px;
}
/* Footer */
footer.main, #footer {
bottom: 0px;
width: 100%;
height: 182px;
position: fixed;
text-align: center;
margin-bottom: -20px;
}
footer.main div.footbord {
border-top-left-radius: -10px;
border-top-right-radius: -10px;
background-color: blue;
}
#uncopyright, #credits {
width: 100%;
margin: 5px 5px;
text-align: center;
display: inline-block;
position: static;
clear: both;
}
#uncopyright {
display: inline-block;
position: static;
margin-top: -20px;
clear: both;
}
div.social img {
width: 40px;
position: relative;
margin: 5px;
display: inline-block;
}
.social {
position: static;
height: 56px;
display: inline-block;
}
.social, .social a {
text-transform: uppercase;
text-decoration: none;
list-style: none;
padding: 0px 10px;
font-weight: bold;
color: black;
margin: 0;
}
/* -- Center Placeholder For Form Text and Keep Entry Field Left -- */
::-webkit-input {
text-align: left;
}
::-webkit-input-placeholder {
text-align: center;
}
::-moz-placeholder {
text-align: center;
}
/* -- Blank Spacing At Bottom Of Main Container -- */
div.nav_top {
height: 30px;
width: 100px;
}
div.nav_top_after {
height: 30px;
width: 100px;
}
div.cont_bot {
height: 230px;
width: 100px;
}
div.cat_space {
height: 20px;
}
/* Force Elements To Self Clear Its Children: http://css-tricks.com/snippets/css/clear-fix/ */
.clearfix:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
* html .group { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */
I fixed it by messing around all evening with floats in CSSEdit. A great application!
<head>
<title>WCK&TMB</title>
<style>
* {
margin: 0px;
padding: 0px;
}
html, body {
width: 100%;
background-color: #FFC18F;
}
div#container {
width: 100%;
min-width: 1024px;
}
header {
height: 100px;
width: 100%;
background-color: #ff8400;
text-align: center;
}
header img {
clear: left;
float: left;
margin: 10px;
}
header a#purchase {
background: url("http://i.imgur.com/RJe8a1D.png") repeat-x;
width: 500px;
height: 25px;
margin: 30px;
padding: 5px;
border: 3px double #ccc;
text-align: center;
float: right;
font-family: Arial;
font-size: 20px;
text-decoration: none;
color: #ffffff;
}
section#main {
padding: 0px 0px 10px 0px;
text-align: center;
}
section#main div#head_announcements {
padding-top: 10px;
color: #000;
font-family: "Arial";
}
section#main div#head_announcements h2 {
font-size: 24px;
font-weight: lighter;
line-height: 26px;
}
section#main h2 a {
color: #FFFFFF;
text-decoration: none;
}
section#main h2 a:hover {
color: #000000;
}
section#main nav {
background: url("./images/navBG.png") repeat-x;
width: 100%;
height: 35px;
text-align: center;
}
section#main nav a.link {
font-family: "Century Gothic";
text-decoration: none;
color: white;
font-size: 25px;
vertical-align: top;
float:center;
}
section#main nav a.link:nth-of-type(1) {
float:center;
}
section#main nav a.link:hover {
color: #39F;
}
section#main nav a.link.active {
color: #39F;
}
section#main section#frames {
margin-top: 10px;
width: 100%;
}
section#main section#frames iframe {
border: 0px;
outline: 0px;
overflow: hidden;
margin: 0px;
padding: 0px;
}
section#main section#frames iframe#frame1 {
width: 650px;
height: 450px;
background-color: black;
}
section#main section#frames iframe#frame2 {
width: 350px;
height: 450px;
}
footer {
padding: 10px 0px 10px 0px;
width: 100%;
text-align: center;
height: 110px;
}
</style>
</head>
URL: http://skyaccess.se/forum/misc.php?page=hdppvs
I can't seem to center the navigation bar text. Can someone please correct this?
Also, I'm trying to learn CSS so if anyone could show me a great site, I'd be very thankful. Considering paying $29/mo are some interaction website with points.
add float:left in your css:
section#main nav {
background: url("./images/navBG.png") repeat-x;
width: 100%;
height: 35px;
text-align: center;
float: left;
also add this css for create gaping between navigation: "padding-right: 40px;".
section#main nav a.link {
font-family: "Century Gothic";
text-decoration: none;
color: white;
font-size: 25px;
vertical-align: top;
float: center;
padding-right: 40px;
I just tested my new site with my android phone and I am not able to scroll anywhere on the page. On Firefox, opera, ie, and chrome desktop browsers I get vertical scroll when needed. In my html, body css rule I've got overflow-y to scroll; Width should not be scrolled. I'm probably missing something simple here but I've never come across this in any other sites I've done.
Here's my css for the site:
#charset "utf-8";
/* CSS Document */
#body{
min-width: 900px;
width: 75%;
background-size: cover;
background-image: url(../graphics/back2.jpg);
position: relative;
margin: 40px auto;
padding: 10px;
border-style: groove;
border-width: 5px;
border-color: #000;
background-repeat: repeat-y;
}
a:link, a:visited, a:active{
text-decoration: none;
color: inherit;
}
a:hover{
color: #FFF;
text-decoration: underline;
}
html, body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow-y: scroll;
background-image: url(../graphics/craig-smith-background.jpg);
line-height: 25px;
}
h1{
font-size: 36px;
font-family: "Times New Roman", Times, serif;
color: #000;
margin: 10px;
}
h2{
font-size: 30px;
font-family:"Times New Roman", Times, serif;
margin-left: 30px;
color: #333;
font-weight: 700;
margin: 20px;
}
h3{
font-size: 24px;
margin: 10px;
}
p{
font-size: 20px;
font-family: "Times New Roman", Times, serif;
color: #FFF;
text-indent: 1.5em;
margin-left: 1.5em;
}
#quote{
margin-left: 30px;
font-style: italic;
font-family: lucida;
font-size: 18px;
border-style: inset;
border-color: #333;
border-width: 2px;
height: 80px;
}
#header{
width: auto;
margin: 0 auto;
position: relative;
text-align: center;
}
#nav{
position: absolute;
z-index: 1;
left: 25%;
top: 150px;
}
.picture{
display: inline-block;
position: relative;
margin: 0 auto;
border-style: groove;
border-width: 5px;
border-color: #999;
}
.clear-left{
clear: left;
position: relative;
}
.clear-right{
clear: right;
position: relative;
}
.clear-all{
clear: both;
position: relative;
}
#left-col{
width: 25%;
min-width: 300px;
position: relative;
float: left;
text-wrap: normal;
overflow: hidden;
margin-bottom: 10px;
margin-top: 10px;
text-align: right;
}
#right-col{
min-height: 500px;
min-width: 500px;
width: 65%;
text-align: left;
float: right;
border-style: groove;
border-width: 5px;
border-color: #CCC;
margin-bottom: 10px;
margin-top: 10px;
text-wrap: normal;
text-indent: 10px;
}
#footer{
width: 85%;
height: 40px;
background-color: #999;
text-align: center;
margin: 10px auto;
padding: 0px;
padding-bottom: 10px;
border-style: groove;
border-width: 2px;
border-color: #999;
}
#project-description h1{
text-align: center;
font-size: 36px;
}
.project-description h2{
color: #333;
font-weight: bold;
}
.project-description{
border-style: inset;
border-width: 3px;
border-color: #333;
margin: 10px;
padding: 5px;
}
.project-description p{
margin-left: 70px;
text-indent: 0;
}
table{
border-spacing: 0;
border-collapse: collapse;
}
td, th, tr{
padding: 0;
line-height: 20px;
}
And here's a link the live site.
You don't need to give the body and html tags the overflow-y: scroll; style. That is resulting in a double scrollbar which is failing in mobile browsers. You don't even need to specify that as it is default behavior. You may want to set overflow-y: scroll; and overflow-x: hidden; on the body tag only.
I've been around and around in circles with this one, almost finished my web page and all good in most browsers except the inevitable IE6! I've been doing some research and found out there is a problem with padding and margin in CSS, and have tried to no avail. Is there someone out there who might be able to help?
www.theclubnetwork.co.uk
body {
background: #ebf5fc url('../Images/body_bg.jpg') repeat-x 0 0;
margin: 0px 0px 0px 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: blue;
margin:0;
padding:0;
}
#env {
position: relative;
margin: 0 auto;
width: 934px;
background: url('../Images/env_bg.jpg') repeat-y 0 0;
margin-top: 10px;
padding: 125px 0 0 0;
}
#main {
width: 934px;
background: transparent url('../Images/main_bg.jpg') no-repeat 0 0;
z-index: 10;
}
#promo {
position: absolute;
top: 0;
left: 0;
width: 934px;
background: url('../Images/promo_bg2.jpg') no-repeat 0 0;
}
#bor {
position: relative;
margin: 0 auto;
top: 5px;
width: 633px;
background: url('../Images/bor_bg.gif') repeat-y 0 0;
padding: 0 0 0 0;
}
#foot {
height: 49px;
width: 912px;
background: url('../Images/foot_bg.png') no-repeat 0 100%;
padding: 0 11px 8px 11px;
color: #506273;
font-size: 11px;
clear: both;
text-align: center;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
}
#foot a {
font-weight: normal;
color: #506273;
padding-left: 0;
background-image: none;
}
#foot div {
padding: 8px 0 0 10px; /*top right bottom left*/
line-height: 16px;
}
#logo {
position: relative;
float: left;
width: 279px;
padding-right:20px;
top:20px;
left: 10px;
text-align: center;
z-index: 6;
background-color: #ffa500;
}
#slow {
position: relative;
text-align: center;
z-index: 6;
}
.nav {
position: relative;
float: left;
width: 125px;
height: 125px;
background-color: #fff;
text-align: center;
z-index: 25;
}
* html #welcome {
margin-left: 0px;
}
#welcome {
position: relative;
margin-left: 2px;
float: left;
width: 297px;
height: 150px;
background-color: #fff;
z-index: 6;
text-align: center;
vertical-align: middle;
}
a.slogan {
width: 150px;
color: blue;
font-size: 17px;
clear: both;
text-align: center;
text-transform: uppercase;
}
a.mainslogan {
width: 150px;
color: #ffa500;
font-size: 48px;
clear: both;
text-align: center;
text-transform: uppercase;
}
a.sloganmiddle {
width: 150px;
color: #ffa500;
font-size: 21px;
clear: both;
text-align: center;
text-transform: uppercase;
}
a.bottomslogan {
width: 150px;
color: #fff;
font-size: 21px;
clear: both;
text-align: center;
text-transform: uppercase;
}
a.welcome_text {
position : relative;
top: 10px;
color: blue;
font-size: 30px;
vertical-align: top;
z-index: 6;
display: block;
}
.our_web {
position : relative;
color: #ffa500;
top: 10px;
font-size: 20px;
padding-bottom:7px;
display:block;
}
a.form {
font-size: 13px;
padding-top:10px;
padding-bottom: 10px;
color: blue;
}
a.first_web {
position : relative;
color: #0d7acf;
top: 0px;
padding-left: 0;
padding-right: 0;
padding-top: 0px;
text-align: middle;
display: inline;
}
p.statement {
position : relative;
top: 0px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 0px;
text-align: justify;
}
p.allocated {
text-align: right;
}
* html .clubreg {
padding-right: 0px;
padding-left: 0px;
}
.clubreg {
position: relative;
float: left;
width: auto;
height: auto;
background-color: #fff;
overflow: hidden;
z-index: 10;
padding-top: 12px;
padding-right: 13px;
padding-left: 12px;
text-align: left;
}
.memreg {
position: relative;
float: left;
height: auto;
background-color: #fff;
overflow: hidden;
text-align: center;
z-index: 10;
padding-bottom: 10px;
padding-top: 12px;
text-align: left;
}
.clubform {
position: relative;
float: left;
width: auto;
height: auto;
background-color: #fff;
z-index: 10;
padding-bottom: 10px;
padding-top: 12px;
padding-right: 12px;
padding-left: 12px;
text-align: left;
}
div.box335 {
width: 220px;
float: left;
background: transparent url('../Images/box220_bg_top.gif') no-repeat 0 0;
}
div.box335in {
background: transparent url('../Images/box220_bg_btm.gif') no-repeat bottom left;
padding: 0px 0px 5px 0px; /*top right bottom left*/
}
div.box220 {
width: 220px;
float: left;
padding-top: 5px;
background: transparent url('../Images/box220_bg_top.gif') no-repeat 0 0;
}
div.box220in {
background: transparent url('../Images/box220_bg_btm.gif') no-repeat bottom left;
padding: 0px 0px 30px 30px; /*top right bottom left*/
}
div.box267 {
width: 267px;
float: left;
padding-top: 5px;
background: transparent url('../Images/box267_bg_top.gif') no-repeat 0 0;
}
div.box267in {
background: transparent url('../Images/box267_bg_btm.gif') no-repeat bottom left;
padding: 0px 0px 10px 10px; /*top right bottom left*/
}
#news {
position: relative;
float: left;
margin-left: 2px;
width: 287px;
height: 165px;
background-color: #fff;
z-index: 6;
text-align: left;
color: #0d7acf;
padding-left: 12px;
padding-right: 0px;
padding-top: 13px;
}
div.box454 {
width: 454px;
height: auto;
float: left;
background: transparent url('../Images/box454_bg_top.gif') no-repeat 0 0;
}
div.box454in {
background: transparent url('../Images/box454_bg_btm.gif') no-repeat bottom left;
padding: 10px 10px 30px 10px; /*top right bottom left*/
}
div.box609 {
width: 609px;
min-height: 340px;
height: auto;
float: left;
background: transparent url('../Images/box609_bg_top.gif') no-repeat 0 0;
padding: 0px 0px 15px 0px; /*top right bottom left*/
}
div.box609in {
background: transparent url('../Images/box609_bg_btm.gif') no-repeat bottom left;
min-height: 478px;
padding: 0px 40px 10px 15px; /*top right bottom left*/
}
div.member_title {
color: blue;
width: 100%;
padding-top: 10px;
padding-right: 40px;
padding-bottom: 10px;
font-weight: bold;
text-align: center;
}
div.regreasons {
text-align: center;
font-weight: bold;
padding-left: 10px;
padding-right:10px;
}
div.box145 {
width: 145px;
float: left;
padding-top: 5px;
padding-right: 0px;
background: transparent url('../Images/box145_bg_top.gif') no-repeat 0 0;
}
div.box145in {
background: transparent url('../Images/box145_bg_btm.gif') no-repeat bottom left;
min-height: 100px;
padding: 0px 10px 0px 10px; /*top right bottom left*/
}
* html .advertising {
left: 0px;
}
div.advertising {
position: relative;
float: right;
width: 150px;
height: 168px;
left: -2px;
padding-right: 5px;
padding-left: 0px;
padding-bottom: 0px;
text-align: left;
padding-top: 12px;
background-color: #fff;
}
.memreg2 {
position: relative;
float: left;
width: auto;
height: auto;
background-color: #fff;
overflow: hidden;
text-align: center;
z-index: 10;
padding-bottom: 0px;
padding-top: 12px;
padding-left: 12px;
text-align: center;
}
li {
padding-bottom: 8px;
}
div.buttonreg {
text-align: center;
vertical-align:bottom;
}
#faq {
position : relative;
top: 0px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 20px;
text-align: justify;
text-align:center;
}
* html #sales {
margin-left: 0px;
}
#sales {
position: relative;
float: left;
margin-left: 2px;
width: 297px;
height: 367px;
background-color: #666666;
z-index: 6;
text-align: center;
color: #fff;
}
#joining {
position: relative;
float: left;
margin-left: 2px;
width: 297px;
height: 535px;
background-color: #666666;
z-index: 6;
text-align: center;
color: #fff;
overflow: auto;
}
#control_panel {
position: relative;
float: left;
margin-left: 2px;
width: 297px;
height: 480px;
background-color: #666666;
z-index: 6;
text-align: center;
color: #fff;
overflow: auto;
}
#minimnu {
position : relative;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
text-align: left;
}
#focusContainer {
width: 190px;
margin: auto;
background-color: #71707f;
padding: 17px 17px 10px 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#focusContainer a {
display:block;
background-color: #383737;
color: #fff;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
border: 1px solid #000000;
width: 100%;
margin-bottom: 5px;
font-weight: 400;
}
#focusContainer a:hover {
background-color: #ffa500;
color: blue;
}
#m1 a, #m2 a, #m3 a,#m4 a {
padding-left: 10px;
color: #fff;
width: 100%;
background-color:#5d5d5d;
margin-top: -5px;
padding-top: 5px;
padding-left: 5px;
border: 1px solid #000000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.span {
padding-left: 10px;
color: #fff;
width: 150px;
background-color:#5d5d5d;
margin-top: -5px;
padding-top: 15px;
border: 1px solid #000000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
a#selected, a#selected:hover {
background: #ffa500;
color: blue;
}
a.newshead {
text-decoration: underline;
}
#leftside {
position: relative;
float: left;
}
.rbsworldpay {
position: relative;
display: block;
width = 100%;
text-align: center;
margin-left: 2px;
}
#clubinfo {
position: relative;
float: left;
width: 225px;
height: 120px;
background-color: blue;
overflow: hidden;
color: #000000;
text-align: center;
z-index: 11;
text-align: left;
padding-left: 10px;
padding-right: 0px;
padding-bottom: 10px;
}
#meminfo {
position: relative;
float: left;
width: 225px;
height: 120px;
background-color: yellow;
overflow: hidden;
color: #000000;
text-align: center;
z-index: 11;
text-align: left;
padding-left: 10px;
padding-right: 0px;
padding-bottom: 10px
}
.moreinfo {
float: right;
padding-right: 10px;
padding-top: 10px;
}
#bottomlink {
color: #0d7acf;
height: 48px;
padding: 0px;
}
a.club_details {
color: blue;
padding-top: 20px;
padding-left: 20px;
font-size: 12pt;
text-decoration: underline;
text-align: center;
}
In response to the only question in your post
"Is there someone out there who might be able to help?"
Yes.
Make sure your HTML has a DOCTYPE, to trigger IE6's standards mode. That's likely to eliminate a lot of CSS craziness (and possibly introduce some other craziness, but there will be less of it and it'll happen in all browsers).
To avoid having trouble with different browser behaviour, I'd suggest you use a CCS reset.
Eric Meyer explains well and offers a free example at meyerweb. That won't solve all your problems, but would certainly be a good start.
A couple of things that I saw right away.
You don't have a font size set for your h2 in the div #sales and IE is using a bigger font size. IE6 uses width and height as suggestions and will expand divs to fit the content.
Your .box335in has a width of 220px however your .member_title div has a width of 220px plus a right padding of 40px for a total width of 260px. Once again IE6 is expanding the .box335in to fit the wider width.
I wouldn't worry about making things compatible with IE6 anymore.