|
CSS - Pulling My Hair Out
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. Similar TutorialsI 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! Hi 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 */
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; } I'm new to css and have been impressed with the way you can make style changes to a whole site by just altering one stylesheet (if you've set if up right). My question is, can css or xhtml be used to do that with content? I want to create a site with a Nav column floated on the left hand side of every page, but I'm worried I'd have to change hundreds of pages if i ever added/altered the column. Is there any way I can get every page to pull a table/other-xhmtl from one source, maybe by putting something in the stylesheet? Thanks. So I'm trying to pull info from a mysql DB and display the contents to a page. Basically, the database has 35 products which I want to display in rows of 5 with the image showing, and right beneath, the title of the product. I'm trying to use divs to display these items one after another, until it counts to 5 and then starts a new line. I'm not sure what I'm doing wrong (or missing), but on the 1st row (and various other rows, there are 5 per row.. However, there are other rows that will show any other number of items... mostly right justified. I'm sure this will be simple enough of a solution, but here's what I've been using: PHP Code: $sql = "SELECT * FROM `products`"; $result = mysql_query($sql, $conn) or die(mysql_error()); $i == 0; while($row = mysql_fetch_array($result)) { extract($row); $i ++; $image_loc = "images/products/" . $image; $j = $i/5; $display .= "<div style=\"width:150px; float:left; padding-bottom:60px; padding-left:15px; padding-right:15px;\"><img src=\"".$image_loc . "\" style=\"width:100px;\"><br />" . $item_name . "</div>"; if (is_int($j)) { $display .= "<div clear:both;></div>"; } else { } } I have tried with and without the if statement, and with/without the clear:both. The if statement is there to determine if the count has gotten to 5 so that it can start a new line. Thanks. Hey, everyone. Currently I have a 4 column layout contained in a fixed with, centered container div. This is behaving perfectly, but I'd like the ability to add content inside a div, spanning the width of the first two columns without pushing the last two onto a new line lines. Any Ideas? Thanks. Example: Here is the code I have so far: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>3 Contained Column Skeleton.</title>
<style type="text/css">
body
{
margin: 0; /* asthetic */
padding: 0; /* asthetic */
background-color: gray; /* asthetic */
}
#top
{
width: 955px; /* core structure */
margin: 0 auto; /* core structure */
}
#bottom
{
clear: both; /* core structure */
width: 955px; /* core structure */
margin: 0 auto; /* core structure */
}
#content
{
width: 955px; /* core structure */
margin: 0 auto; /* core structure */
overflow: hidden; /* core structure */
}
#content .column
{
float: left; /* core structure */
width: 260px; /* core structure */
padding-bottom: 20010px; /* core structure */
margin-bottom: -20000px; /* core structure */
position: relative;
border-right: 5px solid yellow; /* asthetic */
}
/** This is just a skinny column with no border-right **/
#content .skyscrape
{
float: left; /* core structure */
width: 160px; /* core structure */
padding-bottom: 20010px; /* core structure */
margin-bottom: -20000px; /* core structure */
position: relative;
}
#content .skyscrape img
{
border: none; /* asthetic */
}
</style>
</head>
<body>
<div id="top" style="background-color: purple">
HEADER
</div>
<div id="content">
<div style="background-color: brown">
<img style="border:1px solid yellow;border-right:4px solid yellow;" src="http://img120.imageshack.us/img120/1418/imgou3.gif" alt="image" />
<p style="width:523px;margin:0;padding:3px;background-color:white;">
Etiam mattis. Sed gravida gravida massa. Etiam posuere est sed orci! Curabitur porttitor egestas turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed magna.
</p>
</div>
<div class="column" style="background-color: pink;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin faucibus justo a tellus. Donec quis tortor? In bibendum pretium metus. Vestibulum vehicula risus a enim. Cras libero lacus; egestas in, commodo eget, dictum eu, mi! Proin eget erat. Nullam elementum dignissim leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque enim erat, adipiscing nec, lacinia a, porta in, ipsum.
</p>
<p>
Curabitur quam risus, condimentum ut, viverra vestibulum, pulvinar a, lorem? Duis dolor. Suspendisse nibh. Donec eu sapien. Proin ornare nulla et nibh! Morbi nunc felis, tristique et, cursus non, mollis eget, sapien. Quisque tristique ante vitae pede. Ut venenatis commodo velit. Curabitur dignissim enim eget ante. Donec nisl? Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<p>
Duis in dolor. Vestibulum venenatis. Integer vulputate odio vel nisl. Proin malesuada tellus sed sapien pharetra blandit. Curabitur eget nibh sit amet odio mattis condimentum. Aliquam erat volutpat. Vivamus blandit accumsan nibh. Nulla imperdiet aliquet leo. In nulla. Maecenas sed erat sit amet diam venenatis pharetra. Pellentesque egestas nisl a est! Suspendisse vulputate viverra felis. Pellentesque malesuada rhoncus augue. Cras id mi at magna aliquam mattis. Cras elementum lacus at diam. Suspendisse id nunc sed nunc semper laoreet. Pellentesque suscipit, pede et ultricies ullamcorper, dolor felis tincidunt ipsum, quis ullamcorper purus diam vitae nisl! Etiam congue interdum ipsum. Donec eros nisl, pulvinar ultricies; semper id, bibendum eu, enim! Nulla scelerisque ornare purus!
</p>
</div>
<div class="column" style="background-color: orange">
<p>
Sed nec risus. Praesent sit amet enim. Cras sed ipsum a dui vehicula luctus. Ut dui. Quisque pulvinar elementum odio. Integer non sapien! Nam tincidunt velit non sem. Suspendisse sollicitudin, nisi varius vulputate volutpat, tellus erat volutpat pede, quis luctus mauris lorem sit amet augue. Quisque placerat turpis eu erat. Donec posuere ultricies orci. Sed vitae ligula. Phasellus quis ipsum. Nam et eros. Vivamus risus libero; vehicula eu, convallis non, adipiscing vitae, velit! Integer faucibus lorem et augue! Duis consequat mauris. Sed sed nibh quis nisi accumsan ornare. Praesent lectus. Aenean consequat augue sit amet purus.
</p>
<p>
Cras eu augue a elit auctor congue. Curabitur a enim ut turpis placerat porta? Suspendisse eu urna. Vestibulum tincidunt aliquam augue. Pellentesque vel urna. Phasellus euismod turpis in purus. Vivamus viverra, magna eget egestas aliquet, libero libero venenatis mauris, non laoreet purus pede blandit massa. Quisque pulvinar tempus metus! Nullam metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque enim nibh, interdum eu, gravida eu, tristique id, elit. Fusce quis odio? Nam dui. Duis a ante eget lorem mattis euismod. Morbi non lectus. Vestibulum aliquet risus porttitor tortor. Nam ultrices.
</p>
<p>
Sed sed turpis et velit facilisis viverra. Nam adipiscing metus commodo diam. Aenean placerat viverra tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer elementum libero et ipsum rhoncus egestas. Vivamus felis. Fusce dapibus, quam in sagittis ullamcorper, pede tortor iaculis nibh, at pharetra ante massa quis elit. In condimentum, neque et ultricies gravida, dolor est bibendum metus, in cursus sapien quam at erat. Etiam condimentum. Suspendisse fermentum. Vestibulum ullamcorper rutrum urna. Sed convallis, sapien quis sagittis porttitor, enim tortor mattis lacus, vitae interdum neque urna ut purus. Duis porta tincidunt orci. Maecenas porta ullamcorper magna! Sed eu est vel felis tincidunt dictum! Nullam vitae neque ac arcu porttitor convallis? Phasellus gravida rutrum tellus. Donec quis nisl.
</p>
</div>
<div class="column" style="background-color: blue">
<p>
Ut ultrices ultrices nisi. Sed ultrices ultricies lectus. Proin est. Integer massa. Cras imperdiet! Sed ante? Aliquam in urna. Pellentesque iaculis, magna ut ullamcorper sagittis, urna ante aliquet enim, et convallis erat elit et turpis. Integer interdum mauris in augue. Integer velit dolor, pharetra et, mattis sed, cursus eget, arcu. Phasellus facilisis, ante et bibendum ullamcorper, arcu elit fringilla augue, quis pellentesque nibh dolor in metus. Duis venenatis felis quis est. Vestibulum tristique porta nibh! Nulla vitae leo vel diam molestie venenatis. Cras a mi id sem volutpat convallis.
</p>
<p>
Nunc imperdiet vulputate arcu. In venenatis mauris at nunc dignissim euismod. Integer mattis. Etiam pede purus, imperdiet non; molestie quis, lobortis ut, risus. Ut quis eros. Pellentesque elementum vulputate urna! Praesent ac mi. Duis felis lectus, vestibulum ac, posuere vitae, dignissim id, leo. Sed nisl lectus; consequat vel, consectetur in, mattis id, dui. Maecenas quis dolor. Proin eu dui. Aenean interdum? Donec vel pede vel mauris laoreet lobortis. Integer vehicula, neque nec elementum posuere, magna erat tristique tellus, eu consectetur leo magna vitae eros. Quisque erat pede, lobortis id, gravida non, pretium id, enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras lacus nibh, semper non, laoreet quis, placerat in, ante. Vivamus porttitor eros et erat.
</p>
<p>
Aenean eget orci non orci vulputate sodales. Cras pede sapien, scelerisque ac, dapibus in, aliquam sit amet, sem. Donec feugiat. Duis aliquam mauris vel erat. Integer quam. Pellentesque vitae lacus! In molestie augue id nibh. Curabitur non leo non metus convallis molestie! Curabitur imperdiet. Etiam laoreet rhoncus nisi. Maecenas pharetra lorem iaculis dui. Ut eu est sed eros feugiat malesuada! Nullam sit amet purus vitae eros posuere aliquam.
</p>
</div>
<div class="skyscrape" style="background-color: lightgrey;">
<a href="#"><img src="http://img515.imageshack.us/img515/7244/img2bk8.gif" alt="image"/></a>
<a href="#"><img src="http://img530.imageshack.us/img530/6606/img3mm0.gif" alt="image"/></a>
</div>
</div>
<div id="bottom" style="background-color: purple">
FOOTER
</div>
</body>
</html>
|
|||||||