wordpress in iframe too wide

tedor2 / 2010-07-11 19:30:48   

Hello,

I have found a few threads, but could not sort my issue yet. The width of my wordpress is a bit long. Funnily when I start adjusting the whole browser's window it jumps back to where I want it.
Could anyone help to find which file to alter to be able to start the page without the ugly horizontal scrolling line?

http://tedor.info/

Thank you in advance.
K

arsondpi / 2010-07-12 07:48:44   

You've included a table in the top of the exhibit and then the iframe...

The iframe gets its height from the menu height
Thus you have Total height = table height + menu height.

That's why you have a scrollbar...

There are workarounds in this...

For example:
you can set a position absolute for your table and increase the top margin in your wordpress theme or you can include this table in the actual wordpress template or you can substract the table height from the iframe height via javascript etc etc etc.
You just to know how to code these of course...

tedor2 / 2010-07-12 09:34:55   

thanks, I will give it a go...

tedor2 / 2010-07-12 18:33:22   

Hi:

I could get rid of the horizontal scrollbar but the vertical one is still there.

In indexhibit edit mode I have this for the table: ... and then the iframe plugin

Than I guess I have to alter something in the themes style.css.
Could you tell me which margin it is you meant please?

code:
body {
    background: #fff;
    font-size: 9pt;
    line-height: 1.5;
    color: #444;
    font-family: Verdana, Helvetica, sans-serif;
}
blockquote {
margin: 1em 0 1em 1em;
padding: 0;
    font-size: 9pt;
font-style: italic;
color: #777;
}
blockquote p {
    padding: 0px;
    margin: 0px;
}
pre {
font-family:'Courier New', Courier, Monospace, Fixed;
    line-height: normal;
overflow: auto;
    padding-bottom: 2em;
    margin: 0px;
    background-image:url('images/bg_pre_dots.png');
    background-repeat: repeat-x;
    background-position: bottom left;
}
cite {
    font-style: italic;
color: #777;
}
img {padding: 0; margin: 0;}
a {text-decoration: none; color: #000;}
a:hover {color: #fd8008;}
h1, h2, h3 {font-size: 100%;}
h2, h3, h4, h5, h6 {color: #888;}
dl, dd, dt {margin: 0px;}

.clear {
    clear:both;
    height:1px;
}

.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.alignleft {
float: left;
}

.alignright {
float: right;
}
#wrapper {
    width: 99%;
    text-align:left;
}

/* header */

#hd {
padding: 20px 0 10px 90px;
    margin-bottom: 4em;
background: url('images/frog.jpg') left bottom no-repeat;

}

div#hd div#hline {
height: 1px;
width: 90%;
border-bottom: 1px solid #ddd;
position: absolute;
top: 65px;
right: 0;
z-index: -1;
}

#sitemeta {
position: absolute;
right: 12px;
top: 0;
    font-size: 8pt;
width: 20em;
text-align: right;

}

#sitemeta ul{list-style: none;}
#sitemeta a {color: #aaa;}
#sitemeta a:hover {color: #000;}

#blogtitle h1 {display: inline;}
#blogtitle h1 a {
    color: #fd8008; /* orange */
    font-size: 13pt;
    vertical-align: bottom;
background: #fff;
padding: 0 1em;
margin-left: -1em;
}
#blogdescription {
    color: #666;
    font-size: 9pt;
}
#menu {
    margin-top: 1em;
    display: inline;
}
#menu ul {
    list-style: none outside;
    margin: 0px;
    padding: 0px;
}
#menu ul li {
    float: left;
}
#menu ul li a {
    font-size: 10pt;
    padding-left: 1em;
    margin-left: 1em;
    color: #999;
}
#menu ul li a:hover {
    color: #fd8008; /* orange */
}

/* sidebar */

#sidebar {    
font-size: 8pt;
    width: 20em;
background: #fff;
    position: absolute;
top: 66px;
right: 0;
padding: 0 0 2em 1em;
    color: #ccc;
text-align: left;
border-left: 1px solid #ddd;
}
#sidebar ul {
    list-style: none outside;
    margin: 0px;
    padding: 0px;
}
#sidebar ul li {display: inline;}
#sidebar ul li ul {
    list-style: none outside;
    margin-top: 0.4em;
    margin-bottom: 1em;
}
li.vategories ul {
    list-style: none outside;
    margin-top: 1em;
    margin-bottom: 1em;
}
#sidebar ul li ul li {
    margin-top: 0.4em;
    display: block;
}
#sidebar a {
    color: #bbb;
}
#sidebar a:hover {
    color: #000;
}
#sidebar h2 {
color: #bbb;
    font-size: 8pt;
    font-weight: bold;
    display: inline;
}
#sidebar input {border: 1px solid #ddd;}
input#searchsubmit {
background: #fff;
color: #bbb;
}

/* content */

#content, .searchresults, .page, .categories, .archives, .linkspage {
    padding: 0 0 0 0;
    margin: 0 0 0 20px;
    float: left;
    width: 40em;
    text-align: left;
}
#content a {
    color: #000;
    text-decoration: none;
}
#content a:hover {
    color: #fd6008; /* orange */
}
#content h1, .post-wrap h1, h2.post-title {
    display: inline;
    font-size: 10pt;
    text-decoration: none;
    color: #fd6008; /* orange */
}
#content h1 a, .post-wrap h1 a, h2.post-title a {
    color: #444;
    text-decoration: none;
    color: #fd6008; /* orange */
}

