This is driving me crazy. Can anyone tell me what I am missing here.
I have a word-press site I am trying to copy the design into an e-commerce skin
The wordpress site: http://solesu.clarityproductions.com/ and the
e-commerce skin i am working on is http://cspro.solesu.com/.
The words MAIN PAGE are slightly differently balanced from the wordpress site to the
e-commerce skin and I cant figure it out. Can anyone help me where the problem
is and what css change may need to be made. I have been looking a this for hours.
It looks like the background padding or height or something is a little taller
on top and bottom on the wordpress site but im not sure whats controlling this.
It seems that there is a quite a few differences in the code. Have you tried using Firebug for Firefox or the Webkit Developer Tools to inspect the page elements for differences?
After a quick look I can see that your missing elements and other stuff is going on.
This is what you have on line 54 in your styles.css:
.sidebox-categories-wrapper ul li a, x:-webkit-any-link, x:default {
padding-bottom: 3px;
}
It's the padding-bottom: 3px; that expands the height of the anchor tag.
Remove it, and you'll be fine.
This is the style giving you the issue
.sidebox-categories-wrapper ul li a, x:-webkit-any-link, x:default {
padding-bottom: 3px;
}
just make sure you overwrite it
#vmenu_8 a {
padding-bottom: 0;
}
And it'll be fine.
Related
I'm using WooCommerce with a WordPress theme that hasn't been written to be compatible with the plugin. For the most part I have the CSS working so that the shop looks okay, but I have run into trouble. For some reason, when I go to a category of products, they show up on top of one another, and not in a grid or side by side. I am going nuts trying to figure out how to fix this, and failing.
Page: http://urbexploration.ca/product-category/sanatoriums/
At first, I realized that each < li > (product) had a huge margin on the right, so I took that out with margin-right: 0; but they still are not floating left in a grid. If any code is needed, please let me know. I've been trying to target the < li >tags which have the class 'product'. The < ul > is 'products'.
I've tried
.products li, .product{ float: left !important; margin-right: 0 !important; }
The ul tag seems to fill the area it should using Google Chrome developer tools, and the li is now sized properly (I think) but it still doesn't float? Or maybe it IS floating and I'm missing something else.
Took clear:both; out of the .excerpt class as suggested, and that seems to be floating them properly.
To make its own answer:
li.product.excerpt { clear: none; }
would be a good start. The double class selector should make sure the rule is more specific than the problematic .excerpt class itself.
When I use in-page links or "anchors" to reach a part of the page, the scrollbar doesn't allow me access to the content above -- even though it is there in the HMTL.
My site is developed in WordPress but I think the problem is more my CSS.
See the naughty
http://adanewmedia.org/submissions/#review
versus the nice http://adanewmedia.org/submissions/
Any ideas are appreciated!
Line 92 of style.css, remove this:
#main {
overflow: hidden;
}
Seems like a weird bug, or maybe you have a height set in some parent element to the #main div. Removing that style should fix it though.
Further inspection I found this (style.css line 96):
#main-content, #secondary {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
This is where your issues begin. Removing this nonsense fixes your original issue, but changes up the style of your site quite a bit. If you want to remove the black sidebar/footer, do that instead of pushing the containers all over the place.
When I tried playing with your code, it seemed to be this line in your style sheet that caused it - http://adanewmedia.org/wp-content/themes/twentyfourteen-child-ada/style.css?ver=3.9.1
#main-content, #secondary {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
Not sure what you are trying to do with that.
Also: firebug is rendering the page very oddly - I'd try validating your code as if Firebug is struggling to render the page correctly, then browsers are also likely to throw unexpected layout issues.
Ok, So I am making a travel blog through WordPress. I have made some fiddles including maps and some tables which work perfectly in the fiddle. however, now that I put it on my site - it is messing up. I think something to do with the CSS is messing it up - but I cannot find where.
The page I am having the most problem with is located here:
http://www.journeywithandrew.com/world-heritage-sites-reviews-info/
Problem (1):
The maps infobox (when an icon is clicked) is not displaying the CSS correctly.
Fiddle is here: http://jsfiddle.net/4V7en/4/
You can see what it is supposed to look like.
Problem (2):
The fusion layer I imposed is not displaying correctly when using CHROME or iOS browsers. So again, refer to the above fiddle. It displays correctly in the fiddle, and internet explorer - but not chrome. As you can see the layers is distorted in some places on my site. (like if you scroll left on the map over Australia - for example)
Problem (3):
around my check mark buttons, there seems to be a border on the table I put them in. why!?! I tried to remove this in the table (, etc) but it does not work. Not sure what CSS is causing this!
I think that is all. If someone can take a look at the site and especially using chrome you will be able to see the problems.
.caption-title-link {
text-decoration:none;
color:#41a62a;
font-size:12px;
font-family: verdana;
font-weight: bold;
}
thanks!!
1 . Add padding: 10em; to .infobox, which replaces the padding:.5em 1em at current. This should make the content sit better.
2 . Dont quite understand the issue
3 . Currently your Td is set to
border-width: 0 1px 1px 0;
Remove border-width and replace with border:none
border: none;
Thanks
Problem 1.
Table inside .infobox has a margin-bottom set. Adding .infobox table { margin-bottom: 0 } should fix it. Adjusting the td padding inside .infobox is also needed.
Em values are dependent on font-size, and in your page, you've set the font-size to 1px (vs in Fiddle, where it was 10px). Setting it back to 10px should fix the padding problems.
Problem 2. Which is fusion layer?
Problem 3. Border is coming from style.css, line 412
I'm having a problem in Google Chrome. I'm using a simple hover state on a display:block; link to change only the background:url(); property on the hover.
Google Chrome shows the actual hover change ok, but when I mouse out of the area, the background goes transparent/disappears.
Here's my CSS:
#branding #logo a {
width: 259px;
height: 201px;
border:none;
display: block;
background:url(images/logo.png) top left;
}
#branding #logo a:hover {
background:url(images/logo_hover.png) top left;
}
The actual site is here: http://beerblestudy.org. Again this is only happening for me in Chrome. Any thoughts?
It's working for me an all browsers. Try deleting your cache because it's working normally. I recomment you to delete the lines top left since they aren't necessary
Your background is disappearing in chrome here too.
I know I shouldn't "me too" on here, but this is odd and what brought me here was the same problem I'm having on a site I built recently: http://macvillain.com - the right hand column image blocks.
I tested thoroughly on most browsers (not ie6 or 7 - I've banished them) and has been fine in chrome for the past two weeks until today. Sometimes clearing cache etc works for a little while then it comes back. I don't get it...
UPDATE:
Hi I got an answer on the Google Chrome forum which said:
"Chrome uses strictly HTML5. Validate HTML code http://validator.w3.org/"
I had forgotten to do this and there were a couple of invalid things which I fixed and now all is fine and dandy.
I suggest you do the same.
Try this technique: I saw a JQuery plugin that automatically download images specified in CSS style sheets.
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
I’m having a problem with my links becoming deactive within some nested elements. I followed some instruction on creating rounded corner boxes via a tutorial by Andy Budd. Anyway, it all works great except when I wrap link tags around a few pieces of copy. I’m a bit of a beginner still so maybe this is a simple fix but I’ve spent over a days worth of time now trying to figure it out on my own and can’t seem to get it.
Just to clear this up, the links work everywhere on the page outside of the “box” element I’ll list below and I’ve double and triple checked that the link within the “box” element is written correctly and it is. The CSS even finds the link and styles it correctly, however, the mouse function seems to be disabled. Does this all make sense? Below is the CSS, any help would be greatly appreciated…
This is the code that creates the box and it works correctly…
.box {
width:831px;
background:url(../imgs/box-spacer.gif) repeat-y;
}
.box h1 {
background:url(../imgs/box-top.gif) no-repeat left top;
padding-top:40px;
font-weight: normal;
}
.box .last {
background:url(../imgs/box-bottom.gif) no-repeat left bottom;
padding-bottom:60px;
}
.box h1, .box p {
padding-left:60px;
padding-right:60px;
}
And this is the code I used to test that the page is seeing it as a link…
.box h1 a:link {
color:#00CCFF;
}
.box h1 a:hover {
color: #FF0066;
}
It changes the color correctly but the hover doesn’t work and if you click, it doesn’t link you anywhere. Again, the link is written correctly on the page. Can anyone help please? I appreciate it. Also, the website is up at http://www.fiddlergroup.com/zygote if it helps. The particular page I was using for testing is the “what’s in a name” page. As you’ll see, all the code and pages and what not is all very simple, just can’t seem to figure out how to fix this one odd issue.
The problem is with z-index: -100 on your #holder element. Click events are ending on the body element and not making it down through to the link. Remove the negative z-index and it should work.