Image positioning and differences in IE/FF

0413 · #1 Sep 21st, 2007, 14:13

Hello everyone,
I'm having a bit of a problem with an image positioning and then page looking different in IE/FF. First off, the image on this page www.mommyandmimi.com/123456.htm I would like to have centered in that right area. The size is correct, I just can't get it centered. Next, text jumps way over when opened in Firefox, its fine in IE. If anybody could give me some insight I would love it. Thanks, and here is the CSS code:

Code: Select all

body {
 margin: 0px;
 background-color: #06182A;
 font-family: "Courier New", Courier, monospace;
}
body, td, div, p {
 /* IE fix */
 font-size: 12px;
}
#page {
 width: 890px;
 margin: 0 auto 0 auto;
}
tr.odd {
 background-color: #DDDDDD;
}
tr.even { }
td {
 vertical-align: top;
}
td.number, th.number {
 text-align: right;
}
th {
 text-align: left;
 vertical-align: bottom;
}
a {
 color: #CC6600;
 text-decoration: none;
 font-weight: bold;
}
a:visited {
 color: #993300; /* Slightly darker than unvisited */
}
a:hover {
 text-decoration: underline;
}
h1 {
 margin-top: 10px;
 margin-bottom: 5px;
 font-size: 18px;
}
h2 {
 margin-top: 7px;
 margin-bottom: 2px;
 font-size: 14px;
}
p {
 margin-top: 5px;
 margin-bottom: 5px;
}
form {
 /* IE fix */
 margin: 0px;
}
img {
 border: 0px;
}
ul {
 margin-top: 0px;
 padding-top: 0px;
}
#menu {
 background: url(../images/seam.gif);
 background-repeat: repeat-x;
 height: 30px;
 padding-top: 10px;
 padding-bottom: 10px;
}
#menu #logo {
 float:left;
}
#menu #items {
 margin-left: 15px;
 padding-top: 3px;
 float: right;
}
#menu img.divider, #footer img.divider {
 margin-left: 3px;
 margin-right: 3px;
}
.submenu {
 padding-top: 10px;
 padding-left: 15px;
 letter-spacing: -1px;
}
.submenu a {
 margin-right: 0px;
 margin-left: 0px;
 font-size: 11px;
}
.content {
 /* The main content area */
 background-color: white;
}
.content-box {
 /* Used around the left column of the content to create a scroll if necessary */
 width: 410px;
 height: 435px;
 margin-left: 15px;
 overflow: auto;
}
.content-side {
 height: 440px;
 margin-top: 10px;
 padding-right: 10px;
 float: right;
}
.small {
 font-size: 90%;
}
.text {
 margin-top:    2px;
 margin-bottom: 2px;
 line-height:   150%;
}
.error {
 color: #CC0000;
}
.right-align {
 float: right;
}
.left-align {
 float: left;
}
#footer {
 padding-top: 2px;
/* padding-left: 10px;
 padding-right: 10px;*/
}
.movie-info {
 margin-top: 15px;
}
.movie-poster {
 float: left;
 margin-right: 5px;
 border: 1px solid black;
}

alexgeek · #2 Sep 21st, 2007, 15:52

trying putting in
* {margin: 0; padding: 0}
at the top

0413 · #3 Sep 21st, 2007, 16:14

Quote:

Originally Posted by alexgeek

trying putting in
* {margin: 0; padding: 0}
at the top

Sorry, but I'm not following you. I tried putting that in, but it didn't correct the problem.

alexgeek · #4 Sep 21st, 2007, 16:16

Quote:

Originally Posted by 0413

Sorry, but I'm not following you. I tried putting that in, but it didn't correct the problem.

woah very sorry.
i thought you said it moved to the wrong position for some reason :s

anyway
which picture? and what class/id is it?

alexgeek · #5 Sep 21st, 2007, 16:18

okay try giving the picture a class called center,
and putting this into your css:
.center {
margin: 0 auto;
}

0413 · #6 Sep 21st, 2007, 17:14

Quote:

Originally Posted by alexgeek

okay try giving the picture a class called center,
and putting this into your css:
.center {
margin: 0 auto;
}

hmmm, when I put this into my CSS I get the picture that moves all the way to the left. I want the picture to be centered in the white space that is off to the right. Any suggestions?

www.mommyandmimi.com/123456.htm

alexgeek · #7 Sep 21st, 2007, 17:17

i think it has to be in a container that has the attributes: float:right;
then the image has the code i just said

0413 · #8 Sep 21st, 2007, 17:24

Quote:

Originally Posted by alexgeek

i think it has to be in a container that has the attributes: float:right;
then the image has the code i just said

I'm sorry, I don't understand what you mean.

alexgeek · #9 Sep 21st, 2007, 17:49

add
float: right;

to your css code for content-side

0413 · #10 Sep 21st, 2007, 18:37

Quote:

Originally Posted by alexgeek

add
float: right;

to your css code for content-side

I already have that added to my CSS code.

Lchad · #11 Sep 22nd, 2007, 12:30

The link is not working now...

alexgeek · #12 Sep 22nd, 2007, 12:39

Quote:

Originally Posted by Lchad

The link is not working now...

404
but theres a very similiar page on the root (or index )

Lchad · #13 Sep 22nd, 2007, 13:42

I would add to the #div content-box:
float: left;
That should scoot it over to the left.
As far as centering the image on the right, do you vertically?

If so, just add some margin-top to image.

Does that make sense?

0413 · #14 Sep 24th, 2007, 14:38

Quote:

Originally Posted by Lchad

I would add to the #div content-box:
float: left;
That should scoot it over to the left.
As far as centering the image on the right, do you vertically?

If so, just add some margin-top to image.

Does that make sense?

I tried adding the float: left; to the content-box and had no success. hmmm

What do you mean by margin-top to the image?

I really appreciate the help you guys

AdRock · #15 Sep 24th, 2007, 14:59

using margin-top would push the image down slightly depending on how many pixels, ems or % you use

0413 · #16 Sep 24th, 2007, 15:55

Quote:

Originally Posted by AdRock

using margin-top would push the image down slightly depending on how many pixels, ems or % you use

I'm sorry, but how do I do this?

alexgeek · #17 Sep 24th, 2007, 15:56

{
margin-top: 10px;
}

apply that to whatever you want to move.
and change 10 to how many pixels you want to move it
you can also do:
margin-bottom, margin-left, margin-right

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Image positioning and differences in IE/FF