Why my boxes look different on the WP page than they did in jsFiddle
-
Hi. I’ve developing http://www.photo-genica.co.uk website and I’ve two pages with boxes on them http://www.photo-genica.co.uk/portfolio/ and http://www.photo-genica.co.uk/client-area/
They’re not finished hence the photos being the same etc. You will notice that the Client Area boxes have padding between the image and the box which is the same thickness at the top as it is at the sides. But the boxes in the Portfolio area are not right, with the image sort of shunted down and so the padding at the top is too thick. I cannot work out why.
When I test the code in jsFiddle it looks how I want it. But in WordPress it doesn’t.
===================
HTML FOR PORTFOLIO
===================<h1>PORTFOLIO</h1><p>Some text introducing the Portfolio page and inviting the visitor to click on the boxes below to see a selection of photographs for the relevant categories</p>
<div class="pfboxwrapper">
<div id="pfbox1">
<div class="boximage">
<img alt="" src="http://www.photo-genica.co.uk/wp/wp-content/uploads/2013/04/nurseries_thumb.jpg" /></div>
<h4>Newborn</h4></div>
<div id="pfbox2">
<div class="boximage">
<img alt="" src="http://www.photo-genica.co.uk/wp/wp-content/uploads/2013/04/nurseries_thumb.jpg" /></div>
<h4>Family</h4></div>
<div id="pfbox3">
<div class="boximage">
<img alt="" src="http://www.photo-genica.co.uk/wp/wp-content/uploads/2013/04/nurseries_thumb.jpg" /></div>
<h4>Nurseries</h4></div>
</div>======================
CSS FOR PORTFOLIO PAGE
======================/* Porfolio Box Code */
.pfboxwrapper {
max-width:760px;
margin: 0 auto;
}
#pfbox1, #pfbox2, #pfbox3 {
float: left;
padding: 20px;
margin: 30px;
width: 150px;
height: 200px;
border: 1px solid #BABABA;
background-color: #DBD5D5;
text-align: center;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
/* Client & Portfolio Boxes Hover Fade */
.boximage {
opacity:1.0;
filter:alpha(opacity=100);
/* For IE8 and earlier */
}
.boximage:hover {
opacity:0.7;
filter:alpha(opacity=70);
/* For IE8 and earlier */
}
========================
HTML FOR CLIENT AREA PAGE
========================<h1>CLIENT AREA</h1><p>Existing clients can view and buy photographs. Click on the relevant link below to access your photoshoot.</p>
</br>
<div class="box_wrapper">
<div class="leftbox">
<div class="boximage"><img alt="" src="http://www.photo-genica.co.uk/wp/wp-content/uploads/2013/04/Portraits_thumb.jpg" />
</div><h4>Portraits</h4>
</div>
<div class="rightbox">
<div class="boximage"><img alt="" src="http://www.photo-genica.co.uk/wp/wp-content/uploads/2013/04/nurseries_thumb.jpg" />
</div><h4>Nurseries</h4>
</div>
</div>======================
CSS FOR CLIENT AREA PAGE
=======================/* Client Area Box Styling */
.box_wrapper {
width: 500px;
margin: 0 auto;
}
.leftbox, .rightbox {
float: left;
padding: 20px;
width: 150px;
height: 200px;
border: 1px solid #BABABA;
background-color: #DBD5D5;
text-align: center;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
.rightbox {
float: right;
padding: 20px;
width: 150px;
height: 200px;
border: 1px solid #BABABA;
background-color: #DBD5D5;
text-align: center;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
} -
I’m sorry but we don’t provide support for self hosted WordPress.org software installs here. That’s not a free hosted WordPress.COM blog. WordPress.com and WordPress.org blogs are separate and have separate logins. We provide support here only for free hosted WordPress.COM blogs and no others. You are posting to the wrong support forums. If you don’t have a username account at WordPress.org click http://wordpress.org/support/ and register one on the top right hand corner of the page that opens, so you can post to the support forums there and receive advice from WordPress.org bloggers.
-
-
No problem. You’ll get help at http://wordpress.org/support/ and best wishes with your site.
- The topic ‘Why my boxes look different on the WP page than they did in jsFiddle’ is closed to new replies.
WordPress.com Forums 