Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Div Won't Center Across Browsers

    Hello, I can't seem to get a certain div to center across multiple browsers. What works in one seems to conflict with the others.

    I have tried the code this way here:

    Code:
    #wrap_wrapper { width: 963px; margin: 0 auto;}
    I have also tried it like this, but while its centered in Firefox 12, not in Chrome or IE, or even older versions of Firefox from what I'm told:

    Code:
    #wrap_wrapper { width: 963px; margin-left: 240px; margin-right: 0; }
    Anyone have any idea how I should be going about this? You can see the page url here: 208.43.211.100/~zerfas/products/adobe/

  • #2
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    margin:0 auto; is the way to do it, make sure your code validates and the css is calling on the correct div name. I don't like to put _ in my naming conventions.

  • Users who have thanked SeattleMicah for this post:

    jerdoggmckoy (05-31-2012)

  • #3
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,267
    Thanks
    10
    Thanked 277 Times in 276 Posts
    The margin:0 auto version works, but it could be your postcontent_wrapper style with a -200px right margin is tricking you into thinking that div isn't centered.

    Dave

  • #4
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you for the responses!

    @SeattleMicah - I have edited the code to below, and it seems the upper text area centers, but not the postcontent_wrapper below that contains the iframe.
    Code:
    #wrap_wrapper { width: 963px; margin: 0 auto; }
    @tracknut - Nice catch, I have removed the -200px and it is not just

    Code:
    div.postcontent_wrapper {  padding: 0px 0px 0px 0px; }
    It remained uncentered, so I also tried

    Code:
    div.postcontent_wrapper {  width: 963px; margin: 0 auto; padding: 0px 0px 0px 0px; }
    But that didn't seem to make any difference.

    @iBall - I altered the code from

    Code:
    #wrap_wrapper { width: 963px; margin: 0 auto; }
    to this

    Code:
    #wrap_wrapper { width: 963px; height: 100px; margin: 0px auto 0px auto; }
    And that did just fine centering the top text area, but the lower postcontent_wrapper containing the iframe still remained uncentered. I tried changing this code as well from

    Code:
    div.postcontent_wrapper {  padding: 0px 0px 0px 0px; }
    To this

    Code:
    div.postcontent_wrapper {  width: 963px; height: 100px; margin: 0px auto 0px auto;  }
    And that also didn't make a whole lot of difference.

    Thanks in advance for all the help people. If I need to pay someone something to get this fixed, please let me know. I just need to find a way to get this to work. I'll post my CSS & PHP page code in next post.

  • #5
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    lets start from the beginning, can you please post your html and css

  • #6
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Here is the code for the CSS, minus some blocks I felt were irrelevant because the size of the code was too long for this post.

    Code:
    /*
    
    html, body, div, span, applet, object, iframe,
    
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    
    a, abbr, acronym, address, big, cite, code,
    
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    
    small, strike, strong, sub, sup, tt, var,
    
    b, u, i, center,
    
    dl, dt, dd, ol, ul, li,
    
    fieldset, form, label, legend { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
    
    body { line-height: 1; }
    
    ol, ul { list-style: none; }
    
    blockquote, q {	quotes: none; }
    
    blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none; }
    
    :focus { outline: 0; }
    
    ins { text-decoration: none; }
    
    del { text-decoration: line-through; }
    
    table { border-collapse: collapse; border-spacing: 0; }
    
    td.section {
    	width:205px;
    	background: url(http://208.43.211.100/~zerfas/wp-content/themes/Polished/images/heading.png);
    	background-repeat:no-repeat;
    	background-color: #ffffff;
    }
    
    html { background: url('images/background.png'); }
    
    body {  font-size: .75em; font-family: Arial, Helvetica, sans-serif; background: url('images/header_bg.png') repeat-x center top; }
    
    .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
    
    * html .clearfix             { zoom: 1; } /* IE6 */
    
    *:first-child+html .clearfix { zoom: 1; } /* IE7 */
    
    .clear {clear: both; margin: 0; padding: 0; }
    
    a { text-decoration: none; color: #0167ab; }
    
    a:hover { text-decoration: underline; }
    
    h1, h2, h3, h4, h5, h6 { font-weight:lighter; padding-bottom: 5px; color: #2d2d2d; line-height: 1em; font-family: Century Gothic, sans-serif; }
    
    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #2d2d2d; }
    
    h1 { font-size: 30px; }
    
    h2 { font-size: 24px; }
    
    h3 { font-size: 22px; }
    
    h4 { font-size: 18px; }
    
    h5 { font-size: 16px; }
    
    h6 { font-size: 14px; }
    
    p { padding-bottom: 10px; line-height: 24px; }
    
    strong { font-weight: bold; color: #1c1c1c; }
    
    cite, em, i { font-style: italic; }
    
    pre, code { font-family: Courier New, monospace; margin-bottom: 10px; }
    
    ins { text-decoration: none; }
    
    sup, sub { height: 0; line-height: 1; position: relative; vertical-align: baseline; }
    
    sup { bottom: 0.8em; }
    
    sub { top: 0.3em; }
    
    dl { margin: 0 0 1.5em 0; }
    
    dl dt { font-weight: bold; }
    
    dd  { margin-left: 1.5em;}
    
    blockquote  { margin: 2px 0 13px 40px; color: #9e9e9e; font-style: italic; font-size: 16px; font-family: Georgia, serif; }
    
    	blockquote p { padding: 0px 0px 0px 20px; }
    
    input[type=text],input.text, input.title, textarea, select { background-color:#fff; border:1px solid #bbb; padding: 2px; color: #4e4e4e; }
    
    input[type=text]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus { border-color:#2D3940; color: #3e3e3e; }
    
    input[type=text], input.text, input.title, textarea, select { margin:0.5em 0; }
    
    textarea { padding: 4px; }
    
    img#about-image { float: left; margin: 3px 5px 5px 0px; }
    
    .sf-menu li:hover ul, .sf-menu li.sfHover ul { top: 2.5em; z-index: 400; }
    
    ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; z-index: 400; }
    
    ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { top: 0; }
    
    ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top:	-999em; }
    
    ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { top: 0; }
    
    .sf-menu { position: relative; margin: 0; padding: 0; list-style: none;clear:both; float: left; margin-top: 12px; padding-left: 9px; margin-bottom:	1em; background: url('images/menu_bg.png') no-repeat; height: 58px; width: 957px; z-index: 400; }
    
    .sf-menu ul {  position: absolute; top:	-999em; margin-top: 20px; width: 212px; left: 7px; -moz-box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3); background-image: url('images/dropdown_top.png'); background-repeat: no-repeat; background-position: top; padding-top: 8px; z-index: 400; }
    
    .sf-menu a { display: block; position: relative; text-decoration:none; color: #fff; padding: 23px 20px 0px 20px; height: 30px; text-decoration: none; text-shadow: 1px 1px 1px #000; font-weight: normal; float :left; }
    
    .sf-menu li { float: left; position: relative; font-family: Arial, Helvetica, sans-serif; background: url('images/menu_line.png') no-repeat; background-position: right 5px; }
    
    .sf-menu li ul li ul { left: 212px; margin-top: 0px;}
    
    .sf-menu li li { background: #fff url('images/submenu_li.gif') no-repeat; background-position: 24px 15px; height: 36px ; margin: 0px; float: left; width: 212px; z-index: 10; }
    
    .sf-menu li a:hover { color: #00b4ff; }
    
    .sf-menu li:hover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background: #121212; outline: 0; }
    
    .sf-menu > li.sfHover.sf-ul { background: transparent url('images/parent_link_left.png') no-repeat; background-position: 7px 11px; z-index: 200; }
    
    .sf-menu li.sfHover li a:hover, .sf-menu li ul li.sfHover a, .sf-menu li ul li ul li.sfHover a { background: #fff url('images/submenu_li_hover.gif') no-repeat; background-position: 11px 0px;  }
    
    .sf-menu li.sfHover li a, .sf-menu li.sfHover li ul li a, .sf-menu li.sfHover li ul li ul li a  { background: url('images/submenu_li_hover.gif') no-repeat ; background-position: -100px -100px; width: 172px; color: #404040; margin: 0px; padding: 14px 0px 0px 40px; text-shadow: 0px 1px 0px #cccccc; }
    
    .sf-menu > li.sfHover.sf-ul > a {  color: #000; text-shadow: 1px 1px 1px #fff; background: transparent url('images/parent_link_right.png') no-repeat; background-position: right 11px; z-index: 301; }
    
    ul.sf-menu li.backLava { position: absolute; z-index: 3; background: url('images/lavalamp.png') no-repeat; background-position: center 0px; padding: 0; height: 16px; margin-top: 42px; }
    
    #header { width: 963px; margin: 0 auto; padding: 42px 0 0 0; }
    
    #header #logo_title { font-family: Georgia, serif; font-style: italic; text-shadow: 1px 1px 1px #656565; color: #1d1d1d; font-size: 1.5em; margin: 18px 0; float: left; }
    
    #header #logo_title a:link { text-decoration: none; color: #fff; }
    
    #header img { float: left; }
    
    #header #searchico { float: right; padding: 27px 19px 0 0; position: relative; }
    
    #header #searchbox { position: absolute; display: none; margin-left: -200px; margin-top: -13px; padding: 0; background: url('images/searchbox.png') no-repeat; width: 186px; height: 44px; }
    
    #header input#s{ background: transparent; border: 0; padding-top: 17px; padding-left: 17px; margin-top: -6px; font-family: Georgia, serif; font-style: italic; font-size: 1.167em; color: #717171; height: 20px; float: left; }
    
    #header .logo_line { margin: 0 15px; }
    
    #header #logo { margin: 6px 0 9px 3px; }
    
    #header #featured { margin-top: 8px; float: left; }
    
    #header #featured #left_arrow { float: left; background: url('images/featured_before.png') no-repeat top right; width: 34px; margin-left: 7px; padding-top: 110px; height: 217px;}
    
    #header #featured #featured_content { padding: 19px 19px 5px 30px; float: left; background: url('images/featured_bg.png') no-repeat; width: 829px; height: 280px;  color: #a8a8a8; font-size: 1em; line-height: 1.6em; text-shadow: 1px 1px 1px #000; }
    
    #header #featured #featured_content img { float: left; margin: 6px 30px 0 0; }
    
    #header #featured #featured_content h1 {line-height: 1.2em;  float: left; font-size: 3em; margin: -5px 0 5px 0; font-family: Century Gothic; font-weight: normal; color: #fff; text-shadow: -2px -1px 0px #000; }
    
    #header #featured #featured_content #spotlight { float: left; width: 500px; margin-right: 10px; }
    
    span.readmore_g { margin-left: auto; display: block; background: none !important; height:29px; width: 82px; padding-left:14px; margin-top: 25px; float: right;}
    
    span.readmore_g a{ padding-top: 2px; font-weight: bolder; text-shadow: -1px -1px 1px #000;display: none !important; background: none; text-align: center; font-size: 0.920em; height: 29px; color: #fff; text-decoration: none; padding-right: 14px;}
    
    span.readmore_b { display: block; background: url('images/button_blue_left.png') 0 0 no-repeat; height:29px; width: 82px; padding-left:14px; float:right; margin-top: 10px;}
    
    span.readmore_b a{ padding-top: 0px; font-weight: bolder; text-shadow: -1px -1px 1px #006fc9; display: block; background: url('images/button_blue_right.png') no-repeat top right; text-align: center; font-size: 0.920em; height: 29px; color: #fff; text-decoration: none; padding-right: 14px;}
    
    #header #featured #featured_content #spotlight div { 
    
    	float: left; 
    
    	background: url('images/featured_bg.png') no-repeat; 
    
    	background-position: 0px -10px; 
    
    }
    
    .order {display: none;}
    
    #header #featured #featured_content #f_menu { float: right; padding-right: 117px; width: 0px; display:none; }
    
    #header #featured #featured_content #f_menu div { cursor: pointer; }
    
    #header #featured #featured_content #f_menu .featitem { line-height: 1em; background: url('images/featured_menubg.png'); width: 805px; margin: 0px 0 1px 35px; padding: 11px; height: 43px; }
    
    #header #featured #featured_content #f_menu .featitem h2 { font-family: Arial, Helvetica, sans-serif; color: #fff; font-size: 30px; font-weight: 500; margin: 6px 0 6px 0; }
    
    #header #featured #featured_content #f_menu .featitem img { padding: 5px 5px 5px 5px; background: url('images/featured_menuimgbg.gif') no-repeat; background-position: center top; margin-right: 15px; }
    
    #header #featured #featured_content #f_menu .featitem .meta {  color: #888888; font-family: Arial, Helvetica, sans-serif; font-style: italic; font-size: 0.917em; }
    
    #header #featured #right_arrow { padding-top: 110px; float: left; background: url('images/featured_aftr.png') no-repeat top left; width: 34px; height: 217px; }
    
    #f_menu .active { background: url('images/featured_menu_selected_bg.png') no-repeat !important; margin: 0px 0 1px 3px !important; width: 278px !important; padding-left: 25px !important; border-right-style: solid; border-right-width: 7px; border-right-color: #0084ff; }
    
    #wrap { width: 963px; margin: 0 auto; }
    
    #wrap_wrapper { width: 963px; margin: 0 auto; }
    
    #content { float: left; margin: 0 auto 0 auto; background: url('images/content_bg.png'); width: 962px; }
    
    #content #main {  width: 703px; float: left; }
    
    #content #main .new_post { clear: both; margin: 19px 0 35px 0; }
    
    #content #main .new_post h2.title, #content #main .new_post h1#post-title { padding: 23px 7px 20px 53px; font-family: Century Gothic; font-size: 2.8em; font-weight: lighter; }
    
    #content #main .new_post { color: #000; line-height: 1.94em; }
    
    #content #main .new_post .post_img { float: left; margin: 0 33px 0 0px; background: #dbdbdb; padding: 8px; border-right: 1px solid #ababab; border-bottom: 1px solid #ababab; -moz-box-shadow:1px 3px 7px 1px rgba(0, 0, 0, 0.15); -webkit-box-shadow:1px 3px 7px 1px rgba(0, 0, 0, 0.15); }
    
    #content #main .new_post .post_info { font-family: Arial, Helvetica, sans-serif; font-size: 1em; color: #717171; text-shadow: 1px 1px 1px #fff; padding: 4px 59px 0px 59px; background: url('images/post_info_bg.png') no-repeat; height: 32px; width: 632px; margin-bottom: 21px; }
    
    #content #main .new_post .post_info img { position: relative; background: transparent; top: 5px; margin: 0 5px; }
    
    #content #main .new_post .post_info a { color: #010101; text-shadow: 1px 1px 1px #fff; text-decoration: none; }
    
    
    
    #main ul { list-style-type: disc; margin: 10px 0px 10px 20px; }
    
    	#main ol { list-style-type: decimal; list-style-position: inside; margin: 10px 0px 10px 2px; }
    
    		#main ul li ul, #main ul li ol { margin: 2px 0px 2px 20px; }
    
    		#main ol li ul, #main ol li ol  { margin: 2px 0px 2px 35px; }
    
    #pagenav { padding: 14px 0 43px 56px; height: 20px; }
    
    #pagenav .page a { float: left; margin-right: 7.6px; color: #000; display: block; width: 30px; text-align: center; padding: 10px 0 0 0; height: 20px; border-style: solid; border-width: 1px; text-decoration: none; border-color: #d4d4d4; background: #efefef; }
    
    #footer_widgets { clear: both; background: url('images/footer_bg.png') no-repeat; padding-top: 40px; height: 300px; }
    
    #footer_widgets .block_b { float: left; width: 258px; background: url('images/block_b_h2.png') no-repeat; background-position: 0 39px; margin: 0 29px 0 34px; color: #adadad;}
    
    #footer_widgets .block_b li { background: url('images/list_b.png') no-repeat; background-position: 5px 0; margin: 0 0 25px 0; padding-left: 30px; text-shadow: 1px 1px 1px #000; }
    
    #footer_widgets a {color: #cccccc; text-decoration: none;}
    
    #footer_widgets .block_b h2 { font-size: 2em; width: 258px; padding-left: 2px; margin: 0 0 32px 0; font-family: Century Gothic; color: #000; text-shadow: 1px 0px 1px #616161; font-weight: lighter; }
    
    #footer { color: #727171; width: 930px; font-size: 0.917em; margin: -100px 0; padding-top: 16px; text-align: right; background: url('images/footer_text_bg.png') no-repeat; background-position: 672px 0; font-weight: lighter; text-shadow: 1px 1px 1px #000; clear: both; }
    
    #footer a { color: #acacac; text-decoration: none; font-size: 0.917em; }
    
    .activeSlide { background: red; }
    
    .content-wrap { float: left; display:none; }
    
    #header #featured img.featured_img { border: 1px solid #151515; border-color: #151515 #474747 #474747 #151515; background: #222222; padding: 0px 8px 0px 8px; }
    
    div.slide { height: 277px; width:805px; }
    
    .sf-menu li ul li.bottom_bg { background: transparent url(images/dropdown_bottom.png); background-position: bottom left; height: 15px; padding: 0; margin: 0; }
    
    .wp-pagenavi, div.pagination { padding: 40px 0 40px 50px !important; overflow: hidden; }
    
    .wp-pagenavi span.current {background:none repeat scroll 0 0 #0099E6 !important; border:1px solid #007CBB !important; color:#FFFFFF !important; display:block !important; float:left !important; height:20px !important; margin-right:7.6px !important; padding:10px 0 0 !important; text-align:center !important;
    
    text-decoration:none !important; width:30px !important;}
    
    .wp-pagenavi span, .wp-pagenavi a {float: left;}
    
    .wp-pagenavi a { background:none repeat scroll 0 0 #EFEFEF !important; border:1px solid #D4D4D4 !important; color:#000000 !important; display:block !important; height:20px !important; margin-right:7.6px !important; padding:10px 0 0 !important; text-align:center !important; text-decoration:none !important; width:30px !important; }
    
    .wp-pagenavi span.pages {border:none !important; padding: 12px 10px 0 0 !important;}
    
    #sidebar a {text-decoration: none; color: #404040;}
    
    #sidebar a:hover, #footer_widgets a:hover {text-decoration: underline;}
    
    div.postcontent { padding: 0px 30px 0px 50px; }
    
    div.postcontent_wrapper {  padding: 0px 0px 0px 0px; }
    
    div.new_post h2.title a {text-decoration:none; color: #222222; }
    
    div.new_post h2.title a:hover {color: #000;}
    
    h1#error { margin-top: 30px; }
    
    a.post-edit-link { font-weight: bold; }
    
    #sidebar, #footer_widgets { line-height: 18px; }
    
    .block_b ul li ul { margin-top: 10px; }
    
    div.post .new-post .aligncenter, .aligncenter { display: block; margin-left: auto; margin-right: auto; }
    
    .wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin-bottom: 10px; }
    
    .wp-caption.alignleft { margin: 0px 10px 10px 0px; }
    
    .wp-caption.alignright { margin: 0px 0px 10px 10px; }
    
    .wp-caption img { margin: 0; padding: 0; border: 0 none; }
    
    .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; }
    
    .alignright { float: right; }
    
    .alignleft { float: left }
    
    img.alignleft { display:inline; float:left; margin-right:15px; }
    
    img.alignright { display:inline; float:right; margin-left:15px; }		
    
    
    
    .wp-pagenavi a.last { width:46px !important; }
    
    .wp-pagenavi a.first { width:50px !important; }
    
    .wp-pagenavi .extend { background:none repeat scroll 0 0 #EFEFEF !important;
    
    border:1px solid #D4D4D4 !important;
    
    color:#000000 !important;
    
    display:block !important;
    
    height:20px !important;
    
    margin-right:7.6px !important;
    
    padding:10px 0 0 !important;
    
    text-align:center !important;
    
    text-decoration:none !important;
    
    width:30px !important; }
    
    
    .no_sidebar #content{background-image:url("images/content_bg-full.png") !important;}
    
    .no_sidebar #main {width:912px !important;}
    
    .no_sidebar_wrapper #main {width:912px !important;}
    
    .et_pt_gallery_entry { margin: 0 0 32px 72px !important; }
    
    .sitemap-col ul { list-style: none outside none !important; margin-left: 0px !important; }
    
    .sitemap-col ul ul { margin-left: 20px !important; }
    
    
    
    #comment-wrap .navigation { padding: 10px 0; }
    
    	.nav-previous { float: left; }
    
    	.nav-next { float: right; }
    
    h3#reply-title small { display: block; }
    
    	h3#reply-title small a { font-size: 12px; letter-spacing: 0px; }
    
    	
    
    #commentform input[type=text] { width: 40%; display: block; padding: 5px; }
    
    #commentform textarea#comment { width: 91%; }
    
    .commentlist #respond textarea#comment { width: 98% !important; }
    
    .commentlist #respond input[type=text] { width: 40%; display: block; padding: 5px; }
    
    .comment_navigation_top, .comment_navigation_bottom { padding: 12px 65px 12px 0; }
    
    .comment_navigation_top { padding-bottom: 0; }
    
    .et_embedded_videos { display: none !important; }
    
    .js #spotlight { background: url(images/ajax-loader.gif) no-repeat center 43%; min-height: 277px; }
    
    	.js #spotlight .slide { display: none; }
    	
    .featitem .meta {
    display: none;
    }
    
    #header #featured #featured_content img { 
    border-bottom: 7px solid #242424;
    border-top: 7px solid #242424;
    }

  • #7
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    The PHP for this page is here:

    Code:
    <?php 
    
    /*
    
    Template Name: Wrapper Page
    
    */
    
    ?>
    
    
    
    <?php if (is_front_page()) { ?>
    
    	<?php get_template_part('home'); ?>
    
    <?php } else { ?>
    
    <?php get_header(); ?>
    
    	<div id="wrap_wrapper" class="no_sidebar_wrapper" align="center">
    
    	<!-- Main Content-->
    
    		<div>
    
    			<!-- Start Main Window -->
    
    			<div>
    
    			<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    
    				
    
    				<div>
    
    
    
    					<h1 id="post-title"><?php the_title(); ?></h1>
    
    						<div class="postcontent_wrapper">		
    
    							<?php $width = (int) get_option('polished_thumbnail_width_pages');
    
    								  $height = (int) get_option('polished_thumbnail_height_pages');
    
    								  $classtext = 'post_img';
    
    								  $titletext = get_the_title();
    
    								
    
    								  $thumbnail = get_thumbnail($width,$height,$classtext,$titletext,$titletext);
    
    								  $thumb = $thumbnail["thumb"]; ?>
    
    							
    
    							<?php if($thumb <> '' && get_option('polished_page_thumbnails') == 'on') { ?>
    
    								<?php print_thumbnail($thumb, $thumbnail["use_timthumb"], $titletext , $width, $height, $classtext); ?>
    
    							<?php }; ?>
    
    							<?php the_content(); ?>
    
    							<?php wp_link_pages(array('before' => '<p><strong>'.esc_html__('Pages','Polished').':</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
    
    							<?php edit_post_link(esc_html__('Edit this page','Polished')); ?>
    
    							<div class="clear"></div>
    
    						
    
    							<?php if (get_option('polished_show_pagescomments') == 'on') comments_template('', true); ?>
    
    						</div> <!-- end .post -->
    
    				</div> 
    
    			<?php endwhile; endif; ?>
    
    			</div>
    
    			<!-- End Main -->
    
    	
    
    	
    
    	<?php get_footer(); ?>
    
    <?php } ?>

  • #8
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    And I'm not sure if this code is adding to the issue, but the iframe content is being called from a Wordpress widget that contains this php code here:

    Code:
    <?php
    
    /**
    
    Plugin Name: Custom IFrame Widget
    
    Plugin URI: http://wordpress.opensourcedevelopers.net/downloads/
    
    Description: A Custom IFrame Widget,  Short Code for Page,Post: [ShaktiIFrame url 650px 200px]
    
    Author: Shakti Kumar
    
    Version: 1.1
    
    Author URI: http://opensourcedevelopers.net/
    
     */
    
    class Custom_IFrame_Widget extends WP_Widget {
    
    	/** constructor */
    
    	function Custom_IFrame_Widget() {
    
    		parent::WP_Widget(false, 'Custom Iframe');		
    
    	}
    
    	/*function __construct() {
    
    		parent::WP_Widget( 'custom_iframe_widget', 'Custom_IFrame_Widget', array( 'description' => 'A Custom IFrame Widget' ) );
    
    	}*/
    
    
    
    	/** @see WP_Widget::widget */
    
    	function widget( $args, $instance ) {
    
    		extract( $args );
    
    		$title = apply_filters( 'widget_title', $instance['title'] );
    
    		$url = apply_filters( 'widget_url', $instance['url'] );
    
    		$cheight = apply_filters( 'widget_cheight', $instance['cheight'] );
    
    		$cwidth = apply_filters( 'widget_cwidth', $instance['cwidth'] );
    
    		$fheight = apply_filters( 'widget_fheight', $instance['fheight'] );
    
    		$fwidth = apply_filters( 'widget_fwidth', $instance['fwidth'] );
    
    		$left = apply_filters( 'widget_left', $instance['left'] );
    
    		$top = apply_filters( 'widget_top', $instance['top'] );
    
    		echo $before_widget;
    
    		if ( $title )
    
    			echo $before_title . $title . $after_title; ?>
    
              <?php /*?>  <div class="website-part" style="position:relative; width:300px; height:300px; overflow:hidden;">
    
    				<iframe src="<?php echo $url; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" scrolling="no" id="website-frame-part" style="position:absolute; top:-393px;left:-832px;"></iframe>262/190, 1280/583
    
            	</div><?php */?>
    
                 <div id="outerdiv" style="width:<?php echo $cwidth; ?>px; height:<?php echo $cheight; ?>px; overflow:hidden; position:relative;">
    
                 	<iframe src="<?php echo $url; ?>" id="inneriframe" scrolling="no" style="position:absolute; width:<?php echo $fwidth; ?>px; height:<?php echo $fheight; ?>px; top:<?php echo $top; ?>px ; left:<?php echo $left; ?>px ;"></iframe>
    
                 </div>
    
    
    
    		<?php echo $after_widget;
    
    	}
    
    
    
    	/** @see WP_Widget::update */
    
    	function update( $new_instance, $old_instance ) {
    
    		$instance = $old_instance;
    
    		$instance['title'] = strip_tags($new_instance['title']);
    
    		$instance['url'] = strip_tags($new_instance['url']);
    
    		$instance['cheight'] = strip_tags($new_instance['cheight']);
    
    		$instance['cwidth'] = strip_tags($new_instance['cwidth']);
    
    		$instance['fheight'] = strip_tags($new_instance['fheight']);
    
    		$instance['fwidth'] = strip_tags($new_instance['fwidth']);
    
    		$instance['top'] = strip_tags($new_instance['top']);
    
    		$instance['left'] = strip_tags($new_instance['left']);
    
    		return $instance;
    
    	}
    
    
    
    	/** @see WP_Widget::form */
    
    	function form( $instance ) {
    
    		if ( $instance ) {
    
    			$title = esc_attr( $instance[ 'title' ] );
    
    			$url = esc_attr( $instance[ 'url' ] );
    
    			$cheight = esc_attr( $instance[ 'cheight' ] );
    
    			$cwidth = esc_attr( $instance[ 'cwidth' ] );
    
    			$fheight = esc_attr( $instance[ 'fheight' ] );
    
    			$fwidth = esc_attr( $instance[ 'fwidth' ] );
    
    			$top = esc_attr( $instance[ 'top' ] );
    
    			$left = esc_attr( $instance[ 'left' ] );
    
    		}
    
    		else {
    
    			$title = __( 'New title', 'text_domain' );
    
    			$url = __( 'New url', 'text_domain' );
    
    			$cheight = __( 'New Container height', 'text_domain' );
    
    			$cwidth = __( 'New Container width', 'text_domain' );
    
    			$fheight = __( 'New Iframe height', 'text_domain' );
    
    			$fwidth = __( 'New IFrame width', 'text_domain' );
    
    			$top = esc_attr( $instance[ 'top' ] );
    
    			$left = esc_attr( $instance[ 'left' ] );
    
    			
    
    		}
    
    		?>
    
    		<p>
    
    		<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label> 
    
    		<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
    
    		</p>
    
            <p>
    
    		<label for="<?php echo $this->get_field_id('url'); ?>"><?php _e('URL:'); ?></label> 
    
    		<input class="widefat" id="<?php echo $this->get_field_id('url'); ?>" name="<?php echo $this->get_field_name('url'); ?>" type="text" value="<?php echo $url; ?>" />
    
    		</p>
    
           
    
            <p>
    
    		<label for="<?php echo $this->get_field_id('cwidth'); ?>"><?php _e('Container Width (px):'); ?></label> 
    
    		<input class="widefat" id="<?php echo $this->get_field_id('cwidth'); ?>" name="<?php echo $this->get_field_name('cwidth'); ?>" type="text" value="<?php echo $cwidth; ?>" />
    
    		</p>
    
             <p>
    
    		<label for="<?php echo $this->get_field_id('cheight'); ?>"><?php _e('Container Height (px):'); ?></label> 
    
    		<input class="widefat" id="<?php echo $this->get_field_id('cheight'); ?>" name="<?php echo $this->get_field_name('cheight'); ?>" type="text" value="<?php echo $cheight; ?>" />
    
    		</p>
    
            
    
             <p>
    
    		<label for="<?php echo $this->get_field_id('fwidth'); ?>"><?php _e('IFrame Width (px):'); ?></label> 
    
    		<input class="widefat" id="<?php echo $this->get_field_id('fwidth'); ?>" name="<?php echo $this->get_field_name('fwidth'); ?>" type="text" value="<?php echo $fwidth; ?>" />
    
    		</p>
    
             <p>
    
    		<label for="<?php echo $this->get_field_id('fheight'); ?>"><?php _e('IFrame Height (px):'); ?></label> 
    
    		<input class="widefat" id="<?php echo $this->get_field_id('fheight'); ?>" name="<?php echo $this->get_field_name('fheight'); ?>" type="text" value="<?php echo $fheight; ?>" />
    
    		</p>
    
            
    
            <p>
    
    		<label for="<?php echo $this->get_field_id('top'); ?>"><?php _e('Top (px):'); ?></label> 
    
    		<input class="widefat" id="<?php echo $this->get_field_id('top'); ?>" name="<?php echo $this->get_field_name('top'); ?>" type="text" value="<?php echo $top; ?>" />
    
    		</p>
    
    		
    
    		<p>
    
    		<label for="<?php echo $this->get_field_id('left'); ?>"><?php _e('Left (px):'); ?></label> 
    
    		<input class="widefat" id="<?php echo $this->get_field_id('left'); ?>" name="<?php echo $this->get_field_name('left'); ?>" type="text" value="<?php echo $left; ?>" />
    
    		</p>
    
    		<?php 
    
    	}
    
    
    
    } // class Custom_IFrame_Widget Ends
    
    
    
    function shakti_iframe_replace($matches)
    
    {	
    
    	$temp = explode(' ', $matches[1]);
    
        $count = count($temp);
    
       	
    
    	$url 	= $temp[0];         
    
        $width 	= isset($temp[1]) ? $temp[1] : 200;
    
        $height = isset($temp[2]) ? $temp[2] : 300;
    
        $x 		= isset($temp[3]) ? $temp[3] : 0;
    
        $y 		= isset($temp[4]) ? $temp[4] : 0;
    
    
    
        if (strpos($width, 'px') === false and strpos($width, '%') === false)
    
        {
    
        	$width .= 'px'; 
    
        }
    
        if (strpos($height, 'px') === false and strpos($height, '%') === false)
    
        {
    
        	$height .= 'px'; 
    
        }
    
    	
    
    	if (get_option('embedder_scrollmethod') == '0')
    
    	{ 
    
    		$scrollTo1 = '';
    
    		$scrollTo2 = ' onload="scro11me(this)"></iframe>' .
    
    					'<script type="text/javascript">' .
    
    					'function scro11me(f){f.contentWindow.scrollTo(' . $x . ',' . $y . '); }' .
    
    					'</script>';
    
    	}
    
    	else
    
    	{		
    
    		$scrollTo1 = '<div style="position:relative; overflow: hidden; width: ' . $width . '; height: ' . $height . '">' .
    
    					'<div style="position:absolute; left:' . (-1 * $x) . 'px; top: ' . (-1 * $y) . 'px">';
    
    		$scrollTo2 = '></iframe></div></div>';
    
    		$w = (int) $width;
    
    		$h = (int) $height;
    
    		$width = str_replace($w, $w + $x, $width);
    
    		$height = str_replace($h, $h + $x, $height);
    
    	}
    
    	
    
    	switch (get_option('embedder_scrolling'))
    
    	{
    
    		case 'yes'	: $scrolling = 'scroll'; break; 
    
    		case 'no'	: $scrolling = 'hidden'; break; 
    
    		default		: $scrolling = 'auto'; break;
    
    	} 
    
    	    
    
        return sprintf(	'%s<iframe class="%s" src="%s" style="width: %s; height: %s; ' .
    
    					'overflow: %s; border: %dpx solid silver; %s"%s',			
    
    					$scrollTo1,
    
    					get_option('embedder_class'),
    
    					$url,
    
    					$width,
    
    					$height,
    
    					$scrolling,
    
    					get_option('embedder_border'),
    
    					get_option('embedder_style'),
    
    					$scrollTo2);			 			
    
    }
    
    
    
    function custom_parse_iframe_widget($text)
    
    {
    
    	return preg_replace_callback("@(?:<p>\s*)?\[ShaktiIFrame\s*(.*?)\](?:\s*</p>)?@", 'shakti_iframe_replace', $text);
    
    }
    
    
    
    add_filter('the_content', 'custom_parse_iframe_widget');
    
    add_filter('the_excerpt', 'custom_parse_iframe_widget');
    
    
    
    add_action( 'widgets_init', create_function( '', 'register_widget("Custom_IFrame_Widget");' ) );
    
    
    
    ?>

  • #9
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    do you have a link possibly? So we can see what the issue is?

    good old WP can get tricky to find the correct elements to edit, so I was going to use firebug and see what I could figure out.
    Last edited by SeattleMicah; 05-31-2012 at 05:27 PM.

  • #10
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sure, I posted it in the first post, just without the "http://"

    208.43.211.100/~zerfas/products/adobe/

  • #11
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    sorry didn't read carefully enough.

    Your wrap_wrapper div is 963px wide and your iframe is 1050px wide so your iframe is simply protruding out of the div.

  • Users who have thanked SeattleMicah for this post:

    jerdoggmckoy (05-31-2012)

  • #12
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yep, that appears to have been the problem. Thanks a ton! I appreciate everyone's help!

  • #13
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    Np, if your continuing forward with web design really take advantage of firebug, you can spot issues like this much easier! good luck

  • #14
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks, I have firebug, but for some reason can't figure out how to best utilize it for troubleshooting. I use the web developer firefox extension more often because I haven't taken the time to learn Firebug. But if you know of any good tutorial sites for it out there I'd love to know about them. Thanks again!

  • #15
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    don't over think it, just go into firebug mode, then click inspect element left side of the FB toolbar, then start rolling over elements of your website, that will show you where divs are located with nicely defined boxes, and even better the snippet of code will be highlighted below.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •