Forums > Can't get it!!

Forums > Resource Center > Webmasters' Corner

speakerboxx123

Jul 6 2008, 06:34 PM

can anyone help me.

i have 2 problems. (their probably little, amateur ones)

first, how do i get it so that when anyone wants to minimize the window by page doesn't mis-align.

second, how do i make it that it is aligned in all browsers. i tried

CODE

#content {
  position: absolute;
  left: 50%
  margin-left: XXXpx;
  }

but that throws off the whole thing.

css:

CODE

body {
background-color : #00396a;
background-image : url(/images/anthony-heartquasmbg.png);
background-repeat : repeat-y;
background-position : top center;
background-attachment: fixed;
font-family : tahoma;
font-size : 10px;
text-transform : lowercase;
cursor : crosshair;
margin : 0;
}
img {
border : 0;
}
embed {
width : 409px;
}
a:link, a:visited {
color : #000;
}
a:hover {
color : #3b4d67;
cursor : crosshair;
}
strong {
text-align : right;
}
.nav {
display : block;
font-size : 11px;
}
.nav:hover {
font-size : 11px;
background-color : #82a1c1;
color : #112c55;
border-left : 5px solid #112c55;
}
h1 {
font-family : century gothic;
font-size : 15px;
color : #112c55;
border-bottom : 1px solid #82a1c1;
}
h2 {
font-family : century gothic;
font-size : 18px;
color : #112c55;
border-bottom : 1px solid #82a1c1;
}
#basebg {
z-index : 1;
position : absolute;
top: 0px;
left: 268px;
width : 800px;
height : 600px;
overflow : hidden;
top : 0;
}
#content {
position : absolute;
z-index : 3;
top : 250px;
left : 268px;
width : 318px;
font-size : 10px;
}
#navigation {
z-index : 2;
position : absolute;
width : 153px;
top : 250px;
left : 587px;
text-align : right;
}

p.s. fixtatik told me about margin: 0 auto; but i dont know if thats the best way to go about

schizo

Jul 6 2008, 06:45 PM

You may want to try the left:50% thing again. That's what I use on my website and for all my layouts, and it works fine. You will have to redo all the positioning, but then you won't have the problems anymore. I don't see anything else in your coding that would be screwing it up in different browsers and resolutions.

Smarmosaur

Jul 6 2008, 06:49 PM

if you can't get it to cooperate, there's a nice fix for IE.
let's say you're using left and top to position. add in another of each, with a _ in front of it, like this:

CODE

top:#px;
_top:#px;
left:#px;
_left:#px;

only IE will read the ones with _ in front of them. this can be applied to any CSS property.

mipadi

Jul 6 2008, 07:11 PM

QUOTE(speakerboxx123 @ Jul 6 2008, 07:34 PM)

second, how do i make it that it is aligned in all browsers.

Do you mean centered? If so, you can center something with this:

CODE

#content {
    display:block;
    margin-left:auto;
    margin-right:auto;
}

speakerboxx123

Jul 7 2008, 12:23 PM

okay, i know how to fix the miss-aligning problem, but now i need the solurion to the first problem :(

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.