|
CSS - Help With Margin Issue (i Am Pulling My Hair Out!))
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! Similar TutorialsI'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 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've been looking through many, many forums trying to resolve this issue, so please forgive me if there is a solution to this that I've missed. Here's the deal: On some installs of Firefox (4.0), the body is being positioned 28px lower than the top of the screen. I set the <html> tag to have a light blue background to troubleshoot the issue, and now there is a light blue bar across the top of the page, proving that it is the body of the page that is lower than it should be. I thought it was a Firefox "collapsing margin" issue, so I added "margin:0; to almost everything, and it didn't help. I'm trying to do this without having to absolutely position everything. Here's the site: www-dot-myportlandtours-dot-com here's the css: www-dot-myportlandtours-dot-com/wp-content/themes/myportlandtours/style.css Anybody have insight into this? Background info: - I have validated the page and CSS, no problems there - Site is working properly in Firefox and IE, seems to be a margin issue in Safari -This margin issue is not the common Safari bug with a negative margin being applied to a floated element -I am using Safari in a windows environment, I do not have a Mac The problem: -in Safari the top margin on the content either is either not being applied at all or is being interpreted differently -it may be of note that I was having the same issue with IE, but was able to specify an IE specific style sheet for it, I don't believe this is possible in Safari? The website: http://www.lisa-noble.com/test/redo.html The HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Site Test</title>
<link rel="stylesheet" type="text/css" href="redo.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
</head>
<body>
<div id="top_filler">
</div>
<div id="left_filler">
</div>
<div id="right_filler">
</div>
<div id="top_left">
</div>
<div id="header">
</div>
<div id="top_right">
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Etc, etc, etc....</p>
</div>
<div id="bottom_filler">
</div>
<div id="bottom_left">
</div>
<div id="bottom_right">
</div>
</body>
</html>
The CSS Code: * {
margin: 0;
padding: 0;
}
body {
background: #fdd9e9;
}
div#top_filler {
background: url(images/bg_slice_sm.png) repeat-x;
width: 100%;
height: 164px;
position: fixed;
top: 0px;
z-index: 5;
}
div#left_filler {
background: url(images/left_slice_sm.png) repeat-y;
width: 174px;
height: 100%;
position:fixed;
left:0px;
z-index: 5;
}
div#right_filler {
background: url(images/right_slice_sm.png) repeat-y;
width: 161px;
height: 100%;
position:fixed;
right: 0px;
z-index:5;
}
div#bottom_filler {
background: url(images/bottom_slice_sm.png) repeat-x;
width: 100%;
height: 76px;
position: fixed;
bottom: 0px;
z-index: 5;
}
div#header {
position: fixed;
top: 0px;
left: 37%;
height: 125px;
width: 316px;
margin: 0 auto;
background: url(pink_logo2.png) no-repeat;
z-index: 25;
}
ul.NoBulletNoIndent {
list-style-type: none;
margin-left: 0px;
padding-left: 0px
}
div#top_left {
height: 314px;
width: 221px;
background: url(images/left_top_corner_sm.png) no-repeat;
position: fixed;
top: 0px;
left: 0px;
z-index: 5;
}
div#bottom_left {
height: 175px;
width: 176px;
background: url(images/left_bottom_corner_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
left: 0px;
z-index: 5;
}
div#top_right{
height:174px;
width:174px;
background: url(images/right_top_corner_sm.png) top no-repeat;
position: fixed;
top:0px;
right: 0px;
z-index:5
}
div#bottom_right{
height: 602px;
width:198px;
background: url(images/right_bottom_corner2_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
right: 0px;
z-index: 5
}
div#content {
margin: 40px 164px 0px 180px;
position: relative;
z-index: 1;
}
Greetings, The following webpage works in firefox but not in ie: http://resonantprogramming.com/homen.html For some reason the menu does not show up correctly. I want the menu to show up within the top gradient graphic, but ie doesn't like that for some reason. I did alter the z-index value to no avail. Any ideas? Thanks Take a look at http://actrucking.com/. I just added the orange link towards the middle of the page that says "Get a FREE Online Quote Now!!" I'd like to push it down a bit so it is more centered in the blue area, but I can't seem to get the text to acknowledge margin or padding? Here are what the styles look like: Code: #tlCallBox { background:#336799; height:75px; display:block; float:left; width:868px; margin-left:10px; position:relative; margin-bottom:30px}
#tlCallBox h2{ color:white; font-size:19px; margin: 15px 0 0 30px}
#tlCallBox p { color:White; margin-left:32px}
#tlCallBox b { margin:20px 0 0 120px; font-weight:bold; font-size:20pt}
Remove. I've got an "IE" issue! This CSS code looks perfect in IE7 and Firefox. It is a photo box that offsets 225 pixels to the left of the text box. Code: #inside_offset_image {
width: 319px;
float: left;
margin-left: -225px;
margin-right: 30px;
margin-bottom: 30px;
}
But when I test in IE5.5 and IE6, this photo box runs almost completely off the left side of the browser. The actual test page is located he http://penncomm.com/bean/inside.html Any ideas? Hi all, I've been reading this forum for a while now, but never had to post anything before. I've hit a snag whilst working on my new personal site. Its all fine in Firefox, I'm using a Wordpress engine to spit out 'posts' which are actually folio items, however IE, after the first one, the second one and every one after that have some extreme margin/padding issue so that the content area is only maybe 20px wide. www dot lucas-starbuck dot com forwardslash design is the site address, any ideas would be much appreciated! Thanks, Lucas Hello, first post here =) I'm having a margin/border problem where it is showing up the way I want it to in IE but not in FF. Here is the URL: http://www.prj2501.com Here is the CSS: http://www.prj2501.com/puppetmaster.css DOCTYPE is XHTML-STRICT In IE you will notice the extra border below the nav followed by the padding for the content ID which places the H3 where I want it. In FF, the border and the padding are both gone. In trying to debug this, I notice nothing I do above the H3(padding,margin,etc.) takes effect in FF...yet left and right padding do. The only way to get it to move down is BR tags and I'd rather not do that. Any ideas, suggestions? I am just now getting the hang of CSS so if you see anything glaring that does not seem best-practice, by all means point it out. Thanks in advance. Please look at the main navigation on this site www.downtowntransmission.com I have it exactly how I want it in IE7 but it is a bit off in FF. Mouseover the Contact link and Gallery Link and you will see what I mean. Is there some small adjustment I can make to make it look the same in both? As a side note, do you like the site? T This main navigation does not display properly in Safari and I was hoping somone might be able to tell me why http://hometown.tmhdesign.com http://www.bath.ac.uk/~su2photo/test.php i've been playing around with the css, trying to get the page to display properly, and i get something which i'm reasonably happy with in firefox, but as always when cross checking, ie drops the ball. this time however, the the difference doesn't seem to be consistent . The two boxes you see, should both have titles flush to the top of their containers. In ie, only one seems to manage this. html: PHP Code: <div id="menubox"> <div class="topic"> <h3>Menu</h3> </div> <div id="menubody"> <ul> <li><a href="index.php?s=1">Introduction</a></li><li><a href="index.php?s=2">Organisation</a></li><li><a href="index.php?s=3">Galleries</a></li><li><a href="index.php?s=4">Communication</a></li><li><a href="index.php?s=5">Equipment</a></li> </ul> </div> </div> <div id="mainbox"> <div class="topic"> <h3>Introduction</h3> </div> <div id="main"> <p> Text <br /><br /> Text </p> </div> </div> css: PHP Code: html, body{ font-family: Arial, Helvetica, sans-serif; font-size: 1em; color: #FFF; background-color: #000; text-align: center; } #logoimg{ border: 0px; width: 90px; height: 90px; } div#container{ position: relative; top: 50px; margin: 0 auto; text-align: left; width: 900px; } div#mainbox{ float: left; padding-bottom: 15px; border: 1px solid #290000; background-color: #130000; width: 630px; text-align: center; } div#menubox{ float: right; border: 1px solid #290000; background-color: #130000; width: 230px; text-align: center; } div#main{ margin: 0 auto; width: 600px; text-align: left; } div#menubody{ margin: 0 auto; width: 200px; text-align: left; } div.topic{ text-align: left; background-color: #290000; } h3{ padding-left: 10px; margin-top: 0; } ul{ list-style-type: none; text-align: left; } this one's got me fuzzled, any idea? (if my whole technique is all wrong, then can you suggest a better way?) cheers guys (I apologise for the length of this , i did attempt to cut it down ) Please look at this layout Layout Example In IE7 there is a gap between the footer and upper divs that I am not sure what is causing. The other issue I would appreciate help with is the #right div element. When the #content div has a higher height I want the #right div element to stretch with it (and vice versa). Any help would be appreciated. Tom For some reason, when I hover over images in the #content div of my site firefox is adding a strange little box to the bottom right hand corner of the image. The color of the box is the same color as my text hyperlinks which makes it more interesting. You can see the issue on my site. Here is the code that deals with the images in the #content div: Code: #content img {
margin:2px 5px 0px 0px;
}
#content a img, #content a:visited img, #content a:active img {
border:2px solid #6FA6D9;
}
#content a:hover img {
border:2px solid #ffffff;
}
This issue is only happening on the images I insert from my wpg2 gallery. The images get one of the following classes applied to them: Code:
.g2image_float_left {
display:block;
float:left;
}
.g2image_float_right {
display:block;
float:right;
margin-left:5px;
}
Now I don't see how either of these could cause a problem but they have to be the issue considering this doesn't happen on images that don't have one of the above classes applied to them. Any ideas what is causing this? Thanks in advance. been tearing my hair out with this problem I've been doing an expanding menu for drupal and functionally it works perfect. You click on the legend, it expands the fieldset. However I'm having major difficulties on the CSS side of things. The problem is that when I adjust the height of the legend to fit the background image, it doesn't push the other fieldsets down in IE 7 and 8 but it does in Firefox and (oddly) IE6. Given that means a ~20 pixel gap between menu items in Firefox compared to none in IE7,8 it means the menu always looks ugly in one of the two sets of browers. Here's the CSS in question (displays ok in IE7,8 but spaced out in FF): Code: fieldset.accordian
{
border:none;
margin-top:8px;
padding-bottom:3px;
width:205px;
}
legend
{
background-image: url('images/menubg.png');
background-repeat: no-repeat;
margin:0;
padding:0;
width:205px;
line-height:37px;
height:37px;
}
Weird issue with FF ive noticed can anyone explain why this happens? I have two divs, header and nav. Nav is inside header. Now when I placed a list inside nav it pushed my header div down abit maybe 15px. However when I added the following rule... Code: #nav ul{
margin-top:0px;
}
The error goes away. Strange isnt it? Heres my html and css Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="vwd_scripts/curvy/vwd_curvycorners.js"></script>
<script type="text/javascript">
<!--
gCurvyCorners[0]="nav,5,5,false,false,0,0";
//-->
</script>
</head>
<body>
<div id="header">
<div id="nav">
<ul>
<li>Home</li>
<li>Browse</li>
</ul>
</div>
</div>
<div id="content">
<h1 id="mainheader">Latest Templates</h1>
<h1 class="sideheader">List One Title</h1>
<h1 id="latesttemplates">Heres the latest templates</h1>
<ul class="sidebarlist">
<li>list one</li>
<li>list two</li>
<li>list three</li>
<li>list four</li>
<li>list five</li>
</ul>
<h1 class="sideheader" style="top:150px">List One Title</h1>
<ul class="sidebarlist" style="top:175px;">
<li>list one</li>
<li>list two</li>
<li>list three</li>
<li>list four</li>
<li>list five</li>
</ul>
<div id="templateholder" class="toprow" style="left:20px;"></div>
<div id="templatedescript" class="descriptoprow" style="left:20px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template1name</td>
</tr>
<tr>
<td class="descrip">Added</td>
<td class="answer">template1date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template1type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template1images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="toprow" style="left:185px;"></div>
<div id="templatedescript" class="descriptoprow" style="left:185px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template2name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template2date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template2type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template2images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="toprow" style="left:350px;"></div>
<div id="templatedescript" class="descriptoprow" style="left:350px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template3name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template3date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template3type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template3images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="toprow" style="left:515px;"></div>
<div id="templatedescript" class="descriptoprow" style="left:515px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template4name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template4date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template4type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template4images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="bottomrow" style="left:20px;"></div>
<div id="templatedescript" class="descripbtmrow" style="left:20px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template5name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template5date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template5type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template5images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="bottomrow" style="left:185px;"></div>
<div id="templatedescript" class="descripbtmrow" style="left:185px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template6name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template6date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template6type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template6images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="bottomrow" style="left:350px;"></div>
<div id="templatedescript" class="descripbtmrow" style="left:350px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template7name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template7date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template7type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template7images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="bottomrow" style="left:515px;"></div>
<div id="templatedescript" class="descripbtmrow" style="left:515px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template8name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template8date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template8type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template8images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Code: @charset "utf-8";
/* CSS Document */
body{
margin:0px;
}
#nav{
position:relative;
height:35px;
background-color:#3d3d66;
width:405px;
left:55%;
top:65px;
}
#nav li{
display:inline;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
margin-right:10px;
}
#nav ul{
margin-top:0px;
padding-top:8px;
}
#header{
height:100px;
background-color:#333333;
background-image: url(../images/jpegs/header.jpg);
background-repeat:repeat-x;
}
#content{
position:relative;
margin-top:50px;
margin-left:auto;
margin-right:auto;
height:500px;
width:974px
}
h1#mainheader{
margin-top:0px;
padding-bottom:2px;
border-bottom:dotted;
border-bottom-width:1px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
width:70%;
}
.sideheader{
position:absolute;
margin-top:9px;
top:0px;
left:75%;
padding-bottom:2px;
border-bottom:dotted;
border-bottom-width:1px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
width:25%;
}
h1#latesttemplates{
position:absolute;
margin-top:0px;
padding-top:50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
border-right:dotted;
border-right-width:1px;
width:72.7%;
height:105%;
top:0;
}
.sidebarlist{
position:absolute;
margin-top:9px;
top:25px;
left:695px;
}
.sidebarlist li{
list-style-image:none;
list-style-type:none;
}
#templateholder{
position:absolute;
height:105px;
width:140px;
border:solid 1px;
}
.toprow{
top:100px;
}
.bottomrow{
top:330px;
}
.descriptoprow{
top:215px;
}
.descripbtmrow{
top:445px;
}
#templatedescript{
position:absolute;
width:140px;
height:105px;
}
#templatedescript table{
width:140px;
}
.descrip{
text-align:left;
font-weight:bold;
font-size:12px;
}
.answer{
text-align:right;
font-size:12px;
}
.P{
color:#FF0000;
text-decoration:underline;
font:Arial, Helvetica, sans-serif;
font-size:12px;
border-right:1px solid;
border-right-color:#FF0000;
margin-left:12%;
padding-right:5px;
}
.D{
color:#FF0000;
text-decoration:underline;
font:Arial, Helvetica, sans-serif;
font-size:12px;
margin-left:5%
}
|
|||||||