#content h2 {
    display: inline;
    text-decoration: none;
}
#content h2 a {
    color: #444;
    font-size: 14pt;
}
#content img {
border: 1px solid #999;
margin: 1em 0;
}
#content table, #content table tr, #content table tr td, #content table thead th {
border: none;
margin: 1em 0;
padding: 0;
font-weight: normal;
padding-right: 1em;
}

.post-content {
    clear: both;
    padding: 10px 0;
    margin: 0;
}
#content ul, #content ol {
list-style-position: inside;
margin: 1em 0 1em 1em;
padding: 0;
}
.post {clear: both;}
.post-date {
    width: 50px;
    height: 50px;
    float: left;
}
.post-month {
    font-size: 8pt;
    color: #fff;
    text-align: center;
    display: block;
    padding: 2px;
    background: #87d744; /* green */
    text-transform: uppercase;
}
.post-day {
    font-size: 8pt;
    color: #555;
    text-align: center;
    display: block;
    background: #fff;
    border-bottom: 1px solid #87d744;
    border-right: 1px solid #87d744;
    border-left: 1px solid #87d744;
    padding: 2px;
    line-height: 8pt;
    text-transform: uppercase;
}
.post-meta {
font-size: 8pt;
color: #505050;
}
.post-meta p {margin: 0;}
.post-wrap {
    margin-left: 70px;
    padding-bottom: 1em;
    margin-bottom: 2em;
}

/* comments */

#commentwrap h3 {
font-size: 9pt;
color: #666;
}
#commentwrap ol li {
margin: 3em 0;
}
#commentwrap input, #commentwrap textarea {
border: 1px solid #999;
padding: 0.2em 0.4em;
}
#commentwrap .url {
font-weight: normal;
}
#commentwrap {margin-left: 70px;}
#respond {padding-top: 1em;}
.comment-meta {font-size: 8pt; margin: 0;}
#commentwrap ol {
list-style-type: none;
margin: 0; padding: 0;
}
#commentwrap input#submit {
color: #505050;
border: 1px solid #999;
background: #fff;
}
.searchresults ul, .categories ul, .archives ul, .linkspage ul, .archives ul {
    list-style: none;
margin: 0;
padding: 0;
}

/* nav */
.nav {margin-left: 70px;}
.previous, .next {display: inline;}
.previous {padding-right: 1em;}
.next {padding-left: 1em;}

/* footer */
#footnote {
font-size: 8pt;
color: #aaa;
text-align: right;
margin: 4em 10px 0 0;
}
#footnote a {color: #999;}
#footnote a:hover {color: #000;}
#footnote ul {list-style-type: none;}

/* wordpress */
.imgl {
border:0;
float:left;
margin:0;
padding:0;
}
.imgr {
border:0;
float:right;
margin:0;
padding:0;
}
.wp-caption {
font-size: 8pt;
margin-top: 1em;
}
.wp-caption p {
margin: 0.2em 0 0 0;
}

Vaska A / 2010-07-12 18:43:38   

You think we really need all that code? How about determining the pertinent part and post that only.

tedor2 / 2010-07-13 10:11:28   

hello, my apologies, I was not sure which part to alter.

the page in question:
http://tedor.info/new/

(1) In indexhibit's edit mode I included a table with the following parameters at the start:

table style="position: absolute; width: 788px; height: 26px;">
tbody>

...

(2) then I was trying to alter the stylesheet in the wordpress editor mode, but I am not sure which the suggested margin by arsondpi is :(

I was thinkering with the body margins:

body {

    margin: 70px 70px 40px 40px;
...

but no luck yet...

if it is possible I would like to solve this without going into Java Script..

  1. thank you
  2. K<em></em><em></em><blockquote></blockquote><blockquote></blockquote><strong></strong><strong></strong>
arsondpi / 2010-07-13 11:08:24   


you can set a position absolute for your table and increase the top margin in your wordpress theme

Give the table an id name and give it a position: absolute; and give top/left values.
Then edit your wordpress theme a margin-top: XXpx for your main div that wraps everything (try the body tag...)


or you can include this table in the actual wordpress template
Just paste the code for the table into your wordpress theme...

or you can substract the table height from the iframe height via javascript etc etc etc
You need to know javascript to do this... Obviously needs some code digging for this...

tedor2 / 2010-07-13 19:30:35   

hello arsondi
thank you for the reply.

I wonder whether the following would change anything?

In the indexhibit edit window I only have the iframe plugin and still have two scrollbars on the right. I actually think this could mean that the problem lays somewhere esle, maybe in the css file of my index page?

http://www.tedor.info/new/

any help appreciated, thanks,
K

tedor2 / 2010-07-24 13:19:15   

hello
just to add some more information to this thread (might helps with similar issues)

earlier I found a good code on this page:

http://www.indexhibit.org/forum/thread/5067/

but it did not sort my IE problem:
in IE my whole content (table and wordpress) appeared a whole page lower.
I am sure there is a way to rewrite the wordpress's css, but an 'if structure' can help
as well:

http://wordpress.org/support/topic/359086

now it works:
http://tedor.info

all the best
K

This thread has been closed, thank you.