Problem with Bee Crafty in some browsers

Community Forums Forums Design Tips and Tricks Problem with Bee Crafty in some browsers

This topic is: not resolved

This topic contains 5 replies, has 3 voices, and was last updated by  SWiz 8 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #42585

    SWiz
    Participant
    Post count: 6

    http://www.swizzone.se/Barnfest-i-Valen/

    Hi,

    I have noticed that my indexpage, made with the theme Bee Crafty, makes the squared boxes loose it’s position in eg Explorer 7.
    It should be three in a row. Can someone see what I need to change? Please be specific.

    Best / SWiz

    • This topic was modified 11 months ago by  SWiz.
    • This topic was modified 11 months ago by  SWiz.
    #57676

    Susan
    Moderator
    Post count: 7532

    Hi, I’m working through the posts which remain unresolved. As you posted this a while ago, I hope your issue has been resolved. If not, please check in, and I will escalate this for you.


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #58104

    SWiz
    Participant
    Post count: 6

    Still not solved Susan.

    #58105

    Susan
    Moderator
    Post count: 7532

    Escalating for you now. :)


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #58116

    wpsmith
    Moderator
    Post count: 178

    Your CSS is a bit buggy.

    You currently have.

    
    .homepage-gallery .polaroid-bg {
    	background:url(images/polaroid-frame.png) no-repeat top left;
    	width:236px;
    	height:215px;
    	float:left;
    	display:inline;
    	margin:0;
    	padding: 40px 29px 38px 43px;
    }
    
    .boxgrid {
    	background:#FFEB9D url(images/polaroid-back.png) no-repeat top left;
    	float:left;
    	width: 223px;
    	height: 223px;
    	text-shadow: 1px 1px 1px #000000;
    	margin: 0;
    	overflow: hidden;
    	position: relative;
    }
    

    Your image is 225px, so your .boxgrid styling is proper. However your .polaroid-bg is not styled properly. Your margins are wonky as a result of the width being off (as well as your height but not presenting an issue at the moment). So, here’s the fix for that:

    
    .homepage-gallery .polaroid-bg {
    	background: url("images/polaroid-frame.png") no-repeat top left;
    	width: 225px;
    	height: 225px;
    	float: left;
    	display: inline;
    	margin: 0 1px; // see comment below
    	padding: 39px 41px; // I would adjust the background image to fit 40px nicely
    }
    
    .boxgrid {
    	background: #FFEB9D url("images/polaroid-back.png") no-repeat top left;
    	border: 1px solid #000;
    	float: left;
    	width: 225px;
    	height: 225px;
    	/*text-shadow: 1px 1px 1px #000000; // not sure what this is trying to accomplish?? */
    	margin: 0;
    	overflow: hidden;
    	position: relative;
    }
    

    Now to fix the IE issue, you need to just expand the .homepage-gallery width to 940px.


    Travis Smith | Recommended StudioPress Developer & Contributor
    WP Smith | @wp_smith | GitHub

    Due to the forums, please paste code using Pastebin, JS Fiddle (for JavaScript) or GitHub.
    How to use Firebug for Designers by SixRevisions

    #58169

    SWiz
    Participant
    Post count: 6

    wpsmith ~

    This is how I want it to look, and how it looks like before your suggestions
    Printscreen

    with your correction it looks like

    https://dl.dropboxusercontent.com/u/7934391/bf-screenprint2.jpg

    And here is how itt looks in IE 7, before correction.

    https://dl.dropboxusercontent.com/u/7934391/bf-screenprint3.jpg

    • This reply was modified 8 months ago by  SWiz.
    • This reply was modified 8 months ago by  SWiz.
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.