|
CSS - Page Problem-- Clueless---tearing Hair Out!!!!!
i am running a test page and it looks exactly how i want in my brower which is FIREFOX-- which i LOVE by the way-- it beats IE all to pieces-- anyway-- i had a friend check out my page this morning and she said it is ALL SCREWED UP--
i have validated both xhtml and css and all is ok-- so can anyone go look at the page and see if it is screwed up and if so what can i do to fix it... i am so tired- and so drained-- my brain is mush-- been working on this for days and way into the night-- and now i am just too mixed up..exhuasted, and confused to figure out what could be wrong MANY THANKS IN ADVANCE LINK TO PAGE css code body { background-color: #8548BE; color: purple; font-family: "Lucida Grande",Verdana, Arial, Sans-Serif; font-size: 12pt; text-align: center; margin-top: 0; } #container { background-color: #C2A4DE ; border-bottom: 3px solid #DE11FF; border-left: 3px solid #DE11FF; border-right: 3px solid #DE11FF; margin-bottom: auto; margin-left: auto; margin-right: auto; margin-top: 0; text-align: left; width: 755px; } #pageHeader { background-color: #000000; background-image: url(IMAGES/creativedistortion2a.jpg); background-position: center; background-repeat: repeat; border-color: #9E64A7; border-style: inset; border-width: 6px; height: 296px; text-align: right;/*creative distortion*/ width: 751px } /*this is quick summary*/ #welcome { background-color: #C2A4DE; border-bottom: #9E64A7 1px solid; border-left: #9E64A7 1px solid; border-right: #9E64A7 1px solid; border-top: #9E64A7 1px solid; border-style: inset; margin-bottom: 24px; margin-left: 290px; margin-top: 10px; padding-bottom: 12px; padding-left: 12px; padding-right: 12px; padding-top: 12px; width: 430px; } /*this is intro*/ #preamble { background-color: #C2A4DE; border-bottom: #9E64A7 1px solid; border-color: #9E64A7 ; border-left: #9E64A7 1px solid; border-right: #9E64A7 1px solid; border-top: #9E64A7 1px solid; border-style: inset; margin-bottom: 24px; margin-left: 290px; padding-bottom: 12px; padding-left: 12px; padding-right: 12px; padding-top: 12px; width: 430px; } /*this is whats it about ,participation, benefits*/ #supportingText { background-color: #C2A4DE; border-bottom: #9E64A7 1px solid; border-left: #9E64A7 1px solid; border-right: #9E64A7 1px solid; border-top: #9E64A7 1px solid; border-style: inset; margin-bottom: 24px; margin-left: 290px; padding-bottom: 12px; padding-left: 12px; padding-right: 12px; padding-top: 12px; width: 430px; } h2 { font-size: 12pt; text-decoration: none; color: lime; } p { font-family: Verdana, Arial, Sans-Serif; font-size: 10pt; line-height: 100%; text-align: center; color: #764B7D; padding: 0px; } p.footer { font-family: Verdana, Arial, Sans-Serif; font-size: 6pt; font-weight: bold; text-align: center; margin-top: 40px; } ul { font-family: Verdana, Arial, Sans-serif; font-size: 10pt; font-weight: bold; margin: 0px; padding: 5px; } ol { font-family: Verdana, Arial, Sans-serif; font-size: 70%; font-weight: bold; margin: 0px; padding: 5px; } /*MUST be in this order- these are psuedo class elements */ a:link { color: purple; font-weight: bold; text-decoration: none; } a:visited { font-weight: bold; color: white; text-decoration: underline; } a:hover { background-color: fuchsia; color: yellow; text-decoration: underline; } a:active { color: yellow; text-decoration: underline; font-weight: bold; } /*this uses the descendent selector display to give form to the nav bar elements */ #linkList { float: left; margin-top: 20px; /*sets distance between each conter */ margin-left: 248px; position: absolute; top: 280px; width: 280px; /*sets size of list container */ } #linkList div { margin-left: 5px; margin-top: 40px; } /* sets linklist properties */ ul { font-family: "Lucida Grande", "Lucida Sans Unicode", Lucida, Helvetica, Verdana, Arial, Sans-serif; font-size: 70%; margin: 0px; padding: 5px; /* sets list how far from left edge */ } li { color: lime; font-weight: bold; line-height: 22px; list-style-type: none; padding-right: 20px } #lselect { /* this is artwork*/ background-color: transparent; background-image: url(IMAGES/creativedistortion2a.jpg); background-position: top; background-repeat: repeat-y; border-color: #D286DF; border-style: inset; border-width: 2px; font-family: Comic Sans MS, Sans-Serif; font-weight: bold; color: lime; } #larchives { background-color: transparent; background-image: url(IMAGES/creativedistortion2a.jpg ); background-position: bottom left; background-repeat: repeat-y; border-color: #D286DF; border-width: 2px; border-style: inset; font-family: Comic Sans MS, Sans-Serif; color: lime; } #lresources { background-color: transparent; background-image: url(IMAGES/creativedistortion2a.jpg); background-position: bottom rightr; background-repeat: repeat-y; border-color: #D286DF; border-style: inset; border-width: 2px; } /* artwork header */ h3.select { color: lime; font-family: Comic Sans MS, Sans-Serif; font-size: 12pt; font-weight: bold; margin-bottom: 5px; margin-left: 10px; } h3.arhives { color: lime; font-family: Comic Sans MS, Sans-Serif; font-size: 12pt; font-weight: bold; margin-bottom: 5px; margin-left: 10px; } h3.resources { color: lime; font-family: Comic Sans MS, Sans-Serif; font-size: 12pt; font-weight: bold; margin-bottom: 5px; margin-left: 10px; } #linkList li a:link { background-color: transparent; color: lime; } #linkList li a:visited { background-color: transparent; color: white; } #linkList li a:hover, #linkList a:active { background-color: fuchsia; color: yellow; } Similar TutorialsHi all I am tearing my hair out over THIS page. In FF and any other browser which was not programmed by Monkeys the page displays correctly, re-sizing the page in FF is fine. However re-sizing the page to a narrow width in IE makes the main text content pop down to below the menu, why is this? The Menu on the left is Floated Left in a div, while the main content is in another div, which is not floated. I have tried min-width, width and min-width Hacks for IE, none seem to fix it. The CSS for the page is HERE Thanks for any input Jake Hi everyone. Have been tearing my hair out for the past 4 days trying to get single products to display correctly on my wordpress blog. Where my problem lies is aligning a "in Stock" button to the right of the product display. You can see what the current product display looks like here http://transpart.clearviewdigital.ie/?page_id=359 Below the first product you can see what it needs to look like. Any advice or help would be massively appreciated. The following is the css code I am using from the wp-ecommerce plugin: Code: /* Theme Name: Default Theme Theme URI: <a href="http://instinct.co.nz" rel="nofollow">http://instinct.co.nz</a> Description: Default Theme Version: 3.5 Author: Thomas Howard Author URI: <a href="http://instinct.co.nz" rel="nofollow">http://instinct.co.nz</a> */ /* * If you delete this file, you can expect your WP e-Commerce installation to break in some manner * to create your own theme copy, and paste this file, change the names and alter to your tastes */ .wpsc_container{ position: relative; _zoom: 1; } div.productdisplay img { max-width: none !important; padding: 0px; border: none; } #change_country{ float:left; } /* * shopping cart styling * lots of styling for lots of different ways of displaying it. */ div#shoppingcart{ float: right; width: 148px; margin: 0px; padding: 0px; margin-left: 5px; } div#shoppingcart div#shoppingcartcontents{ font-size: 9pt; border: 1px solid #999999; background-color: #efefef; height: 100%; width: 100%; text-align: left; padding: 0px 6px 0px 0px; position: relative; z-index: 9; } div#shoppingcart div#shoppingcartcontents strong{ display: block; width: 100%; } div#shoppingcart div strong{ font-size: 11pt; } div#sideshoppingcart div{ height: 100%; width: 90%; text-align: left; padding: 6px; padding-top: 4px; } div#sideshoppingcart div h2{ margin-left: -1ex; display: inline; } input.wpsc_buy_button{ float: left; } a.wpsc_product_title{ display: block; float: left; } a.wpsc_edit_product{ display: block; float: left; font-size: .8em; margin: 0px 0px 0px 2px; } div.wpsc_listen_button{ clear: both; } div.wpsc_description{ clear: both; } table.shoppingcart{ margin-left: -2px; margin-bottom: 5px; } table.shoppingcart tr td{ font-size: 8pt !important; } div#widgetshoppingcart{ } div#widgetshoppingcart div{ height: 100%; width: 100%; text-align: left; } div#widgetshoppingcart div strong.cart_title{ margin-left: -6px; display: inline; font-size: 1.2em; } div#widgetshoppingcart div h2{ text-align: left; margin-bottom: 4px; display: block; } a#fancy_collapser_link{ width: 13px; height: 13px; padding: 0px; margin-left: 5px; margin-bottom: -3px; border: none; } a#fancy_collapser_link img{ border: none; } div#shoppingcartcontents{ display: block; } div#sliding_cart{ margin: 0px; padding: 0px; background: none; border: none; } span.oldprice{ text-decoration: line-through; } span.oldprice span{ text-decoration: line-through; } span.special{ color: #DD0000; font-weight:bold; } strong.prodtitles{ display: block; margin-bottom: -15px; } h2.prodtitles{ font-size:1em; margin: 0px; clear:both; padding-top:0; } h2.prodtitles span{ display: block; float: left; line-height:125%; } span.items{ display:block; margin:0 0 15px 0; } span.nomore{ display:block; margin:0 0 15px 0; } span.numberitems{ margin:0 5px 0 0; } span.subtotal,span.total,span.discount,span.postage,span.tax,span.gocheckout{ display:block; } span.totalhead,span.discounthead,span.subtotalhead,span.postagehead,span.taxhead{ font-weight:bold; margin-right:5px; } span.emptycart{ display:block; margin:10px 0 0 0; } p.empty,p.visitshop{ margin:0; padding:0; } /* * end shopping cart styling */ /* * product default display styling */ div.productdisplay{ position:relative; float:left; clear:both; top:0px; left: 0px; margin-bottom: 5px; padding: 0px; width: 100%; text-align: left !important; border: 1px solid #cccccc; } div.imagecol{ position:relative; float:left; top:0px; left: 0px; padding-right: 10px; margin-right: 10px; border: 0px solid #fff; /* border: 1px solid blue; */ } div.productdisplay div.imagecol img{ border: 0px solid #fff; } div.textcol{ position:relative; float:left; top:0px; left: 0px; padding: 0px; padding-bottom: 10px; margin: 0px; /* Adjust this width according to your layout*/ /* width: 77%; */ text-align: left !important; /* border: 1px solid green; */ _display: inline; } div.textcol form{ text-align: left !important; } div.single_product_display div.textcol{ /* Adjust this width according to your layout*/ /* width:41%; */ margin-right: 0; } .item_no_image { border: 2px solid #aaaaaa; background: #cccccc; display: block; } .item_no_image a, .item_no_image .link_substitute { display: table-cell; width: inherit; height: inherit; color: #666666; text-align: center; vertical-align: middle; } .item_no_image a span, .item_no_image .link_substitute span { display: block; } div.producttext{ font-size: 11pt; width: 100%; text-align: left !important; } p.description{ float: right; margin: 0px 0px 6px 0px; } p.wpsc_description{ float: right; margin: 0px 0px 6px 0px; } p.wpsc_variation_forms{ margin: 0px 0px 0px 0px; } p.wpsc_variation_forms label{ } p.wpsc_product_price{ display: none; } span.wpscsmall{ font-size:0.8em; } p.wpsc_product_extra_content{ float: right; margin: 0px 0px 0px 0px; } div.wpsc_product_price{ width:130px; } span.pricefloatright{ } div.wpsc_product_price label{ display: inline; } div.wpsc_product_price input{ /* float: left; */ } div.wpsc_product_price br{ clear: both; } p.galleryheading{ font-weight:bold; } /* styles the additional description */ div.additional_description{ align: right; } a.additional_description_link{ display: inline; } a.additional_description_link img{ margin-right: 3px; } label.wpsc_quantity_update { display: inline; } /* * product rating styling */ div.product_footer{ position: relative; clear: both; padding: 0px !important; width: 100%; border-top: 1px dashed #cccccc; height: 35px; margin-top: 1em; } div.product_footer strong{ display: block; font-size: 7pt; font-weight: normal; } div.product_average_vote{ position: absolute; top: 0px; left: 0px; width: 50%; float: left; margin: 0px !important; height: inherit; } div.product_user_vote{ position: absolute; top: 0px; right: 0px; width: 30%; margin: 0px !important; height: inherit; } span.vote_total{ position: relative; top: -3px; left: 2px; font-size: 7pt; } span.rating_saved{ color: #990000; display: none; } /* *end product rating styling */ /* * end default product display styling */ /* * list product display styling */ table.list_productdisplay{ /* margin-top: 10px; */ margin-bottom: 20px; border-collapse: collapse; width: 100%; } table.list_productdisplay tr td{ vertical-align: top; padding-bottom: 0px; font-size: 8pt; /* border: 1px solid black; */ } table.list_productdisplay tr td a.wpsc_product_title{ text-align: left; border-bottom: none; text-decoration: underline } table.list_productdisplay tr td div.wpsc_variation_forms p{ padding: 0px; text-align: left; } table.list_productdisplay tr td select{ margin-right: 3px; } table.list_productdisplay tr.list_view_description{ margin: 0px; padding: 0px; } table.list_productdisplay tr.list_view_description td{ margin: 0px; padding: 0px 3px 5px 3px; } table.list_productdisplay tr.list_view_description td div{ display: none; padding: 3px; } div.wpsc_loading_animation { margin-top: 3px; margin-left: 6px; float: left; } .list_productdisplay .wpsc_loading_animation { display: none; } /* * end list product display styling */ /* * loading indicator styling */ #loadingindicator{ visibility: hidden; font-size: 7pt; font-weight: normal; } #loadingindicator img{ position: relative; top: 3px; margin-left: 6px; /* visibility: hidden; */ border: none !important; } #alt_loadingindicator{ visibility: hidden; font-size: 7pt; font-weight: normal; } #alt_loadingindicator img{ position: relative; top: 3px; margin-left: 6px; /* visibility: hidden; */ border: none !important; } /* * end loading indicator styling */ div.select_country{ margin-bottom: 5px; } div.select_country input, div.select_country select{ vertical-align: top; _height: 20px; margin: 0px; } div.select_country form{ text-align: left; } form.wpsc_checkout_forms { text-align: left; } form.wpsc_checkout_forms .login_error { color:red; } td.shipping_error { color:red; } fieldset.wpsc_registration_form { border: none; text-align: left; margin: 0px; padding-left: 3px; } fieldset.wpsc_registration_form label { display: block; clear: left; float: left; width: 94px; } fieldset.wpsc_registration_form input { float: left; margin: 0px 0px 4px 0px; } table.wpsc_checkout_table input.text, table.wpsc_checkout_table textarea, table.wpsc_checkout_table select, fieldset.wpsc_registration_form input { margin-right:0; width:260px; font-family:"Verdana","Lucida Fax","Lucida Grande","Lucida Sans Unicode",Arial,sans-serif; font-size: 10pt; } table.wpsc_checkout_table select { width:271px !important; } tr.product_shipping td h2{ margin-bottom: 15px; margin-top: 5px; } div#homepage_products{ width:100%; } /* frontpage_product and category view styling */ div.frontpage_product{ width:auto; float: left; height: 260px; text-align: center; } div.frontpage_product a p{ margin-top: 0px; } div.frontpage_product a{ color: #333333 !important; font-weight: normal !important; } div.frontpage_product a img{ border: none; } div.frontpage_product img{ text-align: center; } div.frontpage_product span.front_page_price{ display: block; } /* Verify your Order styling */ table.productcart{ width: 100%; margin-top: 10px; margin-bottom: 10px; padding: 0px; border-collapse: collapse; padding-top: 3px; border: none; font-size: inherit; } table.productcart tr td{ padding-bottom: 5px; font-size: 11px; font-size: inherit; } table.productcart tr.product_row td{ padding-bottom: 5px; font-size: inherit; vertical-align: middle !important; } table.productcart tr.product_row td{ padding-bottom: 5px; font-size: inherit; vertical-align: middle !important; } form.adjustform{ display: inline; } table.productcart tr.firstrow td{ font-weight:bold; background-color: #e5e5e5; border-left: 2px solid white; } table.productcart tr.firstrow td.firstcol{ border-left: none; } table.productcart tr.product_shipping td{ vertical-align: middle; /* border-top: 1px solid #E1DAB7 !important; */ padding-top: 4px; } button.remove_button { margin: 0px !important; } #coupon_num{ width: 134px !important; } table.productcart tr.total_price td{ border-top: 1px solid #999999 !important; border-bottom: 1px solid #999999 !important; font-weight: bold; padding-top: 4px; } ul.checkout_links{ list-style-type: none; padding-left: 0px; } ul.checkout_links li{ list-style-type: none; margin-left: 0px; } ul.checkout_links li a{ color: #555555 !important; font-weight: normal !important; } ul.checkout_links li a:hover{ color: #000000 !important; } a.termsandconds { text-decoration: underline; } .validation-error input, .validation-error textarea { border: 1px solid red; } p.validation-error { color: red; margin-bottom: 0px; } /* end Verify your Order styling */ /* * category display styling */ /* override some styling in the default wordpress theme */ .wpsc_container .PeSwitcher ul li:before, .wpsc_container .PeCatsBrands ul li:before{ content: ""; } .wpsc_container .PeSwitcher ul li, .wpsc_container .PeCatsBrands ul li{ padding-left: 0px !important; margin-left: 0px; } .PeSwitcher ul{ padding-left: 0px; } .PeSwitcher ul li{ margin-left: 0px; } .category_brand_header{ list-style: none !important; } .category_brand_header li{ margin-left: 0px; } .category_brand_header li:before{ content: none !important; } #content .category_brand_header li a{ color: #333333; font-weight: bold; font-size: 11pt; } .PeCatsBrands ul{ padding-left: 0px; } .PeCatsBrands ul li{ margin: 0px 0px 0px 0px !important; } .PeCatsBrands ul.SubCategories{ /* margin: 0px; */ } .PeCatsBrands ul.SubCategories li{ margin-left: 1em; } ul.PeCategories{ margin: 0px; } .category_image{ float: left; } .widget h3.category{ margin-top: 0px; display: inline; } .category a{ color:#0066CC; } li.MainCategory strong.category{ margin-top: 5px; font-size: 8pt; } li.MainCategory strong.category a.productlink{ color:#0066CC; font-size: 8pt; } li.MainCategory strong.category a.productlink:visited{ color:#0066CC; } li.MainCategory strong.category a.productlink:hover{ color:#114477; } div.wpsc_container div.PeSwitcher ul{ list-style: none !important; list-style-type: none !important; } div.wpsc_container div.PeCatsBrands ul li{ list-style: none !important; list-style-type: none !important; } div.wpsc_container div.PeSwitcher ul{ list-style: none !important; list-style-type: none !important; } div.wpsc_container div.PeCatsBrands ul li{ list-style: none !important; list-style-type: none !important; } img.catimage{ float:left; position: relative; top: -3px; margin-right: 2pt; } strong.cattitles{ display: block; z-index:1; /* margin-bottom: -15px; */ } /* * end category display styling */ div.wpcart_gallery img { margin-right: 5px; margin-bottom: 5px; } /* * Fancy notification styling */ #fancy_notification{ position: absolute; top: 0px; left: 0px; background: #ffffff; border: 4px solid #cccccc; display: none; height: auto; z-index: 9; } #fancy_notification #loading_animation{ display: none; } #fancy_notification #fancy_notification_content{ display: none; width: 300px; padding: 8px; height: auto; text-align: left; margin: 0px !important; } #fancy_notification #fancy_notification_content span{ margin: 0px 0px 6px 0px; display: block; font-weight: normal; } #fancy_notification #fancy_notification_content a{ display: block; float: left; margin-right: 6px; margin-bottom: 3px; } /* * end Fancy notification styling */ table.logdisplay{ width: 100%; } table.logdisplay tr.toprow td{ text-align: center; font-weight:bold; } table.logdisplay tr.toprow2 td{ text-align: left; font-weight:bold; } table.logdisplay tr td{ padding-left: 5px; padding-top: 2px; padding-bottom: 2px;} table.logdisplay tr.alt{ background-color: #eeeeee; } table.logdisplay tr.alt td{ background-color: #eeeeee; } td.processed{ text-align: left; min-width: 140px; width: 140px; white-space: nowrap; } td.processed a{ border-bottom: none; } td.processed a img{ margin-left: 5px; } div#form_field_form_container{ padding: 0px; margin: 0px; } div#form_field_form_container div, div#form_field_form_container div table{ padding: 0px; margin: 0px; width: 100%; border-collapse: collapse; } div#form_field_form_container div table tr td{ padding: 0px; margin: 0px; } table.logdisplay td.details { padding: 0px; } div.order_status { border-bottom: 1px solid #eeeeee; display: none; width: 100%; text-align: left; padding:13px 8px 1px 9px; } div.order_status table { width: 97%; } div.order_status table.logdisplay{ margin: 4px 0px 4px 0px; } div.order_status table.customer_details { margin: 4px 0px 4px 0px; } div.order_status table.customer_details tr td { text-align: left; } div.order_status div{ width: 100%; padding:0px 0px 1ex 0px; display: block !important;} div.order_status ul{ list-style-type: none; margin: 1ex 0px 0px 0px; padding: 0px; } div.order_status ul li{ padding-left: 0px; } div.order_status ul li input{ margin: 0px 2px -2px 0px; } img.log_expander_icon { margin-right: 3px; } div.wpsc_page_numbers{ margin-bottom: 5px; } /* * checkout registration styling */ table.wpsc_checkout_table tr td{ text-align: left; } div#checkout_login_box{ display: none; /* border: 1px solid #339933; background-color: #e8fcea;*/ width: auto; padding: 5px 5px 5px 15px; margin: 20px 0px 0px 0px; clear: both; } div#checkout_login_box a{ clear: both; } div#checkout_login_box input.checkout_submit{ clear: both; } div#checkout_login_box form{ text-align: left; } #TB_window img#register_loading_img{ display: inline; border: none; margin: 0px 0px -10px 5px; padding: 0px; display: none; } /* * end checkout registration styling */ /* * single category view styling */ div.category_view_product{ width: 280px; float: left; text-align: left; margin: 0px 0px 10px 0px } div.category_view_product a img.product_image{ float: left; margin-right: 6px; } div.category_view_product div.product_details{ display: block; float: left; } div.category_view_product div.product_details form{ text-align: left; } /* * also bought product styling */ div.single_product_display div.producttext h2.wpsc_also_bought{ margin-top:12px; display: block; } div.wpsc_also_bought{ width: 100%; position: relative; margin: 0px 0px 0px 0px; } div.wpsc_also_bought_item{ float: left; margin: 0px 5px 0px 0px; } div.wpsc_also_bought_item a.preview_link{ display: block; margin-bottom: 3px; margin-left: 2px; height: 96px; width: 96px; } div.wpsc_also_bought_item img.product_image{ display: block; } div.wpsc_also_bought_item a.wpsc_product_name{ } div.wpsc_also_bought_item span.pricedisplay{ float: none; display: block; } /* * Stuff with multiple or miscellaneous uses */ strong.title{ font-size: 12.5pt; } a.categorylink{ font-size: 8pt; } span.pricedisplay{ /* white-space: nowrap; */ width: 80px; float:right; } td.totals{ vertical-align: bottom; } form#specials{ display: inline; } /* Modified By allen */ .autocompleter{ color: #000000; border: 1px solid #BBBBBB; width: 255px; background-color: #DDDDDD; } .autocompleter ul li{ cursor:pointer; padding: 2px 5px; font-family:Verdana, Arial, Helvetica, sans-serif; white-space: nowrap; } .selectAutocompleter{ cursor:pointer; background-color: #999999; color:#ffffff; } div#product_search{ position:relative; left:-100px; } table.products{ text-decoration:none; text-align:left; width:240px; table-layout:fixed; } td.product_img{ width:35px; } div.wpsc_product_search input.wpsc_product_search{ float: right; height: 19px; width: 110px; _width: 144px; font-size: 11px; margin: 2px 10px 0px 0px; padding: 2px 14px 0px 20px; background: url(../iShop/images/iShop_search.png) no-repeat; border: none; } div.wpsc_product_search .submit{ display: none; } div.wpsc_product_search{ background-color: #eff2f3; display: block; height: 22px; _height: 30px; padding: 4px; margin: 20px 0px 12px 0px; } table.productdisplay tr td { position: relative; } div.breadcrumb { margin: 0px 0px 10px 0px; } table.logdisplay { } select#current_country { margin-right:10px; width: 190px; } input#zipcode { margin: 0px; } /* End of modified By allen */ /* Verify your Order styling */ td.shipping_header { background-color:#E5E5E5; text-transform: uppercase; font-weight:bold; } /* Main Flora Style Sheet for jQuery UI ui-datepicker */ #ui-datepicker-div, .ui-datepicker-inline { font-family: Arial,Helvetica,sans-serif; font-size: 14px; padding: 0; margin: 0; background: #E0F4D7; width: 185px; } #ui-datepicker-div { display: none; border: 1px solid #FF9900; z-index: 10; } .ui-datepicker-inline { float: left; display: block; border: 0; } .ui-datepicker-rtl { direction: rtl; } .ui-datepicker-dialog { padding: 5px !important; border: 4px ridge #83C948 !important; } button.ui-datepicker-trigger { width: 25px; } img.ui-datepicker-trigger { margin: 2px; vertical-align: middle; } .ui-datepicker-prompt { float: left; padding: 2px; background: #E0F4D7; color: #000; } *html .ui-datepicker-prompt { width: 185px; } .ui-datepicker-control, .ui-datepicker-links, .ui-datepicker-header, .ui-datepicker { clear: both; float: left; width: 100%; color: #FFF; } .ui-datepicker-control { background: #FF9900; padding: 2px 0px; } .ui-datepicker-links { background: #E0F4D7; padding: 2px 0px; } .ui-datepicker-control, .ui-datepicker-links { font-weight: bold; font-size: 80%; letter-spacing: 1px; } .ui-datepicker-links label { padding: 2px 5px; color: #888; } .ui-datepicker-clear, .ui-datepicker-prev { float: left; width: 34%; } .ui-datepicker-rtl .ui-datepicker-clear, .ui-datepicker-rtl .ui-datepicker-prev { float: right; text-align: right; } .ui-datepicker-current { float: left; width: 30%; text-align: center; } .ui-datepicker-close, .ui-datepicker-next { float: right; width: 34%; text-align: right; } .ui-datepicker-rtl .ui-datepicker-close, .ui-datepicker-rtl .ui-datepicker-next { float: left; text-align: left; } .ui-datepicker-header { padding: 1px 0 3px; background: #83C948; text-align: center; font-weight: bold; height: 1.3em; } .ui-datepicker-header select { background: #83C948; color: #000; border: 0px; font-weight: bold; } .ui-datepicker { background: #CCC; text-align: center; font-size: 100%; } .ui-datepicker a { display: block; width: 100%; } .ui-datepicker-title-row { background: #B1DB87; color: #000; } .ui-datepicker-title-row .ui-datepicker-week-end-cell { background: #B1DB87; } .ui-datepicker-days-row { background: #FFF; color: #666; } .ui-datepicker-week-col { background: #B1DB87; color: #000; } .ui-datepicker-days-cell { color: #000; border: 1px solid #DDD; } .ui-datepicker-days-cell a { display: block; } .ui-datepicker-week-end-cell { background: #E0F4D7; } .ui-datepicker-unselectable { color: #888; } .ui-datepicker-week-over, .ui-datepicker-week-over .ui-datepicker-week-end-cell { background: #B1DB87 !important; } .ui-datepicker-days-cell-over, .ui-datepicker-days-cell-over.ui-datepicker-week-end-cell { background: #FFF !important; border: 1px solid #777; } * html .ui-datepicker-title-row .ui-datepicker-week-end-cell { background: #B1DB87 !important; } * html .ui-datepicker-week-end-cell { background: #E0F4D7 !important; border: 1px solid #DDD !important; } * html .ui-datepicker-days-cell-over { background: #FFF !important; border: 1px solid #777 !important; } * html .ui-datepicker-current-day { background: #83C948 !important; } .ui-datepicker-today { background: #B1DB87 !important; } .ui-datepicker-current-day { background: #83C948 !important; } .ui-datepicker-status { background: #E0F4D7; width: 100%; font-size: 80%; text-align: center; } #ui-datepicker-div a, .ui-datepicker-inline a { cursor: pointer; margin: 0; padding: 0; background: none; color: #000; } .ui-datepicker-inline .ui-datepicker-links a { padding: 0 5px !important; } .ui-datepicker-control a, .ui-datepicker-links a { padding: 2px 5px !important; color: #000 !important; } .ui-datepicker-title-row a { color: #000 !important; } .ui-datepicker-control a:hover { background: #FDD !important; color: #333 !important; } .ui-datepicker-links a:hover, .ui-datepicker-title-row a:hover { background: #FFF !important; color: #333 !important; } .ui-datepicker-multi .ui-datepicker { border: 1px solid #83C948; } .ui-datepicker-one-month { float: left; width: 185px; } .ui-datepicker-new-row { clear: left; } .ui-datepicker-cover { display: none; display: block; position: absolute; z-index: -1; filter: mask(); top: -4px; left: -4px; width: 193px; height: 200px; } .checkout_forms_hidden { display: none; } div.custom_meta { clear: both; } div.wpsc_category_details { margin: 0px 0px 8px 0px; } div.wpsc_category_details img { float: left; margin: 0px 6px 12px 0px; } div.wpsc_page_numbers a.selected { text-decoration: underline; } #products_page_container .wpsc_category_grid { width: 50%; } .wpsc_category_grid a.wpsc_category_grid_item { display: block; margin: 0px 7px 7px 0px; float: left; } /* Widget CSS */ .shopping-cart-wrapper form { clear: right; } /*span.pluspostagetax { float: right; }*/ .widget_wpsc_categorisation .wpsc_categorisation_group { width:100%; float:right; margin-bottom:10px; position:relative; } .clear_category_group { clear: both; } .widget_wpsc_categorisation h4.wpsc_category_title { margin-top: 4px; } .widget_wpsc_categorisation ul.wpsc_top_level_categories { } .widget_wpsc_categorisation ul.category_images li { background: none !important; clear: both; } .widget_wpsc_categorisation ul.category_images li:before{ content: "" !important; } .widget_wpsc_categorisation ul.category_images .wpsc_category_image_link { margin: 0px 0px 4px 0px; float: left; font-size: 9px; font-weight: normal; } .widget_wpsc_categorisation ul.category_images a.wpsc_category_link { display: block; margin: 3px 0px 0px 4px; float: left; } .list_productdisplay .alt { background-color: rgb(238, 238, 238); } .category-product-list { display: none; } #content .widget_specials strong a.wpsc_product_title { font-weight: bold; } .widget_specials span.pricedisplay { float: none; } /* post-content */
In IE6 (only) my price tag images have gaps. I have attached a screen shot of my homepage in IE6. {well can't add an image because I cannot post my url} Here is the code: #switcher .active { margin-top: 6px; } #switcher a.product { position: relative; display: block; } #switcher a.product span.tag { color: #ffffff; font-size: 22px; position: absolute; top: 5px; left: -23px; display: block; background: url(images/featured-small-tag.png) no-repeat bottom right; padding-right: 11px; } #switcher a.product span.tag span { display: block; background: url(images/featured-small-tag.png) no-repeat; padding-left: 9px; height:36px; padding-top: 9px; } Your help would be greatly appreciated. I'm using margin:auto; to center my pages. I've got an image on the left side, so I pad the write and then do the center on teh whole container. It works great all the pages of my site except for one. http://www.sexy-tan.com but when you go to the cart page to view your cart http://www.sexy-tan.com/cart/cart.php it breaks and the page floats left. I"m using the EXACT same css for all the pages and the same layout, I"ve copy and pasted a working hierarchy from another page and still no dice. Any ideas? Also, it works just fine in firefox, but messes up only in IE. I am trying to create a simple horizontal list menu on this page.(link: http://northshorewebdesign.net/testsite/) This is the menu under the slideshow. When I add the menu, the menus above get messed up. I tried changing margin, padding etc but the other menus get mesed up. The site looks ok in IE but it looks bad in FF and Opera. Here's what I am trying to achieve(Link: http://webone.mcaec.org/wordpress/) Here's the code I'm using: Code: .homepage-sub-menu {width: 960px; height: 70px; background-color:#00CCFF; position: relative;}
.homepage-sub-menu ul {list-style-type: none; margin: 0; padding: 0; overflow: hidden;}
.homepage-sub-menu li {float: left;}
.homepage-sub-menu li a:link,a:visited {display: block; width: 192px; font-family:Calibri, Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; padding-top: 10px;}
.homepage-sub-menu li a:hover {text-decoration: underline;}
Any help or suggestions would be appreciated Hi all, I am having an issue with IE7. www[dot]novakwebsales[dot]com/help/index6.html When you hover over the top category tabs, it shifts the footer up. Then if you hover over the subcategory tabs on the left it drops down again??? It works fine in Firefox... Any ideas? Thanks in advance, Tbone Hello, I am working on a site. theweedkiller dot com I have 3 links which are being laid out using a <ul> The problem is the margin between home and service is fine, but the margin between services and contact seems to be double the size. I have tried adding display:inline; and it seemed to do nothing. I am getting this problem in Chrome, Firefox, and IE8. I am using a CSS reset too. Heres is the HTML I am using - <div id="nav"> <ul> <li> <a href="index.html" id="current">Home</a> </li> <li> <a href="services.html">Service</a> </li> <li> <a href="contact.html">Contact</a> </li> </ul> </div> <!--end of nav div--> Heres is the CSS I am using - #nav ul { margin-left:370px; list-style-type:none; } #nav ul li { float:left; display:inline; } #nav ul li a { font-family:"Myriad Pro", Arial, sans-serif; font-size:20px; font-weight:bold; color:#302013; padding:25px 50px 5px 50px; background-image:url(images/nav.png); background-repeat:no-repeat; text-decoration:none; display:inline; margin-right:10px;!important } #nav ul li a:hover { font-family:"Myriad Pro", Arial, sans-serif; font-size:20px; font-weight:bold; color:#fff; background-image:url(images/nav-over.png); background-repeat:no-repeat; text-decoration:none; } #nav #current { font-family:"Myriad Pro", Arial, sans-serif; font-size:20px; font-weight:bold; color:#fff; background-image:url(images/nav-over.png); background-repeat:no-repeat; text-decoration:none; } I have no clue why this is happening. Any help would be useful. Thanks! I am trying to center the blocks into the middle of the page but all the traditional methods seem to be failing. I've tried centering the body, making a wrapper and aligning and many other methods but the page still clings to the left of the page. If anyone could give help it would be appreciated. It probably requires the most simple of solutions but, as a relatively new user of CSS, even these seem to be hard to discover... CSS Code Code:
/* Usual Selectors */
div.wrapper {
margin-left: auto;
margin-right: auto;
height: 100%;
text-align: center;
}
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #FFFFFF;
background-color: #000000;
text-align: center;
}
p {
width: 100%;
text-align: left;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #FFFFFF;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
border-bottom: 1px solid #E0E0E0;
}
/************************* Identification *************************/
#header {
position: absolute;
width: 950px;
height: 46px;
margin: 0;
margin-top: 50px;
padding: 0 0 50px 0px; /*top right bottom left*/
text-align: left;
}
#footer {
width: 950px;
text-align: center;
}
#t_navigation {
position: absolute;
z-index: 10;
width: 50%;
height: 50px;
margin: 0;
margin-top: 68px;
padding: 0 0 50px 250px; /*top right bottom left*/
font-weight: normal;
text-align: left;
}
#search_frame {
position: absolute;
z-index: 10;
margin: 0;
margin-top: 35px;
padding: 0 0 0 250px; /*top right bottom left*/
width: 740px;
text-align: left;
}
#search_box {
background-color: #FFFFFF;
height: 28px;
text-align: left;
}
#search_box #s {
float: left;
padding: 0;
margin: 6px 0 0 6px;
border: 0;
background-color: #FFFFFF;
font-color: #000000;
width: 70%;
text-align: left;
}
#search_box #go {
float: right;
margin: 3px 4px 0 0;
font-color: #000000;
text-align: left;
}
#l_navigation {
position: absolute;
z-index: 10;
width: 210px;
height: 600px;
margin: 0;
margin-top: 100px;
padding: 0 0 50px 0px; /*top right bottom left*/
border-right: 1px solid #E0E0E0;
font-weight: normal;
text-align: left;
}
#centerDoc {
position: absolute;
z-index: 15;
padding: 0 0 50px 250px; /*top right bottom left*/
margin-top: 100px;
margin-right: 10%;
text-align: left;
width: 740px;
}
Thanks. well i have totally redesigned my orginal page due to problems with IE browser-- i am now using a two column template and have copied code exactly-- had both XHTML and CSS verified with the W3C validator and they both check out to be ok-- the page is NOT showing up properly at all-- i am using FIREFOX as browser and i am wondering if i have now traded one problem for another i would sure appreciate it if someone would just go and look at page to see if it shows up right in another browser- THE PAGE also here is the url for the CSS CODE here is link to how page is supposed to look-- CORRECT VIEW if the page is not right in FOX does anyone know a work around to make it right?????? UGH UGH THIS IS SO FRUSTRATING thanks in advance-- Hi guys, I have a problem that really bugs me and I'm probably not seeing the super-easy simple solution that is certainly there. s369533597(dot)onlinehome(dot)us s369533597(dot)onlinehome(dot)us(slash)templates(slash)edison(slash)css(slash)template(dot)css and art.sheet is the tag. (site build on joomla 1.6) If your browser window will show more than 900px in height you'll see immediately my problem. the "body content" area will resize to the window height and not to the amount of content in it leaving a lot of blank space depending on the browser window height. I've tried all the min-height and height options and combinations but nothing really works. If I'll set up a particular height for that tag it will be OK for the home page but on any other page the overflow look awful. I just can't make it fluid. any advise? Hi friends, I'm trying to center this page with CSS, but no idea where my code is wrong? in screen resolution 800 it looks fine but in 1024 and above it remains on left side of the page. Here is a page url http://gooo.ueuo.com/ and CSS code is given below. Code:
<style type="text/css">
#container{
margin-left: auto;
margin-right: auto;
}
#logo {
position:absolute;
left:-1px;
top:-2px;
width:200px;
height:60px;
background-color: #003399;
}
#description {
position:absolute;
left:19px;
top:140px;
width:760px;
height:530px;
z-index:1;
}
#Layer5 {
position:absolute;
left:243px;
top:151px;
width:395px;
height:45px;
z-index:4;
}
.style2 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #990066;
font-size: 18px;
}
#paragraph {
position:absolute;
left:243px;
top:206px;
width:397px;
height:200px;
}
.style3 {font-family:Verdana, sans-serif;
font-size: 11px;
color:#000000;
line-height: 18px;
padding: 6px;
}
#system {
position:absolute;
left:29px;
top:379px;
width:200px;
height:80px;
z-index:5;
}
.style4 {
font-family: Verdana, sans-serif;
font-size: 12px;
}
.style5 {font-size: 10px;}
.style6 {font-size: 10px;}
#footer {position:absolute;
left:0px;
top:680px;
width:799px;
height:175px;
background-color:#0D75D2;
}
.style7 {
font-family: Verdana, sans-serif;
font-size: 10px;
list-style-type: none;
}
.style9 {
font-family: Verdana, sans-serif;
font-size: 11px;
}
.style10 {
font-weight: bold;
font-size: 14px;
font-family: Verdana, sans-serif;
color: #990066;
}
</style>
Hi All, I think the following is a css problem that I have tried to solve but without success and cause a markup validation error that I can't get rid of. Here you can see the original problem simonedegan.net/index_III.html which I tried to correct (see he simonedegan.net) but when I go to validate the code I have the following errors: Line 92, Column 24: ID "flashcontent" already defined. <div class="style4" id="flashcontent">This SlideShowPro photo gallery requires t Line 88, Column 24: ID "flashcontent" first defined here. <div class="style3" id="flashcontent"> Originally I changed the padding from 15px to 200px to allow a proper alignment of the words in the parent pages (e.g. simonedegan.net/news.html). If it is the case how can I create a 'rule' with the padding of 15px on the left only for the main page where the flash instance is (i.e. simonedegan.net) without affecting the parent pages? Many thanks for helping P.S.: my apologies to the moderator for the links. I did not know how to post the questions without URLs so I removed the initial http://. Again my apologies. Hello, Is there a way to stop an expanding page at a certain width? But yet keep the expanding feature? Right now as you can see from the below website that I am working on the page contracts and the images of course stay at there minimum width but the rest of the page keeps contracting...I don't like it doing that. Any ideas? web.bpro.com/agagency/index.htm Hi I have a page I am putting together and everything is fine until I take off js in ff. Then I get this small gap between the code thats would have gotten replaced by flash if js was enabled. Its right below the menu. If you could take a look at http://www.bostonredhat.com/menu.php with js enabled and with it disabled for me and let me know if you see any problems I am missing I would appreciate it. Thanks. Hi, I'm having a problem with Firefox and a print-friendly stylesheet. Basically, I'm printing out a load of images - 9 per page, in 3 rows of 3. After 9 images, I'm printing a <div style="page-break-after:always;"></div> However, the problem I'm getting is that the 10th image, which appears at the top left of the next page, is missing. All of the other images on the page print, apart from that one. Has anyone else had the same problem, and is there a way around it. Other threads I've Googled suggest it's a bug in CSS2, but my boss/client won't accept that as an answer! Thanks in advance, Psycle I have an internal document that depends on page-break-after to separate the pages when it is printed. The attribute page-break-after:always had been working just fine. Now, I've noticed it is getting ignored on some users machines that have updated to IE8. I've never seen this problem in IE7 or Firefox, and I've also seen it work at times on IE8, though rarely. For the most part, users on IE8 are getting a document that treats it as only one page and will only print that first of 14 pages. Does anyone know about problems with this attribute in IE8 and what might need to be done to fix it. I am building a new page and I'm having problem having this space on top of it. here's the situation. All Divs are inside a Parent Div called Container. This div has the following qualities: body { margin-top: 0; padding-top: 0; background-image: url(images/bg.gif); background-repeat: repeat-x; background-attachment: fixed; background-color:#003366; font-family:Arial, Helvetica, sans-serif; } #container { position:relative; width:1000px; height: 1250px; top: 0; margin-left: auto; margin-right: auto; margin-top: 0; border: 1px black solid; z-index: 3; } If I remove the container Div and just have the child Divs then the space on top disappears and the page goes to the top, however it gets aligned to the left. As you can imagine what I want is the page both centered and on top, so I'm pretty much working with the files that have the container, so that's why I'm trying to fix either I'm assuming there is an issue with the CSS of the menu, because it's the only rare addition apart from the normal CSS. If I do in the main parent container position:absolute instead of relative. it then goes to the top, but it's not centered. I've been working on this all day long but can't figure out a solution, if you can please help me out. I have done alot of changing around settings, sizing from absolute to relative, margins to widths, and i still cant figure out what is urking my page when loaded from mozilla-firefox and netscape. The page works fine when used with Internet Explorer. Does anyone have a chance to take a look at it here at <a href> www.wolfdogg.soldierlink.com/html using Firefox and IE? style sheet is at <a href> http://www.wolfdogg.soldierlink.com/main-reworked.css or would you prefer i post the code is there actually a website that i can go to that will have a list of the extra styles that firefox and netscape needs that are automatic and uneccesary on internet explorer? Thanks a bunch, WolfDogg I am testing a three column layout with a header and a footer using only CSS. Ordinarily it works fine but when the center column has less height than the left or right columns (due to amount of content in each) then the footer overlaps the left or right column as it positions itself to just below the center column. Can anyone figure out why? I am baffled since the footer has an absolute position of left: 0px and bottom: 0px; Here is my HTML: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>page title</title>
<style type="text/css">
body {
margin:0px;
padding:0px;
height: 100%;
}
.left-col {
position: absolute;
width: 150px;
top: 130px;
left: 0px;
padding-left: 3px;
z-index: 2;
}
.right-col {
position: absolute;
width: 150px;
top: 120px;
right: 0;
padding-right: 3px;
z-index: 1;
overflow: hidden;
clear: both;
}
.center-col {
position: relative;
min-width: 300px;
min-height: 100%;
height: 100%;
z-index: 3;
top: 140px;
margin: 0px 160px 150px 170px;
text-align: left;
padding:5px;
}
.heading {
position: absolute;
left: 0px;
top: 0px;
}
.footer {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 0px;
z-index: 3;
padding-top: 25px;
margin: 0px;
display: block;
}
.footer-bar {
width: auto;
padding:10px 3px 3px 0px;
clear: both;
background-color: gray;
vertical-align: bottom;
text-align: center;
}
</style>
</head>
<body>
<div class="center-col">
center content<br />
center content<br />
center content<br />
center content<br />
</div>
<div class="left-col">
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
</div>
<div class="right-col">
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
</div>
<div class="heading">
head content
</div>
<div class="footer">
<div class="footer-bar">page bottom</div>
</div>
</body>
</html>
I've been tweaking a bit of the site I edit for Oxford Hash House Harriers (search Google for Oxford Hash House Harriers and our site will appear at the top) and trying to get a blue bar for the left and right side bars all down the page, which I've now succeeded in doing, however in my changes something has changed because now there is a large gap between any content and a table but only in some browsers. The tables are used for actual data, not for layout. I use CSS and <div> for layout. The layout is along these lines: Code: <body> <div id="page"> <div id="banner"> <div id="leftlogo"> <!-- logo here --> </div> <div id="rightlogo"> <!-- logo here --> </div> <div id="oh3banner"><p class="pagetitle">Oxford H3</p></div> </div><!-- close div banner --> <div id="mainbody"> <div id="wrap1"> <div id="wrap2"> <div id="leftnavigation"> </div><!-- close div leftnavigation --> <div id="rightnavigation"> </div><!-- close div rightnavigation --> <div id="content"> <h1>Oxford Hash House Harriers</h1> <h2>Oxford H3 Hash Diary </h2> <div id="hashdiary"> <table summary="Oxford H3 Run Diary"> <caption>Forthcoming Oxford H3 Hashes</caption> <colgroup> <col id="date" /> <col id="postcode" /> <col id="venue" /> <col id="hare" /> <col id="beermaster" /> <col id="chef" /> <col id="run" /> </colgroup> <thead> <tr> <th scope="col">Date</th> <th scope="col">Post Code & Grid Ref.</th> <th scope="col">Venue</th> <th scope="col">Hares</th> <th scope="col">Beer Master</th> <th scope="col">Chef</th> <th scope="col">Run#</th> </tr> </thead> <tbody> <tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr> </tbody> </table> </div> </div><!-- close div content --> </div> <!-- close div wrap1 --> </div> <!-- close div wrap2 --> </div> <!-- close div mainbody --> </div><!-- close div page --> </body> Whilst the relevant (I think) parts of the CSS look like this: DIV#page{ margin-top: 0px; } DIV#banner{ width:100%; background-color : #06168a; height : 130px; margin-left : 0px; margin-top: 0px; position : absolute; top: 0px; float : none; } DIV#oh3banner{ clear : none; background-image : url('images/oxfordh3banner.jpg'); background-repeat : no-repeat; height : 110px; margin-top: 10px; background-position : center; } DIV#mainbody{ margin-top: 130px; } DIV#wrap1{ background-color : #06168a; } DIV#wrap2{ background-color : #06168a; } DIV#leftnavigation{ width:15%; background-color : #06168a; margin-left : 0%; float: left; } DIV#rightnavigation{ width:15%; background-color : #06168a; margin-right : 0%; margin-left : 3%; float: right; } DIV#content{ width:auto; margin-left : 15%; margin-right: 15%; padding-left: 5px; padding-right: 5px; background-color: White; } I found to begin with that there was a very large gap between the table and any content on the page in all browsers until I put a <div> </div> around the actual table itself. When I did this the page looks okay in Firefox and Safari, but still looks incorrect in Internet Explorer and Chrome. It looks to me as if the table is being pushed below the content in the right sidebar in IE or the left sidebar in Chrome for some reason. I've been messing about for a while now trying to get this to work but without success. Can anybody spot where I'm going wrong? Regards, James |
|||||||